開(kāi)發(fā)流程：先將設(shè)計(jì)圖拆解為靜態(tài)頁(yè)面，然后再用五星云站模板語(yǔ)法替代。

3.3.1 拆解靜態(tài)頁(yè)面

多個(gè)頁(yè)面可能重復(fù)使用的內(nèi)容包括：

3.3.1.1 文本

h1

每個(gè)頁(yè)面都有且只有一個(gè)h1標(biāo)簽，h1標(biāo)簽必須完整展示，不能被折疊或隱藏。

首頁(yè)h1標(biāo)簽的位置在頁(yè)面頂部的logo文件，內(nèi)容為網(wǎng)站名稱，標(biāo)準(zhǔn)寫(xiě)法如下：

<h1 class="logo">
    <a href="/" title="">
        <img src="logo.png" alt="#網(wǎng)站名稱#">
    </a>
</h1>

模型列表頁(yè)的h1標(biāo)簽為分類名稱。

模型詳情頁(yè)的h1標(biāo)簽為詳情內(nèi)容標(biāo)題。

其他普通頁(yè)面的h1標(biāo)簽為頁(yè)面名稱。

其他文本

根據(jù)整體頁(yè)面，設(shè)置統(tǒng)一的文本標(biāo)簽樣式，減少后續(xù)重復(fù)編輯樣式。

3.3.1.2 導(dǎo)航

頂部導(dǎo)航，一般展示網(wǎng)站完整結(jié)構(gòu)。需確定內(nèi)容文本長(zhǎng)度和溢出效果，可設(shè)置統(tǒng)一樣式。

底部導(dǎo)航，一般只展示網(wǎng)站重點(diǎn)結(jié)構(gòu)或重點(diǎn)內(nèi)容。需確定內(nèi)容文本長(zhǎng)度和溢出效果，可設(shè)置統(tǒng)一樣式。

面包屑導(dǎo)航，除首頁(yè)外，每個(gè)頁(yè)面都有。需確定內(nèi)容文本長(zhǎng)度和溢出效果，可設(shè)置統(tǒng)一樣式。

3.3.1.3 相關(guān)內(nèi)容

是指可以在任何類型頁(yè)面都可能出現(xiàn)的、鏈接至模型詳情頁(yè)的內(nèi)容。

在拆解靜態(tài)頁(yè)面時(shí)，相同樣式的內(nèi)容可以復(fù)制擴(kuò)充，比如相關(guān)產(chǎn)品下包含四個(gè)產(chǎn)品，可以使用相同的圖片、標(biāo)題。

需確定內(nèi)容文本長(zhǎng)度和溢出效果，可設(shè)置統(tǒng)一樣式。

相關(guān)內(nèi)容一般有如下幾種類型，根據(jù)設(shè)計(jì)圖還原。

封面圖+詳情標(biāo)題

包括相關(guān)案例、相關(guān)解決方案、相關(guān)專題、相關(guān)配件、相關(guān)產(chǎn)品等。

相關(guān)圖庫(kù)：包含多個(gè)圖片，需要和普通的封面圖效果做區(qū)分。

相關(guān)視頻：和普通封面圖效果做區(qū)分，如展示播放按鈕、視頻時(shí)長(zhǎng)等信息。

相關(guān)新聞：設(shè)計(jì)師可根據(jù)效果，采用有封面圖和沒(méi)有封面圖兩種形式。

只有詳情標(biāo)題

包括相關(guān)招聘、相關(guān)資料下載、相關(guān)問(wèn)答等。其中

招聘的屬性如：招聘人數(shù)、經(jīng)驗(yàn)要求、截止時(shí)間等；

資料的屬性如：資料格式、資料大小。

3.3.1.4 列表內(nèi)容

在模型列表和搜索列表展示的、鏈接至詳情頁(yè)的內(nèi)容。

一般包括分類和分類下的詳情兩部分。

分類

需確定文本長(zhǎng)度和溢出效果，可設(shè)置統(tǒng)一樣式。

分類下的詳情

• 樣式，一般和“相關(guān)內(nèi)容”一樣，也可能獨(dú)立設(shè)計(jì)，可設(shè)置統(tǒng)一樣式。根據(jù)設(shè)計(jì)圖還原。

• 在拆解靜態(tài)頁(yè)面時(shí)，相同樣式的詳情內(nèi)容可以通過(guò)復(fù)制擴(kuò)充，比如新聞列表內(nèi)包含8條新聞，可以使用相同的圖片、標(biāo)題。

• 需確定文本長(zhǎng)度和溢出效果。

3.3.1.5 模型詳情

詳情首屏

包含詳情大標(biāo)題及詳情主要字段。

可設(shè)置大標(biāo)題統(tǒng)一樣式。需確定文本長(zhǎng)度和溢出效果。

詳情正文及小標(biāo)題

• 需完整還原，正文描述盡量使用文本、不用截圖。

• 詳情小標(biāo)題可設(shè)置統(tǒng)一樣式。

• 詳情正文可設(shè)置統(tǒng)一樣式。

3.3.1.6 表單

在拆解靜態(tài)頁(yè)時(shí)，不用考慮業(yè)務(wù)邏輯和前后端數(shù)據(jù)互通，只用實(shí)現(xiàn)主要樣式效果即可。

表單名稱及字段需確定文本長(zhǎng)度和溢出效果?？稍O(shè)置統(tǒng)一樣式。

不同表單都需要注意的交互及驗(yàn)證效果包括：必填項(xiàng)提示、輸入格式錯(cuò)誤提示、提交后反饋（成功/失?。⑹謾C(jī)驗(yàn)證。

• 普通表單（詢盤(pán)、留言） 主要內(nèi)容包括：字段標(biāo)題、字段輸入框；

• 評(píng)論 主要內(nèi)容包括：字段標(biāo)題、字段輸入框、已提交內(nèi)容的展示；

• 問(wèn)答 主要內(nèi)容包括：字段標(biāo)題、字段輸入框、已提交內(nèi)容的展示；

• 提交簡(jiǎn)歷 主要內(nèi)容包括：字段標(biāo)題、字段輸入框、上傳附件、附件格式及大小錯(cuò)誤的提示。

3.3.2 嵌套模板

資源

頁(yè)面或模板代碼中用到的css/js/圖片等，在五星云站后臺(tái)“模板-資源”處管理。

物料

模型內(nèi)容中用到的圖片、文檔等，在五星云站后臺(tái)“模板-物料”處管理。

變量

主題包中非固定的內(nèi)容，如企業(yè)名稱、企業(yè)地址等，可以設(shè)置為變量。查看變量用法

• 預(yù)置變量

五星云站的預(yù)置變量包括企業(yè)名稱、企業(yè)logo，在后臺(tái)“網(wǎng)站-設(shè)置-基礎(chǔ)設(shè)置出管理”

• 自定義變量

也可在后臺(tái)“網(wǎng)站-設(shè)置-變量管理”處，添加自定義變量。

靜態(tài)片段

在不同頁(yè)面中重復(fù)使用的內(nèi)容，可以創(chuàng)建為靜態(tài)片段，比如公共頭部、公共底部。 對(duì)應(yīng)后臺(tái)功能“模板—物料—靜態(tài)片段”

在編輯頁(yè)面或模板代碼時(shí)，選擇插入片段即可使用。?

動(dòng)態(tài)片段

動(dòng)態(tài)片段是可以按照指定規(guī)則動(dòng)態(tài)循環(huán)輸出的模型詳情內(nèi)容。?

動(dòng)態(tài)片段的內(nèi)容，在后臺(tái)“模板-物料-動(dòng)態(tài)片段”處管理。?

動(dòng)態(tài)片段的樣式，由模板控制。?

查看動(dòng)態(tài)片段模板語(yǔ)法

?

全站使用的頂部導(dǎo)航和底部導(dǎo)航

導(dǎo)航內(nèi)容，在后臺(tái)“頁(yè)面—導(dǎo)航”處管理。

導(dǎo)航樣式，由模板通知，在后臺(tái)“模板—模板列表—導(dǎo)航模板”處管理

導(dǎo)航模板主要邏輯如下。

• "sub_item {% if v['url'] == Urlparam['currenturl'] or v['module'] == datatype or (v['module'] == moduletype and v['module'] is not empty) or (datatype == 'zt' and v['module'] == 'news') or (v['url'] == '/about/' and (datatype == 'album' or datatype == 'job')) or (v['url'] == '/service/' and (datatype == 'parts' or datatype == 'faq' or datatype == 'download')) %}active {%endif%}">

• a. 判斷當(dāng)前頁(yè)面url是否與導(dǎo)航url一致 例：聯(lián)系我們

v['url'] == Urlparam['currenturl']

• b. 當(dāng)前導(dǎo)航是預(yù)置模型，v['module']與后臺(tái)存儲(chǔ)的模型標(biāo)識(shí)datatype一致 例：新聞中心 v['module'] == datatype
• c. 當(dāng)前導(dǎo)航是自定義模型，v['module']與后臺(tái)存儲(chǔ)的自定義模型標(biāo)識(shí)moduletype一致（并且v['module']不為空） 例：客戶案例 v['module'] == moduletype and v['module'] is not empty
• d. 屬于模型下的二級(jí)導(dǎo)航 例：新聞中心下的二級(jí)導(dǎo)航----企業(yè)專題

datatype == 'zt' and v['module'] == 'news'

• e. 屬于自定義頁(yè)面下的二級(jí)導(dǎo)航 例：關(guān)于企業(yè)下的二級(jí)導(dǎo)航-----企業(yè)圖庫(kù)、人才招聘 v['url'] == '/about/' and (datatype == 'album' or datatype == 'job')

查看完整導(dǎo)航模板語(yǔ)法

面包屑導(dǎo)航

除了首頁(yè)，每個(gè)頁(yè)面都有面包屑導(dǎo)航。

普通頁(yè)面，靜態(tài)內(nèi)容直接輸出

模型列表，靜態(tài)內(nèi)容直接輸出，當(dāng)前分類用變量輸出。?

模型詳情。面包屑導(dǎo)航中，靜態(tài)內(nèi)容直接輸出，當(dāng)前內(nèi)容所屬分類及內(nèi)容標(biāo)題用變量輸出。?

頁(yè)面

對(duì)應(yīng)后臺(tái)功能“頁(yè)面-頁(yè)面管理-普通頁(yè)面”

普通頁(yè)面

普通頁(yè)面支持可視化編輯、需在代碼中添加可視化編輯的標(biāo)記。

支持可視化的內(nèi)容過(guò)包括：文本、圖片、動(dòng)態(tài)片段（整體）、靜態(tài)片段（整體）、鏈接、關(guān)聯(lián)內(nèi)容。

查看可視化標(biāo)記語(yǔ)法

模板頁(yè)面

模板頁(yè)面內(nèi)容，在后臺(tái)“頁(yè)面-頁(yè)面管理-模板頁(yè)面”

模板頁(yè)面樣式，由模板控制。

查看模板頁(yè)面模板語(yǔ)法

自定義列表頁(yè)

自定義列表頁(yè)的內(nèi)容，在后臺(tái)“頁(yè)面-頁(yè)面管理-自定義列表頁(yè)”處管理

自定義列表頁(yè)的樣式，由模板控制。

查看自定義列表頁(yè)模板語(yǔ)法

模型首頁(yè)/模型列表

模型首頁(yè)和模型列表的內(nèi)容包括：分類名稱、分類介紹、分類封面圖。 模型首頁(yè)和模型列表的內(nèi)容分別由后臺(tái)“模型管理-分類管理”中的全部分類和其他分類控制。

模型首頁(yè)和模型列表的樣式都由模型分類模板控制。對(duì)應(yīng)后臺(tái)功能： 模板列表-新增模板-模板類型-模型模板/模型名稱/分類

模型分類模板的主要內(nèi)容包含

• 分類信息：標(biāo)題、鏈接、圖片、描述
• 分類下詳情信息-----標(biāo)題、鏈接、圖片、描述、發(fā)布時(shí)間

舉例如圖庫(kù)模型列表

圖庫(kù)列表（輸出圖庫(kù)內(nèi)圖片數(shù)量）

圖片列表

舉例只有詳情標(biāo)題的列表

展示詳情標(biāo)題等字段。如果預(yù)置字段不包含該內(nèi)容，需要添加自定義字段。

對(duì)應(yīng)后臺(tái)功能：內(nèi)容-添加模型-編輯字段-新增字段

舉例特殊樣式，列表第一個(gè)內(nèi)容有圖片，其他內(nèi)容沒(méi)圖片**

可使用

{%if loop.first%}
{%else%}
{%endif%}

查看模型分類模板語(yǔ)法

模型詳情

模型詳情頁(yè)的內(nèi)容，可以用模型字段直接輸出。 模型詳情頁(yè)的樣式，通過(guò)模板控制。

舉例：?

詳情主要內(nèi)容由模型字段輸出，特別是詳情正文，通過(guò)富文本編輯器字段輸出。在拆解靜態(tài)頁(yè)面和嵌套模板時(shí)，不用定義詳情正文內(nèi)容，只需定義樣式：小標(biāo)題需要單獨(dú)設(shè)置樣式，整個(gè)正文部分樣式需統(tǒng)一。模板嵌套完成后，在五星云站后臺(tái)發(fā)布模型詳情，需要注意的是：詳情正文盡量使用文字，而不使用大段截圖。

對(duì)應(yīng)后臺(tái)功能： 內(nèi)容—模型管理—發(fā)布詳情—詳情內(nèi)容—新增編輯內(nèi)容?

查看模型詳情完整模板語(yǔ)法

搜索列表

搜索列表通過(guò)搜索模板直接控制。對(duì)應(yīng)后臺(tái)功能“模板-模板列表-搜索模板”。

每個(gè)模型都需要單獨(dú)寫(xiě)各自的搜索頁(yè)模板，樣式除內(nèi)容區(qū)域不一樣，其他整體框架一致。

在搜索列表中，只顯示當(dāng)前開(kāi)啟了搜索功能的模型。搜索功能開(kāi)關(guān)位置：“內(nèi)容—模型管理—模型設(shè)置”。

查看搜索列表模板完整語(yǔ)法

業(yè)務(wù)表單

查看完整業(yè)務(wù)表單模板語(yǔ)法

詢盤(pán)

和產(chǎn)品模型、配件模型關(guān)聯(lián)。內(nèi)容在后臺(tái)“業(yè)務(wù)-詢盤(pán)管理”處管理。

樣式通過(guò)模型模板控制。模板中需要設(shè)置開(kāi)啟詢盤(pán)后才顯示詢盤(pán)表單。詢盤(pán)開(kāi)關(guān)在后臺(tái)“內(nèi)容—模型管理—模型設(shè)置—業(yè)務(wù)”處。

前臺(tái)詢盤(pán)表單提交內(nèi)容后，可以在后臺(tái)“業(yè)務(wù)-詢盤(pán)管理-模型詢盤(pán)”處查看。?

留言

和文章模型關(guān)聯(lián)。內(nèi)容在后臺(tái)“業(yè)務(wù)-留言管理”處管理。

樣式通過(guò)模型模板控制。模板中需要設(shè)置開(kāi)啟留言后才顯示詢盤(pán)表單。留言開(kāi)關(guān)在后臺(tái)“內(nèi)容—模型管理—模型設(shè)置—業(yè)務(wù)”處。

前臺(tái)留言表單提交內(nèi)容后，可以在后臺(tái)“業(yè)務(wù)-留言管理-模型留言”處查看。?

評(píng)論

和新聞模型、圖庫(kù)模型、視頻模型、專題模型關(guān)聯(lián)。評(píng)論表單的字段內(nèi)容不能自定義。

樣式通過(guò)模型模板控制。模板中需要設(shè)置開(kāi)啟評(píng)論后才顯示詢盤(pán)表單。評(píng)論開(kāi)關(guān)在后臺(tái)“內(nèi)容—模型管理—模型設(shè)置—業(yè)務(wù)”處。

前臺(tái)評(píng)論表單提交內(nèi)容后，可以在后臺(tái)“業(yè)務(wù)-評(píng)論管理”處查看。?

簡(jiǎn)歷

和招聘模型關(guān)聯(lián)。內(nèi)容在后臺(tái)“業(yè)務(wù)-簡(jiǎn)歷管理-表單設(shè)置”處管理。

樣式通過(guò)模型模板控制。模板中需要設(shè)置開(kāi)啟投遞簡(jiǎn)歷后、才顯示簡(jiǎn)歷管理表單。投遞簡(jiǎn)歷開(kāi)關(guān)在后臺(tái)“內(nèi)容—招聘管理—模型設(shè)置—業(yè)務(wù)”處。

前臺(tái)簡(jiǎn)歷表單提交內(nèi)容后，可以在后臺(tái)“業(yè)務(wù)-簡(jiǎn)歷管理”處查看。?

自定義表單

自定義表單和模型沒(méi)有關(guān)聯(lián)，可以在任意頁(yè)面中使用。自定義表單的內(nèi)容和樣式，都在后臺(tái)“業(yè)務(wù)—表單管理—表單設(shè)置”處管理。

頁(yè)面中使用自定義表單時(shí)，需要在后臺(tái)“業(yè)務(wù)—表單管理—表單設(shè)置”處，找到對(duì)應(yīng)的表單，點(diǎn)擊復(fù)制代碼，然后在頁(yè)面中粘貼即可。

前臺(tái)表單提交內(nèi)容后，可以在后臺(tái)“業(yè)務(wù)-表單管理-提交記錄”處查看。?

其他要點(diǎn)說(shuō)明

鏈接打開(kāi)方式

中文站

• 一般鏈接，和當(dāng)前頁(yè)面內(nèi)容關(guān)系不大，新窗口打開(kāi)；
• 表示內(nèi)容結(jié)構(gòu)的的，當(dāng)前窗口打開(kāi)。如頂部導(dǎo)航、面包屑導(dǎo)航、列表頁(yè)側(cè)導(dǎo)航；

英文站

• 內(nèi)容鏈接，統(tǒng)一當(dāng)前窗口打開(kāi)；非內(nèi)容鏈接，如在線客服，使用新窗口。

命名規(guī)范

靜態(tài)片段：終端類型（pc/m） - 內(nèi)容類別 - 所屬頁(yè)面

動(dòng)態(tài)片段：終端類型（pc/m） - 內(nèi)容類別 - 規(guī)則（排序及數(shù)量） - 所屬頁(yè)面/位置

多顏色風(fēng)格實(shí)現(xiàn)

樣式表分為多份，不同主題顏色各有一份樣式表，最后在調(diào)用樣式表時(shí)，使用變量調(diào)取相應(yīng)顏色的css文件。

輸出物及要求

頁(yè)面代碼，符合前端要點(diǎn)說(shuō)明；

內(nèi)容實(shí)現(xiàn)方式靈活，且符合五星云站實(shí)現(xiàn)要求；

頁(yè)面中不出現(xiàn)無(wú)意義內(nèi)容或明顯測(cè)試內(nèi)容，如“測(cè)試產(chǎn)品標(biāo)題”

PC版兼容IE9+、Chrome、Firefox、360等主流瀏覽器，移動(dòng)版兼容主流品牌手機(jī)瀏覽器。

html、css編碼基礎(chǔ)規(guī)范

• html文件采用utf-8編碼，無(wú)附加bom形式存儲(chǔ)。
• 用tab鍵縮進(jìn)。
• 引用wsc模塊時(shí)，需在代碼前后加上編號(hào)注釋。
• html中不允許有站外資源鏈接，包括：imges、css、js、視頻等。
• css、js文件里面的資源（背景圖）必須是相對(duì)路徑，參考項(xiàng)目的默認(rèn)目錄路徑。

重點(diǎn)html標(biāo)簽編碼規(guī)范：

• a標(biāo)簽及鏈接值規(guī)范

• 靜態(tài)頁(yè)中，所有模型相關(guān)需要用變量替換的鏈接，直接用變量替換好。

• 靜態(tài)頁(yè)中，所有指向模型首頁(yè)、普通頁(yè)面的鏈接，寫(xiě)上最終的鏈接，參考具體項(xiàng)目的URL規(guī)范。

• 靜態(tài)頁(yè)中，所有未知鏈接值用“#”

• 所有涉及模型的變量鏈接，a標(biāo)簽需要有title，如：內(nèi)容標(biāo)題、分類名稱。

• 所有關(guān)于“more"，“更多"，“全部”，“查看詳情”的a標(biāo)簽，需要有title，title值等于目標(biāo)頁(yè)的h1內(nèi)容。

• img標(biāo)簽使用及實(shí)現(xiàn)規(guī)范

• 所有關(guān)于模型調(diào)取的圖片需要使用src，且必須有alt屬性，如：新聞封面圖、產(chǎn)品圖；

• 頁(yè)面中有意義（語(yǔ)義）的配圖可使用src；

• src本身不允許設(shè)置寬度高度，需要在外層容器設(shè)置寬度高度，img只需要設(shè)置max-width;max-height(可選);

• 模型調(diào)取的圖片需要讓img在外層容器中絕對(duì)居中，如：模型列表、動(dòng)態(tài)片段；且需要控制圖片的長(zhǎng)邊和短邊不能超過(guò)容器值。

• 非模型調(diào)取的圖片，設(shè)計(jì)圖若無(wú)邊框，執(zhí)行頂部對(duì)齊；設(shè)計(jì)圖上若有邊框，執(zhí)行絕對(duì)居中

• 靜態(tài)頁(yè)中，模型相關(guān)的img src地址固定指向 model.png;其它鏈接正常的圖片；