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文件都是从编码规范开始的。之后,您必须在<data>标签中写入代码,放入到</odoo>标签中。
[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<data>
## YOUR CODE HERE
</data>
</odoo>
几乎所有您创建的元素和选项都必须放在<template>标签中,就像在这个例子中一样。
[XML]
<template id="my_title" name="My title">
<h1>This is an HTML block</h1>
<h2 class="lead">And this is a subtitle</h2>
</template>
重要
不要误解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 点击。使用浏览器检查页面。
<div id=“wrapwrap”>
<header />
<main />
<footer />
</div>
扩展默认页眉
默认情况下,ODoO页眉包含响应导航菜单和公司的logo。您可以轻松地添加新元素或样式。为此,在views文件夹中创建一个layout.xml 文件并添加默认的Odoo xml标记。
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<data>
</data>
</odoo>
在<data>标签中创建一个新模板,复制粘贴下面的代码
<!-- Customize header -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">
<!-- Assign an id -->
<xpath expr="//div[@id='wrapwrap']/header" position="attributes">
<attribute name="id">my_header</attribute>
</xpath>
<!-- Add an element after the top menu -->
<xpath expr="//div[@id='wrapwrap']/header/div" position="after">
<div class="container">
<div class="alert alert-info mt16" role="alert">
<strong>Welcome</strong> in our website!
</div>
</div>
</xpath>
</template>
第一个xpath会将id my_header
添加页眉中。如果您想将CSS规则定位到该元素并避免这些影响页面上的其他内容,则这是最好的选择。
警告
小心替换默认元素属性。由于您的主题将扩展默认的,您的更改将优先于任何未来Odoo的更新
第二个xpath 将在导航菜单之后添加欢迎消息。最后一步是将layout.xml添加到主题使用的xml文件列表中。要做到这一点,编辑您的__manifest__.py文件,像这样
'data': [ 'views/layout.xml' ],
更新你的主题
很好的!我们成功地将ID添加到页眉和导航菜单之后的元素。这些变化将被应用到网站的每一页。
创建特定的页面布局
想象一下,我们想为服务页面创建一个特定的布局。对于这个页面,我们需要向顶部添加服务列表,并给客户端提供使用片断来设置页面布局的其余部分的可能性。
在你的views文件夹内,创建一个pages.xml 文件并添加默认的Odoo标记。在<data>
内部新建一个<template>
标记,设置page
属性为True
并在其中添加你的代码。
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<data>
<!-- === Services Page === -->
<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>
</data>
</odoo>
页面标题将是模板ID。在我们的案例服务中(来自website.services
)
我们成功地创建了一个新的页面布局,但是我们还没有告诉系统如何使用它。为了做到这一点,我们可以使用 QWeb。将html代码封装到<t>标签中,例如在这个例子中。
<!-- === Services Page === -->
<template name="Services page" id="website.services" page="True">
<t t-call="website.layout">
<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>
</t>
</template>
使用<t t-call="website.layout">
我们将用代码扩展Odoo默认页面布局。
正如你所看到的,我们把代码封装成两个<div>
,一个使用wrap
作为ID而另一个是用样式类container
。这是为了提供最小的布局。
下一步是添加一个空区域,用户可以用代码段填充。要实现这一点,只需在关闭div#wrap元素之前创建具有oe_structure类的div。
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<data>
<!-- === Services Page === -->
<template name="Services page" id="website.services" page="True">
<t t-call="website.layout">
<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>
<!-- === Snippets' area === -->
<div class="oe_structure" />
</div>
</div>
</t>
</template>
</data>
</odoo>
提示
您可以创建尽可能多的片断区域,并将它们放置在页面中的任何位置
我们的页面已经准备好了。现在我们要做的就是增加pages.xml 到我们的 __manifest__.py 文件中
'data': [
'views/layout.xml',
'views/pages.xml'
],
更新你的主题
很好地,我们的服务页面已经准备好了,您可以通过导航到/yourwebsite/page/services来访问它 。
您将注意到,可以在我们的服务列表下方拖放片段。
现在让我们回到我们的pages.xml ,在我们的页面模板之后,复制/粘贴下面的代码。
<record id="services_page_link" model="website.menu">
<field name="name">Services</field>
<field name="url">/page/services</field>
<field name="parent_id" ref="website.main_menu" />
<field name="sequence" type="int">99</field>
</record>
此代码将添加到主菜单的链接
sequence 属性在顶部菜单中定义链接的位置。在我们的示例中,我们将值设置为99
,以便将其放置到最后。你想把它放在一个特定的位置,你必须根据你的需要来替换它的价值。
正如你在website模块中看到的data.xml 文件一样,默认情况下,首页链接被设置为10,联系我们被设置为60。例如,如果你想把你的链接放在中间,你可以将链接的序列值设置为40。
添加样式
Odoo默认包含了Bootstrap。这意味着你可以利用所有的Bootstrap样式和布局功能。
当然,如果你想提供一个独特的设计,Bootstrap 是不够的。下面的步骤将指导您如何将自定义样式添加到主题中。最终的结果不会很好,但会为你提供足够的信息来独自构建。
让我们先创建一个名为style.less的空文件,并将其放入一个名为less的文件夹中,在静态文件夹中。下面的规则将样式化我们的服务页面。复制并粘贴它,然后保存文件。
.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;
}
}
我们的文件已经准备好了,但它还没有包含在我们的主题中。
让我们导航到view 文件夹并创建一个名为assets.xml的XML文件。添加默认的Odoo 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>
我们刚刚创建了一个模板来指定更少的文件。正如你所看到的,我们的模板有一个特殊的属性称为 inherit_id
。这个属性告诉Odoo,为了操作,我们的模版指定了另一个模版。
在这种情况下,我们指的是assets_frontend模板,位于website
模块中。 assets_frontend
指定网站建设者加载的资产列表,我们的目标是将较少的文件添加到此列表中。
这可以通过使用属性expr="link[last()]"
和position="after"的xpath 来实现,这意味着“获取我的样式文件并将其放置在资产列表的最后一个链接之后”。
把它放在最后一个,我们确保我们的文件将被加载在最后,并采取优先级。
最后添加assets.xml 到你的 __manifest__.py 文件中。
更新你的主题
我们的更少的文件现在包含在我们的主题中,它将被自动编译、缩小并与Odoo的所有资产相结合。
创建片段
由于片段是用户如何设计和布局页面,所以它们是您设计中最重要的元素。 让我们为我们的服务页面创建一个片段。该片段将显示3个证明书,它将可由最终用户使用网站生成器UI编辑。导航到VIEW文件夹并创建一个名为snippets.xml的XML文件。添加默认的Odoo XML标记并复制/粘贴以下代码。模板包含将由代码段显示的HTML标记。
<template id="snippet_testimonial" name="Testimonial snippet">
<section class="snippet_testimonial">
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
<h3>Client Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-4">
<img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
<h3>Client Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-4">
<img alt="client" class="img-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
<h3>Client Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</section>
</template>
正如您所看到的,我们为三列使用了Bootstrap默认样式类。这不仅仅是关于布局,这些类将由网站建设者触发,使它们可由用户调整。
前面的代码将创建代码段的内容,但是我们仍然需要将它放入编辑器栏中,这样用户就可以将它拖放到页面中。在您的snippets.xml文件中复制/粘贴此模板。
<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
<xpath expr="//div[@id='snippet_content']/div[@class='o_panel_body']" position="inside">
<t t-snippet="theme_tutorial.snippet_testimonial"
t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
</xpath>
</template>
使用xpath,我们用id snippet_structure锁定特定元素。这意味着代码片段将出现在结构标签中。如果要更改目标选项卡,则只需替换xpath 表达式中的id
值。
Tab Name | Xpath expression |
---|---|
Structure | //div[@id='snippet_structure'] |
Content | //div[@id='snippet_content'] |
Feature | //div[@id='snippet_feature'] |
Effect | //div[@id='snippet_effect'] |
<t>
标签将调用我们的片段的模板,并将分配一个缩略图放置在img 文件夹。现在你可以从片段栏中拖动你的代码片段,把它放在你的页面中,看看结果。
片段选项
选项允许发布者使用网站生成器的UI编辑片段的外观。使用网站生成器功能,您可以轻松创建片段选项并自动添加到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类应用到代码段。根据您选择的方法,UI的行为会有所不同。
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.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>
注
前一个模板将继承默认的snippet_options模板,在后台选项(xpath expr 属性)之后添加选项。为了将你的选择放在特定的顺序中,从网站模块检查snippet_options模板并在期望的位置之前/之后添加选项.
正如你所看到的,我们把所有选项封装在一个div标签中,它将把我们的选项组合起来,并将它们定位到正确的选择器 (data-selector=".snippet_testimonial"
)。
为了定义我们的选项,我们将data-select_class
属性应用到li
元素。当用户选择一个选项时,属性中包含的类将自动应用于该元素。
由于 select_class
方法避免了多个选择,最后一个“空”选项会将代码段重置为默认值。
添加 options.xml 到__manifest__.py
并更新你的主题。
将我们的代码片段放到页面上,您会注意到我们的新选项会自动添加到自定义菜单中。检查页面时,您还会注意到,当选择一个选项时,该类将应用于该元素。
让我们创建一些CSS规则,以便为我们的选项提供视觉反馈。 打开我的style.less 文件并添加以下内容
.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-select_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 = odoo.website;
website.odoo_website = {};
})();
很好,我们成功地创建了JavaScript编辑器文件。这个文件将包含我们的片段在编辑模式中使用的所有JavaScript函数。让我们使用以前创建的snippet_testimonial_options方法为我们的证明片段创建一个新函数。
(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!");
}
})
})();
正如您将注意到的,我们使用了一种称为on_focus的方法来触发我们的函数。网站生成器提供了几个可以用来触发自定义函数的事件。
事件 | 描述 |
---|---|
start | 当发布者在编辑会话中第一次选择片段时,或者当拖放被拖入页面时发生 |
on_focus | 每次用户选择片段或将片段拖放到页面时,都会触发 |
on_blur | 当片断失去焦点时发生此事件 |
on_clone | 仅在一个片段被复制偶触发。 创建一个包含克隆元素的新的js变量($clone) |
on_remove | 它发生在删除片段之前 |
drop_and_build_snippet | 仅在片段被拖放到一个掉落区域后触发。 当触发此事件时,内容已经插入到页面中 |
clean_for_save | 它在发布者保存页面之前触发 |
让我们把新的JavaScript文件添加到编辑器资产列表中。回到assets.xml并创建一个新模板,就像前一个模板一样。这次我们不得不继承assets_editor而不是 assets_frontend
。
<template id="my_js" inherit_id="website.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函数。进入编辑模式并进入页面。现在您应该看到我们在on_focus事件上绑定的JavaScript警告。如果您关闭它,然后单击您的代码段外,然后再次单击它,该事件将再次触发。
编辑参考指南
基本上,页面中的所有元素都可以由发布者编辑。除此之外,一些元素类型和CSS类将在编辑时触发特殊的网站生成器功能。
布局
<section />
任何区段元素都可以被编辑成一个内容块。发布者可以移动或复制它。还可以设置背景图像或颜色。Section是任何代码段的标准主容器
.row > .col-md-*
任何从一个.row元素直接降序排序的普通的bootstrap列,将由发布者进行调整
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>
这个结构将创建一个由发布者编辑的 <iframe>
元素
SEO最佳实践
促进内容插入
现代搜索引擎算法越来越关注内容,这意味着对关键词饱和度的关注较少,更多关注的是内容是否实际上与关键词相关。
由于内容对SEO非常重要,你应该集中精力给发布者轻松插入的工具。重要的是,您的代码段“内容响应”,意味着它们应该适合发布者的内容,无论大小。
让我们来看看这个经典的双栏片段的例子,用两种不同的方式实现。
坏的情况
使用固定图像,发布者将被迫限制文本以遵循布局
页面分割
基本上,页面分割意味着页面被分成几个独立的部分,并且这些部分被搜索引擎视为单独的条目。当你设计页面或代码片段时,你应该确保使用正确的标签,以便于搜索引擎索引。
好的情况
使用适合于列高度的背景图像,发布者可以自由地添加内容,而不管图像的高度
<article>
指定独立的内容块。 在它里面应该是一个独立的内容,它本身应该有意义。可以将 <article>
元素嵌套在一起。 在这种情况下,隐含嵌套元素与外部 <article>
元素相关。<header>
指示内容的自包含块的标题部分 (一个<article>
)。
<section>
是片断默认标签,它指定内容块的一个子段。它可以用来将<article>内容分成几个部分。I建议使用标题元素(<h1>
– <h6>
) 来定义章节的主题<hgroup>
用于包装标题的一节 (<h1>
- <h6>
)。一个很好的例子是一篇标题和副标题都在顶部的文章:
<hgroup>
<h1>Main Title</h1>
<h2>Subheading</h2>
</hgroup>
描述你的页面
定义关键词
你应该使用适当的,相关的关键字和同义词为那些关键字。您可以使用顶部的栏中找到的内置“Promote”函数为每个页面定义它们。
定义标题和描述
使用“Promote”功能定义它们。保持页面标题简短,包括页面的主关键字短语。好的标题唤起情感的反应,问问题或许诺某事。
描述对于搜索引擎排名并不重要,在获得用户点击时非常重要。这是一个广告内容的机会,并让人们确切地知道给定页面是否包含他们正在寻找的信息。重要的是,每个页面上的标题和描述都是独一无二的。
ps:有翻译不当之处,欢迎留言指正。
原文地址:https://www.odoo.com/documentation/10.0/howtos/themes.html