Odoo12 之主题创建或扩展

怼烎@ 2023-06-05 05:59 15阅读 0赞

初次使用 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 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 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`替换为您主题的主目录名称。

参数说明：

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标记。

<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 组成：

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

转载于:https://www.cnblogs.com/baiyygynui/p/11414273.html