首頁制作流程 · ThinkCMF5從入門到精通

## 首頁內容介紹首頁是一個網站的關鍵內容，我們以常規的一個企業網站的官方網站來做一個demo。其他網站均類似，只是內容多少的問題。一般企業網站的首頁包括如下部分。（其中導航、幻燈片、友情鏈接已經在之前的章節已經講過，本處不做詳細介紹，只將對應代碼附上） 1、logo公司信息 2、網站頂部導航條 3、幻燈片 4、關于（文字，視頻，圖片） 5、服務（文字，視頻，圖片） 6、產品（產品列表） 7、新聞（文章列表或者圖文列表） 8、底部導航（導航，隱私，分享，二維碼等） 9、友情鏈接 10、底部版權 11、客服系統 ## 首頁制作流程首先和第一步是創建對應的index.html和index.json兩個文件，并引入上一章節的對應的[共用頁面](http://www.hmoore.net/welkinvan/thinkcmf5/327486)和一些[全局變量](http://www.hmoore.net/welkinvan/thinkcmf5/303139)。 > 每一個demo功能部分均以如下標簽來表示，可以將各個模塊加入到下部index.html中的“這邊為主體內容”位置進行測試。 ~~~ <div class="section"> …… </div> ~~~ index.html代碼如下： ~~~ <!DOCTYPE html> <html lang="zh_CN"> <head> <title>{$site_info.site_name|default=''}-{$site_info.site_seo_title|default=''}</title> <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/> <meta name="description" content="{$site_info.site_seo_description|default=''}">  <include file="public@head"/> </head> <body>  <include file="public@header"/>   <include file="public@footer"/>  <include file="public@scripts"/> </body> </html> ~~~ index.json代碼如下 ~~~ { "name": "首頁模板", "action": "portal/Index/index", "description": "首頁模板配置文件", "order": 1.0, "more": { } } ~~~ > **本文檔中的demo均基于bootstrap3.x來實現，實例中的css樣式并沒有在文檔中完全展示，僅供功能實現測試**