本文是 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)造你自己的主題了嗎览祖？太好了在你開始之前孝鹊，這是你應(yīng)該知道的一些事情。本教程是一個(gè)指導(dǎo)創(chuàng)建 Odoo 主題展蒂。

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

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

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

從常見的 CMS Odoo

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

哪里是我的 header.php 文件?

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

事實(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í)編碼的文件，你甚至還沒有開始設(shè)計(jì)上糜值。

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

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

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

Odoo 自帶的默認(rèn)主題結(jié)構(gòu)。這是一個(gè)非嘲谴牛基本的“主題”庆揪，提供最小的結(jié)構(gòu)和布局。當(dāng)你創(chuàng)建一個(gè)新的主題妨托，你實(shí)際上是延長這缸榛。事實(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)頁系吭、博客和電子商務(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颗品。以前從未使用過 XML 文件肯尺？別擔(dān)心，在下面的教程中躯枢，你將能夠只用 HTML 基本知識(shí)創(chuàng)建您的第一個(gè)主題则吟。

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

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

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

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

片段 (或 building-blocks)

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

頁面

這些都是正常的網(wǎng)頁，但他們會(huì)通過最終用戶可編輯的况芒，你可以定義一個(gè)空的區(qū)域惜纸，用戶可以通過拖動(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)造力有無限的可能性粪牲。增加功能是簡單的古瓤，它的簡單，為最終用戶提供可定制的選項(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 代碼或選擇主届，但它不一定符合視覺要素的排列。

上面的代碼定義了一個(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í)按鈕在模塊的頁面。

創(chuàng)建主題模塊

Odoo 的主題是封裝模塊法竞。即使你為你的公司或客戶的一個(gè)非常簡單的網(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)頁和你的選擇趴酣。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'],
}

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

data 屬性將包含 XML 文件列表∩麒担現(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è)置頁面字逗，尋找主題京郑，然后點(diǎn)擊安裝按鈕。

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

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

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

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

<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)頁上的其他內(nèi)容酱畅，這是最好的選擇琳袄。

警告
小心更換默認(rèn)元素屬性。為你的主題將默認(rèn)的一個(gè)纺酸，您的更改將優(yōu)先考慮在未來任何 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)站的每一頁樊诺。

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

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

在你的 views 文件夾，創(chuàng)建一個(gè) pages.xml 文件并添加默認(rèn) Odoo 標(biāo)記缸夹。在 <data> 創(chuàng)建一個(gè) <template> 標(biāo)簽，設(shè)置頁面的屬性為 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>

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

我們成功地創(chuàng)建了一個(gè)新的頁面布局，但我們沒有告訴系統(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)頁面布局。

正如你所看到的谱邪，我們把我們的代碼包裝成了 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)域你喜歡放在頁面的任何地方惦银。

我們的網(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.

你會(huì)注意到它的可能的拖/放在我們的 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>

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

sequence 屬性定義了鏈接在頂部菜單中的位置谨娜。在我們的例子中为流，我們將值設(shè)置為 99 呕屎，以便把它放置到最后。我想把它放在一個(gè)特殊的位置艺谆，你必須根據(jù)你的需要來代替它的價(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ì)給你提供足夠的信息來建立你自己的缠黍。

讓我們先創(chuàng)建一個(gè)空文件名為 style.less ，并將其放置在一個(gè)叫做 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)建一個(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 的屬性來實(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ì)和布局頁面，他們是最重要的設(shè)計(jì)元素煌贴。讓我們創(chuàng)建一個(gè)我們的服務(wù)頁面片段御板。這段代碼將顯示三推薦將通過網(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)匀恍枰胖玫骄庉嫏诨搪ィ@樣用戶可以拖放到頁面。復(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 "

是用來綁定自定義 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)的基本示例输涕。

我們開始在我們的視圖文件夾添加新文件名 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 來自 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 然后更新你的主題凡蜻。

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

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

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

// 這些線將我們的代碼段添加一個(gè)默認(rèn)樣式。現(xiàn)在讓我們來創(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 屬性指定的類碧绞。

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

JavaScript選項(xiàng)

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

正如我們之前所說的迫靖，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)在開始照激，該網(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)站生成器提供了一些事件辣卒，您可以使用來觸發(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>

更新你的主題

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

編輯參考指南

基本上狸演，頁面中的所有元素都可以由發(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è)按鈕來替換它。

媒體

<span class=”fa” />

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

<img />

一旦點(diǎn)擊子漩，圖像庫將打開豫喧，你可以替換圖像。這種元素的轉(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)代搜索引擎的算法越來越注重內(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)容無論大小招驴。

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

壞的

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

好的

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

頁面分割

基本上，頁面分割意味著一個(gè)頁面被分為幾個(gè)獨(dú)立的部分爽冕，這些部分被作為單獨(dú)的條目被搜索引擎處理仇祭。當(dāng)你設(shè)計(jì)的網(wǎng)頁或視頻，你應(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)容分段寂屏。它可以用來分割 <article> 內(nèi)容分為幾個(gè)部分。使用標(biāo)題元素是明智的 (<h1> – <h6>) 定義本節(jié)的主題.

<hgroup>

是用來包裝一段標(biāo)題 (<h1> - <h6>). 一個(gè)很好的例子是一篇文章娜搂，標(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” 功能在頂部的酒吧中定義他們的每一個(gè)頁面百宇。

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

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

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

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

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