Odoo12 之主題建立或擴展

時間 2019-11-06

標籤 odoo12 odoo 主題建立擴展简体版

原文原文鏈接

初次使用 Odoo 來製做網站，因Odoo自帶代碼塊效果單一，沒法知足當前網站展現效果，須要對當前代碼塊進行添加或擴展。而這個代碼塊是屬於網站中的佈局設計這一塊，Odoo 將全部的佈局以及邏輯行爲，都「模塊化」了。Odoo 建立佈局同Html不同，是一個徹底的視角改變，從視覺上看，建立的佈局，可讓用戶「拖拽」到頁面中任意位置並對它進行編輯。Odoo 佈局就是一個模塊化的佈局，目標就是樣式化這些元素來達到一個比較完美的效果。css

Odoo 頁面規範

odoo 始於 XML 規範，全部的代碼都必須在 <odoo></odoo> 標籤內完成html

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

建立佈局結構，都必須在 <template></template> 標籤內完成，若是當前 template 是網頁，則必需要給當前 template 添加一個 page="True" 的屬性web

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

注意點

template 標籤只是定義了一段 html 代碼
template 標籤在沒有和 odoo 創建任何聯繫以前，都不會在任何位置顯示
每次修改 XML 文件都會強制從新載入，由於 XML 文件只有安裝主題時纔會加載
可使用 xpath + qweb 來將 template 與 odoo 進行關聯

建立一個主題模塊

建立一個主題或是叫建立一個代碼塊，如下文件必不可少：服務器

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

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

{
  '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 中的，緣由以下：less

咱們只是增長存放插件（addons）的路徑，並無替換以前的插件（addons）路徑。咱們得在原有的存放插件文件夾addons同級目錄下新建了另外一個存放插件的文件夾myaddons。爲何要新建另外一個文件夾myaddons來存放插件呢？由於，以前的文件夾addons下面已經安裝了不少系統自帶的插件，而咱們後續會自主開發部分插件和使用第三方插件，是不想把這些插件與系統自有的插件混淆，引發一些不可預估的問題。frontend

新建好 myaddons 後，須要對Odoo server 12重啓，新增插件路徑只有從新 odoo 服務器才能生效。重啓命令以下：ide

sudo /etc/init.d/odoo restart

重啓以後，新增的存放插件文件夾 myaddons 纔會生效！模塊化

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

把插件 web_responsive 放在以前新建好的文件夾myaddons下，並解壓！解壓後可刪除壓縮包。
再登陸odoo 12，轉到「參數設置」下，激活開發者模式。
激活開發者模式以後，轉到「應用」下，點擊「更新本地模塊列表」。
更新完本地模塊列表以後，須要去掉「應用」篩選項，不去掉，安裝的插件「 web_responsive 」不會顯示出來，由於插件太多了。
安裝完成以後，便可使用插件 web_responsive 。

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

按照步驟創建主題

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

將HTML代碼包裹到一個<t>標籤中，例以下面的例子
如下例子的意思是，在 website.services 這個模板中，使用 t-call 調用 website.layout 這個子模板，使 layout 文件做爲當前模板的最外層結構
添加 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瀏覽它。

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

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

它的目的是能夠經過用戶使用網站構建器的用戶界面進行拖拽編輯，到 view 目錄並建立一個名爲 snippets.xml 的XML文件。

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

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

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

　　　　　　　　　　</div>

　　　　　　　　</div>

　　</section>

</template>

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

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

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

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

　　　　　　　　</div>

　　　　　　　　　　//此處爲代碼塊縮略圖

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

　　　　　　　　</div>

　　</xpath>

</template>

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

第一個 template 爲佈局文件，每一個 template 含有兩個屬性，分別爲： id 與 name，由 name 定義該模板的名稱
第二個 template 爲編輯可拖動的代碼塊列表，經過 xpath 的 t 標籤調用第一個 template模板文件，使用 t-snippet 標籤與佈局文件中的 id 進行關聯來定位特定元素。若是要更改目標選項卡，只需替換xpath表達式中的id值便可。
第三個 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>