如何在Odoo单个页面头部引入CSS与JavaScript文件

Odoo默认的全局资产包（web.assets_frontend、web.assets_backend）会在对应端的所有页面加载资源，如果你只需要在单个页面加载指定资源，可以用以下两种成熟方案：

方案1：直接在目标页面QWeb模板内嵌入资源 #

适合资源量少、不需要复用的场景，实现成本最低。
操作步骤：

• 定位到你需要修改的单个页面对应的QWeb模板（自定义页面模板或Odoo原生页面模板均可）
• 在模板内通过xpath匹配head节点，直接插入link和script标签，示例代码如下：

<odoo>
    <!-- 继承或定义目标页面模板 -->
    <template id="custom_single_page" name="自定义单页面" inherit_id="website.page_default">
        <xpath expr="//head" position="inside">
            <!-- 引入自定义CSS -->
            <link rel="stylesheet" href="/你的模块名/static/src/css/single_page.css"/>
            <!-- 引入自定义JS -->
            <script type="text/javascript" src="/你的模块名/static/src/js/single_page.js"></script>
        </xpath>
    </template>
</odoo>

这种方式引入的资源只会在当前模板渲染的页面加载，不会污染其他页面。

方案2：自定义独立资产包引入 #

适合资源量多、后续需要迭代维护的场景，可享受Odoo自带的资源压缩、合并、缓存优化能力。
操作步骤：

1. 首先在模块的__manifest__.py中定义独立的自定义资产包，不要挂载到全局资产包下：

{
    'name': '你的模块名',
    'version': '1.0.0',
    'depends': ['base', 'website'],
    'assets': {
        # 自定义专属资产包，命名建议带上模块前缀避免冲突
        '你的模块名.single_page_assets': [
            '/你的模块名/static/src/css/single_page.css',
            '/你的模块名/static/src/js/single_page.js',
            # 可继续添加更多该页面需要的资源
        ]
    },
    'data': [
        'views/single_page.xml',
    ],
}

2. 在目标页面的QWeb模板中引入上述自定义资产包即可：

<odoo>
    <template id="custom_single_page" name="自定义单页面" inherit_id="website.page_default">
        <xpath expr="//head" position="inside">
            <t t-call-assets="你的模块名.single_page_assets"/>
        </xpath>
    </template>
</odoo>

注意事项 #

• 若需要修改Odoo原生的单页面（比如产品详情页、后台订单详情页），仅需找到原生页面对应的模板ID，通过xpath继承插入资源即可，无需重写整个模板
• 资源修改后如果没有生效，可开启开发者模式清除Odoo资产缓存和浏览器缓存后重试
• 前端页面和后台页面的实现逻辑完全一致，仅需匹配对应页面对应的head节点即可

内容的提问来源于stack exchange，提问作者Dev Machine