宜兴通达竭诚为您服务。

通达科技 - 宜兴电脑维护及IT服务外包服务商

 
布局
  • 上传者： Administrator
  • 上传时间：2023年12月06日 08时57分33秒
摘要：
在本章中，您将学习如何： 创建自定义标题。 创建自定义页脚。 修改标准模板。 添加版权部分。 提升您的网站的响应能力。 默认 None [1] ** Odoo页面结合了跨页面和独特元素。跨页面元素在每个页面上都是相同的，而独特元素只与特定页面相关。默认情况下，页面有两个跨页面元素，即页眉和页脚，以及 ......
正文 相关文章 请喝咖啡

    在本章中，您将学习如何：

    • 创建自定义标题。

    • 创建自定义页脚。

    • 修改标准模板。

    • 添加版权部分。

    • 提升您的网站的响应能力。

    默认

    Odoo页面结合了跨页面和独特元素。跨页面元素在每个页面上都是相同的，而独特元素只与特定页面相关。默认情况下，页面有两个跨页面元素，即页眉和页脚，以及一个包含该页面特定内容的独特主要元素。

    <div id="wrapwrap">
   <header/>
      <main>
         <div id="wrap" class="oe_structure">
            <!-- Page Content -->
         </div>
      </main>
   <footer/>
</div>

    任何Odoo XML文件都以编码规范开始。之后，您必须在 <odoo> 标签内编写您的代码。

    <?xml version="1.0" encoding="utf-8" ?>
<odoo>
   ...
</odoo>

     注解

    使用准确的文件名对于快速通过所有模块查找信息非常重要。文件名应只包含小写字母数字和下划线。

    始终在文件末尾添加一个空行。这可以通过配置您的IDE来自动完成。

    XPath

    XPath（XML路径语言）是一种表达式语言，可以轻松地在XML文档中导航元素和属性。XPath用于扩展标准的Odoo模板。

    视图的编码方式如下。

    <template id="..." inherit_id="..." name="...">
   <!-- Content -->
</template>

    属性

    描述

    编号

    修改视图的ID

    继承的ID

    标准视图的ID

    名称

    修改视图的可读名称

    对于每个XPath，您需要修改两个属性： expression 和 position 。

     Example

    /website_airproof/views/website_templates.xml
    <template id="layout" inherit_id="website.layout" name="Welcome Message">
   <xpath expr="//header" position="before">
      <!-- Content -->
   </xpath>
</template>

    这个XPath在页面内容之前添加了一个欢迎消息。

     警告

    替换默认元素属性时要小心。由于您的主题扩展了默认主题，您的更改将优先于任何未来的Odoo更新。

     注解

    • 每次创建新的模板或记录时，您都应该更新您的模块。

    • 继承视图的*XML ID*应该使用与原始记录相同的*ID*。这有助于一目了然地找到所有的继承。由于最终的*XML ID*是由创建它们的模块前缀的，所以不会有重叠。

    表达式

    XPath使用路径表达式来选择XML文档中的节点。选择器用于在表达式中定位正确的元素。下面列出了最常用的选择器。

    后代选择器

    描述

    /

    从根节点选择。

    //

    选择与选择匹配的当前节点在文档中的位置无关的节点。

    属性选择器

    描述

    *

    选择任何XML标签。 * 可以被一个特定的标签替换，如果选择需要更精确。

    *[@id=”id”]

    选择一个特定的ID。

    *[hasclass(“class”)]

    选择一个特定的类。

    *[@name=”name”]

    选择具有特定名称的标签。

    *[@t-call=”t-call”]

    选择一个特定的t-call。

    位置

    位置定义了代码在模板中的放置位置。可能的值如下所示：

    位置

    描述

    替换

    使用XPath内容替换目标节点。

    内部

    在目标节点内添加XPath内容。

    之前

    在目标节点之前添加XPath内容。

    在之后

    在目标节点之后添加XPath内容。

    属性

    在属性内添加XPath内容。

     Example

    这个XPath在 <header> 的直接子节点 <nav> 之前添加了一个 <div> 。

    <xpath expr="//header/nav" position="before">
   <div>Some content before the header</div>
</xpath>

    这个XPath在头部的class属性中添加了 x_airproof_header 。您还需要定义一个 separator 属性，在您添加的class之前添加一个空格。

    <xpath expr="//header" position="attributes">
   <attribute name="class" add="x_airproof_header" separator=" "/>
</xpath>

    这个XPath在头部的class属性中移除了 x_airproof_header 。在这种情况下，您不需要使用 separator 属性。

    <xpath expr="//header" position="attributes">
   <attribute name="class" remove="x_airproof_header" />
</xpath>

    此 XPath 移除第一个具有 .breadcrumb 类的元素。

    <xpath expr="//*[hasclass('breadcrumb')]" position="replace"/>

    此 XPath 在 <ul> 元素的最后一个子元素后添加了一个额外的 <li> 元素。

    <xpath expr="//ul" position="inside">
   <li>Last element of the list</li>
</xpath>

     另请参阅

    您可以在这个 cheat sheet 中找到有关XPath的更多信息。

    QWeb

    QWeb是Odoo使用的主要模板引擎。它是一个XML模板引擎，主要用于生成HTML片段和页面。

     另请参阅

    QWeb模板文档.

    背景

    您可以将颜色或图像定义为您网站的背景。

    颜色

    /website_airproof/static/src/scss/primary_variables.scss
    $o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-cc1-bg':                     'o-color-5',
         'o-cc5-bg':                     'o-color-1',
      ),
    )
);

    图片/图案

    /website_airproof/static/src/scss/primary_variables.scss
    $o-website-values-palettes: (
   (
      'body-image': '/website_airproof/static/src/img/background-lines.svg',
      'body-image-type': 'image' or 'pattern'
   )
);

    标准

    启用一个默认的标题模板。

     重要

    不要忘记，您可能需要先禁用活动的页眉模板。

    /website_airproof/static/src/scss/primary_variables.scss
    $o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);
    /website_airproof/data/presets.xml
    <record id="website.template_header_contact" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

    自定义

    创建您自己的模板并将其添加到列表中。

     重要

    不要忘记，您可能需要先禁用活动的页眉模板。

    选项

    使用以下代码在网站构建器上为您的新自定义标题添加选项。

    /website_airproof/data/presets.xml
    <template id="template_header_opt" inherit_id="website.snippet_options" name="Header Template - Option">
   <xpath expr="//we-select[@data-variable='header-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.header"
         data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

    属性

    描述

    data-customize-website-views

    启用模板

    data-customize-website-variable

    变量的名称

    data-img

    在网站构建器上的模板选择中显示的自定义模板缩略图

    现在您必须明确指定您要在Odoo SASS变量中使用自定义模板。

    /website_airproof/static/src/scss/primary_variables.scss
    $o-website-values-palettes: (
   (
      'header-template': 'airproof',
   ),
);

    布局

    /website_airproof/views/website_templates.xml
    <record id="header" model="ir.ui.view">
   <field name="name">Airproof Header</field>
   <field name="type">qweb</field>
   <field name="key">website_airproof.header</field>
   <field name="inherit_id" ref="website.layout"/>
   <field name="mode">extension</field>
   <field name="arch" type="xml">
      <xpath expr="//header//nav" position="replace">
         <!-- Static Content -->
         <!-- Components -->
         <!-- Editable areas -->
      </xpath>
   </field>
</record>

    组件

    在您的自定义头部中，您可以使用 QWeb 的 t-call 指令调用多个子模板：

    登录

    <t t-call="portal.placeholder_user_sign_in">
   <t t-set="_item_class" t-valuef="nav-item"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
</t>

    用户下拉菜单

    <t t-call="portal.user_dropdown">
   <t t-set="_user_name" t-value="true"/>
   <t t-set="_icon" t-value="false"/>
   <t t-set="_avatar" t-value="false"/>
   <t t-set="_item_class" t-valuef="nav-item dropdown"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
   <t t-set="_dropdown_menu_class" t-valuef="..."/>
</t>

    语言选择器

    <t t-call="website.placeholder_header_language_selector">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

    呼吁行动

    <t t-call="website.placeholder_header_call_to_action">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

    标准

    启用一个默认的页脚模板。不要忘记，您可能需要先禁用当前的页脚模板。

    /website_airproof/static/src/scss/primary_variables.scss
    $o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);
    /website_airproof/data/presets.xml
    <record id="website.template_header_contact" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

    自定义

    创建您自己的模板并将其添加到列表中。不要忘记您可能需要先禁用活动的页脚模板。

    选项

    /website_airproof/data/presets.xml
    <template id="template_header_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
   <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.footer"
         data-customize-website-variable="'airproof'"
         data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

    声明

    /website_airproof/static/src/scss/primary_variables.scss
    $o-website-values-palettes: (
   (
      'footer-template': 'airproof',
   ),
);

    布局

    /website_airproof/views/website_templates.xml
    <record id="footer" model="ir.ui.view">
   <field name="name">Airproof Footer</field>
   <field name="type">qweb</field>
   <field name="key">website_airproof.footer</field>
   <field name="inherit_id" ref="website.layout"/>
   <field name="mode">extension</field>
   <field name="arch" type="xml">
      <xpath expr="//div[@id='footer']" position="replace">
         <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
            <!-- Content -->
         </div>
      </xpath>
   </field>
</record>

    拖放区域

    不需要定义页面的完整布局，您可以创建构建块（片段）并让用户选择在何处拖放它们，从而自己创建页面布局。我们称之为 模块化设计 。

    您可以定义一个用户可以用片段填充的空白区域。

    <div id="oe_structure_layout_01" class="oe_structure"/>

    类

    描述

    oe_structure

    为用户定义一个拖放区域。

    oe_structure_solo

    只能在此区域放置一个片段。

    您还可以使用您的内容填充现有的拖放区域。

    <template id="oe_structure_layout_01" inherit_id="..." name="...">
   <xpath expr="//*[@id='oe_structure_layout_01']" position="replace">
      <div id="oe_structure_layout_01" class="oe_structure oe_structure_solo">
         <!-- Content -->
      </div>
   </xpath>
</template>

    响应式

    您可以在下面找到一些提示，以帮助您使您的网站具有响应式设计。

    引导程序

     另请参阅

    字体大小

    截至v4.3.0，Bootstrap提供了启用响应式字体大小的选项，允许文本在设备和视口大小之间更自然地缩放。通过将 $enable-responsive-font-sizes Sass变量更改为true来启用它们。

     另请参阅

    响应式字体大小 GitHub

    网站构建器

    在移动设备上隐藏特定的 <section>。

    <section class="d-none d-md-block">
   <!-- Content -->
</section>

    在移动设备上隐藏 <col>。

    <section>
   <div class="container">
      <div class="row d-flex align-items-stretch">
         <div class="col-lg-4 d-none d-md-block">
            <!-- Content -->
         </div>
      </div>
   </div>
</section>
     本文章从网上收集，如有侵权请联系tderp@tderp.com删除
  • 微信扫一扫，一分也是爱:
  • 微信

服务原则及地区范围

宜兴通达网络科技有限公司，地处中国宜兴环科园内，是一家高新技术企业。公司在企业网络维护和企业信息化建设与咨询方面，有10多年经验。

我公司愿与客户一道，力求彻底解决客户问题！
我们不是在给企业提供“头痛医头、脚痛医脚”的暂时解决方案，而是在部署根本性安全与稳定服务！！
我们愿携手客户，建立企业IT规划；杜绝随意安装系统、软件等操作；力求共同维护有序、安全、稳定的网络办公环境！！！
IT服务，服务是根本，客户是上帝；我们提供快速响应、快速上门、快速排查，提供优质高效的服务！！！！

通达科技提供全国范围内的服务，服务形式包括远程协助、电话咨询、电子邮件咨询、传真咨询、问答平台的问题解决等。

宜兴地区提供上门服务：

  • 市区服务：宜城街道、城北街道（屺亭街道）、新街街道、新庄街道、环科园、渚桥开发区
  • 市郊服务：张渚镇、西渚镇、太华镇、徐舍镇、官林镇、杨巷镇、新建镇、和桥镇、高塍镇、万石镇、周铁镇、芳桥镇、丁蜀镇、湖父镇。
  • 联系电话：189-21-343434
  • 在线沟通：

下一步你可以

Copyright © 2006-2016 Tderp Technologies Ltd. All rights reserved.
Copyright © 2006-2016 通达科技 版权所有 苏ICp备1301575