Odoo9.0主题开发【part2】

店小2

片段的选择选项允许出版商使用的网站建设者的UI编辑片段的出现。使用网站的功能，你可以创建代码段选项容易自动添加到用户界面。
选项组属性选项是用分组包。组可以有属性，该属性定义包括选项将如何与用户界面进行交互。
data-selector=" css selector(s) "
将所有选项都绑定到该组中的某个特定元素中。
data-js=" custom method name "
是用来绑定自定义JavaScript方法。
data-drop-in=" css selector(s) "
定义元素列表的代码段可以下降到。
data-drop-near=" css selector(s) "
定义该代码段可以下降在元素列表。
默认选项方法选项应用标准的CSS类的片段。根据你所选择的方法，用户界面会有不同的行为。
data-select_class=" class name "
在同组data-select_class定义了一个类列表，用户可以选择应用。只有一个选项可以在一个时间被启用。
data-toggle_class=" class name "
的data-toggle_class应用一个或多个CSS类从列表中的一段。多个选择可以应用于一次。
让我们演示如何使用默认选项的基本示例。
我们开始在我们的视图文件夹添加新文件名 options.xml 和添加默认Odoo XML标记。创建一个新的模板复制/粘贴如下
<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website_less.snippet_options">  <xpath expr="//div[@data-js='background']" position="after">    <div data-selector=".snippet_testimonial"> <!-- Options group -->      <li class="dropdown-submenu">        <a href="#">Your Option</a>        <ul class="dropdown-menu"> <!-- Options list -->          <li data-select_class="opt_shadow"><a>Shadow Images</a></li>          <li data-select_class="opt_grey_bg"><a>Grey Bg</a></li>          <li data-select_class=""><a>None</a></li>        </ul>      </li>    </div>  </xpath> </template>

Note
以前的模板将继承默认 snippet_options template 添加选项后，background 选项（XPath表达式选择背景属性）。把你的选择在一个特定的顺序，检查snippet_options template 来自website module 并添加您的选项前/后所需的位置。

你可以看到，我们用我们所有的选项一个div标签，我们将组选项里面，将他们的目标正确的选择 (data-selector=".snippet_testimonial").
定义我们的选择我们的应用 data-select_class 属性的 li 元素。当用户选择一个选项时，该属性中包含的类会自动被应用到该元素中。
因为 select_class 方法避免了多重选择，最后的“空”选项将重置到默认代码段。
添加 options.xml 到 __openerp__.py 然后更新你的主题。



把我们的片段到绘图页上，你会注意到我们的新选项被自动添加到自定义菜单。检查页面，您还将注意到，该类将应用于选择一个选项时的元素。
让我们为我们的选择视觉反馈创建CSS规则。打开我们的style.less 文件，并添加以下
.snippet_testimonial {  border: 1px solid #EAEAEA;  padding: 20px;}// 这些线将我们的代码段添加一个默认样式。现在让我们来创建自定义规则的选项。.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-select_class与data-toggle_class你可以同时选择多类。

JavaScript选项

data-select_class和data-toggle_class是伟大的如果你需要进行简单的课改操作。但是如果你的代码的定制需要更多的东西吗？

正如我们之前所说的，data-js 属性可以分配为选项组定义一个自定义方法。让我们创建一个为我们推荐段*添加 data-js属性选项组的div，我们先前创建的。

<div data-js="snippet_testimonial_options" data-selector=".snippet_testimonial">  [...]</div>

完成从现在开始，该网站将寻找一个snippet_testimonial_options方法每次出版商进入编辑模式。

我们的第一步，创建一个JavaScript文件，名字是 tutorial_editor.js 然后放入 static 文件夹。复制/粘贴下面的代码

(function() {    'use strict';    var website = openerp.website;    website.openerp_website = {};})();

好，我们成功地创造了我们的JavaScript文件编辑。该文件将包含所有的javascript函数用到的片段在编辑模式。让我们创建一个新的功能，我们推荐使用片段snippet_testimonial_options方法我们之前创建的。

(function() {    'use strict';    var website = openerp.website;    website.openerp_website = {};    website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({        on_focus: function() {            alert("On focus!");        }    })})();

你会注意到，我们使用的方法称为on_focus触发函数。网站生成器提供了一些事件，您可以使用来触发您的自定义函数。

Event描述
start当出版商选择在编辑会话的第一时间段或当片段拖掉页
on_focus每次点火片断是由用户或选择时的片段拖掉页。
on_blur这一段失去焦点事件发生时。
on_clone火灾刚一段是重复的。一个新的JS创建变量（$克隆）含有克隆的元素。
on_remove它发生在这段被删除。
drop_and_build_snippet火灾之后，段是拖和下降到降级区。当这个事件被触发时，该内容已插入到该页中。
clean_for_save它触发前发布保存页面。

让我们添加新的 JavaScript 文件资产编辑列表。 回到 assets.xml 和创建一个新的模板，如前一个。这一次我们必须继承assets_editor 而不是 assets_frontend.

<template id="my_js" inherit_id="website_less.assets_editor" name="My Js">  <xpath expr="script[last()]" position="after">    <script type="text/javascript" src="/theme_tutorial/static/src/js/tutorial_editor.js" />  </xpath></template>

更新你的主题

让我们来测试我们的新的 JavaScript 函数。进入编辑模式，进入页面。你现在应该看到 JavaScript 警告我们绑在on_focus事件。如果你关闭它，然后单击片段外，然后点击一遍，将再次触发事件。

编辑参考指南

基本上，页面中的所有元素都可以由发布者编辑。此外，一些元素类型和CSS类将触发特殊网站当编辑功能。

布局

<section />

任何部分元素都可以被编辑，就像一个内容块。出版商可以移动或复制它。也可以设置背景图像或颜色。部分是任何一段的标准集装箱主。

.row > .col-md-*

任何媒介引导柱直接下降从。行元素，将由出版商可调整大小。

contenteditable="False"

此属性将防止编辑元素及其所有的儿童。

contenteditable="True"

将它应用到一个元素在一个 contenteditable="False" 元素，以创建一个例外，使元素及其子编辑。

<a href=”#” />

在编辑模式下，任何链接可以被编辑和风格化。使用“链接模式”，它也可以用一个按钮来替换它。

媒体

<span class=”fa” />

象形文字元素。编辑该元素将打开图标库替换图标。使用CSS元素的变换也有可能。

<img />

一旦点击，图像库将打开，你可以替换图像。这种元素的转换也可能。

<div class="media_iframe_video" data-src="[your url]" >  <div class="css_editable_mode_display"/>  <div class="media_iframe_video_size"/>  <iframe src="[your url]"/></div>

这将创建一个HTML结构 <iframe> 元素可由发布者编辑 .

SEO 最佳实践方便内容插入

现代搜索引擎的算法越来越注重内容，这就意味着有更少的关注 关键词饱和度 而更多的关注于是否内容是 其实与关键词相关.

作为内容是如此重要的搜索引擎优化，你应该专注于给出版商的工具，方便地插入它。你的片段是“内容敏感”是很重要的，这意味着他们必须符合出版商的内容无论大小。

使用符合列高度的背景图像，发布者将可自由添加内容，不管图像的高度.

页面分割

基本上，页面分割意味着一个页面被分为几个独立的部分，这些部分被作为单独的条目被搜索引擎处理。当你设计的网页或视频，你应确保使用正确的标签，便于搜索引擎的索引.

<article>

指定内容的独立块。在它里面应该是一个自足的内容，应该有自己的意义。你可以筑巢 <article>彼此的元素。在这种情况下，它的隐含的嵌套元素相关的外<article> 元素.

<header>

表示一个包含内容的内容的头部分 (一个 <article>).

<section>

是段的默认标签，指定一块内容分段。它可以用来分割 <article> 内容分为几个部分。使用标题元素是明智的 (<h1> –<h6>) 定义本节的主题.

<hgroup>

是用来包装一段标题 (<h1> - <h6>). 一个很好的例子是一篇文章，标题和标题的顶部:

<hgroup>  <h1>Main Title</h1>  <h2>Subheading</h2></hgroup>描述你的页面定义关键词

你应该使用适当的，相关的关键字和同义词为那些关键字。您可以使用内置的“Promote”功能在顶部的酒吧中定义他们的每一个页面。

定义一个标题和一个描述

用“Promote”功能定义它们。保持您的页面标题短，包括主要关键字短语的页面。好标题引起了一种情绪反应，问一个问题或承诺的东西。

描述，虽然不重要的搜索引擎的排名，是非常重要的，在获得用户点击。这些都是一个广告内容的机会，让人们搜索准确的知道给定的页面是否包含他们正在寻找的信息。重要的是，每一页的标题和说明是独一无二的。