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

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

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

主題教程

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

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

image

警告
本教程需要安裝Odoo V9.0和主題支持引擎（website_less）模塊.
https://www.odoo.com/apps/9.0/website_less/

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

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

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

從常見的CMS Odoo

Note
如果你總是以同樣的方式思考和工作鹃栽，你可能會得到相同的結(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ī)范孝扛。之后，你要寫你的代碼在一個<data> 標(biāo)簽幽崩，放進一個</openerp> 標(biāo)簽苦始。

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

幾乎每一個元素和選項，你創(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文件進行更改的每一次。

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

image

image

創(chuàng)建主題模塊

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

main folder

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

__openerp__.py

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

__init__.py

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

views 和 static 文件夾

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

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

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

編輯 __openerp__.py

打開 __openerp__.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)建盼玄。

application: True 是強制性的.

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)標(biāo)題

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

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

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

  </data>
</openerp>

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

第一個 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文件的列表圃庭。要做到這一點，編輯你的__openerp__.py 文件這樣

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

更新你的主題

image

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

image

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

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

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

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

頁面標(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" ?>
<openerp>
<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>
</openerp>

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

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

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

更新你的主題

image

非常好风罩，我們的服務(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>

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

image

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.less 顺饮，并將其放置在一個叫做 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 href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/>
    </xpath>
</template>

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

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

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

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

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

更新你的主題

image

我們的小文件現(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-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)特定元素。這意味著壶愤，片段會出現(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>
        <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 添加選項后国章，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 到 __openerp__.py 然后更新你的主題敦迄。

image

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

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

.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 = openerp.website;
    website.openerp_website = {};
})();

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

(function() {
    'use strict';
    var website = openerp.website;
    website.openerp_website = {};

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

你會注意到滓玖，我們使用的方法稱為on_focus觸發(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>

更新你的主題

image

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

編輯參考指南

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

布局

<section />

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

.row > .col-md-*

任何媒介引導(dǎo)柱直接下降從盒使。行元素，將由出版商可調(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)。

image

壞的

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

[圖片上傳失敗...(image-587654-1614414219523)]

好的

使用符合列高度的背景圖像镐确，發(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)題和說明是獨一無二的蜒秤。