odoo 13.0教程（框架代码分析）

odoo 13.0默认的界面是这样的。

自己用工作业余时间大概折腾了8天了，先晒一下效果图。

与从git上下载的代码运行效果相比，所有app都放在了顶端上，把所有的子菜单都放在左边。以下介绍如何实现的。

假如你已经具备了js、scss、xml基本知识，如果没有基础可以参考：
jquery、css、xml菜鸟教程

1、源码结构

所有的app入口都是通过web模块进入的。
用chrome浏览器F12，看到网页的基本结构：

2、代码解读

1、odoo-13.0\addons\web\views\webclient_templates.xml

2、odoo-13.0\addons\web\static\src\js\chrome\web_client.js
至于从start怎么到这里的，相信有点基础的都能找到。


3、odoo-13.0\addons\web\static\src\js\chrome\abstract_web_client.js
从上图可以看到，web_client是从abstract_web_client继承过来的。

4、odoo-13.0\addons\web\static\src\js\chrome\action_manager.js

5、odoo-13.0\addons\web\static\src\js\chrome\sub_menu.js

6、odoo-13.0\addons\web\static\src\xml\base.xml

7、odoo-13.0\addons\web\static\src\js\chrome\menu.js
注意这里是把$section_placeholder放在了o_sub_menu中，如果不放在o_sub_menu，子菜单将会在顶端菜单栏中显示。


8、odoo-13.0\addons\web\static\src\js\chrome\action_mixin.js

9、odoo-13.0\addons\web\static\src\xml\menu.xml
这里要注意，因为我是把所有子菜单全部显示出来了，因此一级或二级菜单就不需要点击了。

10、odoo-13.0\addons\web\static\src\scss\webclient_layout.scss
需要注意的是，在编写css时要注意xml结构，例如之前很多次都没有把这跟结构写到css中，调试、对比了好久才找到原因，当然也只有小白可能才会出现这种情况。

> .o_sub_menu {
                height: 100%;
                width:220px;
                display: -ms-flexbox;
                display: -moz-box;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                border-right: 1px solid #afafb6;
                > ul {
                    flex-flow: column nowrap;
                    display: flex;
                    height:100%;
                    overflow-y: auto;
                    float:left;
                    width:100%;
                    padding: 1px;
                    > li {
                        position: relative;
                        display: block;
                        float: left;
                        >.o_secondary_sub_menu_section {
                            font-weight: bold;
                            margin-left: 8px;
                            color: #7c7bad;
                        }
                        > a {
                            margin-left: 30px;
                            padding: 4px 4px 4px 1px;
                            color:blue;
                            > .badge {
                                margin-top: -1px;
                            }
                            > .o_sub_menu_text {
                                text-decoration:underline;
                                display:inline-block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: top; // To update display context changed by overflow:hidden
                                max-width: 85%;
                                margin-top: 1px;
                            }
                        }
                        >.o_secondary_sub_menu {
                            position: static;
                            float: none;
                            background-color: transparent;
                            box-shadow: none;
                            border: none;
                            overflow: visible;
                            margin-left: 30px;
                            > a {
                                padding: 4px 4px 4px 1px;
                                margin-left: 30px;
                                color: blue;
                                > .badge {
                                    margin-top: -1px;
                                }
                                > .o_sub_menu_text {
                                    text-decoration: underline;
                                    display: inline-block;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    vertical-align: top; // To update display context changed by overflow:hidden
                                    max-width: 85%;
                                    margin-top: 1px;
                                }
                            }

                            > .o_sub_menu_toggler:before {
                                display: inline-block;
                                width: 0;
                                height: 0;
                                content: "&darr";
                                opacity: 0.5;
                                text-indent: -99999px;
                                vertical-align: top;
                                margin-left: -12px;
                                margin-top: 4px;
                                margin-right: 4px;
                                border-top: 4px solid transparent;
                                border-bottom: 4px solid transparent;
                                border-left: 4px solid #4c4c4c;
                            }
                            > .o_menu_opened:before {
                                margin-top: 6px;
                                margin-left: -16px;
                                margin-right: 4px;
                                border-left: 4px solid transparent;
                                border-right: 4px solid transparent;
                                border-top: 4px solid #4c4c4c;
                            }
                        }
                    }
                }
            }

结束语

经过这次的代码解读，自己学习到了很多，在网上也参考了很多经验文章，odoo大家如果对英语能够理解的话，建议大家参考odoo官方开发文档，很多网上的例子都是从这里参考、翻译过来的。还有就是，无论如何都要自己亲自动手，纸上得来终觉浅，绝知此事要躬行！
odoo官方开发文档