3.3前端手冊
開發流程：先將設計圖拆解為靜態頁面，然后再用五星云站模板語法替代。
3.3.1 拆解靜態頁面
多個頁面可能重復使用的內容包括：
3.3.1.1 文本
h1
每個頁面都有且只有一個h1標簽，h1標簽必須完整展示，不能被折疊或隱藏。
首頁h1標簽的位置在頁面頂部的logo文件，內容為網站名稱，標準寫法如下：
<h1 class="logo">
<a href="/" title="">
<img src="logo.png" alt="#網站名稱#">
</a>
</h1>模型列表頁的h1標簽為分類名稱。
模型詳情頁的h1標簽為詳情內容標題。
其他普通頁面的h1標簽為頁面名稱。
其他文本
根據整體頁面，設置統一的文本標簽樣式，減少后續重復編輯樣式。
3.3.1.2 導航
頂部導航，一般展示網站完整結構。需確定內容文本長度和溢出效果，可設置統一樣式。
底部導航，一般只展示網站重點結構或重點內容。需確定內容文本長度和溢出效果，可設置統一樣式。
面包屑導航，除首頁外，每個頁面都有。需確定內容文本長度和溢出效果，可設置統一樣式。
3.3.1.3 相關內容
是指可以在任何類型頁面都可能出現的、鏈接至模型詳情頁的內容。
在拆解靜態頁面時，相同樣式的內容可以復制擴充，比如相關產品下包含四個產品，可以使用相同的圖片、標題。
需確定內容文本長度和溢出效果，可設置統一樣式。
相關內容一般有如下幾種類型，根據設計圖還原。
封面圖+詳情標題
包括相關案例、相關解決方案、相關專題、相關配件、相關產品等。
相關圖庫：包含多個圖片，需要和普通的封面圖效果做區分。
相關視頻：和普通封面圖效果做區分，如展示播放按鈕、視頻時長等信息。
相關新聞：設計師可根據效果，采用有封面圖和沒有封面圖兩種形式。
只有詳情標題
包括相關招聘、相關資料下載、相關問答等。其中
招聘的屬性如：招聘人數、經驗要求、截止時間等；
資料的屬性如：資料格式、資料大小。
3.3.1.4 列表內容
在模型列表和搜索列表展示的、鏈接至詳情頁的內容。
一般包括分類和分類下的詳情兩部分。
分類
需確定文本長度和溢出效果，可設置統一樣式。
分類下的詳情
-
樣式，一般和“相關內容”一樣，也可能獨立設計，可設置統一樣式。根據設計圖還原。
-
在拆解靜態頁面時，相同樣式的詳情內容可以通過復制擴充，比如新聞列表內包含8條新聞，可以使用相同的圖片、標題。
- 需確定文本長度和溢出效果。
3.3.1.5 模型詳情
詳情首屏
包含詳情大標題及詳情主要字段。
可設置大標題統一樣式。需確定文本長度和溢出效果。
詳情正文及小標題
- 需完整還原，正文描述盡量使用文本、不用截圖。
-
詳情小標題可設置統一樣式。
-
詳情正文可設置統一樣式。
3.3.1.6 表單
在拆解靜態頁時，不用考慮業務邏輯和前后端數據互通，只用實現主要樣式效果即可。
表單名稱及字段需確定文本長度和溢出效果?？稍O置統一樣式。
不同表單都需要注意的交互及驗證效果包括：必填項提示、輸入格式錯誤提示、提交后反饋（成功/失?。?、手機驗證。
-
普通表單（詢盤、留言） 主要內容包括：字段標題、字段輸入框；
-
評論 主要內容包括：字段標題、字段輸入框、已提交內容的展示；
- 問答 主要內容包括：字段標題、字段輸入框、已提交內容的展示；
- 提交簡歷 主要內容包括：字段標題、字段輸入框、上傳附件、附件格式及大小錯誤的提示。
3.3.2 嵌套模板
資源
頁面或模板代碼中用到的css/js/圖片等，在五星云站后臺“模板-資源”處管理。
物料
模型內容中用到的圖片、文檔等，在五星云站后臺“模板-物料”處管理。
變量
主題包中非固定的內容，如企業名稱、企業地址等，可以設置為變量。查看變量用法
- 預置變量
五星云站的預置變量包括企業名稱、企業logo，在后臺“網站-設置-基礎設置出管理”
- 自定義變量
也可在后臺“網站-設置-變量管理”處，添加自定義變量。
靜態片段
在不同頁面中重復使用的內容，可以創建為靜態片段，比如公共頭部、公共底部。 對應后臺功能“模板—物料—靜態片段”
在編輯頁面或模板代碼時，選擇插入片段即可使用。?
動態片段
動態片段是可以按照指定規則動態循環輸出的模型詳情內容。?
動態片段的內容，在后臺“模板-物料-動態片段”處管理。?
動態片段的樣式，由模板控制。?
?
全站使用的頂部導航和底部導航
導航內容，在后臺“頁面—導航”處管理。
導航樣式，由模板通知，在后臺“模板—模板列表—導航模板”處管理
導航模板主要邏輯如下。
- "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是否與導航url一致 例：聯系我們
v['url'] == Urlparam['currenturl']
- b. 當前導航是預置模型，v['module']與后臺存儲的模型標識datatype一致 例：新聞中心 v['module'] == datatype
- c. 當前導航是自定義模型，v['module']與后臺存儲的自定義模型標識moduletype一致（并且v['module']不為空） 例：客戶案例 v['module'] == moduletype and v['module'] is not empty
- d. 屬于模型下的二級導航 例：新聞中心下的二級導航----企業專題
datatype == 'zt' and v['module'] == 'news'
- e. 屬于自定義頁面下的二級導航 例：關于企業下的二級導航-----企業圖庫、人才招聘 v['url'] == '/about/' and (datatype == 'album' or datatype == 'job')
查看完整導航模板語法
面包屑導航
除了首頁，每個頁面都有面包屑導航。
普通頁面，靜態內容直接輸出
模型列表，靜態內容直接輸出，當前分類用變量輸出。?
模型詳情。面包屑導航中，靜態內容直接輸出，當前內容所屬分類及內容標題用變量輸出。?
頁面
對應后臺功能“頁面-頁面管理-普通頁面”
普通頁面
普通頁面支持可視化編輯、需在代碼中添加可視化編輯的標記。
支持可視化的內容過包括：文本、圖片、動態片段（整體）、靜態片段（整體）、鏈接、關聯內容。
模板頁面
模板頁面內容，在后臺“頁面-頁面管理-模板頁面”
模板頁面樣式，由模板控制。
自定義列表頁
自定義列表頁的內容，在后臺“頁面-頁面管理-自定義列表頁”處管理
自定義列表頁的樣式，由模板控制。
模型首頁/模型列表
模型首頁和模型列表的內容包括：分類名稱、分類介紹、分類封面圖。 模型首頁和模型列表的內容分別由后臺“模型管理-分類管理”中的全部分類和其他分類控制。
模型首頁和模型列表的樣式都由模型分類模板控制。對應后臺功能： 模板列表-新增模板-模板類型-模型模板/模型名稱/分類
模型分類模板的主要內容包含
- 分類信息：標題、鏈接、圖片、描述
- 分類下詳情信息-----標題、鏈接、圖片、描述、發布時間
舉例如圖庫模型列表
圖庫列表（輸出圖庫內圖片數量）
圖片列表
舉例只有詳情標題的列表
展示詳情標題等字段。如果預置字段不包含該內容，需要添加自定義字段。
對應后臺功能：內容-添加模型-編輯字段-新增字段
舉例特殊樣式，列表第一個內容有圖片，其他內容沒圖片**
可使用
{%if loop.first%}
{%else%}
{%endif%}
查看模型分類模板語法
模型詳情
模型詳情頁的內容，可以用模型字段直接輸出。 模型詳情頁的樣式，通過模板控制。
舉例：?
詳情主要內容由模型字段輸出，特別是詳情正文，通過富文本編輯器字段輸出。在拆解靜態頁面和嵌套模板時，不用定義詳情正文內容，只需定義樣式：小標題需要單獨設置樣式，整個正文部分樣式需統一。模板嵌套完成后，在五星云站后臺發布模型詳情，需要注意的是：詳情正文盡量使用文字，而不使用大段截圖。
對應后臺功能： 內容—模型管理—發布詳情—詳情內容—新增編輯內容?
查看模型詳情完整模板語法
搜索列表
搜索列表通過搜索模板直接控制。對應后臺功能“模板-模板列表-搜索模板”。
每個模型都需要單獨寫各自的搜索頁模板，樣式除內容區域不一樣，其他整體框架一致。
在搜索列表中，只顯示當前開啟了搜索功能的模型。搜索功能開關位置：“內容—模型管理—模型設置”。
查看搜索列表模板完整語法
業務表單
查看完整業務表單模板語法
詢盤
和產品模型、配件模型關聯。內容在后臺“業務-詢盤管理”處管理。
樣式通過模型模板控制。模板中需要設置開啟詢盤后才顯示詢盤表單。詢盤開關在后臺“內容—模型管理—模型設置—業務”處。
前臺詢盤表單提交內容后，可以在后臺“業務-詢盤管理-模型詢盤”處查看。?
留言
和文章模型關聯。內容在后臺“業務-留言管理”處管理。
樣式通過模型模板控制。模板中需要設置開啟留言后才顯示詢盤表單。留言開關在后臺“內容—模型管理—模型設置—業務”處。
前臺留言表單提交內容后，可以在后臺“業務-留言管理-模型留言”處查看。?
評論
和新聞模型、圖庫模型、視頻模型、專題模型關聯。評論表單的字段內容不能自定義。
樣式通過模型模板控制。模板中需要設置開啟評論后才顯示詢盤表單。評論開關在后臺“內容—模型管理—模型設置—業務”處。
前臺評論表單提交內容后，可以在后臺“業務-評論管理”處查看。?
簡歷
和招聘模型關聯。內容在后臺“業務-簡歷管理-表單設置”處管理。
樣式通過模型模板控制。模板中需要設置開啟投遞簡歷后、才顯示簡歷管理表單。投遞簡歷開關在后臺“內容—招聘管理—模型設置—業務”處。
前臺簡歷表單提交內容后，可以在后臺“業務-簡歷管理”處查看。?
自定義表單
自定義表單和模型沒有關聯，可以在任意頁面中使用。自定義表單的內容和樣式，都在后臺“業務—表單管理—表單設置”處管理。
頁面中使用自定義表單時，需要在后臺“業務—表單管理—表單設置”處，找到對應的表單，點擊復制代碼，然后在頁面中粘貼即可。
前臺表單提交內容后，可以在后臺“業務-表單管理-提交記錄”處查看。?
其他要點說明
鏈接打開方式
中文站
- 一般鏈接，和當前頁面內容關系不大，新窗口打開；
- 表示內容結構的的，當前窗口打開。如頂部導航、面包屑導航、列表頁側導航；
英文站
- 內容鏈接，統一當前窗口打開；非內容鏈接，如在線客服，使用新窗口。
命名規范
靜態片段：終端類型（pc/m） - 內容類別 - 所屬頁面
動態片段：終端類型（pc/m） - 內容類別 - 規則（排序及數量） - 所屬頁面/位置
多顏色風格實現
樣式表分為多份，不同主題顏色各有一份樣式表，最后在調用樣式表時，使用變量調取相應顏色的css文件。
輸出物及要求
頁面代碼，符合前端要點說明；
內容實現方式靈活，且符合五星云站實現要求；
頁面中不出現無意義內容或明顯測試內容，如“測試產品標題”
PC版兼容IE9+、Chrome、Firefox、360等主流瀏覽器，移動版兼容主流品牌手機瀏覽器。
html、css編碼基礎規范
- html文件采用utf-8編碼，無附加bom形式存儲。
- 用tab鍵縮進。
- 引用wsc模塊時，需在代碼前后加上編號注釋。
- html中不允許有站外資源鏈接，包括：imges、css、js、視頻等。
- css、js文件里面的資源（背景圖）必須是相對路徑，參考項目的默認目錄路徑。
重點html標簽編碼規范：
-
a標簽及鏈接值規范
-
靜態頁中，所有模型相關需要用變量替換的鏈接，直接用變量替換好。
-
靜態頁中，所有指向模型首頁、普通頁面的鏈接，寫上最終的鏈接，參考具體項目的URL規范。
-
靜態頁中，所有未知鏈接值用“#”
-
所有涉及模型的變量鏈接，a標簽需要有title，如：內容標題、分類名稱。
-
所有關于“more"，“更多"，“全部”，“查看詳情”的a標簽，需要有title，title值等于目標頁的h1內容。
-
img標簽使用及實現規范
-
所有關于模型調取的圖片需要使用src，且必須有alt屬性，如：新聞封面圖、產品圖；
-
頁面中有意義（語義）的配圖可使用src；
-
src本身不允許設置寬度高度，需要在外層容器設置寬度高度，img只需要設置max-width;max-height(可選);
-
模型調取的圖片需要讓img在外層容器中絕對居中，如：模型列表、動態片段；且需要控制圖片的長邊和短邊不能超過容器值。
-
非模型調取的圖片，設計圖若無邊框，執行頂部對齊；設計圖上若有邊框，執行絕對居中
-
靜態頁中，模型相關的img src地址固定指向 model.png;其它鏈接正常的圖片；
