页面¶

在本章中，您将学习如何声明静态页面。

默认页面¶

在Odoo中，网站默认提供了一些静态页面（主页，联系我们，404错误页面等）。它们是按照以下方式构建的。

<template id="website.homepage" name="Homepage">
    <t t-call="website.layout">

        <!-- Variables -->
        <t t-set="additional_title" t-value="'Home'" />

        <div id="wrap" class="oe_structure oe_empty">

            <!-- Content -->

        </div>

    </t>
</template>

定义元标题。

<t t-set="additional_title" t-value="'...'"/>

定义元描述。

<t t-set="meta_description" t-value="'...'"/>

给页面添加一个CSS类。

<t t-set="pageName" t-value="'...'"/>

隐藏标题。

<t t-set="no_header" t-value="true"/>

隐藏页脚。

<t t-set="no_footer" t-value="true"/>

如有需要，禁用默认页面。

/website_airproof/data/pages/home.xml¶

<record id="website.homepage" model="ir.ui.view">
    <field name="active" eval="False"/>
</record>

/website_airproof/data/pages/contactus.xml¶

<record id="website.contactus" model="ir.ui.view">
    <field name="active" eval="False"/>
</record>

或者，使用XPath替换这些页面的默认内容。

/website_airproof/data/pages/404.xml¶

<template id="404" inherit_id="http_routing.404">
    <xpath expr="//*[@id='wrap']" position="replace">

        <t t-set="additional_title" t-value="'404 - Not found'"/>

        <div id="wrap" class="oe_structure">
            <!-- Content -->
        </div>

    </xpath>
</template>

另请参阅

主题页面¶

你可以在你的网站上添加任意多的页面。不需要定义 <template>，只需创建一个页面对象。

声明

/website_airproof/data/pages/about_us.xml¶

<record id="page_about_us" model="website.page">
    <field name="name">About us</field>
    <field name="is_published" eval="True"/>
    <field name="key">website_airproof.page_about_us</field>
    <field name="url">/about-us</field>
    <field name="type">qweb</field>
    <field name="arch" type="xml">
        <t t-name="website_airproof.page_about_us">

            <t t-call="website.layout">
                <div id="wrap" class="oe_structure">

                    <!-- Content -->

                </div>
            </t>

        </t>
    </field>
</record>

字段	描述
名称	页面名称。
is_published	定义页面是否已发布（对访问者可见）。
键	视图键（必须唯一）
url网址	页面可访问的URL。
类型	视图类型
arch	查看架构

使用 <t t-call="website.layout"> 你可以使用 Odoo 默认的页面布局与你的代码。

标题覆盖¶

使页眉背景透明并置于页面内容之上。

<field name="header_overlay" eval="True"/>

媒体¶

图片¶

您可以将图像记录在数据库中，并在设计/代码中稍后使用它们。它们也将通过 媒体对话框 对最终用户可用。

网站构建器支持以下图像文件格式：JPG、GIF、PNG和SVG。

声明

/website_airproof/data/images.xml¶

<record id="img_about_01" model="ir.attachment">
    <field name="name">About Image 01</field>
    <field name="datas" type="base64" file="website_airproof/static/src/img/content/img_about_01.jpg"/>
    <field name="res_model">ir.ui.view</field>
    <field name="public" eval="True"/>
</record>

字段	描述
名称	图片名称
数据	图像文件的路径
res_model	向导模型的名称

将其用作背景图像。

<section style="background-image: url('/web/image/website_airproof.img_about_01');">

将其用作常规图像。

<img src="/web/image/website_airproof.img_about_01" alt=""/>

使用带有颜色滤镜的常规图像。

<img src="/web/image/website.s_media_list_default_image_1"
    class="img img-fluid mx-auto" alt=""
    data-gl-filter="custom"
    data-filter-options="{'filterColor': 'rgba(0, 0, 0, 0.5)'}"/>

小技巧

图像大小极大地影响用户体验、搜索引擎优化和整体网站性能。因此，请确保正确调整图像大小。

视频¶

将视频添加为背景。

<section class="o_background_video" data-bg-video-src="...">
    <!-- Content -->
</section>

属性	描述
data-bg-video-src	视频 URL.

添加视频作为内容。

<div class="media_iframe_video" data-oe-expression="...">
    <div class="css_editable_mode_display">&nbsp;</div>
    <div class="media_iframe_video_size" contenteditable="false">&nbsp;</div>
    <iframe src="..."
        frameborder="0"
        contenteditable="false"
        allowfullscreen="allowfullscreen"/>
</div>

属性	描述
data-oe-expression	视频 URL.
src	视频 URL.

图标¶

默认情况下，Font Awesome 图标库已包含在网站构建器中。您可以使用 CSS 前缀 fa 和图标的名称在任何地方放置图标。Font Awesome 设计用于与内联元素一起使用。您可以使用 <i> 标签以简洁方式，但使用 <span> 更符合语义。

<span class="fa fa-picture-o"/>

另请参阅

Font Awesome v4 图标

启用网站构建器样式选项。

<span class="fa fa-2x fa-picture-o rounded-circle"/>

增加图标大小（fa-2x、fa-3x、fa-4x 或 fa-5x 类）。

<span class="fa fa-2x fa-picture-o"/>

Edit on GitHub