odoo 网站教程-主题

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    <!-- === Services Page === -->
    <record id="services_page" model="website.page">
        <field name="name">Services page</field>
        <field name="website_published">True</field>
        <field name="url">/services</field>
        <field name="type">qweb</field>
        <field name="key">theme_tutorial.services_page</field>
        <field name="arch" type="xml">
            <t t-name="theme_tutorial.services_page_template">
                <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>
                        <!-- === Snippets' area === -->
                        <div class="oe_structure" />
                    </div>
                </t>
            </t>
        </field>
    </record>

</odoo>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

提示

您可以根据需要创建任意数量的片段区域并将它们放置在页面中的任何位置。
还有一种使用 指令创建页面的替代方法。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    <!-- === Services Page === -->
    <template id="services_page_template">
        <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>
    <record id="services_page" model="website.page">
        <field name="name">Services page</field>
        <field name="website_published">True</field>
        <field name="url">/services</field>
        <field name="view_id" ref="services_page_template"/>
    </record>

</odoo>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

还可以使用
更改__manifest__.py文件中添加pages.xml

'data': [
  'views/layout.xml',
  'views/pages.xml'
],
1
2
3
4

服务页面已准备就绪，您可以通过导航到/services（我们在上面选择的 URL）来访问它。
您会注意到可以在“我们的服务”列表下方拖放片段 。

现在让我们回到pages.xml，在我们的页面模板之后，复制/粘贴以下代码。

<record id="services_page_link" model="website.menu">
  <field name="name">Services</field>
  <field name="page_id" ref="services_page"/>
  <field name="parent_id" ref="website.main_menu" />
  <field name="sequence" type="int">99</field>
</record>
1
2
3
4
5
6

这段代码将添加一个指向主菜单的链接，指向我们创建的页面。

sequence属性定义了链接在顶部菜单中的位置。在我们的示例中，我们将值设置为99以将其放在最后。我想把它放在一个特定的位置，你必须根据你的需要替换值。
通常情况下，Home链接设为10， Contact us设为 60 ， 如果你想把你的链接放在中间，你可以把你的链接的 sequence 值设为 40.
创建代码段
因为代码片段是用户设计和布局页面的方式, 是您设计的重要元素. 让我们创建一个代码片段.

<template id="s_testimonial" name="Testimonial snippet">
    <section class="s_testimonial">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 text-center">
                    <img alt="client" class="rounded-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-lg-4 text-center">
                    <img alt="client" class="rounded-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-lg-4 text-center">
                    <img alt="client" class="rounded-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如您所见，我们为三列使用了引导默认类。这不仅仅是关于布局，这些类将由网站生成器触发，以使其可由用户调整大小。
前面的代码将创建代码段的内容，但我们仍然需要将其放置在编辑器栏中，以便用户能够将其拖放到页面中.
复制/粘贴下面的内容到你的 snippets.xml 文件。

<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
    <xpath expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside">
        <t t-snippet="theme_tutorial.s_testimonial"
                t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
    </xpath>
</template>
1
2
3
4
5
6

<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
    <xpath expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside">
        <t t-snippet="theme_tutorial.s_testimonial"
                t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
    </xpath>
</template>
1
2
3
4
5
6

使用xpath，可对某些内容进行修改。

标记将调用代码片段的模板，并将缩略图放置在img文件夹中。现在，您可以从代码段栏中拖动代码段，将其放到页面中并查看结果。

片断代码 options
选项允许发布者使用网站生成器的UI编辑代码段的外观。使用网站生成器功能，您可以轻松创建代码段选项，并自动将其添加到UI中。
选项组属性
data-selector=“[css selector(s)]”
将组中包含的所有选项绑定到指定css。
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-toggle-class=“[class name]”
数据切换类用于将列表中的一个或多个 CSS 类应用于代码段。可以一次应用多个选择。
让我们通过一个基本示例演示默认选项的工作原理。
我们首先在视图文件夹中添加一个新文件 - 将其命名为options.xml并添加默认的Odoo XML标记。创建复制/粘贴以下内容:

<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website.snippet_options">
    <xpath expr="//div[@data-js='Box']" position="after">
        <div data-selector=".s_testimonial"> <!-- Options group -->
            <div class="dropdown-submenu">
                <a href="#" class="dropdown-item">Your Option</a>
                <div class="dropdown-menu"><!-- Options list -->
                    <a href="#" class="dropdown-item" data-select-class="opt_shadow">Shadow Images</a>
                    <a href="#" class="dropdown-item" data-select-class="opt_grey_bg">Grey Bg</a>
                    <a href="#" class="dropdown-item" data-select-class="">None</a>
                </div>
            </div>
        </div>
    </xpath>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意

这个模板将继承默认snippet_options模板，在（xpath expr 属性）之后添加我们的选项。要按特定顺序放置选项，请从网站模块中检查snippet_options模板，并在所需位置之前/之后添加选项。
添加选项.xml和更新__manifest__.py模版。

将我们的代码段拖放到页面上，您会注意到我们的新选项会自动添加到自定义菜单中。检查页面时，您还会注意到，在选择选项时，该类将应用于元素。

让我们创建一些css规则，以便为我们的选项提供视觉反馈。打开我们的 style.scss 文件并添加以下内容

// 这些代码行将增加一个默认的样式以应用于snippet.
.s_testimonial {
    border: 1px solid #EAEAEA;
    padding: 20px;

    &.s_testimonial_shadow img {
        box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
    }
    &.s_testimonial_grey_bg {
        border: none;
        background-color: #EAEAEA;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Javascript 选择
如果只是呈现一些简单的效果， data-select-class 和 data-toggle-class是很棒的 ，但如何实现一些复杂的呢?
如之前我们所说, data-js 规范可以分配给选项组，以便定义自定义方法.

<div data-js="s_testimonial_options" data-selector=".s_testimonial">
    <!-- ... -->
</div>
1
2
3

ok，从现在起，每当发布者进入编辑模式时，网站构建器都会寻找一个s_testimonial_options。
让我们进一步创建一个javascript文件，将其命名为tutorial_editor.js并将其放入静态文件夹。复制/粘贴以下代码：

odoo.define('theme_tutorial.s_testimonial_options', function (require) {
    var options = require('web_editor.snippets.options');
});
1
2
3

很好，我们成功地创建了javascript编辑器文件。该文件将包含我们的代码段在编辑模式下使用的所有javascript函数。

odoo.define('theme_tutorial.s_testimonial_options', function (require) {
    var options = require('web_editor.snippets.options');
    options.registry.s_testimonial_options = options.Class.extend({
        onFocus: function () {
            alert("On focus!")
        },
    });
});
1
2
3
4
5
6
7
8

您会注意到，我们使用了一个名为onFocus的方法来触发我们的函数,网站生成器提供了几个事件，可用于触发自定义功能。

<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>
1
2
3
4
5

刷新页面后，
让我们测试一下我们的新javascript函数。进入编辑模式并进入页面。您现在应该可以看到我们在onFocus事件中绑定的javascript警报。如果关闭它，然后在代码段外部单击，然后再次单击，则事件将再次触发。

编辑参考指南
基本上，发布者可以编辑页面中的所有元素。此外，一些元素类型和css类在编辑时会触发特殊的网站生成器功能。
Layout

<a href=”#” />
1

<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>
1
2
3
4
5