odoo13学习---15 CMS网站开发

标签：registry   func   转换   bottom   之间   文档   nav   views   release   

管理静态资产

1. web.assets_common:这个资源包包括所有应用程序通用的所有基本实用程序，如JQurey、Underscore.js、FontAwesome等。该资产包用于前端(网站)、后端、销售点、报表等。这一共同的资产加载几乎在Odoo的任何地方。它还包含了boot.js文件，用于Odoo模块系统。
2. web.assets_backend:这个资源包用于Odoo的后端(ERP部分)。它包含与web客户端、视图、字段小部件、操作管理器等相关的所有代码。
3. web.assets_frontend:这个资产包用于Odoo的前端(网站部分)。它包含与web站点端应用程序相关的所有代码，如电子商务、博客、在线事件、论坛、实时聊天等等。注意，这个资产包不包含与网站编辑和拖放特性(网站构建器)相关的代码。这背后的原因是，我们不想加载编辑器资产的公共使用的网站。
4. web_editor.assets_editor和web_editor.summernote:这个资产包包含与网站编辑片段选项和拖放特性(网站构建器)相关的代码。只有当用户拥有网站编辑权限时，它才会被加载到网站中。它也被用于大量的邮件设计。
5. web.report_assets_common: QWeb报告只是从HTML生成的PDF文件。此资产加载在报表布局中。

还有其他一些用于特定应用程序的资产包:point_of_sale.assets, survey.survey_assets, mass_mailing.layout, 和 website_slides.slide_embed_assets.

Odoo通过AssetsBundle类管理它的静态资产，它位于/odoo/addons/base/models/assetsbundle.py。资产包不仅组合了多个文件;它还包含了更多的特性。这里是它提供的功能列表:

• 它结合了多个JavaScript和CSS文件。
• 它通过删除文件内容中的注释、额外空格和回车来缩小JavaScript和CSS文件。删除这些额外的数据将减少静态资产的大小并提高页面速度。
• 它内置了对CSS预处理程序的支持，比如SASS和LESS。这意味着您可以添加SCSS和更少的文件，它们将被自动编译并添加到包中。
• 如果达到4095规则限制，它会自动分割样式表资产文件。

自定义资产

正如我们所看到的，Odoo对于不同的代码库有不同的资产。为了得到正确的结果，您需要选择正确的资产包，将定制的JavaScript和CSS文件放在其中。例如，如果你正在设计一个网站，你需要把你的文件放在web.assets_frontend。在下一个章节中，您将看到如何在现有的资产包中包含定制的CSS/JavaScript。尽管这种情况很少见，但有时您需要创建一个全新的资产包。您可以创建自己的资产包，正如我们将在下一节中描述的那样。

怎么做呢?

按照以下步骤创建一个自定义资产包:

1. 创建QWeb模板，并添加您的JavaScript, CSS，或SCSS文件，如下:

template id="my_custom_assets" name="My Custom Assets">
　　link rel="stylesheet" type="text/scss" href="/my_module/static/src/scss/my_scss.scss"/>
　　link rel="stylesheet" type="text/css" href="/my_module/static/src/scss/my_css.css"/>
　　script type="text/JavaScript" src="/my_module/static/src/js/widgets/my_JavaScript.js"/>
/template>

2. 在您想要加载此包的QWeb模板中使用t-call-assets，如下所示:

template id="some_page">
...
head>
t t-call-assets="my_module.my_custom_assets" tjs="false"/>
t t-call-assets="my_module.my_custom_assets" tcss="false"/>
head>
...

它是如何工作的…

在步骤1中，我们使用外部ID my_custom_assets创建了新的QWeb模板。在这个模板中，您需要列出所有的CSS、SCSS和JavaScript文件。首先，Odoo将编译SCSS文件到CSS，然后，Odoo将结合所有的CSS和JavaScript文件到一个单独的CSS和JavaScript文件。声明资产之后，需要将它们加载到QWeb模板(web页面)中。 

在步骤2中，我们已经在模板中加载了CSS和JavaScript资产。t-css和t-js属性仅用于加载样式表或脚本。

在大多数网站开发中，您需要在现有的资产包中添加JavaScript和CSS文件。添加一个新的资产包是非常罕见的。只有当你想开发没有Odoo CMS功能的页面/应用程序时才需要。在下一个章节中，您将了解如何在现有的资产包中添加自定义CSS/JavaScript。

有更多的…

如果您正在使用Odoo中的资产，以下是您需要知道的一些事情

在Odoo中调试JavaScript非常困难，因为AssetBundle会将多个JavaScript文件合并到一个文件中，并且还会缩小它们。

调试JavaScript可能是非常困难的Odoo，因为AssetBundle合并多个JavaScript文件到一个单一的，也缩小了他们。通过使用资产启用developer模式，您可以跳过资产绑定，并且页面将分别加载静态资产，以便您可以轻松地进行调试。通过启用带资产的developer模式，您可以跳过资产绑定，并且页面将分别加载静态资产，以便您可以轻松地进行调试。

合并后的资产只生成一次，并存储在ir.attachment模型中。之后，它将从附件中提供。如果您想重新生成资产，您可以从调试选项中进行，如下面的截图所示:

合并后的资产只生成一次并存储在ir中。附件的模型。之后，它将从附件中提供。如果您想重新生成资产，您可以从调试选项中进行，如下面的截图所示:

如您所知，Odoo将只生成一次资产。这种行为在开发过程中可能会令人头疼，因为它需要频繁地重新启动服务器。要克服这个问题，可以在命令行中使用dev=xml，它将直接加载资产，因此不需要重新启动服务器。

扩展CSS和JavaScript的网站

在这个章节中，我们将介绍如何添加自定义样式表和JavaScript到网站。

准备

我们将使用第4章中的my_library模块，创建Odoo附加模块。我们将添加CSS, SCSS和JavaScript文件，这些文件将修改网站。由于我们正在修改网站，我们将需要添加网站的依赖性。像这样修改清单:

...
‘depends‘: [‘base‘, ‘website‘],
...

怎么做呢?

覆盖主网站模板，注入你的代码，如下:

1. 添加一个名为views/templates.xml的文件，并添加一个空视图覆盖，如下所示(不要忘记在__manifest__ .py中列出该文件):

odoo>
　　template id="assets_frontend"　inherit_id="web.assets_frontend">
　　　　xpath expr="." position="inside">
　　　　 points 2 & 3 go here /-->
　　　　xpath>
　　template>
odoo>

2. 添加CSS和SCSS文件的引用，如下:

link href="/my_library/static/src/css/my_library.css" rel="stylesheet" type="text/css"/>
link href="/my_library/static/src/scss/my_library.scss" rel="stylesheet" type="text/scss"/>

3.添加一个引用到你的JavaScript文件，如下:

script src="/my_library/static/src/js/my_library.js" type="text/JavaScript" />

4. 添加一些CSS代码到static/src/ CSS /my_library.css,如下:

body main {
　　background: #b9ced8;
}

5. 向static/src/ SCSS my_library.scss添加一些SCSS代码。scss,如下所示:

$my-bg-color: #1C2529;
$my-text-color: #D3F4FF;
nav.navbar {
　　background-color: $my-bg-color !important;
　　.navbar-nav .nav-link span{
　　　　color: darken($my-text-color, 15);
　　　　font-weight: 600;
　　}
}

footer.o_footer {
　　background-color: $my-bg-color !important;
　　color: $my-text-color;
}

 6. 添加一些JavaScript代码到static/src/js/my_library.js如下: 

odoo.define(‘my_library‘, function (require) {
　　var core = require(‘web.core‘);
　　alert(core._t(‘Hello world‘));
　　return {
　　　　// if you created functionality to export, add it here
　　}
});

更新你的模块后，你应该看到Odoo网站有自定义的颜色在菜单，正文，和页脚，和一个有点恼人的Hello world弹出在每个页面加载，如下截图所示:

它是如何工作的…

在Odoo的CMS基础上有一个名为QWeb的XML模板引擎，我们将在下一篇文章中详细讨论它。资产包只是用模板创建的。在步骤1、2和3中，我们通过扩展web.assets_frontend列出了样式表和JavaScript文件。我们选择web.assets_frontend是因为我们想更新网站。这些资产被载入每个网站页面。

在第4步中，我们添加了CSS，用于设置网站的主体背景颜色。

对于CSS/SCSS文件，有时候，顺序很重要。因此，如果您需要覆盖在另一个附加组件中定义的样式，您必须注意您的文件是在您想要修改的原始文件之后加载的。

这可以通过调整视图的优先级字段或直接继承加载项的视图来实现，该视图将引用注入CSS文件。有关详细信息，请参阅第10章后端视图中的更改现有视图-视图继承配方。

在步骤5中，我们添加了基本的SCSS。Odoo内置了对SCSS预处理器的支持。Odoo将自动编译SCSS文件到CSS。在我们的示例中，我们使用了带有一些变量的基本SCSS和函数darken来将$my-text-color调暗15%。SCSS预处理器有大量的其他特性;如果你想了解更多关于SCSS的信息，请参考‘http://sass- lang.com/。

Odoo 12之前的版本使用的是Bootstrap 3，它使用的较少(http://lesscss.org)预处理器。Odoo版本12使用了最新的Bootstrap版本，它是Bootstrap 4 (https://getbootstrap. com/ )。它使用SCSS。因此，如果您使用的是较老的Odoo版本，则需要编写更少的代码而不是SCSS。

在第6步中，我们添加了基本的JavaScript，它只在页面加载时显示警告消息。为了避免JavaScript的排序问题，Odoo使用了一种非常类似RequireJS的机制(http://requirejs.org)。在我们的JavaScript文件中，我们调用了odoo.define()，它需要两个参数，一个是要定义的名称空间，另一个是包含实际实现的函数。如果您导出了功能的许多逻辑上不同的部分，那么在不同的函数中定义它们，并在前面加上您的附加组件的名称，并用点分隔，以避免将来的命名冲突。这就是web模块所做的，它定义了web.core和web.data等。

对于第二个参数，定义函数只接收一个参数require，您可以使用该函数获取对其他模块或核心中定义的JavaScript名称空间的引用。使用这个与Odoo的所有交互，永远不要依赖于全局Odoo对象。

然后，您自己的函数可以返回一个对象，该对象指向您希望为其他附加组件提供的引用，或者如果没有这样的引用，则不返回任何引用。如果你已经从你的函数返回了一些引用，你可以在另一个函数中使用它们，如下面的例子所示:

odoo.define(‘my_module‘, function (require) {
　　var test = {
　　　　key1: ‘value1‘,
　　　　key2: ‘value2‘
　　};
　　var square = function(number) {
　　　　return 2*2;
　　};
　　
　　return {
　　　　test: test,
　　　　square: square
　　}
});
// In another file
odoo.define(‘another_module‘, function (require) {
　　var my_module = require(‘my_module‘);
　　console.log(my_module.test.key1);
　　console.log(‘square of 5 is‘, my_module.square(5));
});

介绍了Odoo 9.0的要求机制。在旧版本中，处理JavaScript的外接程序需要在openerp命名空间中定义与外接程序同名的函数。此函数接收到当前加载实例的引用作为参数，从该参数访问API函数。因此，为了升级现有代码，将其更改为odoo.define子句，并通过require导入必要的对象。

创建或修改模板- QWeb

我们将为在第5章“应用模型”中开发的my_library插件添加网站功能。我们感兴趣的是允许用户浏览图书馆，如果他们以适当的权限登录，使他们能够从网站界面编辑图书详细信息。

 怎么做呢?

我们需要定义以下几个控制器和视图:

1. 在views/templates.xml中添加一个最小模板，如下所示:

xml version="1.0" encoding="utf-8"?>
　　odoo>
　　　　template id="books">
　　　　　　t t-call="website.layout">
　　　　　　　　
　　　　　　t>
　　　　template>
　　odoo>

2. 在website.layout中，使用oe_structure类添加droppable元素，如下所示:

div class="oe_structure">
　　section class="pt32 pb32 bg-secondary oe_custom_bg">
　　　　div class="container text-center">
　　　　　　h1> Editable text and supports drag and drop.h1>
　　　　div>
　　section>
div>

3.将代码块附加到网站中。显示图书信息的版面如下:

        div class="container">
            t t-foreach="books" t-as="book">
                div t-attf-class="card mt-3 #{‘bg-info‘ if book_odd else ‘‘}" >
                    div class="card-body" id="card_body">
                        h3 t-field="book.name"/>
                        t t-if="book.date_release">
                            div t-field="book.date_release" class="text-muted"/>
                        t>
                        b class="mt8"> Authors b>
                        ul>
                            li t-foreach="book.author_ids" t-as="author">
                                span t-esc="author.name" />
                            li>
                        ul>
                    div>
                div>
            t>
        div>

4. 添加一个不可编辑的元素到website.layout，如下所示:

  section class="container mt16" contenteditable="False">
      This is a non-editable text after the list of books.
  section>

5. 在controllers/main.py中添加一个提供图书列表的控制器，如下所示:

from odoo import http
from odoo.http import request

class Main(http.Controller):
    @http.route(‘/books‘, type=‘http‘, auth="user", website=True)
    def library_books(self):
        return request.render(
            ‘my_library.books‘, {
                ‘books‘: request.env[‘library.book‘].search([]),
            })

在浏览器中打开http://your-server-url:8069/books，您将能够看到图书列表以及作者。通过这段代码，用户可以看到图书列表及其详细信息。给予适当的权限，用户还将能够改变书的细节和一些其他文本。

 它是如何工作的…

首先，我们创建了一个名为books的模板，用于生成显示图书列表所需的HTML。所有代码都包装在带有t-call属性集的t元素中，这使得Odoo使用website.layout模板呈现页面，并将我们的内容插入到模板中。website.layout包括所有必需的实用程序，比如Bootstrap、jQuery、FontAwesome等等。这些实用程序用于设计web页面。默认情况下，它包括所有必要的资产，如Bootstrap、jQuery、FontAwesome等等。website.layout还包括默认的页眉、页脚、代码片段和页面编辑功能。这样，我们就得到了一个完整的Odoo web页面，包括菜单、页脚和页面编辑功能，而不必在所有页面中重复这些代码。如果你不使用t-call="website_layout"，你将不会得到默认的页眉、页脚和网站编辑功能。

在website.layout中，我们添加了带有QWeb模板属性的HTML来显示图书列表。现在，我们将查看不同的QWeb属性及其用法。在此模板中，您将能够访问从main.py中控制器传递的参数。

Loop

为了处理记录集或可迭代数据类型，您需要一个结构来遍历列表。在QWeb模板中，这可以通过t-foreach元素完成。迭代可以发生在t 元素中，在这种情况下，它的内容会对t-foreach属性中传递的iterable的每个成员重复，如下所示:

t t-foreach="[1, 2, 3, 4, 5]" t-as="num">
　　p>t t-esc="num"/>p>
t>

这将以如下方式呈现:

1
2
3
4
5

　还可以将t-foreach和t-as属性放置在任意元素中，此时该元素及其内容将针对迭代中的每个项重复。看看下面的代码块。这将产生与前面例子完全相同的结果:

p t-foreach="[1, 2, 3, 4, 5]" t-as="num">
　　t t-esc="num"/>
p>

在我们的示例中，看一下t-call元素的内部，这里发生了实际的内容生成。模板期望使用具有名为books set变量的上下文进行呈现，该变量在t-foreach元素中遍历该模板。t-as属性是强制性的，它将用作迭代器变量的名称，用于访问迭代数据。虽然这种构造最常见的用途是遍历记录集，但您可以在任何可迭代的Python对象上使用它。

在t-foreach循环中，您可以访问两个额外的变量，它们的名称派生于附带的t-as属性。正如前面示例中的book一样，我们可以访问book_odd变量，该变量在迭代时包含奇数索引的值为真，偶数索引的值为假。在这个例子中，我们使用这个可以在纸牌中交替使用背景颜色。

以下是其他可用的变量: 

book_index，它返回迭代中的当前(从零开始)索引。

book_first和book_last:如果这是第一次或最后一次迭代，则book_first和book_last分别为真。

book_value，如果我们遍历的book变量是一个字典，它将包含条目的值;在本例中，book将遍历字典的键。

book_size，它是集合的大小(如果可用)。

book_even和book_odd根据迭代索引获得真值。

book_parity:迭代时包含偶数索引的偶数值，以及奇数索引的奇数值。

给出的例子是基于我们的例子。在您的例子中，需要用t-as属性处的值替换book。

动态属性(Dynamic attributes)

QWeb template可以动态设置属性值。这可以通过以下三种方式来实现。

第一种方法是通过t-att-$attr_name。在模板呈现时，创建一个属性$attr_name;它的值可以是任何有效的Python表达式。这用当前上下文计算，结果设置为属性的值，如下所示:

div t-att-total="10 + 5 + 5"/>

它将被渲染成这样:

div total="20">div>

第二种方法是通过t-attf-$attr_name。这与前面的选项相同。唯一的区别是只有字符串在{{..}}和#{…}是评估。