Bitcron主题的首页
欢迎来到《Bitcron主题制作系列教程》。上一篇讲解了高效联结主题模板文件的方法，至此总述告一段落，今天开始进行分文件举实例说明各个页面的写法。这一篇将要介绍的是主题的首页index.jade。
直接或间接
上一篇里提到过，如果网站结构比较复杂的，可以先用base.jade打个基础，然后其他页面再引用。如果不复杂，可以直接用index.jade作为基础。本着能少写一个是一个的自私原则，今后的讲解就不使用base.jade了，其实原理是一样的。那么按照先前的介绍，index.jade的内容如下：
html
head
+h.headers
+h.load('/template/style.scss')
block title
title= site.title
body
header
具体内容
nav
具体内容
main
block content
具体内容
footer
具体内容
按照上面给出的示例，网站的header、nav和footer不变，而title和main会根据不同页面进行相应调整。接下来介绍一下各部分常用的Bitcron API。
Header
Header因为其位置的优越性，是个能以最快速度为读者介绍网站的宝地。所以一般来说会放置网站头像、网站标题、网站介绍等相关信息，帮助读者一眼掌握网站内容。这类信息全部由Site对象提供，提取在后台填入的相关信息。
- 网站头像：
site.avatar或site.site_avatar - 网站标题：
site.title或site.configs.title - 网站介绍（二级标题）：
site.configs.sub_title
header
a(href='/')
img(src= site.avatar)
h1= site.title
.description= site.configs.sub_title
Nav
Bitcron提供了带有默认样式的菜单栏，当然也可以只引用结构，自定义样式。使用API的好处是内容可以在后台的自定义菜单中更改，不需要修改模板。
- 带CSS的菜单：
+site.nav - 仅菜单结构：
+site.just_nav
nav
+site.nav
我一般都会根据主题样式统合菜单栏的设计，所以使用+site.just_nav比较多。如果不喜折腾，用+site.nav也足够了，自带样式很简洁，而且也是响应式的（responsive），很好地照顾到了小屏幕的浏览体验。
Footer
Footer里最常放置的是版权信息，同时还有补全header和nav的功能，可以放置一些譬如社交按钮、搜索框、文章总数等网站或站长的补充信息。
- 社交按钮：
+site.socials - 搜索框：
+posts.search_in_html() - 网站当前年份：
site.now.year（常用于版权信息） - 文章总数：
d.get_data(types='post', return_count=true, with_page=false) - 全站总字数：
site.text_words
footer
+posts.search_in_html()
+site.socials
// 版权信息「© 2017 水八口记」的写法如下
div= '© %s %s' %(site.now.year, site.title)
// 文章总数和全站总字数
div= '%s篇文章' %(d.get_data(types='post', return_count=true, with_page=false))
div= '%s字' %(site.text_words)
// 也可以写成
div= site.text_words + '字'
Title
之前说过，head里面的内容不会直接显示在网页上，但这个title会显示在网页浏览器的标签（browser tabs）中，所以才要根据不同页面显示不同标题。在首页中一般直接写网站标题或加上二级标题。
block title
// 仅网站标题
title= site.title
// 加上二级标题，比如格式为「水八口记 - 水八口的个人网站」
title= site.title + ' - ' + site.configs.sub_title
Main
终于到了整个网站最重要的组成部分了。一般来说博客首页会放置文章列表，至于每页显示多少篇文章，可以在后台设置。列表可以只有标题，也可以包含标题和部分内容，或者全文输出。
block content
for post in posts
// 冒号表示换行，节省空间
h2: a(href=post.url)= post.title
// 全文输出
.content= post.content
// 用limit函数提取部分内容
.content= post.content.limit(150)
+h.paginator()
综上所述
把上述各部分拼合起来得到index.jade的最终版（彩蛋：加上返回顶部按钮+h.back_to_top(label='▲')）：
html
head
+h.headers
+h.load('/template/style.scss')
block title
title= site.title
body
header
a(href='/')
img(src= site.avatar)
h1= site.title
.description= site.configs.sub_title
nav
+site.nav
main
block content
for post in posts
h2: a(href=post.url)= post.title
.content= post.content.limit(150)
+h.paginator()
footer
+posts.search_in_html()
+site.socials
div= '© %s %s' %(site.now.year, site.title)
div= '%s篇文章' %(d.get_data(types='post', return_count=true, with_page=false))
div= '%s字' %(site.text_words)
+h.back_to_top(label='▲')
大家可以对照实例加深理解，或者把自己网站的template文件夹里的内容备份后删除，放入上面的index.jade实际看看效果。当然这些还未经过CSS包装加工，只能看见所谓的雏形。再或者备份后尝试修改一下base.jade或index.jade，相信实操之后印象会更加深刻。
相关阅读
下一篇：Bitcron主题的文章内页
返回目录：Bitcron主题制作系列教程
上一篇：高效的模板写法