初次使用 Odoo 来制作网站,因Odoo自带代码块效果单一,无法满足当前网站展示效果,需要对当前代码块进行添加或扩展。而这个代码块是属于网站中的布局设计这一块,Odoo 将所有的布局以及逻辑行为,都“模块化”了。Odoo 创建布局同Html不一样,是一个完全的视角改变,从视觉上看,创建的布局,可以让用户 “拖拽” 到页面中任意位置并对它进行编辑。Odoo 布局就是一个模块化的布局,目标就是样式化这些元素来达到一个比较完美的效果。
Odoo 页面规范
odoo 始于 XML 规范,所有的代码都必须在
<odoo> ## YOUR CODE odoo>
创建布局结构,都必须在 标签内完成,如果当前 template 是网页,则必须要给当前 template 添加一个 page="True" 的属性
<template name="Services page" id="website.services" page="True"> Our Services
template>
- Cloud Hosting
- Support
- Unlimited space
注意点
- template 标签只是定义了一段 html 代码
- template 标签在没有和 odoo 建立任何联系之前,都不会在任何位置显示
- 每次修改 XML 文件都会强制重新载入,因为 XML 文件只有安装主题时才会加载
- 可以使用 xpath + qweb 来将 template 与 odoo 进行关联
创建一个主题模块
创建一个主题或是叫创建一个代码块,以下文件必不可少:
- 模块名称,必须以 theme_ 开头
- 模块配置信息,__manifest__.py
- 模块系统文件,__init__.py 可以为空
- 模块的
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,步骤为:
- 把插件 web_responsive 放在之前新建好的文件夹myaddons下,并解压!解压后可删除压缩包。
- 再登录odoo 12,转到“参数设置”下,激活开发者模式。
- 激活开发者模式之后,转到“应用”下,点击“更新本地模块列表”。
- 更新完本地模块列表之后,需要去掉“应用”筛选项,不去掉,安装的插件“ web_responsive ”不会显示出来,因为插件太多了。
- 安装完成之后,即可使用插件 web_responsive 。
创建一个特殊效果的主题模块
按照步骤建立主题
- 在 views 目录中,创建一个pages.xml 文件并添加默认的Odoo标签。
- 在
中创建一个标签,设置
page
属性为True
,并添加代码到 template 中。 - 并为 template 添加模板 ID以及模板名称
- 预览:
<odoo> name="Services page" id="website.services" page="True">
Our Services
- Cloud Hosting
- Support
- Unlimited space
odoo>
如何让 Odoo 系统使用这个新的主题? 可以使用 QWeb。
-
将HTML代码包裹到一个
标签中,例如下面的例子 -
以下例子的意思是,在 website.services 这个模板中,使用 t-call 调用 website.layout 这个子模板,使 layout 文件作为当前模板的最外层结构
-
添加 pages.xml 到我们的__manifest__.py文件中
'data':[ 'views/layout.xml', 'views/pages.xml' ],
添加样式
在当前 views 目录下新建一个 assets.xml的XML文件,添加默认的XML标记并复制/粘贴下面的代码。记得把 theme folder
替换为您主题的主目录名称。
inherit_id="website.assets_frontend">position="after">
参数说明:
expr="link[last()]"
和
position="after"
意思是将 style.scss 这个文件添加到资产列表的最后一个链接之后
更新主题
- 使当前主题在页面可拖放的区域显示
- 可以通过
/yourwebsite/page/services
浏览它。
创建一个可拖动的主题代码块
- 新建一个 snippets.xml 代码块文件
- 将代码块放置到可拖动的编辑条中
它的目的是可以通过用户使用网站构建器的用户界面进行拖拽编辑,到 view 目录并创建一个名为 snippets.xml 的XML文件。
添加默认的Odoo XML标记并复制/粘贴下面的代码,该模板包含由区块显示的HTML标记。
A Section Subtitle
Write one or two paragraphs describing your product or services.
To be successful your content needs to be useful to your readers.
Start with the customer – find out what they want and give it to them.
在当前 snippets.xml 的XML文件 中需要把上面的代码块以缩略图的方式放置到编辑条中,以便用户可以把它拖放到页面当中。
复制/粘贴下面的代码到您的snippets.xml文件中:
snippets.xml 这个文件,在实际应用中有至少三种 template 组成:
- 第一个 template 为布局文件,每个 template 含有两个属性,分别为: id 与 name,由 name 定义该模板的名称
- 第二个 template 为编辑可拖动的代码块列表,通过 xpath 的 t 标签调用第一个 template模板文件,使用 t-snippet 标签与 布局文件中的 id 进行关联来定位特定元素。如果要更改目标选项卡,只需替换xpath表达式中的id值即可。
- 第三个 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"/>Alignmenta> <div class="dropdown-menu" role="menu"> <a href="#" class="dropdown-item" data-select-class="align-items-start">Topa> <a href="#" class="dropdown-item" data-select-class="align-items-center">Middlea> <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottoma> <div class="dropdown-divider"/> <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal heighta> div> div> div> template>
每个人理解的意思不同,我理解选项组对应属性分别为以下描述:
data-selector="[css selector(s)]"
将包含在组中的所有选项绑定到特定元素
data-select-class="[class name]"
用于在当前节点上,绑定的自定义的 css ,当前节点被激活时,自动激活当前的 class
data-js=" custom method name "
用于在当前节点上绑定自定义的 js 方法,当前节点被激活时,自动激活当前的节点的 js 方法