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

查看英文原文：
https://www.odoo.com/documentation/11.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)頁(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)大的和易于使用的。沒有必要知道的特殊語(yǔ)法來使用這套工具蜒简。

從常見的 CMS Odoo

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

哪里是我的 header.php 文件?

這通常是從一個(gè)用 WordPress 或 Joomla 來到 Odoo 首次工作的網(wǎng)頁(yè)設(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)該是簡(jiǎn)單的（和強(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í)際上是延長(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卜范。以前從未使用過 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)格罢绽。

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

片段 (或 building-blocks)

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

頁(yè)面

這些都是正常的網(wǎng)頁(yè)蚣常，但他們會(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)造力有無(wú)限的可能性致稀。增加功能是簡(jiǎn)單的冈闭，它的簡(jiǎn)單，為最終用戶提供可定制的選項(xiàng)抖单。

Odoo 的 XML 文件萎攒，概述

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

[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  ??## YOUR CODE HERE
</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í)按鈕在模塊的頁(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代碼跛蛋。

重要
使用雙下劃線開頭兩在 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)建此衅。

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 種元素的視覺效果，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>

</odoo>

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

第一個(gè) XPath 將添加 ID my_header 的頭蒜焊。如果你想目標(biāo)的 CSS 規(guī)則倒信，元和避免這些影響網(wǎng)頁(yè)上的其他內(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)站的每一頁(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)記。在 <odoo> 創(chuàng)建一個(gè) <template> 標(biāo)簽呆贿，設(shè)置頁(yè)面的屬性為 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>

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

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

<!-- === 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)域你喜歡放在頁(yè)面的任何地方棵癣。

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

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

更新你的主題

非常好夺衍，我們的服務(wù)頁(yè)面已經(jīng)準(zhǔn)備好了狈谊，您可以通過導(dǎo)航來訪問它 /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ù)你的需要來代替它的價(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 頁(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 的屬性來實(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è)面片段端考。這段代碼將顯示三推薦將通過網(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] "

是用來綁定自定義 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 然后更新你的主題。

把我們的片段到繪圖頁(yè)上比勉，你會(huì)注意到我們的新選項(xiàng)被自動(dòng)添加到自定義菜單劳较。檢查頁(yè)面，您還將注意到浩聋，該類將應(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)行簡(jiǎ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({
        onFocus: function() {
            alert("On focus!");
        }
    })
})();

你會(huì)注意到唆阿，我們使用的方法稱為 onFocus 觸發(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)入頁(yè)面碧磅。你現(xiàn)在應(yīng)該看到 JavaScript 警告我們綁在 onFocus 事件。如果你關(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è)按鈕來替換它。

媒體

<span class=”fa” />

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

<img />

一旦點(diǎn)擊业簿，圖像庫(kù)將打開瘤礁，你可以替換圖像。這種元素的轉(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)容無(wú)論大小矾湃。

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

[圖片上傳失敗...(image-c586e3-1514260364045)]

壞的

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

[圖片上傳失敗...(image-718656-1514260364045)]

好的

使用符合列高度的背景圖像途戒，發(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)容分段久信。它可以用來分割 <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>

描述你的頁(yè)面

定義關(guān)鍵詞

你應(yīng)該使用適當(dāng)?shù)娜肜海嚓P(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)酥诽，問一個(gè)問題或承諾的東西。

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