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

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

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

主題教程

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

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

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

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

注
Odoo 的團(tuán)隊(duì)已經(jīng)創(chuàng)建了一個(gè)框架，強(qiáng)大的和易于使用的。沒(méi)有必要知道的特殊語(yǔ)法來(lái)使用這套工具。

從常見(jiàn)的 CMS Odoo

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

哪里是我的 header.php 文件?

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

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

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

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

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

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

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

主要功能:

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

主要技術(shù):

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

思考 "模塊化"

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

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

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

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

讓我們來(lái)參觀我們的“列表”元素:

片段 (或 building-blocks)

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

頁(yè)面

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

樣式

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

功能

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

Odoo 的 XML 文件，概述

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

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

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

[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 的意思. 一個(gè)模板標(biāo)簽只定義了一段 HTML 代碼或選擇，但它不一定符合視覺(jué)要素的排列。

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

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

更新你的主題

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

要做到這一點(diǎn)，點(diǎn)擊升級(jí)按鈕在模塊的頁(yè)面。

創(chuàng)建主題模塊

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

main folder

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

__manifest__.py

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

__init__.py

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

views 和 static 文件夾

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

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

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

編輯 __manifest__.py

打開(kāi) __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'],
}

更換前四個(gè)屬性的值與任何您喜歡的。這些值將被用來(lái)識(shí)別您的后端 Odoo 新主題。

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

application: True 是強(qiáng)制性的.

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

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

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

安裝你的主題

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

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

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

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

Note
每一頁(yè)都會(huì)有一個(gè)跨頁(yè)面元素。唯一的元素只涉及到一個(gè)特定的頁(yè)面。

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

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

擴(kuò)展默認(rèn) Header

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

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

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

  </data>
</odoo>

創(chuàng)建一個(gè)新的模板到 <data> 標(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>

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

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

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

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

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

更新你的主題

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

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  <data>
    <!-- === 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>
    </data>
  </odoo>

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

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

<!-- === 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"> 我們將與我們的代碼擴(kuò)展 Odoo 默認(rèn)頁(yè)面布局。

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

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

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

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

</data>
</odoo>

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

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

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

更新你的主題

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

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

現(xiàn)在讓我們回到我們的 pages.xml ，在我們的頁(yè)面模板，復(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>

本代碼將添加一個(gè)鏈接到主菜單。

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

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

添加樣式

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

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

讓我們先創(chuàng)建一個(gè)空文件名為 style.less ，并將其放置在一個(gè)叫做 less 在您的靜態(tài)文件夾。下面的規(guī)則將樣式我們的 Services 頁(yè)。復(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)建一個(gè)名為 assets.xml 的 XML 文件。添加默認(rèn) Odoo XML 標(biāo)記和復(fù)制/粘貼以下代碼。請(qǐng)記住以主題的主文件夾名稱替換 theme folder。

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

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

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

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

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

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

更新你的主題

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

創(chuàng)建片段

由于片段的用戶是如何設(shè)計(jì)和布局頁(yè)面，他們是最重要的設(shè)計(jì)元素。讓我們創(chuàng)建一個(gè)我們的服務(wù)頁(yè)面片段。這段代碼將顯示三推薦將通過(guò)網(wǎng)站界面用戶可編輯。瀏覽視圖文件夾中創(chuàng)建一個(gè) 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-md-4">
          [站外圖片上傳中……(28)]
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-md-4">
          [站外圖片上傳中……(29)]
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-md-4">
          [站外圖片上傳中……(30)]
          <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)匀恍枰胖玫骄庉嫏?，這樣用戶可以拖放到頁(yè)面。復(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)特定元素。這意味著，片段會(huì)出現(xiàn)在結(jié)構(gòu)選項(xiàng)卡。如果你想改變目的地標(biāo)簽，你只需要在 XPath 表達(dá)式中替換 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.

片段的選擇

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

選項(xiàng)組屬性

選項(xiàng)是用分組包。組可以有屬性，該屬性定義包括選項(xiàng)將如何與用戶界面進(jìn)行交互。

data-selector=" css selector(s) "

將所有選項(xiàng)都綁定到該組中的某個(gè)特定元素中。

data-js=" custom method name "

是用來(lái)綁定自定義 JavaScript 方法。

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

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

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

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

默認(rèn)選項(xiàng)方法

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

data-select_class=" class name "

在同組 data-select_class 定義了一個(gè)類列表，用戶可以選擇應(yīng)用。只有一個(gè)選項(xiàng)可以在一個(gè)時(shí)間被啟用。

data-toggle_class=" class name "

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

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

我們開(kāi)始在我們的視圖文件夾添加新文件名 options.xml 和添加默認(rèn) Odoo XML 標(biāo)記。創(chuàng)建一個(gè)新的模板復(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>
        <ul class="dropdown-menu"> <!-- Options list -->
          <li data-select_class="opt_shadow"><a>Shadow Images</a></li>
          <li data-select_class="opt_grey_bg"><a>Grey Bg</a></li>
          <li data-select_class=""><a>None</a></li>
        </ul>
      </li>
    </div>
  </xpath>
 </template>

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

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

定義我們的選擇我們的應(yīng)用 data-select_class 屬性的 li 元素。當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，該屬性中包含的類會(huì)自動(dòng)被應(yīng)用到該元素中。

因?yàn)?select_class 方法避免了多重選擇，最后的“空”選項(xiàng)將重置到默認(rèn)代碼段。

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

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

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

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

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

.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)造了我們的代碼段的選擇。

在選擇點(diǎn)擊發(fā)布任何時(shí)間，系統(tǒng)將在 data-select_class 屬性指定的類。

通過(guò)更換data-select_class與data-toggle_class你可以同時(shí)選擇多類。

JavaScript選項(xiàng)

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

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

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

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

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

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

好，我們成功地創(chuàng)造了我們的 JavaScript 文件編輯。該文件將包含所有的 javascript 函數(shù)用到的片段在編輯模式。讓我們創(chuàng)建一個(gè)新的功能，我們推薦使用片段 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({
        on_focus: function() {
            alert("On focus!");
        }
    })
})();

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

讓我們添加新的 JavaScript 文件資產(chǎn)編輯列表。 回到 assets.xml 和創(chuàng)建一個(gè)新的模板，如前一個(gè)。這一次我們必須繼承 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>

更新你的主題

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

編輯參考指南

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

布局

<section />

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

.row > .col-md-*

任何媒介引導(dǎo)柱直接下降從。行元素，將由出版商可調(diào)整大小。

contenteditable="False"

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

contenteditable="True"

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

<a href=”#” />

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

媒體

<span class=”fa” />

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

<img />

一旦點(diǎn)擊，圖像庫(kù)將打開(kāi)，你可以替換圖像。這種元素的轉(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)建一個(gè) HTML 結(jié)構(gòu) <iframe> 元素可由發(fā)布者編輯 .

SEO 最佳實(shí)踐

方便內(nèi)容插入

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

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

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

壞的

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

好的

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

頁(yè)面分割

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

<article>

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

<header>

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

<section>

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

<hgroup>

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

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

描述你的頁(yè)面

定義關(guān)鍵詞

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

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

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

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

如果你覺(jué)得有用請(qǐng)按照以下步驟操作:

1. 點(diǎn)喜歡。
2. 去分享。
3. 加入 看云 交流群 374908667。
4. 加群主羅飛微信（微信號(hào)luofei614）,可申請(qǐng)加入移動(dòng)開(kāi)發(fā)精英俱樂(lè)部。
   
   717095195321390726.jpg
5. OneAPM-全語(yǔ)言和全平臺(tái)的應(yīng)用性能監(jiān)控。
6. 如有您有急需的題材請(qǐng)直接留言。