首页制作流程 · ThinkCMF5从入门到精通

## 首页内容介绍首页是一个网站的关键内容，我们以常规的一个企业网站的官方网站来做一个demo。其他网站均类似，只是内容多少的问题。一般企业网站的首页包括如下部分。（其中导航、幻灯片、友情链接已经在之前的章节已经讲过，本处不做详细介绍，只将对应代码附上） 1、logo公司信息 2、网站顶部导航条 3、幻灯片 4、关于（文字，视频，图片） 5、服务（文字，视频，图片） 6、产品（产品列表） 7、新闻（文章列表或者图文列表） 8、底部导航（导航，隐私，分享，二维码等） 9、友情链接 10、底部版权 11、客服系统 ## 首页制作流程首先和第一步是创建对应的index.html和index.json两个文件，并引入上一章节的对应的[共用页面](http://www.kancloud.cn/welkinvan/thinkcmf5/327486)和一些[全局变量](http://www.kancloud.cn/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样式并没有在文档中完全展示，仅供功能实现测试**