Odoo10教程 -- 主题教程

Odoo提倡自由。对于设计者来说自由可以进一步的设计，对于用户来说自由是可以根据他们的需求定制一切。

准备好创建你自己的主题了吗？很好地。以下是一些你在开始之前应该知道的事情。本教程是创建Odoo主题的指南。

网页设计师介绍

如果你是第一次使用Odoo的网页设计师，你就在正确的位置（即此文章正适合你看）。这个介绍将概述Odoo 主题创建的基础。

从普通CMS到Odo

我的header.php文件在哪里?

这通常是第一个问题，一个网页设计师使用Wordpress 或Joomla模版工作并首次来到Odoo。

“模块化”思考

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>

前面的代码定义了一个标题，但它不会显示在任何地方，因为该模板与Odoo默认结构的任何部分不相关。为了做到这一点，可以使用xpath, qWeb 或两者的组合。

继续阅读教程，学习如何正确地用自己的代码扩展它。

更新你的主题

由于在安装主题时只加载XML文件，所以每次在XML文件上进行更改时，都必须强制重新加载。

要做到这一点，请单击模块页面中的升级按钮。

创建主题模块

Odoo的主题像模块一样打包。即使你正在为你的公司或客户设计一个非常简单的网站，你也需要像Odoo模块那样包装主题。

main folder

创建文件夹并将其命名为： theme_ 之后是你的主题名称

__manifest__.py

创建一个空文档并将其保存为 __manifest__.py文件夹。 这将包含您的主题的配置信息

__init__.py

创建另一个空文件并命名为__init__.py。这是一个强制性的系统文件。创建并留空

views 和static 文件夹

在主文件夹中创建它们。在views 中，您将放置XML文件，这些文件定义了代码段、页面和选项。 static 文件夹是您的样式、图像和自定义JS代码的正确位置

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

编辑__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规则定位到该元素并避免这些影响页面上的其他内容，则这是最好的选择。

第二个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 值。

<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>

正如你所看到的，我们把所有选项封装在一个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的方法来触发我们的函数。网站生成器提供了几个可以用来触发自定义函数的事件。

让我们把新的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非常重要，你应该集中精力给发布者轻松插入的工具。重要的是，您的代码段“内容响应”，意味着它们应该适合发布者的内容，无论大小。

让我们来看看这个经典的双栏片段的例子，用两种不同的方式实现。

页面分割

基本上，页面分割意味着页面被分成几个独立的部分，并且这些部分被搜索引擎视为单独的条目。当你设计页面或代码片段时，你应该确保使用正确的标签，以便于搜索引擎索引。

<section>

用于包装标题的一节 (<h1> - <h6>)。一个很好的例子是一篇标题和副标题都在顶部的文章：

<hgroup>
  <h1>Main Title</h1>
  <h2>Subheading</h2>
</hgroup>

描述你的页面

定义关键词

你应该使用适当的，相关的关键字和同义词为那些关键字。您可以使用顶部的栏中找到的内置“Promote”函数为每个页面定义它们。

定义标题和描述

使用“Promote”功能定义它们。保持页面标题简短，包括页面的主关键字短语。好的标题唤起情感的反应，问问题或许诺某事。

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

ps：有翻译不当之处，欢迎留言指正。

原文地址：https://www.odoo.com/documentation/10.0/howtos/themes.html