Cách trình bày

Trong chương này, bạn sẽ học cách:

  • Tạo tiêu đề tùy chỉnh.

  • Tạo chân trang tùy chỉnh.

  • Sửa đổi một mẫu tiêu chuẩn.

  • Thêm phần bản quyền.

  • Cải thiện khả năng phản hồi của trang web của bạn.

Mặc định

Trang SoOn kết hợp các yếu tố xuyên trang và độc đáo. Các phần tử trên nhiều trang giống nhau trên mọi trang, trong khi các phần tử duy nhất chỉ liên quan đến một trang cụ thể. Theo mặc định, một trang có hai thành phần xuyên trang, đầu trang và chân trang, cùng một thành phần chính duy nhất chứa nội dung cụ thể của trang đó.

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

Bất kỳ tệp XML nào của SoOn đều bắt đầu bằng thông số kỹ thuật mã hóa. Sau đó, bạn phải viết mã của mình bên trong thẻ <odoo>.

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

Ghi chú

Việc sử dụng tên tệp chính xác là điều quan trọng để tìm thông tin qua tất cả các mô-đun một cách nhanh chóng. Tên tệp chỉ được chứa chữ và số viết thường và dấu gạch dưới.

Luôn thêm một dòng trống vào cuối tập tin của bạn. Điều này có thể được thực hiện tự động bằng cách định cấu hình IDE của bạn.

XPath

XPath (Ngôn ngữ đường dẫn XML) là ngôn ngữ biểu thức cho phép bạn điều hướng qua các thành phần và thuộc tính trong tài liệu XML một cách dễ dàng. XPath được sử dụng để mở rộng các mẫu SoOn tiêu chuẩn.

Một khung nhìn được mã hóa theo cách sau.

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

Thuộc tính

Sự miêu tả

id

ID của chế độ xem đã sửa đổi

thừa kế_id

ID của chế độ xem chuẩn

tên

Tên dễ đọc của chế độ xem đã sửa đổi

Đối với mỗi XPath, bạn sửa đổi hai thuộc tính: biểu thứcvị trí.

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 này thêm thông báo chào mừng ngay trước nội dung trang.

Cảnh báo

Hãy cẩn thận khi thay thế các thuộc tính của phần tử mặc định. Khi chủ đề của bạn mở rộng chủ đề mặc định, những thay đổi của bạn sẽ được ưu tiên hơn mọi bản cập nhật SoOn trong tương lai.

Ghi chú

  • Bạn nên cập nhật mô-đun của mình mỗi khi tạo mẫu hoặc bản ghi mới.

  • ID XML của chế độ xem kế thừa phải sử dụng cùng một ID làm bản ghi gốc. Nó giúp tìm thấy tất cả sự kế thừa trong nháy mắt. Vì ID XML cuối cùng được mô-đun tạo ra chúng bắt đầu nên không có sự trùng lặp.

Biểu thức

XPath sử dụng các biểu thức đường dẫn để chọn các nút trong tài liệu XML. Bộ chọn được sử dụng bên trong biểu thức để nhắm mục tiêu phần tử bên phải. Những cái hữu ích nhất được liệt kê dưới đây.

Bộ chọn giảm dần

Sự miêu tả

/

Chọn từ nút gốc.

//

Chọn các nút trong tài liệu từ nút hiện tại phù hợp với lựa chọn bất kể chúng ở đâu.

Bộ chọn thuộc tính

Sự miêu tả

*

Chọn bất kỳ thẻ XML nào. * có thể được thay thế bằng một thẻ cụ thể nếu việc lựa chọn cần chính xác hơn.

*[@id="id"]

Chọn một ID cụ thể.

*[hasclass("class")]

Chọn một lớp cụ thể.

*[@name="name"]

Chọn một thẻ có tên cụ thể.

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

Chọn một cuộc gọi t cụ thể.

Chức vụ

Vị trí xác định vị trí đặt mã bên trong mẫu. Các giá trị có thể được liệt kê dưới đây:

Chức vụ

Sự miêu tả

thay thế

Thay thế nút được nhắm mục tiêu bằng nội dung XPath.

bên trong

Thêm nội dung XPath bên trong nút được nhắm mục tiêu.

trước

Thêm nội dung XPath trước nút được nhắm mục tiêu.

sau đó

Thêm nội dung XPath sau nút được nhắm mục tiêu.

thuộc tính

Thêm nội dung XPath bên trong một thuộc tính.

Example

XPath này thêm một <div> trước <nav> là phần tử con trực tiếp của <header>.

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

XPath này thêm x_airproof_header vào thuộc tính lớp của tiêu đề. Bạn cũng cần xác định thuộc tính dấu phân cách để thêm khoảng trắng trước lớp bạn đang thêm.

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

XPath này loại bỏ x_airproof_header trong thuộc tính lớp của tiêu đề. Trong trường hợp này, bạn không cần sử dụng thuộc tính dấu phân cách.

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

XPath này loại bỏ phần tử đầu tiên bằng lớp .breadcrumb.

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

XPath này thêm phần tử <li> bổ sung sau phần tử con cuối cùng của phần tử <ul>.

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

Xem thêm

Bạn có thể tìm thêm thông tin về XPath trong bảng cheat này.

QWeb

QWeb là công cụ tạo khuôn mẫu chính được SoOn sử dụng. Nó là một công cụ tạo khuôn mẫu XML chủ yếu được sử dụng để tạo các đoạn và trang HTML.

Lý lịch

Bạn có thể xác định màu sắc hoặc hình ảnh làm nền cho trang web của mình.

Màu sắc

/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',
      ),
    )
);

Hình ảnh/mẫu

/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'
   )
);

Tiêu chuẩn

Kích hoạt một trong các mẫu mặc định của tiêu đề.

Quan trọng

Đừng quên rằng trước tiên bạn có thể cần phải tắt mẫu tiêu đề đang hoạt động.

/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>

Phong tục

Tạo mẫu của riêng bạn và thêm nó vào danh sách.

Quan trọng

Đừng quên rằng trước tiên bạn có thể cần phải tắt mẫu tiêu đề đang hoạt động.

Lựa chọn

Sử dụng mã sau để thêm tùy chọn cho tiêu đề tùy chỉnh mới của bạn trên Trình tạo trang web.

/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>

Thuộc tính

Sự miêu tả

dữ liệu-tùy chỉnh-lượt xem trang web

Mẫu để kích hoạt

dữ liệu-tùy chỉnh-trang web-biến

Tên được đặt cho biến

dữ liệu-img

Hình thu nhỏ của mẫu tùy chỉnh được hiển thị trong phần lựa chọn mẫu trên Trình tạo trang web

Bây giờ bạn phải xác định rõ ràng rằng bạn muốn sử dụng mẫu tùy chỉnh của mình trong các biến SASS của SoOn.

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

Cách trình bày

/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>

Các thành phần

Trong tiêu đề tùy chỉnh của mình, bạn có thể gọi một số mẫu phụ bằng cách sử dụng lệnh t-call từ QWeb:

Đăng nhập

<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>

Trình đơn thả xuống của người dùng

<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>

Bộ chọn ngôn ngữ

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

Kêu gọi hành động

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

Tiêu chuẩn

Kích hoạt một trong các mẫu chân trang mặc định. Đừng quên rằng trước tiên bạn có thể cần phải tắt mẫu chân trang đang hoạt động.

/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>

Phong tục

Tạo mẫu của riêng bạn và thêm nó vào danh sách. Đừng quên rằng trước tiên bạn có thể cần phải tắt mẫu chân trang đang hoạt động.

Lựa chọn

/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>

Tuyên ngôn

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

Cách trình bày

/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>

Vùng Loại

Thay vì xác định bố cục hoàn chỉnh của một trang, bạn có thể tạo các khối xây dựng (đoạn mã) và cho phép người dùng chọn vị trí kéo và thả chúng, tự tạo bố cục trang. Chúng tôi gọi đây là thiết kế mô-đun.

Bạn có thể xác định một vùng trống mà người dùng có thể điền vào bằng các đoạn mã.

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

Lớp học

Sự miêu tả

oe_cấu trúc

Xác định vùng kéo và thả cho người dùng.

oe_structure_solo

Chỉ có thể bỏ một đoạn trong khu vực này.

Bạn cũng có thể điền nội dung của mình vào vùng thả hiện có.

<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>

Phản ứng nhanh nhẹn

Bạn có thể tìm thấy một số gợi ý bên dưới để giúp bạn làm cho trang web của mình có tính phản hồi cao.

Khởi động

Cỡ chữ

Kể từ v4.3.0, Bootstrap có tùy chọn kích hoạt kích thước phông chữ đáp ứng, cho phép văn bản có tỷ lệ tự nhiên hơn trên các kích thước thiết bị và khung nhìn. Kích hoạt chúng bằng cách thay đổi biến Sass $enable-Response-font-sizes thành true.

người tạo ra trang web

Ẩn một <section> cụ thể trên thiết bị di động.

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

Ẩn <col> trên thiết bị di động.

<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>