如何在Odoo中进行全控制式UI开发，替代拖拽系统？

核心实现：完全自定义页面 #

Odoo支持完全跳过拖拽式网站构建器，直接用HTML/CSS/JS实现全自定义页面，核心是通过自定义视图模板+注册路由实现全控制：

1. 搭建自定义模块（基础操作） #

先创建一个自定义模块，基础结构如下：

my_custom_ui/
├── __init__.py
├── __manifest__.py
├── controllers/
│   ├── __init__.py
│   └── main.py
└── views/
    └── templates.xml

• __manifest__.py 里声明模块基本信息，依赖web模块即可。

2. 注册路由与控制器 #

在controllers/main.py中编写路由，直接返回自定义模板，还能传递动态数据：

from odoo import http
from odoo.http import request

class CustomUIController(http.Controller):
    @http.route('/custom-page', auth='public', website=True)
    def custom_page(self, **kw):
        # 可从数据库拉取数据传递到模板
        partner_data = request.env['res.partner'].search([])
        return request.render('my_custom_ui.custom_page_template', {
            'page_title': '全自定义页面',
            'partner_list': partner_data
        })

3. 编写纯HTML/CSS/JS模板 #

在views/templates.xml里定义完全自主控制的页面结构，可选择是否保留Odoo默认布局：

<odoo>
    <template id="custom_page_template" name="Custom Page">
        <!-- 若不需要Odoo默认导航栏/页脚，直接去掉t-call="website.layout" -->
        <t t-call="website.layout">
            <div class="custom-container" t-set="content">
                <h1 t-esc="page_title"/>
                <!-- 内嵌自定义样式 -->
                <style>
                    .custom-container {
                        max-width: 1200px;
                        margin: 3rem auto;
                        padding: 2rem;
                        background-color: #f8f9fa;
                        border-radius: 8px;
                    }
                </style>
                <!-- 内嵌自定义JS -->
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        console.log('自定义JS已加载');
                    });
                </script>
                <!-- 动态渲染数据 -->
                <ul class="partner-list">
                    <t t-foreach="partner_list" t-as="partner">
                        <li t-esc="partner.name"/>
                    </t>
                </ul>
            </div>
        </t-call>
    </template>
</odoo>

进阶定制技巧 #

• 全局样式覆盖：在模块static/src/scss/custom.scss中编写全局样式，通过assets声明加载以覆盖Odoo默认样式：
  在views/templates.xml添加：

  <template id="custom_assets" name="Custom Assets" inherit_id="web.assets_frontend">
      <xpath expr="." position="inside">
          <link rel="stylesheet" href="/my_custom_ui/static/src/scss/custom.scss"/>
      </xpath>
  </template>
  

• 替换默认页面：若要替换Odoo默认首页、产品页，使用模板继承，通过inherit_id定位原模板，用position="replace"完全替换内容。
• 自定义组件：基于Odoo的web.Component类编写可复用JS组件，嵌入自定义模板，兼顾框架能力与自定义需求。

注意事项 #

• 自定义模板可使用Odoo的QWeb语法实现动态数据渲染，无需局限于纯静态HTML。
• 模块安装后，访问/custom-page即可查看自定义页面，权限通过路由的auth参数控制（public为公开访问，user为登录用户访问）。

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