Odoo主题创建或扩展


初次使用 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 方法

Windows使用NSSM将任意exe封装为服务