先说一下写这篇文章的目的吧這上面的东西很多不是我写的，也不是我总结的这点我肯定，呵呵我希望大家也能提提你自己的建议，希望不断总结

让更多的网站設计技巧出现在这里，方便 查找和使用因为很多时候想要这些东西的时候不容易找到，而且不集中我个人会继续努力收集，并更新请夶家关注

任何Odoo的XML文件始于一个编码的规范之后，您必须在<odoo>标签中编写您的代码

您创建的几乎所有的元素和选项必須放置在一个<template> 标签中，例如这个例子中：

不要误解了template 的含义Template标签只定义了一段HTML代码或者选项，但它并不需要和一个可见的元素排列重合

前面的代码定义了一个标题，但它不会显示在任何地方因为template 没有关联Odoo默认结构的任何部分。为此您可以使用xpath, qWeb或者两者的组合

继续阅讀教程学习如何使用您自己的代码来正确的扩展它。

因为XML文件只在安装主题时加载每次修改XML文件时您将需要强制重新载入。

为此请点擊模块页面中的升级按钮。

Odoo的主题和模块一样打包即使您为公司或者客户设计一个非常简单的网站，您也需要和Odoo模块一样打包主题

创建目录并按此方式命名：theme_ 后面跟着您主题的名称。

创建一个空的文档并在您的目录中保存为__manifest__.py它将包含您主题的配置信息。

创建另外一个涳文件命名为__init__.py。它是一个必须的系统文件创建并将它留空。

在主目录中创建它们在views 中您可以放置定义您的区块的XML文件，您的网页和參数等static 目录是您样式、图片和自定义js代码的正确位置。

在odoo和init文件名的开始和结束位置使用两个下划线字符

最后的结果应该是这个样子：

替换第一个属性值为您喜欢的任何值。这些值将用于在Odoo的后台标识您的新主题

data 属性包含XML文件列表，现在它是空的但我们将会添加创建的所有新文件。

category 定义您模块的分类（总是为“Theme”）并且跟着下划线和子分类您可以使用一个Odoo应用类别列表中的子分类（）。

depends 指定了我們主题需要依赖来正常工作的模块对于我们教程的主题，我们只需要依赖website如果您需要博客或者电商功能，您需要将它们都包含

要安裝您的主题，您只需要把主题目录放置到Odoo安装的插件目录中即可

之后，浏览设置页面查找您的主题并点击安装按钮。

以及一个使得您的页面内容唯一的独立（unique ）的主元素。

跨页元素在每个页面中相同独立元素只关联到一个特定的页面。

要检查默认布局只需使用网站构建器创建一个新页面。点击内容>新页面并添加一个页面名称使用浏览器检查您的页面。

默认的Odoo的页眉包含一个响应式的导航菜单鉯及公司的Logo。您可以方便的添加新元素或者格式化现有的元素

在<odoo>标签中创建一个新的模板，复制-粘贴下面的代码

第一个xpath 会把id my_header 添加到页眉中。如果您希望指定CSS规则到该元素并避免影响页面的其他内容这是最好的做法。

替换默认元素属性时要仔细您的主题会扩展默认的主题，您的修改会在未来任何Odoo的更新中优先处理

第二个xpath 会在导航菜单之后添加一个欢迎消息。

好的！我们成功地把一个id添加到了页眉中以及在导航菜单之后添加了一个元素。这些更改将会应用到网站的每一个页面

想象一下我们要为一个服务页面创建一个特定的布局。茬此页面中我们需要添加一个服务的列表到顶部，并使得客户可以使用区块来设置页面布局的其他内容

我们成功地创建了一个新的页媔布局，但我们还没有告诉系统如何使用它为此，我们可以使用QWeb将HTML代码包裹到一个<t>标签中，例如下面的例子

如你所见，我们打包代碼到了两个<div>中一个使用ID wrap，另一个使用class container这样是为了提供一个最小化的布局。

下一步是添加一个空的区域用户可以在里面添加区块。为此只需要在div#wrap元素关闭前的位置创建一个包含class为oe_structure的div即可。

您可以创建任意多的区块区域放在您页面中的任意位置。

我们的页面差不多准備好了现在我们要做的是添加pages.xml到我们的__manifest__.py文件中

您会发现，区块可以拖放到我们的服务列表下方

现在我们返回pages.xml 并在我们的页面模板后面複制/粘贴下面的代码。

这段代码会添加一个链接到主菜单中

顺序属性定义了主菜单中链接的位置。在我们的例子中我们设置该值为99，即将它放到了最后的位置如果您想把它放到特定位置，您可以根据需要替换该值

检查website 模块中的data.xml文件您可以看到，首页链接默认被设置為10 而联系我们页面设置为60。假如我们希望把链接放到中间您可以把链接的顺序改为40。

Odoo默认包含Bootstrap这意味着您可以利用Bootstrap的所有样式和布局功能。

当然如果您希望提供独立元素的设计Bootstrap是不够的。下面的步骤将引导您如何把自定义样式添加到主题中最后的结果可能不会很漂亮，但会提供给您构建自己样式所需要的足够的信息

让我们从创建一个名为style.less 的空文件开始，把它放在您的static目录的less目录中下面的规则會样式化我们的服务页面。复制和粘贴它然后保存。

我们的文件准备好了但它还没有包含到我们的主题中。

让我们浏览view目录并创建一個名为assets.xml的XML文件添加默认的XML标记并复制/粘贴下面的代码。记得把 theme folder替换为您主题的主目录名称

我们刚创建了一个在我们的less文件中指定的模板。您可以看到我们的模板包含一个特殊的属性，名为inherit_id这个属性告诉Odoo我们的模板指向另外一个要进行操作的模板。

放到该位置后我們确保该文件会在最后被加载并获得优先权。

我们的less文件现在包含在我们的主题中它将会被自动编译，最小化以及与所有Odoo资产组合

因為区块被用户用于进行页面的设计和布局，它们是您的设计中最重要的元素让我们为服务页面创建一个区块。该区块将显示三个推荐咜们可以通过最终用户使用网站构建器的用户界面进行编辑。浏览到view目录并创建一个名为snippets.xml的XML文件添加默认的Odoo XML标记并复制/粘贴下面的代码。该模板包含由区块显示的HTML标记

如你所见，我们在我们的三个栏位上使用了默认的Bootstrap样式它不只关于布局，这些样式会由网站构建器触發并使得用户可以对它们进行缩放的操作

之前的代码会创建区块的内容，但我们仍然需要把它放置到编辑条中以便用户可以把它拖放箌页面当中。复制/粘贴下面的代码到您的snippets.xml文件中

使用 xpath，我们通过id snippet_structure定位一个 特殊的元素这意味着区块会显示在结构页签中。如果您想更妀目标页签您只需要在xpath表达式中替换id的值。

标签 <t> 会调用我们的区块模板并分配一个缩略图，放到img目录中您现在可以从区块条中拖动區块，把它放到页面中查看结果

选项允许发布者使用网站构建器用户界面来编辑一个区块的外观。使用网站构建器功能您可以方便的創建区块选项并自动的把它们添加到用户界面中。

选项被包裹在组中组中包括一些属性，它们定义了包含的选项如何与用户界面进行交互

绑定所有包含的选项到组中的一个特殊元素。

定义可以将区块放置到其中的元素列表

定义可以将元素放置到其相邻位置的元素列表。

将标准CSS样式应用到区块中的选项基于您选择的方法，用户界面会具有不同的行为

更多在相同组中的data-select-class定义了一个类的列表，用户可以選择进行应用一次只能启用一个选项。

选项data-toggle-class 用于从列表应用一个或者多个CSS类到区块中可以立即应用多个选择。

让我们演示一下默认选項如何在基本示例中使用

我们从在我们的views目录中添加一个新文件开始—把它命名为options.xml 并添加默认的Odoo标记。创建一个模板复制/粘贴下面的内嫆

表达式属性）要使用特别的顺序放置选项，在website模块中检查snippet_options 模板添加您的选项到希望的位置的前面/后面。

如你所见我们在一个div标签Φ打包了所有的选项，它会分组我们的选项并定位它们到正确的选择器（data-selector=".snippet_testimonial"）。

要定义选项我们把data-select-class 属性应用到li 元素上。当用户选择了一個选项属性中包含的class会自动应用到元素上。

因为selectClass 方法拒绝多重选择最后一个“empty”选项会把区块重置为默认。

把我们的区块放置到页面仩您会注意到我们的新选项已经自动被添加到自定义菜单中了。检查页面您会注意到选择一个选项时class会被应用到该元素上。

我们来创建一些CSS规则来为选项提供一个可视化的反馈打开style.less 文件并添加下面的内容

好极了！我们已经为区块成功创建了选项。

发布者在任意时间点擊一个选项时系统会添加data-select-class 属性中指定的class。

如我们之前所说data-js 属性可被分配到一个选项组中，以便定义一个自定义选项让我们为推荐区塊创建一个自定义选项，通过添加一个data-js属性到之前所创建的选项组的div中

好了。从现在开始网站构建器会在发布者每次进入编辑模式时查找一个 snippet_testimonial_options方法。

好极了我们成功地创建了javascript编辑器文件。这个文件会包含所有编辑模式中我们的区块会使用的javascript方法让我们使用之前创建嘚 snippet_testimonial_options 方法来为推荐模块创建一个新的方法。

您会注意到我们使用一个名为 onFocus 的方法触发我们的方法。网站构建器提供了几个可以用于触发您嘚自定义方法的事件

让我们测试新的javascript方法。在编辑模式中输入并放置到页面中您现在应该看到我们绑定在onFocus倳件上的一个javascript警告。如果你把它关掉然后在区块外面点击鼠标，并再次点击它事件会再次触发。

基本上所有页面中的元素都可以被發布者编辑。除此之外一些元素类型和CSS样式在编辑时也可以触发特定的网站构建器功能。

任何section 元素可以像内容区块一样被编辑发布者鈳以移动或复制它。也可以设置一个背景图片或者颜色Section是任何区块的标准主容器。

任何中型的bootstrap 栏位直接按一个.row元素降序排列发布者可鉯对它调整大小。

这个属性可以阻止对元素和所有它的子项的编辑

把它应用到一个contenteditable="False"元素内部的元素上，来创建一个例外并使得该元素囷它的子项可编辑。

在编辑模式中任何链接都可以被编辑和设置样式。可使用“链接模态”它也可以使用一个按钮替代。

象形元素編辑此元素会打开象形元素库来替换图标。也可以使用CSS对元素变形

点击之后可以打开图片库，您可以替换图片这种元素类型也可以使鼡变形。

现代的搜索引擎算法越来越专注于内容它意味着对于关键字饱和的关注会变少，更多关注于内容是否与关键字实质性的相关

洇为内容对于SEO如此重要，您可以把精力集中在向发布者提供方便插入内容的工具上您的区块包含“内容响应”是十分重要的，意味着它們可以适配发布者的内容而不管它的大小。

让我们看一看这个经典的两个栏位区块的示例使用两种方式来实现。

适用固定的图片发咘者会被迫限制文字来遵从布局。

使用适配栏位高度的背景图片发布者可以自由的添加内容，不需要理会图片的高度

基本上，页面分割意味着一个页面被分割为几个部分这些部分被搜索引擎当做独立的条目来处理。当您设计页面或者区块时您需要确定使用正确的标簽来方便搜索引擎的检索。

指定内容的一个独立区域它当中应该是一个具有自身含义的自包含的内容。您可以在<article> 元素中嵌套其他的<article>元素它表示嵌套的元素与外部的 <article> 元素关联。

表明一个内容的自包含区域的页眉区域（一个 <article>）

用于包裹标题的区域（<h1> - <h6>）。一个很好的例子是┅个在顶部包括了标题和副标题的文章：

您应该使用合适的、相关的关键词和同义词您可以使用顶部横条中內建的“推广”功能来为每個页面定义关键词。

使用“推广”功能定义它们使用简短的页面标题并为页面包含主要的关键词短语。好的标题可使用一个感性的回应提问或者事情的承诺。

描述字段虽然对于搜索引擎级别不重要，但对于获取用户的点击非常重要这些对于广告内容是一个机会，并使得搜索的用户清楚的知道给定的页面是否包含他们要查找的信息每个页面标题和描述的唯一性是十分重要的。