odoo第一天==odoo文档学习theme主题

https://www.odoo.com/documentation/10.0/howtos/themes.html
1.在addons下创建主题模块

我创建的是

创建以下目录和文件

manifest.py：主题的配置信息
init.py：系统强制需要的文件
views ：放xml文件
static：放样式，js, 图片
2.在manifest.py

3.刷新模块列表就会出现我们的模块，安装它


4.扩展原来的头部

添加id在原来网页div id=’wrapwrap’ 下header元素中

会在网页中添加

这是最好的操作，如果你想要绑定css规则给一个元素，并且避免这css影响其他页面内容(注意：不要替换原来的元素属性)

添加div在原来网页div id=’wrapwrap’ 下header元素下div的最后一个

会在网页中添加

完整代码片段

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <data>
        <!--every element and option  placed inside a <template> tag-->
        <!-- Customize header  -->
        <template id="custom_header" inherit_id="website.layout" name="Custom Header">
            <!--xpath, qWeb associated with any part of the Odoo default structure-->
            <!--expr(表达式):find html element-->
            <!--position(位置):attributes 属性-->
            <!-- Assign an id  -->
            <xpath expr="//div[@id='wrapwrap']/header" position="attributes">
                <attribute name="id">my_header</attribute>
            </xpath>

            <!--position(位置):after 属性div的后面-->
            <!-- Add an element after the top menu  -->
            <xpath expr="//div[@id='wrapwrap']/header/div" position="after">
                <div class="container">
                    <div class="alert alert-info mt16" role="alert">
                        <strong>Welcome</strong>
                        in our website!
                    </div>
                </div>
            </xpath>
        </template>
    </data>
</odoo>

manifest.py：中添加’data’: [ ‘views/layout.xml’ ]
更新下模块看下结果
5.创建一个指定的页面布局（这页面修改html，更新没有用，把services换成其他的更新运行有效）

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <data>
        <!-- === id 是路由，这里地址是yourweb/page/services === -->
        <!-- === Services Page === -->
        <template name="Services page" id="website.services" page="True">  
            <t t-call="website.layout">
                <div id="wrap">
                    <div class="container">
                        <h1>Our Services</h1>
                        <ul class="services">
                            <li>Cloud Hosting</li>
                            <li>Support</li>
                            <li>Unlimited space</li>
                        </ul>
                        <!-- === Snippets' area === -->
                        <div class="oe_structure"/>
                    </div>
                </div>
            </t>
        </template>

        <在menu上添加标签>
        <record id="services_page_link" model="website.menu">
            <field name="name">Services</field>
            <field name="url">/page/services</field>
            <field name="parent_id" ref="website.main_menu"/>
            <field name="sequence" type="int">99</field>
        </record>
    </data>
</odoo>

6.继承原来的样式并修改
修改网页中地方

创建style.less

添加

.services {
    background: #EAEAEA;
    padding: 1em;
    margin: 2em 0 3em;
    li {
        display: block;
        position: relative;
        background-color: #16a085;
        color: #FFF;
        padding: 2em;
        text-align: center;
        margin-bottom: 1em;
        font-size: 1.5em;
    }
}

navigate to the view folder and create an XML file called assets.xml.
Remember to replace theme folder with your theme’s main folder name.
inherit_id. This attribute tells Odoo that our template is referring to another one in order to operate.

<template id="mystyle" name="My style" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
        <link href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/>
    </xpath>
</template>