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;其它鏈接正常的圖片;