odoo 主题中怎么添加多个代码块 (snippets)

Snippets 是 odoo 中用来保存与制作静态代码块的页面，这个代码块可通过拖拽的形式加载到页面上，通过继承website.snippets实现。

使用 xml 页面模板，编写 odoo 结构代码：

<?xml version='1.0' encoding='utf-8'?>
<odoo>
...
</odoo>

Snippets 代码块在编辑时，需要注意以下几点，避免踩坑：

1. 每个 template 标签必须要添加 id ，否则在安装主题时会报错
2. 每个代码块使用 xpath 注册，通过添加属性 t-snippet 值实现，t-snippet 是 XML 的 ID 值。t-thumbnail 属性可以展示代码块的缩略图，缩略图图片地址以当前主题为路径：/主题目录名称/static/src/img/cur-form.jpg
3. website.snippets 模板包含了所有的主题的静态代码块，所有新加的代码块需要使用 inherit_id 继承它

下面为代码块添加demo，供参考。

步骤1.  注册代码块片段

<?xml version='1.0' encoding='utf-8'?>
<odoo>
    <template id="tabsBar" inherit_id="website.snippets" name="Tabs Text Img">
        # 通过 expr="//div[@id='snippet_structure']" 可以看到当前 3 个代码块是添加在 structure 中
        # 继承模模块 inherit_id="website.snippets"
        <xpath expr="//div[@id='snippet_structure']" position="inside">
            <div class="o_panel_body">
               #  3 个缩略图代表 3 个代码块
                <t t-snippet="theme_secu.cur_tabs" t-thumbnail="/theme_secu/static/src/img/cur-tabs.jpg" />
                <t t-snippet="theme_secu.cur_form" string="Cur Form" t-thumbnail="/theme_secu/static/src/img/cur-form.jpg"/>
                <t t-snippet="theme_secu.cur_smartHome" string="Cur SmartHome" t-thumbnail="/theme_secu/static/src/img/cur-home.jpg"/>
            </div>
        </xpath>
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/theme_secu/static/src/js/home_smart.js" />
        </xpath>
    </template>
<odoo>

在 步骤1 中，需要注意以下几点：

1. 继承 website.snippets
2. 定义 template id
3. 定义自定义代码块显示的位置 structure
4. 添加代码块的缩略图 t-thumbnail ，以当前主题目录为当前路径
5. 定义 t-snippet 的 id 值，t-snippet id 值对应不同的代码块，名称格式为：主题目录名称.对应代码块 id

步骤2. 在views/snippets.xml添加QWeb模板

# 注意 template id 与 section class 名称一致，template name 为 代码块的名称

1.cur_tabs
<template id="cur_tabs" name="Cur Tabs">
        <section class="cur_tabs">
            <div class="container">
                <div class="row s_col_no_bgcolor">
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 pt48 pb48">
                        <div class="card">
                                ... html 结构 ...
                        </div>
                    </div>
                </div>
            </div>
        </section>
</template>

2.cur_form
    <template id="cur_form" name="Cur Form">
        <section class="cur_form">
            <div class="container">
                <div class="row s_col_no_bgcolor">
                      ... html 结构 ...
                </div>
            </div>
        </section>
    </template>

3.  cur_smartHome
<template id="cur_smartHome">
        <section class="cur_smartHome">
            <div class="container">
                <div class="row s_col_no_bgcolor">
                       ... html 结构 ...
                </div>
            </div>
        </section>
</template>

在步骤2中，需要注意 2 点：

1. 注意 template id 与 section class 名称一致，必须

2. template name 为代码块的名称，必须

3. 显示效果为：

 

 

更新主题后，就可以看到已经添加的代码块。