Odoo12 之主題創建或擴展

初次使用 Odoo 來制作網站，因Odoo自帶代碼塊效果單一，無法滿足當前網站展示效果，需要對當前代碼塊進行添加或擴展。而這個代碼塊是屬於網站中的布局設計這一塊，Odoo 將所有的布局以及邏輯行為，都“模塊化”了。Odoo 創建布局同Html不一樣，是一個完全的視角改變，從視覺上看，創建的布局，可以讓用戶 “拖拽” 到頁面中任意位置並對它進行編輯。Odoo 布局就是一個模塊化的布局，目標就是樣式化這些元素來達到一個比較完美的效果。

Odoo 頁面規范

odoo 始於 XML 規范，所有的代碼都必須在 <odoo></odoo> 標簽內完成

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
 
    ## YOUR CODE
 
</odoo>

創建布局結構，都必須在 <template></template> 標簽內完成，如果當前 template 是網頁，則必須要給當前 template 添加一個 page="True" 的屬性

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

 

注意點

1. template 標簽只是定義了一段 html 代碼
2. template 標簽在沒有和 odoo 建立任何聯系之前，都不會在任何位置顯示
3. 每次修改 XML 文件都會強制重新載入，因為 XML 文件只有安裝主題時才會加載
4. 可以使用 xpath + qweb 來將 template 與 odoo 進行關聯

 

創建一個主題模塊

創建一個主題或是叫創建一個代碼塊，以下文件必不可少：

1. 模塊名稱，必須以 theme_ 開頭
2. 模塊配置信息，__manifest__.py
3. 模塊系統文件，__init__.py 可以為空
4. 模塊的 static（JS / CSS / IMG） 與 views（XML 文件） 目錄

 

編輯__manifest__.py，這些值將在 odoo 的后台中對主題進行標識:

{
  'name': 'Tutorial theme',   //主題名稱
  'description': 'A description for your theme.',    //主題描述
  'version': '1.0',   //主題版本
  'author': 'Your name',   //主題作者
  'data': [
        //包含 XML 文件列表
  ],
  'category': 'Theme/Creative',    //模塊或是主題的分類，（總是為“Theme”）並且跟着下划線和子分類，可以使用一個Odoo應用類別列表中的子分類（https://www.odoo.com/apps/themes）。
  'depends': ['website'],    //指定主題需要依賴的模塊，對於網站中的主題，只需要依賴website，如果需要博客和電商功能，則需要這樣寫：['website','website_blog','sale']
}

 

安裝主題模塊

依照官方文檔，只需要把主題目錄放置到Odoo安裝的插件目錄中即可，Odoo12 的插件目錄為 addons。但是在實際操作中存放我們自己的插件目錄，是不可以直接將插件放入 addons 中的，原因如下：

我們只是增加存放插件（addons）的路徑，並沒有替換之前的插件（addons）路徑。我們得在原有的存放插件文件夾addons同級目錄下新建了另一個存放插件的文件夾myaddons。為什么要新建另一個文件夾myaddons來存放插件呢？因為，之前的文件夾addons下面已經安裝了很多系統自帶的插件，而我們后續會自主開發部分插件和使用第三方插件，是不想把這些插件與系統自有的插件混淆，引起一些不可預估的問題。

新建好 myaddons 后，需要對Odoo server 12重啟，新增插件路徑只有重新 odoo 服務器才能生效。重啟命令如下：

sudo /etc/init.d/odoo restart

重啟之后，新增的存放插件文件夾 myaddons 才會生效！

 

通過自定義的插件文件夾 myaddons。測試安裝一個插件叫“web_responsive”它主要實現一個響應式的效果，即可以方便PC、平板、手機等設備上更加便捷的使用Odoo 12，步驟為：

1. 把插件 web_responsive 放在之前新建好的文件夾myaddons下，並解壓！解壓后可刪除壓縮包。
2. 再登錄odoo 12，轉到“參數設置”下，激活開發者模式。
3. 激活開發者模式之后，轉到“應用”下，點擊“更新本地模塊列表”。
4. 更新完本地模塊列表之后，需要去掉“應用”篩選項，不去掉，安裝的插件“ web_responsive ”不會顯示出來，因為插件太多了。
5. 安裝完成之后，即可使用插件 web_responsive 。

 

創建一個特殊效果的主題模塊

 

按照步驟建立主題

1. 在 views 目錄中，創建一個pages.xml 文件並添加默認的Odoo標簽。
2. 在<odoo>中創建一個<template>標簽，設置 page屬性為 True，並添加代碼到 template 中。
3. 並為 template 添加模板 ID以及模板名稱

• 預覽：

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
 
    <!-- === Template === -->
    <template name="Services page" id="website.services" page="True">

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

</template> </odoo>

　　

如何讓 Odoo 系統使用這個新的主題? 可以使用 QWeb。

1. 將HTML代碼包裹到一個<t>標簽中，例如下面的例子
2. 以下例子的意思是，在 website.services 這個模板中，使用 t-call 調用 website.layout 這個子模板，使 layout 文件作為當前模板的最外層結構
3. 添加 pages.xml 到我們的__manifest__.py文件中

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

 

添加樣式

在當前 views 目錄下新建一個 assets.xml的XML文件，添加默認的XML標記並復制/粘貼下面的代碼。記得把 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>

參數說明：

1.    inherit_id 就是告訴 odoo ，當前 template 在引用另一個 template，當前 template 是引用網站中的 assets_frontend template.

2.    assets_frontend 是網站構建的資產列表，當前的任務是將 style.scss 添加到這個列表中

3.    xpath 的 expr="link[last()]" 和  position="after" 意思是將 style.scss 這個文件添加到資產列表的最后一個鏈接之后

4.    將 assets.xml 添加到當前的 __mainfest__.py 中進行聲明

 

 

更新主題

• 使當前主題在頁面可拖放的區域顯示
• 可以通過/yourwebsite/page/services瀏覽它。

 

創建一個可拖動的主題代碼塊

 

1. 新建一個 snippets.xml 代碼塊文件
2. 將代碼塊放置到可拖動的編輯條中

 

它的目的是可以通過用戶使用網站構建器的用戶界面進行拖拽編輯，到 view 目錄並創建一個名為 snippets.xml 的XML文件。

添加默認的Odoo XML標記並復制/粘貼下面的代碼，該模板包含由區塊顯示的HTML標記。

<template id=" s_text_image" name="Text - Image">

　　<section class="s_text_image pt32 pb32">

　　　　<div class="container">

　　　　　　<div class="row align-items-center">

　　　　　　　　<div class="col-lg-6 pt16 pb16">

　　　　　　　　　　<h2>A Section Subtitle</h2>

　　　　　　　　　　<p>Write one or two paragraphs describing your product or services. <br/>To be successful your content needs to be useful to your readers.</p>

　　　　　　　　　　<p>Start with the customer – find out what they want and give it to them.</p>

　　　　　　　　　　<div class="s_btn text-left pt16 pb16" data-name="Buttons">

　　　　　　　　　　　　<a href="#" class="btn btn-primary">Learn more</a>

　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　　　　　<div class="col-lg-6 pt16 pb16">

　　　　　　　　　　<img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt="Odoo • Text and Image"/>

　　　　　　　　</div>

　　　　　　</div>

　　　　</div>

　　</section>

</template>

 

在當前 snippets.xml 的XML文件 中需要把上面的代碼塊以縮略圖的方式放置到編輯條中，以便用戶可以把它拖放到頁面當中。

復制/粘貼下面的代碼到您的snippets.xml文件中：

<template id="snippets" inherit_id="web_editor.snippets" primary="True">

　　<xpath expr="//div[@id='o_scroll']" position="replace">

　　　　<div id="o_scroll">

　　　　　　//在此滾動區域內顯示多個代碼塊縮略圖

　　　　　　<div id="snippet_structure" class="o_panel">

　　　　　　　　<div class="o_panel_header">

　　　　　　　　　　<i class="fa fa-th-large"/> Structure

　　　　　　　　</div>

　　　　　　　　<div class="o_panel_body">

　　　　　　　　　　//此處為代碼塊縮略圖

　　　　　　　　　　<t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.png"/>

　　　　　　　　　　<t t-snippet="website.s_small_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.png"/>

　　　　　　　　　　<t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.png"/>

　　　　　　　　　　 <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.png"/> //使用代碼塊的 ID 進行關聯

　　　　　　　　　　<t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.png"/>

　　　　　　　　　　<t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png"/>

　　　　　　　　　　<t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.png"/>

　　　　　　　　　　<t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.png"/>

　　　　　　　　　　<t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>

　　　　　　　　　　<t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>

　　　　　　　　　　<t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.png"/>

　　　　　　　　</div>

　　　　　　</div>

　　　　</div>

　　</xpath>

</template>

 

snippets.xml 這個文件，在實際應用中有至少三種 template 組成：

1. 第一個 template 為布局文件，每個 template 含有兩個屬性，分別為： id 與 name，由 name 定義該模板的名稱
2. 第二個 template 為編輯可拖動的代碼塊列表，通過 xpath 的 t 標簽調用第一個 template模板文件，使用 t-snippet 標簽與 布局文件中的 id 進行關聯來定位特定元素。如果要更改目標選項卡，只需替換xpath表達式中的id值即可。
3. 第三個 template 為代碼塊選項，只有一個 id = "snippet_options" 的屬性，選項允許發布者使用網站構建器的UI編輯代碼段的外觀。

 

 

通過示例看一下通過默認代碼塊選項如何在基本示例中使用：

<template id="snippet_options">
    <t t-call="web_editor.snippet_options"/></t>

    //為第一個 template 添加基本選項
    // data-selector 為一個選項組中可以定義多個布局，當前定義 3 個布局
    // data-select-class 定義當前 class=“align-items-start” 在激活后應用到當前的 a 標簽上
    <div data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
        <div class="dropdown-submenu">
            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>
            <div class="dropdown-menu" role="menu">
                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>
                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>
                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>
                <div class="dropdown-divider"/>
                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>
            </div>
        </div>
    </div>
</template>

 

每個人理解的意思不同，我理解選項組對應屬性分別為以下描述：

 

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

將包含在組中的所有選項綁定到特定元素

 

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

用於在當前節點上，綁定的自定義的 css ，當前節點被激活時，自動激活當前的 class

 

data-js=" custom method name "

用於在當前節點上綁定自定義的 js 方法，當前節點被激活時，自動激活當前的節點的 js 方法