本文是 Odoo 11.0 官方教程第一篇 主題

查看英文原文：
https://www.odoo.com/documentation/11.0/howtos/themes.html

以下內容為機器翻譯，半人工校對，僅供參考。

主題教程

Odoo 歌頌自由。設計師為用戶自由，為用戶定制一切，根據自己的需要。

準備好創造你自己的主題了嗎？太好了在你開始之前，這是你應該知道的一些事情。本教程是一個指導創建 Odoo 主題。

網頁設計師介紹

如果您使用的是 Odoo 首次一個網頁設計師，你是在正確的地方。課程將概述 Odoo 題材創作的基礎。

注
Odoo 的團隊已經創建了一個框架，強大的和易于使用的。沒有必要知道的特殊語法來使用這套工具。

從常見的 CMS Odoo

注
如果你總是以同樣的方式思考和工作，你可能會得到相同的結果。如果你想完全新的東西，然后嘗試一些不同的東西。

哪里是我的 header.php 文件?

這通常是從一個用 WordPress 或 Joomla 來到 Odoo 首次工作的網頁設計師的第一個問題。

事實上，當使用普通的 CMS 系統，你的代碼的幾個文件（像 header.php，page.php，post.php，等）為你的網站創建一個基本的結構。有了這些系統，這個基礎結構作為一個設計基礎，你必須及時更新，以確保在您的合作醫療系統的兼容性。所以，即使你花了數小時編碼的文件，你甚至還沒有開始設計上。

這 不 適用于創建 Odoo 主題。

Note
我們認為，主題設計應該是簡單的（和強大的）。當我們創建網站時，我們決定從頭開始，而不是依賴于已經存在的東西。這種方法給予我們關注的東西，是真正重要的設計師：風格，內容和邏輯背后的自由。與技術的東西沒有更多的掙扎。

Odoo 默認主題結構

Odoo 自帶的默認主題結構。這是一個非常基本的“主題”，提供最小的結構和布局。當你創建一個新的主題，你實際上是延長這。事實上，它總是在您的設置啟用，它的行為完全一樣，我們上面提到的合作醫療的基本結構，除了您不必創建或維護它。它會自動升級在你安裝，因為它是 Odoo，包括在網站模塊，一切都是默認的順利整合。

作為一個結果，你專注于設計，而這種結構不提供集成和功能的工作完全免費。

主要功能:

• 網頁、博客和電子商務的基本布局
• 網站生成器集成
• 基本的片段
• 自動 Less / SASS 編譯
• 自動 JS 和 CSS 壓縮和組合

主要技術:

• Twitter Bootstrap
• jQuery
• jQuery UI
• underscore.js

思考 "模塊化"

一個主題是不是 Odoo 文件夾包含 HTML 或 PHP 文件，這是一個模塊化的框架寫的 XML。以前從未使用過 XML 文件？別擔心，在下面的教程中，你將能夠只用 HTML 基本知識創建您的第一個主題。

使用經典的網頁設計工作流程，您通常對整個頁面的布局進行代碼的代碼。這是一個“靜態”網頁的結果。你可以更新內容，當然，但是你的客戶需要你的工作，甚至基本的變化。

為 Odoo 創建主題是視角完全改變。而不是定義一個頁面的完整的布局，你可以創建塊（片段）在讓用戶選擇“拖放”，創建自己的頁面布局。我們稱之為模塊化設計。

想象一個 Odoo 主題為“元素和選項列表”，你必須創造和風格。作為一個設計師，你的目標是為了實現一個美妙的結果，不管終端用戶選擇的地方，這些元素的風格。

讓我們來參觀我們的“列表”元素:

片段 (或 building-blocks)

一段 HTML 代碼。用戶將拖放，修改，并結合他們使用我們的內置網站生成器界面。你可以定義每個片段選擇和風格設置。用戶可以根據自己的需求選擇。

頁面

這些都是正常的網頁，但他們會通過最終用戶可編輯的，你可以定義一個空的區域，用戶可以通過拖動“填充”摘錄到它。

樣式

風格是使用標準的 CSS 文件定義 (或 Less/Sass). 你可以定義一個風格 default 或 optional. 默認的樣式在您的主題活動中始終處于活動中，用戶可以啟用或禁用可選的樣式。

功能

感謝 Odoo 的模塊化，一切都可以個性化更。這意味著你的創造力有無限的可能性。增加功能是簡單的，它的簡單，為最終用戶提供可定制的選項。

Odoo 的 XML 文件，概述

任何 Odoo XML 文件從編碼規范。之后，你要寫你的代碼放進一個 </odoo> 標簽中。

[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  ??## YOUR CODE HERE
</odoo>

幾乎每一個元素和選項，你創建的是放置在一個 <template> 的標簽，如在這個例子。

[XML]
<template id="my_title" name="My title">
  <h1>This is an HTML block</h1>
  <h2 class="lead">And this is a subtitle</h2>
</template>

重要

不要誤解 template 的意思. 一個模板標簽只定義了一段 HTML 代碼或選擇，但它不一定符合視覺要素的排列。

上面的代碼定義了一個標題，但它不會顯示任何地方因為 template 是不相關的任何部分的 Odoo default structure。為了做到這點，你可以用 xpath, qWeb 或兩者的組合。繼續閱讀本教程，以學習如何正確地擴展它與您自己的代碼。

繼續閱讀本教程，以學習如何正確地擴展它與您自己的代碼。

更新你的主題

由于 XML 文件只能裝在你安裝的主題，你會不得不重裝你對 XML 文件進行更改的每一次。

要做到這一點，點擊升級按鈕在模塊的頁面。

創建主題模塊

Odoo 的主題是封裝模塊。即使你為你的公司或客戶的一個非常簡單的網站設計，你需要包裝的主題像 Odoo 模塊。

main folder

創建一個文件夾和名稱，它像這樣: theme_ 其次是你的主題的名字。

__manifest__.py

創建一個空文檔，并將它保存到您的文件夾中就像 __manifest__.py. 這將包含配置信息為您的主題。

__init__.py

創建另一個空文件名 __init__.py. 這是一個強制性的系統文件。創建并留有空白。

views 和 static 文件夾

在主文件夾中創建它們. 在 views 你會把你的 XML 文件中定義你的片段，你的網頁和你的選擇。static 文件夾是你的樣式的地方，圖像和自定義js代碼。

重要
使用雙下劃線開頭兩在 odoo 和初始化文件名結束。

最后的結果應該是這樣的:

編輯 __manifest__.py

打開 __manifest__.py 您創建和復制/粘貼以下：

{
  'name':'Tutorial theme',
  'description': 'A description for your theme.',
  'version':'1.0',
  'author':'Your name',

  'data': [
  ],
  'category': 'Theme/Creative',
  'depends': ['website', 'website_less'],
}

更換前四個屬性的值與任何您喜歡的。這些值將被用來識別您的后端 Odoo 新主題。

data 屬性將包含 XML 文件列表。現在它是空的，但我們將添加任何新的文件創建。

category 定義你的模塊分類（總是“主題”），斜杠后面則是子分類。你可以使用的應用程序類別列表的一個子類 Odoo。 (https://www.odoo.com/apps/themes)

depends 指定我們的主題需要的模塊，以工作正常。我們教程的主題，我們只需要網站和 website_less。如果你需要博客或電子商務功能，你必須添加這些模塊。

...
'depends': ['website', 'website_blog', 'sale'],
...

安裝你的主題

安裝你的主題，你只是把你的主題文件夾里面你 Odoo 安裝插件。

之后，瀏覽到設置頁面，尋找主題，然后點擊安裝按鈕。

一個 Odoo 頁面結構

一個 Odoo 頁面是一個組合的 2 種元素的視覺效果，cross-pages 和 unique。默認情況下，Odoo 為你提供了一個 Header 和 Footer（跨頁）和一個唯一的主要元素包含的內容，使您的網頁是唯一的。

Note
每一頁都會有一個跨頁面元素。唯一的元素只涉及到一個特定的頁面。

要檢查默認布局，只需創建一個新的頁面，使用網站生成器。點擊新頁面和內容?添加頁面名稱。使用瀏覽器檢查頁面。

<div id=“wrapwrap”>
  <header />
  <main />
  <footer />
</div>

擴展默認 Header

默認情況下，Odoo Header 包含一個反應的導航菜單和公司的 logo。你可以很容易地添加新的元素或樣式。

這樣做，創造一個 layout.xml。XML文件在您的 views 文件夾和視圖添加默認 Odoo XML 標記。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

</odoo>

創建一個新的模板到 <odoo> 標簽，復制粘貼下面的代碼。

<!-- Customize header  -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">

  <!-- Assign an id  -->
  <xpath expr="http://div[@id='wrapwrap']/header" position="attributes">
    <attribute name="id">my_header</attribute>
  </xpath>

  <!-- Add an element after the top menu  -->
  <xpath expr="http://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>

第一個 XPath 將添加 ID my_header 的頭。如果你想目標的 CSS 規則，元和避免這些影響網頁上的其他內容，這是最好的選擇。

警告
小心更換默認元素屬性。為你的主題將默認的一個，您的更改將優先考慮在未來任何 Odoo 的更新。

第二 XPath 將會在導航菜單中添加一個歡迎信息。

最后一步是添加 layout.xml 到主題使用 XML 文件的列表。要做到這一點，編輯你的__manifest__.py 文件這樣

'data': [ 'views/layout.xml' ],

更新你的主題

太好了我們成功地增加了一個身份證的標題和一個元素后的導航菜單。這些更改將被應用于網站的每一頁。

創建一個特定的頁面布局

想象一下，我們要為一個服務頁面創建一個特定的布局。這個頁面，我們需要添加一個服務列表的頂部和給客戶的可能性設置其他頁面的布局使用代碼片段。

在你的 views 文件夾，創建一個 pages.xml 文件并添加默認 Odoo 標記。在 <odoo> 創建一個 <template> 標簽，設置頁面的屬性為 True ，并添加它到你的代碼。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <!-- === Services Page === -->
    <template name="Services page" id="website.services" page="True">
      <h1>Our Services</h1>
        <ul class="services">
          <li>Cloud Hosting</li>
          <li>Support</li>
          <li>Unlimited space</li>
        </ul>
      </template>
  </odoo>

頁面標題將是我們的案例中的模板 ID（從 website.services ）

我們成功地創建了一個新的頁面布局，但我們沒有告訴系統 如何使用它。要做到這一點，我們可以使用 QWeb 。HTML 代碼是被包含在 <t> 標簽，就像在下面這個例子。

<!-- === 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>
      </div>
    </div>
  </t>
</template>

使用 <t t-call="website.layout"> 我們將與我們的代碼擴展 Odoo 默認頁面布局。

正如你所看到的，我們把我們的代碼包裝成了 2 個 <div>, 一個 隨著 ID wrap 另一個是類 container. 這是提供一個最小布局。

下一步是添加一個空的區域用戶可以填寫與片段。要實現這一, 只需創建一個 div 隨著 oe_structure 類只是在關閉 div#wrap 元素之前.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

<!-- === 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>

</odoo>

提示
你可以創建許多片斷的領域你喜歡放在頁面的任何地方。

我們的網頁幾乎已經準備好了。現在我們要做的就是添加 pages.xml 在我們 manifest.py 文件

'data': [
  'views/layout.xml',
  'views/pages.xml'
],

更新你的主題

非常好，我們的服務頁面已經準備好了，您可以通過導航來訪問它 /yourwebsite/page/services.

你會注意到它的可能的拖/放在我們的 Our Services 列表。

現在讓我們回到我們的 pages.xml ，在我們的頁面模板，復制/粘貼下面的代碼。

<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>

本代碼將添加一個鏈接到主菜單。

sequence 屬性定義了鏈接在頂部菜單中的位置。在我們的例子中，我們將值設置為 99 ，以便把它放置到最后。我想把它放在一個特殊的位置，你必須根據你的需要來代替它的價值。

正如你可以看到的 data.xml 文件在 website 模塊中, 這個 Home 鏈接 被設置為 10 和這個 Contact 被我們設置為默認值 60 . 例如，如果你想把你的鏈接放在 middle, 您可以將鏈接的序列值設置為 40.

添加樣式

Odoo 包括 Bootstrap 默認。這意味著，你可以利用所有的引導方式和布局功能的方塊。

當然引導是不夠的，如果你想提供一個獨特的設計。以下步驟將指導您如何添加自定義樣式到主題。最終的結果不會很漂亮，但會給你提供足夠的信息來建立你自己的。

讓我們先創建一個空文件名為 style.less ，并將其放置在一個叫做 less 在您的靜態文件夾。下面的規則將樣式我們的 Services 頁。復制并粘貼，然后保存文件。

.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;
    }
}

我們的文件已經準備好了，但這還不包括在我們的主題中。

讓我們到視圖文件夾中，創建一個名為 assets.xml 的 XML 文件。添加默認 Odoo XML 標記和復制/粘貼以下代碼。請記住以主題的主文件夾名稱替換 theme folder。

<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>

我們只是創建了一個指定我們的文件的模板。你可以看到，我們的模板有一個特殊的屬性稱為 inherit_id 。這個屬性告訴 Odoo，我們模板是指為另一個操作。

在這種情況下，我們指的是 assets_frontend 模板, 位于 website 模塊中. assets_frontend 指定網站生成器加載的資產列表，我們的目標是將我們的文件添加到該列表中。

這可以使用 XPath 的屬性來實現的 expr="link[last()]" 和 position="after", 意思是 " 用我的樣式文件并且把它放到 assets 列表中最后一個連接的后面 ".

把它放在最后一個，我們確保我們的文件將被加載到年底，并采取優先。

最后添加 assets.xml 在你的 manifest.py 文件.

更新你的主題

我們的小文件現在包含在我們的主題，它將自動編譯，壓縮和合并所有 Odoo 的資產。

創建片段

由于片段的用戶是如何設計和布局頁面，他們是最重要的設計元素。讓我們創建一個我們的服務頁面片段。這段代碼將顯示三推薦將通過網站界面用戶可編輯。瀏覽視圖文件夾中創建一個 XML 文件，叫 snippets.xml。添加默認 Odoo XML 標記和復制/粘貼以下代碼。模板包含 HTML 標記，將由段顯示。

<template id="snippet_testimonial" name="Testimonial snippet">
  <section class="snippet_testimonial">
    <div class="container text-center">
      <div class="row">
        <div class="col-md-4">
          [站外圖片上傳中……(28)]
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-md-4">
          [站外圖片上傳中……(29)]
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-md-4">
          [站外圖片上傳中……(30)]
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
  </section>
</template>

正如你所看到的，我們使用引導默認類為我們的三列。這不只是關于布局，這些類 將由網站生成器觸發用戶的 讓他們調整大小。

上面的代碼將創建代碼段的內容，但是我們仍然需要放置到編輯欄，這樣用戶可以拖放到頁面。復制/粘貼此模板在你的 snippets.xml 文件。

<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
  <xpath expr="http://div[@id='snippet_structure']" position="inside">
    <t t-snippet="theme_tutorial.snippet_testimonial"
       t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
  </xpath>
</template>

使用 XPath，我們與 ID snippet_structure 瞄準特定元素。這意味著，片段會出現在結構選項卡。如果你想改變目的地標簽，你只需要在 XPath 表達式中替換 id 的值。

The <t> tag will call our snippet's template and will assign a thumbnail placed in the img folder. You can now drag your snippet from the snippet bar, drop it in your page and see the result.

片段的選擇

選項允許出版商使用的網站建設者的 UI 編輯片段的出現。使用網站的功能，你可以創建代碼段選項容易自動添加到用戶界面。

選項組屬性

選項是用分組包。組可以有屬性，該屬性定義包括選項將如何與用戶界面進行交互。

data-selector=" [css selector(s)] "

將所有選項都綁定到該組中的某個特定元素中。

data-js=" [custom method name] "

是用來綁定自定義 JavaScript 方法。

data-drop-in=" [css selector(s)] "

定義元素列表的代碼段可以下降到。

data-drop-near=" [css selector(s)] "

定義該代碼段可以下降在元素列表。

默認選項方法

選項應用標準的 CSS 類的片段。根據你所選擇的方法，用戶界面會有不同的行為。

data-select-class=" [class name] "

在同組 data-select-class 定義了一個類列表，用戶可以選擇應用。只有一個選項可以在一個時間被啟用。

data-toggle-class=" [class name] "

的 data-toggle-class 應用一個或多個 CSS 類從列表中的一段。多個選擇可以應用于一次。

讓我們演示如何使用默認選項的基本示例。

我們開始在我們的視圖文件夾添加新文件名 options.xml 和添加默認 Odoo XML 標記。創建一個新的模板復制/粘貼如下

<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website_less.snippet_options">
  <xpath expr="http://div[@data-js='background']" position="after">
    <div data-selector=".snippet_testimonial"> <!-- Options group -->
      <li class="dropdown-submenu">
        <a href="#">Your Option</a>
        <ul class="dropdown-menu"> <!-- Options list -->
          <li data-select-class="opt_shadow"><a>Shadow Images</a></li>
          <li data-select-class="opt_grey_bg"><a>Grey Bg</a></li>
          <li data-select-class=""><a>None</a></li>
        </ul>
      </li>
    </div>
  </xpath>
 </template>

Note

以前的模板將繼承默認 snippet_options template 添加選項后，background 選項（XPath 表達式選擇背景屬性）。把你的選擇在一個特定的順序，檢查 snippet_options template 來自 website module 并添加您的選項前/后所需的位置。

你可以看到，我們用我們所有的選項一個 div 標簽，我們將組選項里面，將他們的目標正確的選擇 (data-selector=".snippet_testimonial").

定義我們的選擇我們的應用 data-select-class 屬性的 li 元素。當用戶選擇一個選項時，該屬性中包含的類會自動被應用到該元素中。

因為 select-class 方法避免了多重選擇，最后的“空”選項將重置到默認代碼段。

添加 options.xml 到 __manifest__.py 然后更新你的主題。

把我們的片段到繪圖頁上，你會注意到我們的新選項被自動添加到自定義菜單。檢查頁面，您還將注意到，該類將應用于選擇一個選項時的元素。

讓我們為我們的選擇視覺反饋創建 CSS 規則。打開我們的 style.less 文件，并添加以下

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;
}

// 這些線將我們的代碼段添加一個默認樣式。現在讓我們來創建自定義規則的選項。

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;

  &.opt_shadow img {
    box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
  }

  &.opt_grey_bg {
    border: none;
    background-color: #EAEAEA;
  }
}

太好了我們成功地創造了我們的代碼段的選擇。

在選擇點擊發布任何時間，系統將在 data-select-class 屬性指定的類。

通過更換data-select-class與data-toggle-class你可以同時選擇多類。

JavaScript選項

data-select_class和data-toggle_class是偉大的如果你需要進行簡單的課改操作。但是如果你的代碼的定制需要更多的東西嗎？

正如我們之前所說的，data-js 屬性可以分配為選項組定義一個自定義方法。讓我們創建一個為我們推薦段*添加 data-js屬性選項組的 div，我們先前創建的。

<div data-js="snippet_testimonial_options" data-selector=".snippet_testimonial">
  [...]
</div>

完成從現在開始，該網站將尋找一個 snippet_testimonial_options 方法每次出版商進入編輯模式。

我們的第一步，創建一個 JavaScript 文件，名字是 tutorial_editor.js 然后放入 static 文件夾。復制/粘貼下面的代碼

(function() {
    'use strict';
    var website = odoo.website;
    website.odoo_website = {};
})();

好，我們成功地創造了我們的 JavaScript 文件編輯。該文件將包含所有的 javascript 函數用到的片段在編輯模式。讓我們創建一個新的功能，我們推薦使用片段 snippet_testimonial_options 方法我們之前創建的。

(function() {
    'use strict';
    var website = odoo.website;
    website.odoo_website = {};

    website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
        onFocus: function() {
            alert("On focus!");
        }
    })
})();

你會注意到，我們使用的方法稱為 onFocus 觸發函數。網站生成器提供了一些事件，您可以使用來觸發您的自定義函數。

讓我們添加新的 JavaScript 文件資產編輯列表。 回到 assets.xml 和創建一個新的模板，如前一個。這一次我們必須繼承 assets_editor 而不是 assets_frontend.

<template id="my_js" inherit_id="website_less.assets_editor" name="My Js">
  <xpath expr="script[last()]" position="after">
    <script type="text/javascript" src="/theme_tutorial/static/src/js/tutorial_editor.js" />
  </xpath>
</template>

更新你的主題

讓我們來測試我們的新的 JavaScript 函數。進入編輯模式，進入頁面。你現在應該看到 JavaScript 警告我們綁在 onFocus 事件。如果你關閉它，然后單擊片段外，然后點擊一遍，將再次觸發事件。

編輯參考指南

基本上，頁面中的所有元素都可以由發布者編輯。此外，一些元素類型和CSS類將觸發特殊網站當編輯功能。

布局

<section />

任何部分元素都可以被編輯，就像一個內容塊。出版商可以移動或復制它。也可以設置背景圖像或顏色。部分是任何一段的標準集裝箱主。

.row > .col-md-*

任何媒介引導柱直接下降從。行元素，將由出版商可調整大小。

contenteditable="False"

此屬性將防止編輯元素及其所有的兒童。

contenteditable="True"

將它應用到一個元素在一個 contenteditable="False" 元素，以創建一個例外，使元素及其子編輯。

<a href=”#” />

在編輯模式下，任何鏈接可以被編輯和風格化。使用“鏈接模式”，它也可以用一個按鈕來替換它。

媒體

<span class=”fa” />

象形文字元素。編輯該元素將打開圖標庫替換圖標。使用 CSS 元素的變換也有可能。

<img />

一旦點擊，圖像庫將打開，你可以替換圖像。這種元素的轉換也可能。

<div class="media_iframe_video" data-src="[your url]" >
  <div class="css_editable_mode_display"/>
  <div class="media_iframe_video_size"/>
  <iframe src="[your url]"/>
</div>

這將創建一個 HTML 結構 <iframe> 元素可由發布者編輯 .

SEO 最佳實踐

方便內容插入

現代搜索引擎的算法越來越注重內容，這就意味著有更少的關注 關鍵詞飽和度 而更多的關注于是否內容是 其實與關鍵詞相關.

作為內容是如此重要的搜索引擎優化，你應該專注于給出版商的工具，方便地插入它。你的片段是“內容敏感”是很重要的，這意味著他們必須符合出版商的內容無論大小。

讓我們看看這個例子，一個經典的兩柱段，兩種不同的方式實現。

[圖片上傳失敗...(image-c586e3-1514260364045)]

壞的

使用固定的圖像，出版商將被迫限制的文本，以遵循布局。

[圖片上傳失敗...(image-718656-1514260364045)]

好的

使用符合列高度的背景圖像，發布者將可自由添加內容，不管圖像的高度.

頁面分割

基本上，頁面分割意味著一個頁面被分為幾個獨立的部分，這些部分被作為單獨的條目被搜索引擎處理。當你設計的網頁或視頻，你應確保使用正確的標簽，便于搜索引擎的索引.

<article>

指定內容的獨立塊。在它里面應該是一個自足的內容，應該有自己的意義。你可以筑巢 <article>彼此的元素。在這種情況下，它的隱含的嵌套元素相關的外 <article> 元素.

<header>

表示一個包含內容的內容的頭部分 (一個 <article>).

<section>

是段的默認標簽，指定一塊內容分段。它可以用來分割 <article> 內容分為幾個部分。使用標題元素是明智的 (<h1> – <h6>) 定義本節的主題.

<hgroup>

是用來包裝一段標題 (<h1> - <h6>). 一個很好的例子是一篇文章，標題和標題的頂部:

<hgroup>
  <h1>Main Title</h1>
  <h2>Subheading</h2>
</hgroup>

描述你的頁面

定義關鍵詞

你應該使用適當的，相關的關鍵字和同義詞為那些關鍵字。您可以使用內置的 “Promote” 功能在頂部的酒吧中定義他們的每一個頁面。

定義一個標題和一個描述

用 “Promote” 功能定義它們。保持您的頁面標題短，包括主要關鍵字短語的頁面。好標題引起了一種情緒反應，問一個問題或承諾的東西。

描述，雖然不重要的搜索引擎的排名，是非常重要的，在獲得用戶點擊。這些都是一個廣告內容的機會，讓人們搜索準確的知道給定的頁面是否包含他們正在尋找的信息。重要的是，每一頁的標題和說明是獨一無二的。