Odoo提倡自由。对于设计者来说自由可以进一步的设计，对于用户来说自由是可以根据他们的需求定制一切。
准备好创建你自己的主题了吗？很好地。以下是一些你在开始之前应该知道的事情。本教程是创建Odoo主题的指南。
如果你是第一次使用Odoo的网页设计师，你就在正确的位置（即此文章正适合你看）。这个介绍将概述Odoo 主题创建的基础。
注
Odoo的团队已经创建了一个强大且易于使用的框架。不需要知道特殊的语法来使用这套工具
从普通CMS到Odo注
如果你总是以同样的方式思考和工作，你可能会得到同样的结。如果你想要全新的东西，那么尝试不同的东西
我的header.php文件在哪里?这通常是第一个问题，一个网页设计师使用Wordpress 或Joomla模版工作并首次来到Odoo。
事实上，当使用普通的CMSs时，您必须编写几个文件(像header.php, page.php, post.php, 等等) ，以便为您的网站创建基本结构。使用这些系统，这个基础结构作为一个设计基础，您必须随着时间更新以确保CMS内的兼容性。 所以，即使在你花了数小时对文件进行编码之后，你还没有开始设计。
这并不适用于创建Odoo主题。
Odoo默认主题结构
注
我们认为主题设计应该是简单的（且是强大的）。当我们创建网站建设者时，我们决定从零开始，而不是依赖已经存在的东西。这种方法使我们能够专注于对设计师来说非常重要的事物：风格、内容和它们背后的逻辑。没有更多的技术问题。
Odoo带有默认主题结构。这是一个非常基本的“主题”，它提供了最小的结构和布局。当你创建一个新的主题时，实际上是在扩展这个主题。事实上，它总是在您的设置中启用，它的行为与上面提到的CMS的基本结构一样，只是您不必创建或维护它。它将在你的Odoo安装中自动升级，因为它包含在网站生成器模块中，默认情况下一切都顺利集成。
因此，你完全可以自由地专注于设计，而这种结构则是提供集成和功能的工作。
主要特点：
- 网页、博客和电子商务的基本布局
- 网站建设者整合
- 基本片段
- 自动Less/Sass编译
- 自动Js与CSS缩小组合
主要技术：
- Twitter Bootstrap
- jQuery
- jQuery UI
- underscore.js
“模块化”思考
Odoo主题不是包含HTML或PHP文件的文件夹，而是一个用XML编写的模块化框架。以前从未使用过XML文件吗？不用担心，在遵循教程之后，你就可以用HTML的基本知识来创建你的第一个主题。
使用经典的Web设计工作流，通常可以对整个页面的布局进行编码。这个结果是一个“静态”网页。当然，你可以更新内容，但是你的客户需要你去做基本的改变。
为Odoo创建主题完全是视角的改变。除了定义页面的完整布局外，还可以创建块（片段），让用户选择在哪里“拖放”它们，自己创建页面布局。我们称之为模块化设计。
想象一个Odoo主题作为元素和选项的“列表”，你必须创建和设计。作为一个设计师，你的目标是设计这些元素，以达到一个奇妙的结果，不管最终用户选择放在哪里。
让我们参观一下我们的“列表”元素：
片段(或构建块)
一段HTML代码。用户将使用我们内置的网站构建器界面来拖放、修改和组合它们。可以为每个片断定义选项集和样式集。用户将根据他们的需要进行选择。
页面
这些都是正常的网页，除了它们将被最终用户编辑，并且可以通过拖动片段来定义用户可以“填充”的空区域。
样式
使用标准CSS文件(或Less/Sass)定义样式。 可以将样式定义为默认的或可选的。默认样式在您的主题中始终是活动的，可选样式可以由用户启用或禁用。
功能性
多亏了Odoo的模块化，一切都可以更加个性化。这意味着你的创造力有无穷的可能。添加功能是容易的，并且为终端用户提供可定制的选项很简单。
Odoo的XML文件综述
任何Odoo的XML文件都是从编码规范开始的。之后，您必须在标签中写入代码，放入到标签中。
[XML]
## YOUR CODE HERE
几乎所有您创建的元素和选项都必须放在标签中，就像在这个例子中一样。
[XML]
This is an HTML block
And this is a subtitle
重要
不要误解template是什么意思。模板标签只定义了一段HTML代码或选项 - 但它不一定与元素的视觉排列一致。
前面的代码定义了一个标题，但它不会显示在任何地方，因为该模板与Odoo默认结构的任何部分不相关。为了做到这一点，可以使用xpath, qWeb 或两者的组合。
继续阅读教程，学习如何正确地用自己的代码扩展它。
更新你的主题由于在安装主题时只加载XML文件，所以每次在XML文件上进行更改时，都必须强制重新加载。
要做到这一点，请单击模块页面中的升级按钮。
创建主题模块
Odoo的主题像模块一样打包。即使你正在为你的公司或客户设计一个非常简单的网站，你也需要像Odoo模块那样包装主题。
main folder
创建文件夹并将其命名为： theme_ 之后是你的主题名称
__manifest__.py
创建一个空文档并将其保存为 __manifest__.py文件夹。 这将包含您的主题的配置信息
__init__.py
创建另一个空文件并命名为__init__.py。这是一个强制性的系统文件。创建并留空
views 和static 文件夹
在主文件夹中创建它们。在views 中，您将放置XML文件，这些文件定义了代码段、页面和选项。 static 文件夹是您的样式、图像和自定义JS代码的正确位置
重要的
在odoo和init文件名的末尾使用两个下划线字符和两个下划线字符
最后的结果应该是这样的：
编辑
__manifest__.py
打开您创建的__manifest__.py，复制/粘贴以下内容：
{
'name':'Tutorial theme',
'description': 'A description for your theme.',
'version':'1.0',
'author':'Your name',
'data': [
],
'category': 'Theme/Creative',
'depends': ['website'],
}
用你喜欢的任何东西替换前4个属性值。这些值将被用于识别你在Odoo后端的新主题。
data 属性将包含XML文件列表。现在它是空的，但是我们会添加任何新的文件
application: True 是强制的
category 定义你的模块类别(总是“Theme”) ，并且在一个斜杠之后，是子类别。您可以使用Odoo应用程序类别列表中的一个子类别(https://www.odoo.com/apps/themes)
depends 指定要正确工作的主题所需的模块。对于我们的教程主题，我们只需要网站。如果你还需要博客和电子商务的特性，你也必须添加那些模块
...
'depends': ['website', 'website_blog', 'sale'],
...
要安装您的主题，您只需将主题文件夹放入ODO安装中的插件中。之后，导航到设置页面，寻找你的主题并点击安装按钮。
Odoo页面的结构Odoo页面是两种元素组合、交叉页面和独特的视觉结果。默认情况下，Odoo为您提供页眉和页脚（跨页）和唯一的主元素，其中包含使页面具有唯一性的内容。
注
跨页元素在每个页面上都是相同的。唯一的元素只与特定的页面相关。
若要检查默认布局，只需使用网站生成器创建新页面即可。点击 Content ‣ New Page 点击。使用浏览器检查页面。
默认情况下，ODoO页眉包含响应导航菜单和公司的logo。您可以轻松地添加新元素或样式。为此，在views文件夹中创建一个layout.xml 文件并添加默认的Odoo xml标记。
在标签中创建一个新模板，复制粘贴下面的代码
my_header
Welcome in our website!
第一个xpath会将id my_header 添加页眉中。如果您想将CSS规则定位到该元素并避免这些影响页面上的其他内容，则这是最好的选择。
警告
小心替换默认元素属性。由于您的主题将扩展默认的，您的更改将优先于任何未来Odoo的更新
第二个xpath 将在导航菜单之后添加欢迎消息。最后一步是将layout.xml添加到主题使用的xml文件列表中。要做到这一点，编辑您的__manifest__.py文件，像这样
'data': [ 'views/layout.xml' ],
更新你的主题
很好的！我们成功地将ID添加到页眉和导航菜单之后的元素。这些变化将被应用到网站的每一页。
想象一下，我们想为服务页面创建一个特定的布局。对于这个页面，我们需要向顶部添加服务列表，并给客户端提供使用片断来设置页面布局的其余部分的可能性。
在你的views文件夹内，创建一个pages.xml 文件并添加默认的Odoo标记。在 内部新建一个标记，设置page 属性为True 并在其中添加你的代码。
Our Services
- Cloud Hosting
- Support
- Unlimited space
页面标题将是模板ID。在我们的案例服务中(来自website.services)
我们成功地创建了一个新的页面布局，但是我们还没有告诉系统如何使用它。为了做到这一点，我们可以使用 QWeb。将html代码封装到标签中，例如在这个例子中。
Our Services
- Cloud Hosting
- Support
- Unlimited space
使用 我们将用代码扩展Odoo默认页面布局。
正如你所看到的，我们把代码封装成两个 下一步是添加一个空区域，用户可以用代码段填充。要实现这一点，只需在关闭div#wrap元素之前创建具有oe_structure类的div。 提示 您可以创建尽可能多的片断区域，并将它们放置在页面中的任何位置 我们的页面已经准备好了。现在我们要做的就是增加pages.xml 到我们的 __manifest__.py 文件中 更新你的主题 很好地，我们的服务页面已经准备好了，您可以通过导航到/yourwebsite/page/services来访问它 。 您将注意到，可以在我们的服务列表下方拖放片段。 现在让我们回到我们的pages.xml ，在我们的页面模板之后，复制/粘贴下面的代码。 此代码将添加到主菜单的链接 sequence 属性在顶部菜单中定义链接的位置。在我们的示例中，我们将值设置为 正如你在website模块中看到的data.xml 文件一样，默认情况下，首页链接被设置为10，联系我们被设置为60。例如，如果你想把你的链接放在中间，你可以将链接的序列值设置为40。 Odoo默认包含了Bootstrap。这意味着你可以利用所有的Bootstrap样式和布局功能。 当然，如果你想提供一个独特的设计，Bootstrap 是不够的。下面的步骤将指导您如何将自定义样式添加到主题中。最终的结果不会很好，但会为你提供足够的信息来独自构建。 让我们先创建一个名为style.less的空文件，并将其放入一个名为less的文件夹中，在静态文件夹中。下面的规则将样式化我们的服务页面。复制并粘贴它，然后保存文件。 我们的文件已经准备好了，但它还没有包含在我们的主题中。 让我们导航到view 文件夹并创建一个名为assets.xml的XML文件。添加默认的Odoo XML标记并复制/粘贴以下代码。记住用你的主题的主文件夹名称替换theme folder。 我们刚刚创建了一个模板来指定更少的文件。正如你所看到的，我们的模板有一个特殊的属性称为 在这种情况下，我们指的是assets_frontend模板，位于 这可以通过使用属性 把它放在最后一个，我们确保我们的文件将被加载在最后，并采取优先级。 最后添加assets.xml 到你的 __manifest__.py 文件中。 更新你的主题 我们的更少的文件现在包含在我们的主题中，它将被自动编译、缩小并与Odoo的所有资产相结合。 由于片段是用户如何设计和布局页面，所以它们是您设计中最重要的元素。 让我们为我们的服务页面创建一个片段。该片段将显示3个证明书，它将可由最终用户使用网站生成器UI编辑。导航到VIEW文件夹并创建一个名为snippets.xml的XML文件。添加默认的Odoo XML标记并复制/粘贴以下代码。模板包含将由代码段显示的HTML标记。 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 正如您所看到的，我们为三列使用了Bootstrap默认样式类。这不仅仅是关于布局，这些类将由网站建设者触发，使它们可由用户调整。 前面的代码将创建代码段的内容，但是我们仍然需要将它放入编辑器栏中，这样用户就可以将它拖放到页面中。在您的snippets.xml文件中复制/粘贴此模板。 使用xpath，我们用id snippet_structure锁定特定元素。这意味着代码片段将出现在结构标签中。如果要更改目标选项卡，则只需替换xpath 表达式中的 片段选项 选项允许发布者使用网站生成器的UI编辑片段的外观。使用网站生成器功能，您可以轻松创建片段选项并自动添加到UI中。 选项分组封装。 组可以具有定义包含的选项如何与用户界面交互的属性。 将包含在组中的所有选项绑定到特定元素 用于绑定自定义JavaScript方法 定义可删除代码段的元素列表 定义可以在旁边删除代码段的元素列表 选项将标准CSS类应用到代码段。根据您选择的方法，UI的行为会有所不同。 同一组中的更多data-select_class定义了用户可以选择应用的类列表。每次只能启用一个选项 data-toggle_class用于从列表中应用一个或多个CSS类到片断。 可以同时应用多个选择 让我们演示一个基本示例如何使用默认选项。 我们首先在视图文件夹中添加一个新文件 - 命名为options.xml 并添加默认的Odoo XML标记。创建新模板复制/粘贴以下内容 注 前一个模板将继承默认的snippet_options模板，在后台选项(xpath expr 属性)之后添加选项。为了将你的选择放在特定的顺序中，从网站模块检查snippet_options模板并在期望的位置之前/之后添加选项. 正如你所看到的，我们把所有选项封装在一个div标签中，它将把我们的选项组合起来，并将它们定位到正确的选择器 ( 为了定义我们的选项，我们将 由于 添加 options.xml 到 将我们的代码片段放到页面上，您会注意到我们的新选项会自动添加到自定义菜单中。检查页面时，您还会注意到，当选择一个选项时，该类将应用于该元素。 让我们创建一些CSS规则，以便为我们的选项提供视觉反馈。 打开我的style.less 文件并添加以下内容 很好地！我们成功地为我们的片段创建了选项。 只要发布者点击一个选项，系统就会添加data-select_class属性中指定的类。 通过用data-toggle_class替换data-select_class，您将能够同时选择更多的类。 正如我们前面所说的， 完成。从现在起，每当发布者进入编辑模式时，网站建造者将寻找snippet_testimonial_options方法。 让我们再创一步，创建一个JavaScript文件，命名为tutorial_editor.js ，并将其放入static文件夹。复制/粘贴以下代码 很好，我们成功地创建了JavaScript编辑器文件。这个文件将包含我们的片段在编辑模式中使用的所有JavaScript函数。让我们使用以前创建的snippet_testimonial_options方法为我们的证明片段创建一个新函数。 正如您将注意到的，我们使用了一种称为on_focus的方法来触发我们的函数。网站生成器提供了几个可以用来触发自定义函数的事件。 让我们把新的JavaScript文件添加到编辑器资产列表中。回到assets.xml并创建一个新模板，就像前一个模板一样。这次我们不得不继承assets_editor而不是 更新你的主题 让我们测试一下新的JavaScript函数。进入编辑模式并进入页面。现在您应该看到我们在on_focus事件上绑定的JavaScript警告。如果您关闭它，然后单击您的代码段外，然后再次单击它，该事件将再次触发。 基本上，页面中的所有元素都可以由发布者编辑。除此之外，一些元素类型和CSS类将在编辑时触发特殊的网站生成器功能。 任何区段元素都可以被编辑成一个内容块。发布者可以移动或复制它。还可以设置背景图像或颜色。Section是任何代码段的标准主容器 任何从一个.row元素直接降序排序的普通的bootstrap列，将由发布者进行调整 属性将阻止对元素及其所有子元素的编辑 将其应用于contenteditable="False"元素内的元素，以便创建异常并使元素及其子对象可编辑 在编辑模式下，任何链接都可以被编辑和样式化。使用“链接模式”，也可以用按钮替换它 象形图元素。编辑此元素将打开象形图库以替换图标。 也有可能使用CSS来转换元素 一旦点击，图像库将打开，您可以替换图像。这种元素也可以变换 这个结构将创建一个由发布者编辑的 现代搜索引擎算法越来越关注内容，这意味着对关键词饱和度的关注较少，更多关注的是内容是否实际上与关键词相关。 由于内容对SEO非常重要，你应该集中精力给发布者轻松插入的工具。重要的是，您的代码段“内容响应”，意味着它们应该适合发布者的内容，无论大小。 让我们来看看这个经典的双栏片段的例子，用两种不同的方式实现。 坏的情况 使用固定图像，发布者将被迫限制文本以遵循布局 页面分割 基本上，页面分割意味着页面被分成几个独立的部分，并且这些部分被搜索引擎视为单独的条目。当你设计页面或代码片段时，你应该确保使用正确的标签，以便于搜索引擎索引。 好的情况 使用适合于列高度的背景图像，发布者可以自由地添加内容，而不管图像的高度 是片断默认标签，它指定内容块的一个子段。它可以用来将内容分成几个部分。I建议使用标题元素( 用于包装标题的一节 ( 定义关键词 你应该使用适当的，相关的关键字和同义词为那些关键字。您可以使用顶部的栏中找到的内置“Promote”函数为每个页面定义它们。 定义标题和描述 使用“Promote”功能定义它们。保持页面标题简短，包括页面的主关键字短语。好的标题唤起情感的反应，问问题或许诺某事。 描述对于搜索引擎排名并不重要，在获得用户点击时非常重要。这是一个广告内容的机会，并让人们确切地知道给定页面是否包含他们正在寻找的信息。重要的是，每个页面上的标题和描述都是独一无二的。 ps：有翻译不当之处，欢迎留言指正。 原文地址：https://www.odoo.com/documentation/10.0/howtos/themes.htmlwrap 作为ID而另一个是用样式类container。这是为了提供最小的布局。
'data': [
'views/layout.xml',
'views/pages.xml'
],
Services
/page/services
99
99 ，以便将其放置到最后。你想把它放在一个特定的位置，你必须根据你的需要来替换它的价值。.services {
background: #EAEAEA;
padding: 1em;
margin: 2em 0 3em;
li {
display: block;
position: relative;
background-color: #16a085;
color: #FFF;
padding: 2em;
text-align: center;
margin-bottom: 1em;
font-size: 1.5em;
}
}
inherit_id。这个属性告诉Odoo，为了操作，我们的模版指定了另一个模版。website 模块中。 assets_frontend 指定网站建设者加载的资产列表，我们的目标是将较少的文件添加到此列表中。expr="link[last()]" 和position="after"的xpath 来实现，这意味着“获取我的样式文件并将其放置在资产列表的最后一个链接之后”。
Client Name
Client Name
Client Name
id 值。
//div[@id='snippet_structure']Content//div[@id='snippet_content']Feature//div[@id='snippet_feature']Effect//div[@id='snippet_effect']
标签将调用我们的片段的模板，并将分配一个缩略图放置在img 文件夹。现在你可以从片段栏中拖动你的代码片段，把它放在你的页面中，看看结果。
data-selector=" css selector(s) "data-js=" custom method name "data-drop-in=" css selector(s) "data-drop-near=" css selector(s) "data-select_class=" class name "data-toggle_class=" class name "
data-selector=".snippet_testimonial")。data-select_class 属性应用到li 元素。当用户选择一个选项时，属性中包含的类将自动应用于该元素。select_class 方法避免了多个选择，最后一个“空”选项会将代码段重置为默认值。__manifest__.py 并更新你的主题。
.snippet_testimonial {
border: 1px solid #EAEAEA;
padding: 20px;
}
// These lines will add a default style for our snippet. Now let's create our custom rules for the options.
.snippet_testimonial {
border: 1px solid #EAEAEA;
padding: 20px;
&.opt_shadow img {
box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
}
&.opt_grey_bg {
border: none;
background-color: #EAEAEA;
}
}
data-select_class 和data-toggle_class 是令人满意的，如果你需要执行简单的类改变操作。 但如果你的片断的定制需要更多的东西呢？data-js 专有权可以被分配给一个选项组，以便定义一个自定义方法。让我们为我们的证明书片段创建一个，通过添加 data-js 属性到我们先前创建的选项的组div。(function() {
'use strict';
var website = odoo.website;
website.odoo_website = {};
})();
(function() {
'use strict';
var website = odoo.website;
website.odoo_website = {};
website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
on_focus: function() {
alert("On focus!");
}
})
})();
start当发布者在编辑会话中第一次选择片段时，或者当拖放被拖入页面时发生on_focus每次用户选择片段或将片段拖放到页面时，都会触发on_blur当片断失去焦点时发生此事件on_clone仅在一个片段被复制偶触发。 创建一个包含克隆元素的新的js变量($clone) on_remove它发生在删除片段之前drop_and_build_snippet仅在片段被拖放到一个掉落区域后触发。 当触发此事件时，内容已经插入到页面中clean_for_save它在发布者保存页面之前触发
assets_frontend。
.row > .col-md-*contenteditable="False"contenteditable="True" 元素
指定独立的内容块。 在它里面应该是一个独立的内容，它本身应该有意义。可以将 元素嵌套在一起。 在这种情况下，隐含嵌套元素与外部 元素相关。指示内容的自包含块的标题部分 (一个)。 – ) 来定义章节的主题 - )。一个很好的例子是一篇标题和副标题都在顶部的文章：
描述你的页面
Main Title
Subheading
