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