大家好，
我们在odoo 编程的时候，常常遇到，需要自定义 snippets 的情况。也就是，原生的拖拽模板不够用，需要我们自己添加一些拖拽模板。
这里，我们就主要说说，如何通过一些简单的方法，添加自定义拖拽模板。
首先，我们来说说我们希望达到的效果：就是希望可以通过拖拽添加如下 References 界面。
步骤一：
与所有新建模块的步骤一样，首先需要创建一个新的模块并正确地配置 manifest.py 并将添加 website 成为 manifest.py 的依赖。
# The website module has to be installed and is needed to add a building block
depends': ['website'],
步骤二：
我们需要在 views 文件夹下面，创建一个xml 文件，并将其命名为 snippets.xml。这个文件夹下，我们就会添加我们的核心构建代码，用来构建我们的网页编辑器模块。
步骤三：
我们需要通过xml 文件，来构建我们的拖拽展示模板。我们将所有的拖拽文件及内容都编写进入 div 容器内。这样一来，我们可以应用大量的 bootstrap类。
<!-- 这条记录，会创建基础构建块及其布局 -->
<template id="s_title_references" name="References with title">
<section class="s_references bg-gray-lighter">
<div class="container">
<div class="row">
<h3>
<center>Our references</center>
</h3>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16">
<img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive "
alt="Demo Logo 1"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16">
<img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive "
alt="Demo Logo 2"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16">
<img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive "
alt="Demo Logo 3"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16">
<img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive "
alt="Demo Logo 4"/>
</div>
<!-- 你可以通过调用自己的模块并写上到图片地址来调用相关资源-->
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
<img src="/website_snippet_demo/static/src/image/website.s_reference_demo_image_6" class="img img-responsive "
alt="Demo Logo 6"/>
</div>
-->
</div>
</div>
</section>
</template>
步骤四：
让我们在我们的编辑器上添加预览视图，这样我们就可以很方便地找到我们希望看到的模板。
如何做呢？
最简单的方式是，继承website.snippets 记录，并在xpath 中添加 ‘snippet_structure’的id，这里将是我们编辑器的核心代码。
<!-- 这条记录，会创建一个预览视图于构建视图左侧目录上，您可以在那里选择您需要的样式 -->
<template id="add_title_references_to_bar" inherit_id="website.snippets" name="Place into building blocks bar">
<xpath expr="//div[@id='snippet_structure']" position="inside">
<div class="o_panel_body">
<t t-snippet="website_snippet_demo.s_title_references"
t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
</div>
</xpath>
</template>
这里，需要说明一下，我们的机制是通过继承原生的’website.snippets’ 记录来保存所有含有snippets 的链接。然后，我们通过给 ‘snippet_structure’ 添加xpath 的方式，让odoo知道，我们希望在odoo 中添加一个新的snippet 预览。最后，将manifest.py 文件，保存至系统中。
# always loaded
'data': [
# Load the snippets (building block code) when installing
'views/snippets.xml',
]
**步骤五：
**
安装咋们刚设计的snippet 工具，然后进行测试。
谢谢！
我们将在接下来的文章中，讲到如何在odoo 系统中添加自己的工作流引擎。
