本文是 Odoo 12.0 官方教程第一篇 主題

查看英文原文：
https://www.odoo.com/documentation/12.0/howtos/themes.html

以下內(nèi)容為機器翻譯，半人工校對，僅供參考。

主題教程

Odoo 歌頌自由。設(shè)計師為用戶自由，為用戶定制一切，根據(jù)自己的需要。

準(zhǔn)備好創(chuàng)造你自己的主題了嗎？太好了在你開始之前，這是你應(yīng)該知道的一些事情。本教程是一個指導(dǎo)創(chuàng)建 Odoo 主題。

網(wǎng)頁設(shè)計師介紹

如果您使用的是 Odoo 首次一個網(wǎng)頁設(shè)計師，你是在正確的地方。課程將概述 Odoo 題材創(chuàng)作的基礎(chǔ)。

注
Odoo 的團隊已經(jīng)創(chuàng)建了一個框架，強大的和易于使用的。沒有必要知道的特殊語法來使用這套工具。

從常見的 CMS Odoo

注
如果你總是以同樣的方式思考和工作，你可能會得到相同的結(jié)果。如果你想完全新的東西，然后嘗試一些不同的東西。

哪里是我的 header.php 文件?

這通常是從一個用 WordPress 或 Joomla 來到 Odoo 首次工作的網(wǎng)頁設(shè)計師的第一個問題。

事實上，當(dāng)使用普通的 CMS 系統(tǒng)，你的代碼的幾個文件（像 header.php，page.php，post.php，等）為你的網(wǎng)站創(chuàng)建一個基本的結(jié)構(gòu)。有了這些系統(tǒng)，這個基礎(chǔ)結(jié)構(gòu)作為一個設(shè)計基礎(chǔ)，你必須及時更新，以確保在您的合作醫(yī)療系統(tǒng)的兼容性。所以，即使你花了數(shù)小時編碼的文件，你甚至還沒有開始設(shè)計上。

這 不 適用于創(chuàng)建 Odoo 主題。

Note
我們認(rèn)為，主題設(shè)計應(yīng)該是簡單的（和強大的）。當(dāng)我們創(chuàng)建網(wǎng)站時，我們決定從頭開始，而不是依賴于已經(jīng)存在的東西。這種方法給予我們關(guān)注的東西，是真正重要的設(shè)計師：風(fēng)格，內(nèi)容和邏輯背后的自由。與技術(shù)的東西沒有更多的掙扎。

Odoo 默認(rèn)主題結(jié)構(gòu)

Odoo 自帶的默認(rèn)主題結(jié)構(gòu)。這是一個非常基本的“主題”，提供最小的結(jié)構(gòu)和布局。當(dāng)你創(chuàng)建一個新的主題，你實際上是延長這。事實上，它總是在您的設(shè)置啟用，它的行為完全一樣，我們上面提到的合作醫(yī)療的基本結(jié)構(gòu)，除了您不必創(chuàng)建或維護它。它會自動升級在你安裝，因為它是 Odoo，包括在網(wǎng)站模塊，一切都是默認(rèn)的順利整合。

作為一個結(jié)果，你專注于設(shè)計，而這種結(jié)構(gòu)不提供集成和功能的工作完全免費。

主要功能:

• 網(wǎng)頁、博客和電子商務(wù)的基本布局
• 網(wǎng)站生成器集成
• 基本的片段
• 自動 Less / SASS 編譯
• 自動 JS 和 CSS 壓縮和組合

主要技術(shù):

• Twitter Bootstrap
• jQuery
• jQuery UI
• underscore.js

思考 "模塊化"

一個主題是不是 Odoo 文件夾包含 HTML 或 PHP 文件，這是一個模塊化的框架寫的 XML。以前從未使用過 XML 文件？別擔(dān)心，在下面的教程中，你將能夠只用 HTML 基本知識創(chuàng)建您的第一個主題。

使用經(jīng)典的網(wǎng)頁設(shè)計工作流程，您通常對整個頁面的布局進行代碼的代碼。這是一個“靜態(tài)”網(wǎng)頁的結(jié)果。你可以更新內(nèi)容，當(dāng)然，但是你的客戶需要你的工作，甚至基本的變化。

為 Odoo 創(chuàng)建主題是視角完全改變。而不是定義一個頁面的完整的布局，你可以創(chuàng)建塊（片段）在讓用戶選擇“拖放”，創(chuàng)建自己的頁面布局。我們稱之為模塊化設(shè)計。

想象一個 Odoo 主題為“元素和選項列表”，你必須創(chuàng)造和風(fēng)格。作為一個設(shè)計師，你的目標(biāo)是為了實現(xiàn)一個美妙的結(jié)果，不管終端用戶選擇的地方，這些元素的風(fēng)格。

讓我們來參觀我們的“列表”元素:

片段 (或 building-blocks)

一段 HTML 代碼。用戶將拖放，修改，并結(jié)合他們使用我們的內(nèi)置網(wǎng)站生成器界面。你可以定義每個片段選擇和風(fēng)格設(shè)置。用戶可以根據(jù)自己的需求選擇。

頁面

這些都是正常的網(wǎng)頁，但他們會通過最終用戶可編輯的，你可以定義一個空的區(qū)域，用戶可以通過拖動“填充”摘錄到它。

樣式

風(fēng)格是使用標(biāo)準(zhǔn)的 CSS 文件定義 (或 Less/Sass). 你可以定義一個風(fēng)格 default 或 optional. 默認(rèn)的樣式在您的主題活動中始終處于活動中，用戶可以啟用或禁用可選的樣式。

功能

感謝 Odoo 的模塊化，一切都可以個性化更。這意味著你的創(chuàng)造力有無限的可能性。增加功能是簡單的，它的簡單，為最終用戶提供可定制的選項。

Odoo 的 XML 文件，概述

任何 Odoo XML 文件從編碼規(guī)范。之后，你要寫你的代碼放進一個 </odoo> 標(biāo)簽中。

[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  ??## YOUR CODE HERE
</odoo>

幾乎每一個元素和選項，你創(chuàng)建的是放置在一個 <template> 的標(biāo)簽，如在這個例子。

[XML]
<template id="my_title" name="My title">
  <h1>This is an HTML block</h1>
  <h2 class="lead">And this is a subtitle</h2>
</template>

重要

不要誤解 template 的意思. 一個模板標(biāo)簽只定義了一段 HTML 代碼或選擇，但它不一定符合視覺要素的排列。

上面的代碼定義了一個標(biāo)題，但它不會顯示任何地方因為 template 是不相關(guān)的任何部分的 Odoo default structure。為了做到這點，你可以用 xpath, qWeb 或兩者的組合。繼續(xù)閱讀本教程，以學(xué)習(xí)如何正確地擴展它與您自己的代碼。

繼續(xù)閱讀本教程，以學(xué)習(xí)如何正確地擴展它與您自己的代碼。

更新你的主題

由于 XML 文件只能裝在你安裝的主題，你會不得不重裝你對 XML 文件進行更改的每一次。

要做到這一點，點擊升級按鈕在模塊的頁面。

創(chuàng)建主題模塊

Odoo 的主題是封裝模塊。即使你為你的公司或客戶的一個非常簡單的網(wǎng)站設(shè)計，你需要包裝的主題像 Odoo 模塊。

main folder

創(chuàng)建一個文件夾和名稱，它像這樣: theme_ 其次是你的主題的名字。

__manifest__.py

創(chuàng)建一個空文檔，并將它保存到您的文件夾中就像 __manifest__.py. 這將包含配置信息為您的主題。

__init__.py

創(chuàng)建另一個空文件名 __init__.py. 這是一個強制性的系統(tǒng)文件。創(chuàng)建并留有空白。

views 和 static 文件夾

在主文件夾中創(chuàng)建它們. 在 views 你會把你的 XML 文件中定義你的片段，你的網(wǎng)頁和你的選擇。static 文件夾是你的樣式的地方，圖像和自定義js代碼。

重要
使用雙下劃線開頭兩在 odoo 和初始化文件名結(jié)束。

最后的結(jié)果應(yīng)該是這樣的:

編輯 __manifest__.py

打開 __manifest__.py 您創(chuàng)建和復(fù)制/粘貼以下：

{
  'name':'Tutorial theme',
  'description': 'A description for your theme.',
  'version':'1.0',
  'author':'Your name',

  'data': [
  ],
  'category': 'Theme/Creative',
  'depends': ['website', 'website_less'],
}

更換前四個屬性的值與任何您喜歡的。這些值將被用來識別您的后端 Odoo 新主題。

data 屬性將包含 XML 文件列表。現(xiàn)在它是空的，但我們將添加任何新的文件創(chuàng)建。

category 定義你的模塊分類（總是“主題”），斜杠后面則是子分類。你可以使用的應(yīng)用程序類別列表的一個子類 Odoo。 (https://www.odoo.com/apps/themes)

depends 指定我們的主題需要的模塊，以工作正常。我們教程的主題，我們只需要網(wǎng)站和 website_less。如果你需要博客或電子商務(wù)功能，你必須添加這些模塊。

...
'depends': ['website', 'website_blog', 'sale'],
...

安裝你的主題

安裝你的主題，你只是把你的主題文件夾里面你 Odoo 安裝插件。

之后，瀏覽到設(shè)置頁面，尋找主題，然后點擊安裝按鈕。

一個 Odoo 頁面結(jié)構(gòu)

一個 Odoo 頁面是一個組合的 2 種元素的視覺效果，cross-pages 和 unique。默認(rèn)情況下，Odoo 為你提供了一個 Header 和 Footer（跨頁）和一個唯一的主要元素包含的內(nèi)容，使您的網(wǎng)頁是唯一的。

Note
每一頁都會有一個跨頁面元素。唯一的元素只涉及到一個特定的頁面。

要檢查默認(rèn)布局，只需創(chuàng)建一個新的頁面，使用網(wǎng)站生成器。點擊新頁面和內(nèi)容?添加頁面名稱。使用瀏覽器檢查頁面。

<div id=“wrapwrap”>
  <header />
  <main />
  <footer />
</div>

擴展默認(rèn) Header

默認(rèn)情況下，Odoo Header 包含一個反應(yīng)的導(dǎo)航菜單和公司的 logo。你可以很容易地添加新的元素或樣式。

這樣做，創(chuàng)造一個 layout.xml。XML文件在您的 views 文件夾和視圖添加默認(rèn) Odoo XML 標(biāo)記。

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

</odoo>

創(chuàng)建一個新的模板到 <odoo> 標(biāo)簽，復(fù)制粘貼下面的代碼。

<!-- Customize header  -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">

  <!-- Assign an id  -->
  <xpath expr="http://div[@id='wrapwrap']/header" position="attributes">
    <attribute name="id">my_header</attribute>
  </xpath>

  <!-- Add an element after the top menu  -->
  <xpath expr="http://div[@id='wrapwrap']/header/div" position="after">
    <div class="container">
      <div class="alert alert-info mt16" role="alert">
        <strong>Welcome</strong> in our website!
      </div>
    </div>
  </xpath>
</template>

第一個 XPath 將添加 ID my_header 的頭。如果你想目標(biāo)的 CSS 規(guī)則，元和避免這些影響網(wǎng)頁上的其他內(nèi)容，這是最好的選擇。

警告
小心更換默認(rèn)元素屬性。為你的主題將默認(rèn)的一個，您的更改將優(yōu)先考慮在未來任何 Odoo 的更新。

第二 XPath 將會在導(dǎo)航菜單中添加一個歡迎信息。

最后一步是添加 layout.xml 到主題使用 XML 文件的列表。要做到這一點，編輯你的__manifest__.py 文件這樣

'data': [ 'views/layout.xml' ],

更新你的主題

太好了我們成功地增加了一個身份證的標(biāo)題和一個元素后的導(dǎo)航菜單。這些更改將被應(yīng)用于網(wǎng)站的每一頁。

創(chuàng)建一個特定的頁面布局

想象一下，我們要為一個服務(wù)頁面創(chuàng)建一個特定的布局。這個頁面，我們需要添加一個服務(wù)列表的頂部和給客戶的可能性設(shè)置其他頁面的布局使用代碼片段。

在你的 views 文件夾，創(chuàng)建一個 pages.xml 文件并添加默認(rèn) Odoo 標(biāo)記。在 <odoo> 創(chuàng)建一個 <template> 標(biāo)簽，設(shè)置頁面的屬性為 True ，并添加它到你的代碼。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <!-- === Services Page === -->
    <template name="Services page" id="website.services" page="True">
      <h1>Our Services</h1>
        <ul class="services">
          <li>Cloud Hosting</li>
          <li>Support</li>
          <li>Unlimited space</li>
        </ul>
      </template>
  </odoo>

頁面標(biāo)題將是我們的案例中的模板 ID（從 website.services ）

我們成功地創(chuàng)建了一個新的頁面布局，但我們沒有告訴系統(tǒng) 如何使用它。要做到這一點，我們可以使用 QWeb 。HTML 代碼是被包含在 <t> 標(biāo)簽，就像在下面這個例子。

<!-- === Services Page === -->
<template name="Services page" id="website.services" page="True">
  <t t-call="website.layout">
    <div id="wrap">
      <div class="container">
        <h1>Our Services</h1>
        <ul class="services">
          <li>Cloud Hosting</li>
          <li>Support</li>
          <li>Unlimited space</li>
        </ul>
      </div>
    </div>
  </t>
</template>

使用 <t t-call="website.layout"> 我們將與我們的代碼擴展 Odoo 默認(rèn)頁面布局。

正如你所看到的，我們把我們的代碼包裝成了 2 個 <div>, 一個 隨著 ID wrap 另一個是類 container. 這是提供一個最小布局。

下一步是添加一個空的區(qū)域用戶可以填寫與片段。要實現(xiàn)這一, 只需創(chuàng)建一個 div 隨著 oe_structure 類只是在關(guān)閉 div#wrap 元素之前.

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

<!-- === Services Page === -->
<template name="Services page" id="website.services" page="True">
  <t t-call="website.layout">
   <div id="wrap">
     <div class="container">
       <h1>Our Services</h1>
       <ul class="services">
         <li>Cloud Hosting</li>
         <li>Support</li>
         <li>Unlimited space</li>
       </ul>
       <!-- === Snippets' area === -->
       <div class="oe_structure" />
     </div>
   </div>
  </t>
</template>

</odoo>

提示
你可以創(chuàng)建許多片斷的領(lǐng)域你喜歡放在頁面的任何地方。

我們的網(wǎng)頁幾乎已經(jīng)準(zhǔn)備好了。現(xiàn)在我們要做的就是添加 pages.xml 在我們 manifest.py 文件

'data': [
  'views/layout.xml',
  'views/pages.xml'
],

更新你的主題

非常好，我們的服務(wù)頁面已經(jīng)準(zhǔn)備好了，您可以通過導(dǎo)航來訪問它 /yourwebsite/page/services.

你會注意到它的可能的拖/放在我們的 Our Services 列表。

現(xiàn)在讓我們回到我們的 pages.xml ，在我們的頁面模板，復(fù)制/粘貼下面的代碼。

<record id="services_page_link" model="website.menu">
  <field name="name">Services</field>
  <field name="url">/page/services</field>
  <field name="parent_id" ref="website.main_menu" />
  <field name="sequence" type="int">99</field>
</record>

本代碼將添加一個鏈接到主菜單。

sequence 屬性定義了鏈接在頂部菜單中的位置。在我們的例子中，我們將值設(shè)置為 99 ，以便把它放置到最后。我想把它放在一個特殊的位置，你必須根據(jù)你的需要來代替它的價值。

正如你可以看到的 data.xml 文件在 website 模塊中, 這個 Home 鏈接 被設(shè)置為 10 和這個 Contact 被我們設(shè)置為默認(rèn)值 60 . 例如，如果你想把你的鏈接放在 middle, 您可以將鏈接的序列值設(shè)置為 40.

添加樣式

Odoo 包括 Bootstrap 默認(rèn)。這意味著，你可以利用所有的引導(dǎo)方式和布局功能的方塊。

當(dāng)然引導(dǎo)是不夠的，如果你想提供一個獨特的設(shè)計。以下步驟將指導(dǎo)您如何添加自定義樣式到主題。最終的結(jié)果不會很漂亮，但會給你提供足夠的信息來建立你自己的。

讓我們先創(chuàng)建一個空文件名為 style.scss ，并將其放置在一個叫做 less 在您的靜態(tài)文件夾。下面的規(guī)則將樣式我們的 Services 頁。復(fù)制并粘貼，然后保存文件。

.services {
    background: #EAEAEA;
    padding: 1em;
    margin: 2em 0 3em;
    li {
        display: block;
        position: relative;
        background-color: #16a085;
        color: #FFF;
        padding: 2em;
        text-align: center;
        margin-bottom: 1em;
        font-size: 1.5em;
    }
}

我們的文件已經(jīng)準(zhǔn)備好了，但這還不包括在我們的主題中。

讓我們到視圖文件夾中，創(chuàng)建一個名為 assets.xml 的 XML 文件。添加默認(rèn) Odoo XML 標(biāo)記和復(fù)制/粘貼以下代碼。請記住以主題的主文件夾名稱替換 theme folder。

<template id="mystyle" name="My style" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
           <link rel="stylesheet" type="text/scss" href="/theme folder/static/scss/style.scss"/>
    </xpath>
</template>

我們只是創(chuàng)建了一個指定我們的 scss 文件。你可以看到，我們的模板有一個特殊的屬性稱為 inherit_id 。這個屬性告訴 Odoo，我們模板是指為另一個操作。

在這種情況下，我們指的是 assets_frontend 模板, 位于 website 模塊中. assets_frontend 指定網(wǎng)站生成器加載的資產(chǎn)列表，我們的目標(biāo)是將我們的 scss 文件添加到該列表中。

這可以使用 XPath 的屬性來實現(xiàn)的 expr="link[last()]" 和 position="after", 意思是 " 用我的樣式文件并且把它放到 assets 列表中最后一個連接的后面 ".

把它放在最后一個，我們確保我們的文件將被加載到年底，并采取優(yōu)先。

最后添加 assets.xml 在你的 manifest.py 文件.

更新你的主題

我們的 scss 文件現(xiàn)在包含在我們的主題，它將自動編譯，壓縮和合并所有 Odoo 的資產(chǎn)。

創(chuàng)建片段

由于片段的用戶是如何設(shè)計和布局頁面，他們是最重要的設(shè)計元素。讓我們創(chuàng)建一個我們的服務(wù)頁面片段。這段代碼將顯示三推薦將通過網(wǎng)站界面用戶可編輯。瀏覽視圖文件夾中創(chuàng)建一個 XML 文件，叫 snippets.xml。添加默認(rèn) Odoo XML 標(biāo)記和復(fù)制/粘貼以下代碼。模板包含 HTML 標(biāo)記，將由段顯示。

   <template id="snippet_testimonial" name="Testimonial snippet">
     <section class="snippet_testimonial">
       <div class="container text-center">
         <div class="row">
           <div class="col-lg-4">
             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
             <h3>Client Name</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
           </div>
           <div class="col-lg-4">
             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
             <h3>Client Name</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
           </div>
           <div class="col-lg-4">
             <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
             <h3>Client Name</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
           </div>
         </div>
       </div>
     </section>
   </template>

正如你所看到的，我們使用引導(dǎo)默認(rèn)類為我們的三列。這不只是關(guān)于布局，這些類 將由網(wǎng)站生成器觸發(fā)用戶的 讓他們調(diào)整大小。

上面的代碼將創(chuàng)建代碼段的內(nèi)容，但是我們?nèi)匀恍枰胖玫骄庉嫏冢@樣用戶可以拖放到頁面。復(fù)制/粘貼此模板在你的 snippets.xml 文件。

<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
  <xpath expr="http://div[@id='snippet_structure']" position="inside">
    <t t-snippet="theme_tutorial.snippet_testimonial"
       t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
  </xpath>
</template>

使用 XPath，我們與 ID snippet_structure 瞄準(zhǔn)特定元素。這意味著，片段會出現(xiàn)在結(jié)構(gòu)選項卡。如果你想改變目的地標(biāo)簽，你只需要在 XPath 表達式中替換 id 的值。

The <t> tag will call our snippet's template and will assign a thumbnail placed in the img folder. You can now drag your snippet from the snippet bar, drop it in your page and see the result.

片段的選擇

選項允許出版商使用的網(wǎng)站建設(shè)者的 UI 編輯片段的出現(xiàn)。使用網(wǎng)站的功能，你可以創(chuàng)建代碼段選項容易自動添加到用戶界面。

選項組屬性

選項是用分組包。組可以有屬性，該屬性定義包括選項將如何與用戶界面進行交互。

data-selector=" [css selector(s)] "

將所有選項都綁定到該組中的某個特定元素中。

data-js=" [custom method name] "

是用來綁定自定義 JavaScript 方法。

data-drop-in=" [css selector(s)] "

定義元素列表的代碼段可以下降到。

data-drop-near=" [css selector(s)] "

定義該代碼段可以下降在元素列表。

默認(rèn)選項方法

選項應(yīng)用標(biāo)準(zhǔn)的 CSS 類的片段。根據(jù)你所選擇的方法，用戶界面會有不同的行為。

data-select-class=" [class name] "

在同組 data-select-class 定義了一個類列表，用戶可以選擇應(yīng)用。只有一個選項可以在一個時間被啟用。

data-toggle-class=" [class name] "

的 data-toggle-class 應(yīng)用一個或多個 CSS 類從列表中的一段。多個選擇可以應(yīng)用于一次。

讓我們演示如何使用默認(rèn)選項的基本示例。

我們開始在我們的視圖文件夾添加新文件名 options.xml 和添加默認(rèn) Odoo XML 標(biāo)記。創(chuàng)建一個新的模板復(fù)制/粘貼如下

<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website_less.snippet_options">
  <xpath expr="http://div[@data-js='background']" position="after">
    <div data-selector=".snippet_testimonial"> <!-- Options group -->
      <li class="dropdown-submenu">
        <a href="#">Your Option</a>
          <div class="dropdown-menu"> <!-- Options list -->
            <a href="#" class="dropdown-item" data-select-class="opt_shadow">Shadow Images</a>
            <a href="#" class="dropdown-item" data-select-class="opt_grey_bg">Grey Bg</a>
            <a href="#" class="dropdown-item" data-select-class="">None</a>
          </div>
      </li>
    </div>
  </xpath>
 </template>

Note
以前的模板將繼承默認(rèn) snippet_options template 添加選項后，background 選項（XPath 表達式選擇背景屬性）。把你的選擇在一個特定的順序，檢查 snippet_options template 來自 website module 并添加您的選項前/后所需的位置。

你可以看到，我們用我們所有的選項一個 div 標(biāo)簽，我們將組選項里面，將他們的目標(biāo)正確的選擇 (data-selector=".snippet_testimonial").

定義我們的選擇我們的應(yīng)用 data-select-class 屬性的 li 元素。當(dāng)用戶選擇一個選項時，該屬性中包含的類會自動被應(yīng)用到該元素中。

因為 select-class 方法避免了多重選擇，最后的“空”選項將重置到默認(rèn)代碼段。

添加 options.xml 到 __manifest__.py 然后更新你的主題。

把我們的片段到繪圖頁上，你會注意到我們的新選項被自動添加到自定義菜單。檢查頁面，您還將注意到，該類將應(yīng)用于選擇一個選項時的元素。

讓我們?yōu)槲覀兊倪x擇視覺反饋創(chuàng)建 CSS 規(guī)則。打開我們的 style.scss 文件，并添加以下

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;
}

// 這些線將我們的代碼段添加一個默認(rèn)樣式。現(xiàn)在讓我們來創(chuàng)建自定義規(guī)則的選項。

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;

  &.opt_shadow img {
    box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
  }

  &.opt_grey_bg {
    border: none;
    background-color: #EAEAEA;
  }
}

太好了我們成功地創(chuàng)造了我們的代碼段的選擇。

在選擇點擊發(fā)布任何時間，系統(tǒng)將在 data-select-class 屬性指定的類。

通過更換data-select-class與data-toggle-class你可以同時選擇多類。

JavaScript選項

data-select_class和data-toggle_class是偉大的如果你需要進行簡單的課改操作。但是如果你的代碼的定制需要更多的東西嗎？

正如我們之前所說的，data-js 屬性可以分配為選項組定義一個自定義方法。讓我們創(chuàng)建一個為我們推薦段*添加 data-js屬性選項組的 div，我們先前創(chuàng)建的。

<div data-js="snippet_testimonial_options" data-selector=".snippet_testimonial">
  [...]
</div>

完成從現(xiàn)在開始，該網(wǎng)站將尋找一個 snippet_testimonial_options 方法每次出版商進入編輯模式。

我們的第一步，創(chuàng)建一個 JavaScript 文件，名字是 tutorial_editor.js 然后放入 static 文件夾。復(fù)制/粘貼下面的代碼

(function() {
    'use strict';
    var website = odoo.website;
    website.odoo_website = {};
})();

好，我們成功地創(chuàng)造了我們的 JavaScript 文件編輯。該文件將包含所有的 javascript 函數(shù)用到的片段在編輯模式。讓我們創(chuàng)建一個新的功能，我們推薦使用片段 snippet_testimonial_options 方法我們之前創(chuàng)建的。

(function() {
    'use strict';
    var website = odoo.website;
    website.odoo_website = {};

    website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
        onFocus: function() {
            alert("On focus!");
        }
    })
})();

你會注意到，我們使用的方法稱為 onFocus 觸發(fā)函數(shù)。網(wǎng)站生成器提供了一些事件，您可以使用來觸發(fā)您的自定義函數(shù)。

讓我們添加新的 JavaScript 文件資產(chǎn)編輯列表。 回到 assets.xml 和創(chuàng)建一個新的模板，如前一個。這一次我們必須繼承 assets_editor 而不是 assets_frontend.

<template id="my_js" inherit_id="website_less.assets_editor" name="My Js">
  <xpath expr="script[last()]" position="after">
    <script type="text/javascript" src="/theme_tutorial/static/src/js/tutorial_editor.js" />
  </xpath>
</template>

更新你的主題

讓我們來測試我們的新的 JavaScript 函數(shù)。進入編輯模式，進入頁面。你現(xiàn)在應(yīng)該看到 JavaScript 警告我們綁在 onFocus 事件。如果你關(guān)閉它，然后單擊片段外，然后點擊一遍，將再次觸發(fā)事件。

編輯參考指南

基本上，頁面中的所有元素都可以由發(fā)布者編輯。此外，一些元素類型和CSS類將觸發(fā)特殊網(wǎng)站當(dāng)編輯功能。

布局

<section />

任何部分元素都可以被編輯，就像一個內(nèi)容塊。出版商可以移動或復(fù)制它。也可以設(shè)置背景圖像或顏色。部分是任何一段的標(biāo)準(zhǔn)集裝箱主。

.row > .col-lg-*

任何 large bootstrap 列直接從行元素遞減，發(fā)布者可調(diào)整大小。

contenteditable="False"

此屬性將防止編輯元素及其所有的子元素。

contenteditable="True"

將它應(yīng)用到一個元素在一個 contenteditable="False" 元素，以創(chuàng)建一個例外，使元素及其子可編輯。

<a href=”#” />

在編輯模式下，任何鏈接可以被編輯和風(fēng)格化。使用“鏈接模式”，它也可以用一個按鈕來替換它。

媒體

<span class=”fa” />

象形文字元素。編輯該元素將打開圖標(biāo)庫替換圖標(biāo)。使用 CSS 元素的變換也有可能。

<img />

一旦點擊，圖像庫將打開，你可以替換圖像。這種元素的轉(zhuǎn)換也可能。

<div class="media_iframe_video" data-src="[your url]" >
  <div class="css_editable_mode_display"/>
  <div class="media_iframe_video_size"/>
  <iframe src="[your url]"/>
</div>

這將創(chuàng)建一個 HTML 結(jié)構(gòu) <iframe> 元素可由發(fā)布者編輯 .

SEO 最佳實踐

方便內(nèi)容插入

現(xiàn)代搜索引擎的算法越來越注重內(nèi)容，這就意味著有更少的關(guān)注 關(guān)鍵詞飽和度 而更多的關(guān)注于是否內(nèi)容是 其實與關(guān)鍵詞相關(guān).

作為內(nèi)容是如此重要的搜索引擎優(yōu)化，你應(yīng)該專注于給出版商的工具，方便地插入它。你的片段是“內(nèi)容敏感”是很重要的，這意味著他們必須符合出版商的內(nèi)容無論大小。

讓我們看看這個例子，一個經(jīng)典的兩柱段，兩種不同的方式實現(xiàn)。

壞的

使用固定的圖像，出版商將被迫限制的文本，以遵循布局。

好的

使用符合列高度的背景圖像，發(fā)布者將可自由添加內(nèi)容，不管圖像的高度.

頁面分割

基本上，頁面分割意味著一個頁面被分為幾個獨立的部分，這些部分被作為單獨的條目被搜索引擎處理。當(dāng)你設(shè)計的網(wǎng)頁或視頻，你應(yīng)確保使用正確的標(biāo)簽，便于搜索引擎的索引.

<article>

指定內(nèi)容的獨立塊。在它里面應(yīng)該是一個自足的內(nèi)容，應(yīng)該有自己的意義。你可以筑巢 <article>彼此的元素。在這種情況下，它的隱含的嵌套元素相關(guān)的外 <article> 元素.

<header>

表示一個包含內(nèi)容的內(nèi)容的頭部分 (一個 <article>).

<section>

是段的默認(rèn)標(biāo)簽，指定一塊內(nèi)容分段。它可以用來分割 <article> 內(nèi)容分為幾個部分。使用標(biāo)題元素是明智的 (<h1> – <h6>) 定義本節(jié)的主題.

<hgroup>

是用來包裝一段標(biāo)題 (<h1> - <h6>). 一個很好的例子是一篇文章，標(biāo)題和標(biāo)題的頂部:

<hgroup>
  <h1>Main Title</h1>
  <h2>Subheading</h2>
</hgroup>

描述你的頁面

定義關(guān)鍵詞

你應(yīng)該使用適當(dāng)?shù)模嚓P(guān)的關(guān)鍵字和同義詞為那些關(guān)鍵字。您可以使用內(nèi)置的 “Promote” 功能在頂部的酒吧中定義他們的每一個頁面。

定義一個標(biāo)題和一個描述

用 “Promote” 功能定義它們。保持您的頁面標(biāo)題短，包括主要關(guān)鍵字短語的頁面。好標(biāo)題引起了一種情緒反應(yīng)，問一個問題或承諾的東西。

描述，雖然不重要的搜索引擎的排名，是非常重要的，在獲得用戶點擊。這些都是一個廣告內(nèi)容的機會，讓人們搜索準(zhǔn)確的知道給定的頁面是否包含他們正在尋找的信息。重要的是，每一頁的標(biāo)題和說明是獨一無二的。