Trang¶

Trong chương này, bạn sẽ học cách khai báo các trang tĩnh.

Trang mặc định¶

Trong SoOn, các trang web có một số trang tĩnh mặc định (Trang chủ, Liên hệ với chúng tôi, 404, ...). Chúng được xây dựng theo cách sau.

<template id="website.homepage" name="Homepage">
    <t t-call="website.layout">

        <!-- Variables -->
        <t t-set="additional_title" t-value="'Home'" />

        <div id="wrap" class="oe_structure oe_empty">

            <!-- Content -->

        </div>

    </t>
</template>

Xác định tiêu đề meta.

<t t-set="additional_title" t-value="'...'"/>

Xác định mô tả meta.

<t t-set="meta_description" t-value="'...'"/>

Thêm một lớp CSS vào trang.

<t t-set="pageName" t-value="'...'"/>

Ẩn tiêu đề.

<t t-set="no_header" t-value="true"/>

Ẩn chân trang.

<t t-set="no_footer" t-value="true"/>

Nếu cần, hãy tắt các trang mặc định.

/website_airproof/data/pages/home.xml¶

<record id="website.homepage" model="ir.ui.view">
    <field name="active" eval="False"/>
</record>

/website_airproof/data/pages/contactus.xml¶

<record id="website.contactus" model="ir.ui.view">
    <field name="active" eval="False"/>
</record>

Ngoài ra, hãy thay thế nội dung mặc định của các trang này bằng XPath.

/website_airproof/data/pages/404.xml¶

<template id="404" inherit_id="http_routing.404">
    <xpath expr="//*[@id='wrap']" position="replace">

        <t t-set="additional_title" t-value="'404 - Not found'"/>

        <div id="wrap" class="oe_structure">
            <!-- Content -->
        </div>

    </xpath>
</template>

Xem thêm

Trang chủ đề¶

Bạn có thể thêm bao nhiêu trang tùy thích vào trang web của mình. Thay vì xác định <template>, hãy tạo một đối tượng trang.

Tuyên ngôn

/website_airproof/data/pages/about_us.xml¶

<record id="page_about_us" model="website.page">
    <field name="name">About us</field>
    <field name="is_published" eval="True"/>
    <field name="key">website_airproof.page_about_us</field>
    <field name="url">/about-us</field>
    <field name="type">qweb</field>
    <field name="arch" type="xml">
        <t t-name="website_airproof.page_about_us">

            <t t-call="website.layout">
                <div id="wrap" class="oe_structure">

                    <!-- Content -->

                </div>
            </t>

        </t>
    </field>
</record>

Cánh đồng	Sự miêu tả
tên	Tên trang.
được công bố	Xác định xem trang có được xuất bản hay không (hiển thị cho khách truy cập).
chìa khóa	Khóa xem (phải là duy nhất)
địa chỉ	URL nơi trang có thể truy cập được.
kiểu	Kiểu xem
vòm	Xem kiến trúc

Với <t t-call="website.layout"> bạn sử dụng bố cục trang mặc định của SoOn với mã của mình.

Lớp phủ tiêu đề¶

Làm cho nền tiêu đề trong suốt và nổi bật trên nội dung trang.

<field name="header_overlay" eval="True"/>

Phương tiện truyền thông¶

Hình ảnh¶

Bạn có thể ghi lại hình ảnh trong cơ sở dữ liệu và sử dụng chúng sau này trong thiết kế/mã của mình. Chúng cũng sẽ có sẵn cho người dùng cuối thông qua hộp thoại đa phương tiện.

Trình dựng website hỗ trợ các định dạng tệp hình ảnh sau: JPG, GIF, PNG và SVG.

Tuyên ngôn

/website_airproof/data/images.xml¶

<record id="img_about_01" model="ir.attachment">
    <field name="name">About Image 01</field>
    <field name="datas" type="base64" file="website_airproof/static/src/img/content/img_about_01.jpg"/>
    <field name="res_model">ir.ui.view</field>
    <field name="public" eval="True"/>
</record>

Cánh đồng	Sự miêu tả
tên	Tên Hình ảnh
dữ liệu	Đường dẫn đến tập tin hình ảnh
res_model	Tên của mô hình thuật sĩ

Sử dụng nó làm hình nền.

<section style="background-image: url('/web/image/website_airproof.img_about_01');">

Sử dụng nó như một hình ảnh thông thường.

<img src="/web/image/website_airproof.img_about_01" alt=""/>

Sử dụng như một hình ảnh thông thường với bộ lọc màu.

<img src="/web/image/website.s_media_list_default_image_1"
    class="img img-fluid mx-auto" alt=""
    data-gl-filter="custom"
    data-filter-options="{'filterColor': 'rgba(0, 0, 0, 0.5)'}"/>

Mẹo

Kích thước hình ảnh ảnh hưởng lớn đến trải nghiệm người dùng, tối ưu hóa công cụ tìm kiếm và hiệu suất tổng thể của trang web. Vì vậy, hãy đảm bảo kích thước hình ảnh của bạn một cách chính xác.

Video¶

Thêm video làm nền.

<section class="o_background_video" data-bg-video-src="...">
    <!-- Content -->
</section>

Thuộc tính	Sự miêu tả
dữ liệu-bg-video-src	URL video.

Thêm video làm nội dung.

<div class="media_iframe_video" data-oe-expression="...">
    <div class="css_editable_mode_display">&nbsp;</div>
    <div class="media_iframe_video_size" contenteditable="false">&nbsp;</div>
    <iframe src="..."
        frameborder="0"
        contenteditable="false"
        allowfullscreen="allowfullscreen"/>
</div>

Thuộc tính	Sự miêu tả
biểu thức dữ liệu-oe	URL video.
src	URL video.

Biểu tượng¶

Theo mặc định, thư viện biểu tượng Font Awesome được bao gồm trong Trình tạo trang web. Bạn có thể đặt biểu tượng ở bất kỳ đâu bằng cách sử dụng Tiền tố CSS fa và tên của biểu tượng. Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. Bạn có thể sử dụng thẻ <i> để ngắn gọn nhưng sử dụng thẻ <span> sẽ chính xác hơn về mặt ngữ nghĩa.

<span class="fa fa-picture-o"/>

Xem thêm

Biểu tượng phông chữ v4 tuyệt vời

Bật tùy chọn kiểu Trình tạo trang web.

<span class="fa fa-2x fa-picture-o rounded-circle"/>

Tăng kích thước biểu tượng (các lớp fa-2x, fa-3x, fa-4x hoặc fa-5x).

<span class="fa fa-2x fa-picture-o"/>