导航

你可以使用网站构建器轻松修改导航以满足你的需求。

在本章中，您将学习如何：

• 删除和创建菜单项。

• 创建一个下拉菜单。

• 创建一个超级菜单。

默认

Odoo 会根据您安装的应用程序自动生成一些基本菜单项。例如，网站应用会在主菜单中添加两个条目。这些条目链接到页面，这些页面也是自动创建的。

删除默认菜单项。

/website_airproof/data/菜单.xml

<!-- Contact us -->
<delete model="website.menu" search="[('url','in', ['/', '/contactus']),
('website_id', '=', 1)]"/>

<!-- Shop -->
<delete model="website.menu" search="[('url','in', ['/', '/shop']),
('website_id', '=', 1)]"/>

菜单项

声明

/website_airproof/data/菜单.xml

<record id="menu_about_us" model="website.menu">
    <field name="name">About us</field>
    <field name="url">/about-us</field>
    <field name="parent_id" search="[
        ('url', '=', '/default-main-menu'),
        ('website_id', '=', 1)]"/>
    <field name="website_id">1</field>
    <field name="sequence" type="int">10</field>
</record>

字段	描述
名称	链接文本
网址	href 属性的值
父级ID	将该项添加到的菜单。
网站ID	将在其中添加该项目的网站。
序列	定义链接在顶部菜单中的位置。

新窗口

在新标签页中打开链接的网址。

<record id="..." model="website.menu">
    <field name="new_window" eval="True"/>
</record>

外部链接

添加到外部网站的链接。

<record id="..." model="website.menu">
    <field name="url">https://www.odoo.com</field>
</record>

锚点

链接到页面的特定部分。

<record id="..." model="website.menu">
    <field name="url">/about-us#our-team</field>
</record>

下拉菜单

声明

/website_airproof/data/菜单.xml

<record id="menu_services" model="website.menu">
    <field name="name">Services</field>
    <field name="website_id">1</field>
    <field name="parent_id" search="[
        ('url', '=', '/default-main-menu'),
        ('website_id', '=', 1)]"/>
    <field name="sequence" type="int">...</field>
</record>

在下拉菜单中添加一项。

<record id="menu_services_item_1" model="website.menu">
    <field name="name">Item 1</field>
    <field name="url">/dropdown/item-1</field>
    <field name="website_id">1</field>
    <field name="parent_id" ref="website_airproof.menu_services"/>
    <field name="sequence" type="int">...</field>
</record>

字段	描述
父级ID	将该项添加到的下拉菜单。

大菜单

一个超级菜单是一个下拉菜单，它提供了更多的可能性，而不仅仅是一系列链接。在超级菜单中，您可以使用任何类型的内容（文本、图片、图标等）。

声明

/website_airproof/data/菜单.xml

<record id="menu_mega_menu" model="website.menu">
    <field name="name">Mega Menu</field>
    <field name="url">/mega-menu</field>
    <field name="parent_id" search="[
        ('url', '=', '/default-main-menu'),
        ('website_id', '=', 1)]"/>
    <field name="website_id">1</field>
    <field name="sequence" type="int">..</field>
    <field name="is_mega_menu" eval="True"/>
    <field name="mega_menu_classes">...</field>
    <field name="mega_menu_content" type="html">
        <!-- Content -->
    </field>
</record>

字段	描述
是巨型菜单	启用超大菜单功能。
mega_menu_classes	要添加到主元素的自定义类
主菜单内容	默认主菜单的内容

自定义模板

创建您自己的模板并将其添加到列表中。

布局

/website_airproof/views/website_templates.xml

<template id="s_mega_menu_airproof" name="Airproof" groups="base.group_user">
    <section class="s_mega_menu_airproof o_cc o_cc1 pt40">
        <!-- Content -->
    </section>
</template>

选项

在网站构建器中为你的新自定义超大菜单添加选项时，请使用以下代码。

/网站防尘/数据/预设.xml

<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Mega Menu Options">
    <xpath expr="//*[@data-name='mega_menu_template_opt']/*" position="before">
        <t t-set="_label">Airproof</t>
        <we-button t-att-data-select-label="_label"
            data-select-template="website_website_airproof.s_mega_menu_airproof"
            data-img="/website_airproof/static/src/img/builder/header_opt.svg"
            t-out="_label"/>
    </xpath>
</template>