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

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

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

3.3.1.1 文本

h1

每個頁面都有且只有一個h1標簽，h1標簽必須完整展示，不能被折疊或隱藏。

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

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

模型列表頁的h1標簽為分類名稱。

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

其他普通頁面的h1標簽為頁面名稱。

其他文本

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

3.3.1.2 導(dǎo)航

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

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

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

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

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

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

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

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

封面圖+詳情標題

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

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

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

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

只有詳情標題

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

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

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

3.3.1.4 列表內(nèi)容

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

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

分類

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

分類下的詳情

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

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

• 需確定文本長度和溢出效果。

3.3.1.5 模型詳情

詳情首屏

包含詳情大標題及詳情主要字段。

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

詳情正文及小標題

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

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

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

3.3.1.6 表單

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

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

不同表單都需要注意的交互及驗證效果包括：必填項提示、輸入格式錯誤提示、提交后反饋（成功/失?。?、手機驗證。

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

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

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

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

3.3.2 嵌套模板

資源

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

物料

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

變量

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

• 預(yù)置變量

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

• 自定義變量

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

靜態(tài)片段

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

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

動態(tài)片段

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

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

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

查看動態(tài)片段模板語法

?

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

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

導(dǎo)航樣式，由模板通知，在后臺“模板—模板列表—導(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. 判斷當前頁面url是否與導(dǎo)航url一致 例：聯(lián)系我們

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

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

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

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

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

面包屑導(dǎo)航

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

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

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

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

頁面

對應(yīng)后臺功能“頁面-頁面管理-普通頁面”

普通頁面

普通頁面支持可視化編輯、需在代碼中添加可視化編輯的標記。

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

查看可視化標記語法

模板頁面

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

模板頁面樣式，由模板控制。

查看模板頁面模板語法

自定義列表頁

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

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

查看自定義列表頁模板語法

模型首頁/模型列表

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

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

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

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

舉例如圖庫模型列表

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

圖片列表

舉例只有詳情標題的列表

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

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

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

可使用

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

查看模型分類模板語法

模型詳情

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

舉例：?

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

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

查看模型詳情完整模板語法

搜索列表

搜索列表通過搜索模板直接控制。對應(yīng)后臺功能“模板-模板列表-搜索模板”。

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

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

查看搜索列表模板完整語法

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

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

詢盤

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

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

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

留言

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

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

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

評論

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

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

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

簡歷

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

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

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

自定義表單

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

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

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

其他要點說明

鏈接打開方式

中文站

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

英文站

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

命名規(guī)范

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

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

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

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

輸出物及要求

頁面代碼，符合前端要點說明；

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

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

PC版兼容IE9+、Chrome、Firefox、360等主流瀏覽器，移動版兼容主流品牌手機瀏覽器。

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

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

重點html標簽編碼規(guī)范：

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

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

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

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

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

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

• img標簽使用及實現(xiàn)規(guī)范

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

• 頁面中有意義（語義）的配圖可使用src；

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

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

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

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