Odoo開發文檔-教程-主題教程

更多Odoo專題教程已轉移至：https://www.zhihu.com/people/suodoo

Odoo崇尚自由，基於自身需求，設計者擁有更長足的自由，而用戶擁有任意定製的自由。

準備好建立您本身的主題了嗎？好的，這裏是一些開始前您必需要了解的內容。這個教程是建立一個Odoo主題的嚮導。

 

給網頁設計者的介紹

若是您是一個第一次使用Odoo的網頁設計者，您來對地方了。這個介紹將概述Odoo主題的基本建立。

Odoo團隊已經建立了一個強大和易用的框架。不須要了解特殊的語法就可使用這套工具。

從經常使用的CMS到Odoo

若是您老是使用同一種方式思考和工做，您可能會獲得同一種結果。若是您想獲得全新的結果，那麼請嘗試一種不一樣的方法。

個人header.php文件在哪裏？

這是一個習慣於使用Wordpress或者Joomla的網頁設計者第一次轉到Odoo時一般會問的問題。

 

 

實際上，當使用常規的CMS時，爲了建立一個您網站的基本框架，您須要對幾個文件進行編碼（例如header.php, page.php, post.php等等）。在那些系統中，這些基本框架做爲設計的基礎，您必須隨着時間推移來更新，以確保與您CMS的兼容性。所以，即便您花了數小時對文件進行編碼，尚未開始真正的設計。

這些在建立Odoo主題中並不須要。

咱們認爲主題的設計應該是簡單（並且強大）的。當咱們建立網站構建器時，咱們決定從頭開始，而不是依賴於已有的內容。這個方式給予咱們更大的自由來專一於對設計者更重要的東西：樣式、內容和它們背後的邏輯。再也不爲技術層面的東西糾結和掙扎。

 

Odoo默認的主題結構

 

Odoo從一個默認的主題結構而來。它是一個提供了最小化結構和佈局的「主題」。當您建立了一個新的主題，您實際上已經擴展了它。確實，它老是在您的設置中啓用，除了您不須要建立和維護它以外，它的確很像咱們上面提到的CMS的基本結構。它老是隨着您的Odoo安裝和自動更新，由於它包含在網站構建器模塊中，全部東西都按默認平滑的集成了。

所以，您徹底能夠自由的專一於設計，這個框架提供了集成和功能的工做。

 

主要特性：

• 頁面、博客和電商的基本佈局
• 網站構建器集成
• 基本區塊
• 自動Less/Sass 編譯
• 自動Js和CSS最小化和組合

主要技術：

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

 

「模塊化」思想

Odoo主題不是一個包含了HTML或者PHP文件的目錄，它是一個用XML編寫的模塊化框架。歷來沒有使用過XML文件？別擔憂，學完教程以後，您將能夠只使用基本的HTML知識來建立您的第一個主題。

使用經典的網頁設計流程，您一般會對總體網頁的佈局進行編碼。其結果是一個「靜態的」網頁。您固然能夠更新內容，可是您的客戶會須要您作更基礎的修改。

爲Odoo建立主題是一個徹底的視角的改變。替代爲一個頁面定義完整的佈局，您能夠建立區塊，讓用戶選擇「拖拽」區塊元素，本身建立頁面的佈局。咱們把之稱爲模塊化設計。

把一個Odoo主題想象爲一個您要建立的元素、選項、樣式的「列表」。做爲一個設計者，您的目標是樣式化這些元素，來達到一個完美的效果，無論最終用戶會把它們放置到任何位置。

讓咱們來看看咱們的「列表」元素：

區塊（或者構建區塊） 一段HTML代碼。用戶可使用咱們內建的網站構建界面拖拽，修改和組合它們。您能夠爲每一個區塊定義選項和樣式的集合。用戶能夠根據須要從中選擇。	頁面 這些是普通的網頁頁面，它們除了能夠被最終用戶編輯，也能夠定義一個空的區域，讓用戶能夠拖拽區塊「填充」到其中。
樣式 樣式使用標準CSS文件（或者Less/Sass）來定義。您能夠定義一個默認或者可選的樣式。默認樣式在您的主體中老是有效，可選樣式能夠由用戶啓用和禁用。	功能 感謝Odoo的模塊化機制，全部內容均可以作更多的自定義。這意味着您的創造力會有無限的可能。添加功能很是方便，向最終用戶提供自定義選項也很是簡單。

 

 

Odoo的XML文件概覽

任何Odoo的XML文件始於一個編碼的規範。以後，您必須在<odoo>標籤中編寫您的代碼。

1 [XML]
2 <?xml version="1.0" encoding="utf-8" ?>
3 <odoo>
4  
5     ## YOUR CODE HERE
6  
7 </odoo>

 

您建立的幾乎全部的元素和選項必須放置在一個<template> 標籤中，例如這個例子中：

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

 

重要

不要誤解了template 的含義。Template標籤只定義了一段HTML代碼或者選項，但它並不須要和一個可見的元素排列重合。

前面的代碼定義了一個標題，但它不會顯示在任何地方，由於template 沒有關聯Odoo默認結構的任何部分。爲此您可使用xpath, qWeb或者二者的組合。

繼續閱讀教程學習如何使用您本身的代碼來正確的擴展它。

更新您的主題

由於XML文件只在安裝主題時加載，每次修改XML文件時您將須要強制從新載入。

爲此，請點擊模塊頁面中的升級按鈕。

 

 

 

 

建立一個主題模塊

Odoo的主題和模塊同樣打包。即便您爲公司或者客戶設計一個很是簡單的網站，您也須要和Odoo模塊同樣打包主題。

main folder

建立目錄並按此方式命名：theme_ 後面跟着您主題的名稱。

__manifest__.py

建立一個空的文檔並在您的目錄中保存爲__manifest__.py。它將包含您主題的配置信息。

__init__.py

建立另一個空文件，命名爲__init__.py。它是一個必須的系統文件。建立並將它留空。

views 和static 目錄

在主目錄中建立它們。在views 中您能夠放置定義您的區塊的XML文件，您的網頁和參數等。static 目錄是您樣式、圖片和自定義js代碼的正確位置。

重要

在odoo和init文件名的開始和結束位置使用兩個下劃線字符。

最後的結果應該是這個樣子：

 

 

編輯__manifest__.py

打開您建立的__manifest__.py 並複製/粘貼下面的內容：

 1 {
 2   'name': 'Tutorial theme',
 3   'description': 'A description for your theme.',
 4   'version': '1.0',
 5   'author': 'Your name',
 6  
 7   'data': [
 8   ],
 9   'category': 'Theme/Creative',
10   'depends': ['website'],
11 }

 

替換第一個屬性值爲您喜歡的任何值。這些值將用於在Odoo的後臺標識您的新主題。

data 屬性包含XML文件列表，如今它是空的，但咱們將會添加建立的全部新文件。

category 定義您模塊的分類（老是爲「Theme」）而且跟着下劃線和子分類。您可使用一個Odoo應用類別列表中的子分類（https://www.odoo.com/apps/themes）。

depends 指定了咱們主題須要依賴來正常工做的模塊。對於咱們教程的主題，咱們只須要依賴website。若是您須要博客或者電商功能，您須要將它們都包含。

1 ...
2 'depends':['website','website_blog','sale'],
3 ...

 

安裝您的主題

要安裝您的主題，您只須要把主題目錄放置到Odoo安裝的插件目錄中便可。

以後，瀏覽設置頁面，查找您的主題並點擊安裝按鈕。

 

Odoo頁面的結構

一個Odoo頁面是兩種元素組合的可視化結果，跨頁（cross-pages）和獨立（unique）元素。按默認，Odoo提供了一個頁眉（Header） 和一個頁腳（Footer） (cross-pages) ，以及一個使得您的頁面內容惟一的獨立（unique ）的主元素。

跨頁元素在每一個頁面中相同。獨立元素只關聯到一個特定的頁面。

 

 

要檢查默認佈局，只需使用網站構建器建立一個新頁面。點擊內容>新頁面並添加一個頁面名稱。使用瀏覽器檢查您的頁面。

1 <div id=「wrapwrap」>
2   <header/>
3   <main/>
4   <footer/>
5 </div>

 

擴展默認頁眉

默認的，Odoo的頁眉包含一個響應式的導航菜單以及公司的Logo。您能夠方便的添加新元素或者格式化現有的元素。

爲此，在您的views目錄中建立一個layout.xml 文件並添加默認的Odoo XML標記。

1 <?xml version="1.0" encoding="utf-8" ?>
2 <odoo>
3  
4  
5  
6 </odoo>

 

在<odoo>標籤中建立一個新的模板，複製-粘貼下面的代碼。

 1 <!-- Customize header  -->
 2 <template id="custom_header" inherit_id="website.layout" name="Custom Header">
 3  
 4   <!-- Assign an id  -->
 5   <xpath expr="//div[@id='wrapwrap']/header" position="attributes">
 6     <attribute name="id">my_header</attribute>
 7   </xpath>
 8  
 9   <!-- Add an element after the top menu  -->
10   <xpath expr="//div[@id='wrapwrap']/header/div" position="after">
11     <div class="container">
12       <div class="alert alert-info mt16" role="alert">
13         <strong>Welcome</strong> in our website!
14       </div>
15     </div>
16   </xpath>
17 </template>

 

第一個xpath 會把id my_header 添加到頁眉中。若是您但願指定CSS規則到該元素並避免影響頁面的其餘內容，這是最好的作法。

警告

替換默認元素屬性時要仔細。您的主題會擴展默認的主題，您的修改會在將來任何Odoo的更新中優先處理。

第二個xpath 會在導航菜單以後添加一個歡迎消息。

最後一步是將layout.xml添加到主題所使用的XML文件的列表中。爲此，將您的__manifest__.py 文件編輯以下

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

 

更新您的主題

 

好的！咱們成功地把一個id添加到了頁眉中，以及在導航菜單以後添加了一個元素。這些更改將會應用到網站的每個頁面。

 

 

 

 

建立一個特定的頁面佈局

想象一下咱們要爲一個服務頁面建立一個特定的佈局。在此頁面中，咱們須要添加一個服務的列表到頂部，並使得客戶可使用區塊來設置頁面佈局的其餘內容。

在您的views 目錄中，建立一個pages.xml 文件並添加默認的Odoo標籤。在<odoo>中建立一個<template>標籤，設置page屬性爲True，並添加您的代碼到其中。

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <odoo>
 3  
 4     <!-- === Services Page === -->
 5     <template name="Services page" id="website.services" page="True">
 6       <h1>Our Services</h1>
 7         <ul class="services">
 8           <li>Cloud Hosting</li>
 9           <li>Support</li>
10           <li>Unlimited space</li>
11         </ul>
12       </template>
13  
14   </odoo>

 

頁面的標題會是模板的ID。在咱們的例子中是Services (from website.services)

咱們成功地建立了一個新的頁面佈局，但咱們尚未告訴系統如何使用它。爲此，咱們可使用QWeb。將HTML代碼包裹到一個<t>標籤中，例以下面的例子。

 1 <!-- === Services Page === -->
 2 <template name="Services page" id="website.services" page="True">
 3   <t t-call="website.layout">
 4     <div id="wrap">
 5       <div class="container">
 6         <h1>Our Services</h1>
 7         <ul class="services">
 8           <li>Cloud Hosting</li>
 9           <li>Support</li>
10           <li>Unlimited space</li>
11         </ul>
12       </div>
13     </div>
14   </t>
15 </template>

 

使用 <t t-call="website.layout"> 咱們將使用咱們的代碼來擴展Odoo默認的頁面佈局。

如你所見，咱們打包代碼到了兩個<div>中，一個使用ID wrap，另外一個使用class container。這樣是爲了提供一個最小化的佈局。

下一步是添加一個空的區域，用戶能夠在裏面添加區塊。爲此，只須要在div#wrap元素關閉前的位置建立一個包含class爲oe_structure的div便可。

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <odoo>
 3  
 4 <!-- === Services Page === -->
 5 <template name="Services page" id="website.services" page="True">
 6   <t t-call="website.layout">
 7    <div id="wrap">
 8      <div class="container">
 9        <h1>Our Services</h1>
10        <ul class="services">
11          <li>Cloud Hosting</li>
12          <li>Support</li>
13          <li>Unlimited space</li>
14        </ul>
15        <!-- === Snippets' area === -->
16        <div class="oe_structure"/>
17      </div>
18    </div>
19   </t>
20 </template>
21  
22 </odoo>

 

您能夠建立任意多的區塊區域，放在您頁面中的任意位置。

咱們的頁面差很少準備好了。如今咱們要作的是添加pages.xml到咱們的__manifest__.py文件中

1 'data':[
2   'views/layout.xml',
3   'views/pages.xml'
4 ],

 

更新您的主題

 

好的，咱們的服務頁面已經好了，您能夠經過/yourwebsite/page/services瀏覽它。

您會發現，區塊能夠拖放到咱們的服務列表下方。

 

 

如今咱們返回pages.xml 並在咱們的頁面模板後面複製/粘貼下面的代碼。

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

 

這段代碼會添加一個連接到主菜單中。

 

 

順序屬性定義了主菜單中連接的位置。在咱們的例子中，咱們設置該值爲99，即將它放到了最後的位置。若是您想把它放到特定位置，您能夠根據須要替換該值。

檢查website 模塊中的data.xml文件您能夠看到，首頁連接默認被設置爲10 ，而聯繫咱們頁面設置爲60。假如咱們但願把連接放到中間，您能夠把連接的順序改成40。

 

添加樣式

Odoo默認包含Bootstrap。這意味着您能夠利用Bootstrap的全部樣式和佈局功能。

固然若是您但願提供獨立元素的設計，Bootstrap是不夠的。下面的步驟將引導您如何把自定義樣式添加到主題中。最後的結果可能不會很漂亮，但會提供給您構建本身樣式所須要的足夠的信息。

讓咱們從建立一個名爲style.less 的空文件開始，把它放在您的static目錄的less目錄中。下面的規則會樣式化咱們的服務頁面。複製和粘貼它，而後保存。

 1 .services{
 2     background: #EAEAEA;
 3     padding: 1em;
 4     margin: 2em03em;
 5     li{
 6         display: block;
 7         position: relative;
 8         background-color: #16a085;
 9         color: #FFF;
10         padding: 2em;
11         text-align: center;
12         margin-bottom: 1em;
13         font-size: 1.5em;
14     }
15 }

 

咱們的文件準備好了，但它尚未包含到咱們的主題中。

讓咱們瀏覽view目錄並建立一個名爲assets.xml的XML文件。添加默認的XML標記並複製/粘貼下面的代碼。記得把 theme folder替換爲您主題的主目錄名稱。

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

 

咱們剛建立了一個在咱們的less文件中指定的模板。您能夠看到，咱們的模板包含一個特殊的屬性，名爲inherit_id。這個屬性告訴Odoo咱們的模板指向另一個要進行操做的模板。

在本例中，咱們指向assets_frontend 模板，它位於website 模塊。assets_frontend 指定了網站構建器加載的資產列表，咱們的目標是把咱們的less文件添加到列表中。

爲此可使用包含屬性expr="link[last()]" 和position="after"的xpath 實現，它的意思是「把個人樣式文件放到資產列表中最後一個連接的後面」。

放到該位置後，咱們確保該文件會在最後被加載並得到優先權。

最後把assets.xml放到您的__manifest__.py文件中。

更新您的主題

 

咱們的less文件如今包含在咱們的主題中，它將會被自動編譯，最小化以及與全部Odoo資產組合。

 

 

 

建立區塊

由於區塊被用戶用於進行頁面的設計和佈局，它們是您的設計中最重要的元素。讓咱們爲服務頁面建立一個區塊。該區塊將顯示三個推薦，它們能夠經過最終用戶使用網站構建器的用戶界面進行編輯。瀏覽到view目錄並建立一個名爲snippets.xml的XML文件。添加默認的Odoo XML標記並複製/粘貼下面的代碼。該模板包含由區塊顯示的HTML標記。

 1 <template id="snippet_testimonial" name="Testimonial snippet">
 2   <section class="snippet_testimonial">
 3     <div class="container text-center">
 4       <div class="row">
 5         <div class="col-md-4">
 6           <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
 7           <h3>Client Name</h3>
 8           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 9         </div>
10         <div class="col-md-4">
11           <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
12           <h3>Client Name</h3>
13           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
14         </div>
15         <div class="col-md-4">
16           <img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
17           <h3>Client Name</h3>
18           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
19         </div>
20       </div>
21     </div>
22   </section>
23 </template>

 

如你所見，咱們在咱們的三個欄位上使用了默認的Bootstrap樣式。它不僅關於佈局，這些樣式會由網站構建器觸發並使得用戶能夠對它們進行縮放的操做。

以前的代碼會建立區塊的內容，但咱們仍然須要把它放置到編輯條中，以便用戶能夠把它拖放到頁面當中。複製/粘貼下面的代碼到您的snippets.xml文件中。

1 <template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
2   <xpath expr="//div[@id='snippet_content']/div[@class='o_panel_body']" position="inside">
3     <t t-snippet="theme_tutorial.snippet_testimonial"
4        t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
5   </xpath>
6 </template>

 

 

使用 xpath，咱們經過id snippet_structure定位一個 特殊的元素。這意味着區塊會顯示在結構頁籤中。若是您想更改目標頁籤，您只須要在xpath表達式中替換id的值。

 

頁簽名稱	Xpath表達式
Structure	//div[@id='snippet_structure']
Content	//div[@id='snippet_content']
Feature	//div[@id='snippet_feature']
Effect	//div[@id='snippet_effect']

標籤 <t> 會調用咱們的區塊模板，並分配一個縮略圖，放到img目錄中。您如今能夠從區塊條中拖動區塊，把它放到頁面中查看結果。

 

 

 

區塊選項

選項容許發佈者使用網站構建器用戶界面來編輯一個區塊的外觀。使用網站構建器功能，您能夠方便的建立區塊選項並自動的把它們添加到用戶界面中。

選項組屬性

選項被包裹在組中。組中包括一些屬性，它們定義了包含的選項如何與用戶界面進行交互。

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

綁定全部包含的選項到組中的一個特殊元素。

data-js=" custom method name "

用於綁定自定義Javascript方法。

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

定義能夠將區塊放置到其中的元素列表。

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

定義能夠將元素放置到其相鄰位置的元素列表。

默認選項方法

將標準CSS樣式應用到區塊中的選項。基於您選擇的方法，用戶界面會具備不一樣的行爲。

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

更多在相同組中的data-select-class定義了一個類的列表，用戶能夠選擇進行應用。一次只能啓用一個選項。

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

選項data-toggle-class 用於從列表應用一個或者多個CSS類到區塊中，能夠當即應用多個選擇。

讓咱們演示一下默認選項如何在基本示例中使用。

咱們從在咱們的views目錄中添加一個新文件開始—把它命名爲options.xml 並添加默認的Odoo標記。建立一個模板複製/粘貼下面的內容

 1 <template id="snippet_testimonial_opt" name="Snippet Testimonial Options"i nherit_id="website.snippet_options">
 2   <xpath expr="//div[@data-js='background']" position="after">
 3     <div data-selector=".snippet_testimonial"><!-- Options group -->
 4       <li class="dropdown-submenu">
 5         <a href="#">Your Option</a>
 6         <ul class="dropdown-menu"><!-- Options list -->
 7           <li data-select-class="opt_shadow"><a>Shadow Images</a></li>
 8           <li data-select-class="opt_grey_bg"><a>Grey Bg</a></li>
 9           <li data-select-class=""><a>None</a></li>
10         </ul>
11       </li>
12     </div>
13   </xpath>
14 </template>

 

以前的模板會繼承默認的snippet_options 模板把咱們的選項添加到background 選項後面（xpath 表達式屬性）。要使用特別的順序放置選項，在website模塊中檢查snippet_options 模板，添加您的選項到但願的位置的前面/後面。

如你所見，咱們在一個div標籤中打包了全部的選項，它會分組咱們的選項，並定位它們到正確的選擇器（data-selector=".snippet_testimonial"）。

要定義選項，咱們把data-select-class 屬性應用到li 元素上。當用戶選擇了一個選項，屬性中包含的class會自動應用到元素上。

由於selectClass 方法拒絕多重選擇，最後一個「empty」選項會把區塊重置爲默認。

添加options.xml 到__manifest__.py 中並更新您的主題。

 

把咱們的區塊放置到頁面上，您會注意到咱們的新選項已經自動被添加到自定義菜單中了。檢查頁面，您會注意到選擇一個選項時class會被應用到該元素上。

 

 

咱們來建立一些CSS規則來爲選項提供一個可視化的反饋。打開style.less 文件並添加下面的內容

 1 .snippet_testimonial{
 2   border: 1px solid #EAEAEA;
 3   padding:20px;
 4 }
 5  
 6 // These lines will add a default style for our snippet. Now let's create our custom rules for the options.
 7  
 8 .snippet_testimonial{
 9   border: 1px solid #EAEAEA;
10   padding: 20px;
11  
12   &.opt_shadowimg{
13     box-shadow: 02px 5px rgba(51,51,51,0.4);
14   }
15  
16   &.opt_grey_bg{
17     border:none;
18     background-color:#EAEAEA;
19   }
20 }

 

 

好極了！咱們已經爲區塊成功建立了選項。

發佈者在任意時間點擊一個選項時，系統會添加data-select-class 屬性中指定的class。

經過使用data-toggle-class 替換data-select-class，您將能夠同時選擇更多的class。

Javascript選項

若是您須要執行簡單的樣式更改，data-select-class 和data-toggle-class 是頗有用的。但若是您的區塊須要更多定製呢？

如咱們以前所說，data-js 屬性可被分配到一個選項組中，以便定義一個自定義選項。讓咱們爲推薦區塊建立一個自定義選項，經過添加一個data-js屬性到以前所建立的選項組的div中。

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

 

好了。從如今開始，網站構建器會在發佈者每次進入編輯模式時查找一個 snippet_testimonial_options方法。

讓咱們更進一步，建立一個javascript文件並命名爲tutorial_editor.js，把它放到static 目錄中。複製/粘貼下面的代碼

1 (function(){
2     'use strict';
3     var website = odoo.website;
4     website.odoo_website = {};
5 })();

 

好極了，咱們成功地建立了javascript編輯器文件。這個文件會包含全部編輯模式中咱們的區塊會使用的javascript方法。讓咱們使用以前建立的 snippet_testimonial_options 方法來爲推薦模塊建立一個新的方法。

 1 (function(){
 2     'use strict';
 3     varwebsite = odoo.website;
 4     website.odoo_website = {};
 5  
 6     website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
 7         onFocus: function(){
 8             alert("On focus!");
 9         }
10     })
11 })();

 

您會注意到，咱們使用一個名爲 onFocus 的方法觸發咱們的方法。網站構建器提供了幾個能夠用於觸發您的自定義方法的事件。

事件	描述
start	當發佈者在一個編輯會話中第一次選擇區塊，或者當區塊被拖放到頁面中時觸發。
onFocus	每次用戶選擇區塊，或者當區塊被拖放到頁面中時觸發。
onBlur	當一個區塊丟失焦點時發生此事件。
onClone	區塊剛被複制完成時觸發。
onRemove	區塊被移除前發生。
onBuilt	區塊被拖放到放置區後觸發。此事件被觸發時，內容已經被插入頁面。
cleanForSave	發佈者保存頁面以前觸發。

讓咱們把新javascript文件添加到編輯器資產列表中。返回assets.xml 並添加一個與以前相似的一個模板。此次咱們須要繼承 assets_editor，而不是assets_frontend。

1 <template id="my_js" inherit_id="website.assets_editor" name="My Js">
2   <xpathexpr="script[last()]" position="after">
3     <script type="text/javascript" src="/theme_tutorial/static/src/js/tutorial_editor.js"/>
4   </xpath>
5 </template>

 

更新您的主題

 

讓咱們測試新的javascript方法。在編輯模式中輸入並放置到頁面中。您如今應該看到咱們綁定在onFocus事件上的一個javascript警告。若是你把它關掉，而後在區塊外面點擊鼠標，並再次點擊它，事件會再次觸發。

 

 

 

編輯參考嚮導

基本上，全部頁面中的元素均可以被髮布者編輯。除此以外，一些元素類型和CSS樣式在編輯時也能夠觸發特定的網站構建器功能。

佈局

<section />

任何section 元素能夠像內容區塊同樣被編輯。發佈者能夠移動或複製它。也能夠設置一個背景圖片或者顏色。Section是任何區塊的標準主容器。

.row > .col-md-*

任何中型的bootstrap 欄位直接按一個.row元素降序排列，發佈者能夠對它調整大小。

contenteditable="False"

這個屬性能夠阻止對元素和全部它的子項的編輯。

contenteditable="True"

把它應用到一個contenteditable="False"元素內部的元素上，來建立一個例外，並使得該元素和它的子項可編輯。

<a href=」#」 />

在編輯模式中，任何連接均可以被編輯和設置樣式。可以使用「連接模態」，它也可使用一個按鈕替代。

媒體

<span class=」fa」 />

象形元素。編輯此元素會打開象形元素庫來替換圖標。也可使用CSS對元素變形。

<img />

點擊以後能夠打開圖片庫，您能夠替換圖片。這種元素類型也可使用變形。

1 <div class="media_iframe_video" data-src="[your url]">
2   <div class="css_editable_mode_display"/>
3   <div class="media_iframe_video_size"/>
4   <iframe src="[your url]"/>
5 </div>

 

這個HTML結構會建立一個發佈者能夠編輯的 <iframe>元素。

 

SEO最佳實踐

方便內容的插入

現代的搜索引擎算法愈來愈專一於內容，它意味着對於關鍵字飽和的關注會變少，更多關注於內容是否與關鍵字實質性的相關。

由於內容對於SEO如此重要，您能夠把精力集中在向發佈者提供方便插入內容的工具上。您的區塊包含「內容響應」是十分重要的，意味着它們能夠適配發布者的內容，而無論它的大小。

讓咱們看一看這個經典的兩個欄位區塊的示例，使用兩種方式來實現。

 

差

適用固定的圖片，發佈者會被迫限制文字來聽從佈局。

 

 

 

 

 

 

 

好

使用適配欄位高度的背景圖片，發佈者能夠自由的添加內容，不須要理會圖片的高度。

 

 

 

 

 

 

 

頁面分割

基本上，頁面分割意味着一個頁面被分割爲幾個部分，這些部分被搜索引擎當作獨立的條目來處理。當您設計頁面或者區塊時，您須要肯定使用正確的標籤來方便搜索引擎的檢索。

<article>

指定內容的一個獨立區域。它當中應該是一個具備自身含義的自包含的內容。您能夠在<article> 元素中嵌套其餘的<article>元素，它表示嵌套的元素與外部的 <article> 元素關聯。

<header>

代表一個內容的自包含區域的頁眉區域（一個 <article>）。

<section>

區塊的默認標籤，它指定了內容區域的子區域。它能夠用於把<article> 內容分割爲幾個部分。建議使用標題元素（<h1> – <h6>）來定義section的主題。

<hgroup>

用於包裹標題的區域（<h1> - <h6>）。一個很好的例子是一個在頂部包括了標題和副標題的文章：

1 <hgroup>
2   <h1>Main Title</h1>
3   <h2>Subheading</h2>
4 </hgroup>

 

描述您的頁面

定義關鍵詞

您應該使用合適的、相關的關鍵詞和同義詞。您可使用頂部橫條中內建的「推廣」功能來爲每一個頁面定義關鍵詞。

定義一個標題和描述

使用「推廣」功能定義它們。使用簡短的頁面標題併爲頁面包含主要的關鍵詞短語。好的標題可以使用一個感性的迴應，提問或者事情的承諾。

描述字段，雖然對於搜索引擎級別不重要，但對於獲取用戶的點擊很是重要。這些對於廣告內容是一個機會，並使得搜索的用戶清楚的知道給定的頁面是否包含他們要查找的信息。每一個頁面標題和描述的惟一性是十分重要的。