Odoo12之主题创建或扩展

coding

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

  

以上是 Odoo12之主题创建或扩展 的全部内容, 来源链接: utcz.com/z/509604.html

回到顶部