272° 20171,381字评论

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对象提供,提取在后台填入的相关信息。

header
    a(href='/')
        img(src= site.avatar)
    h1= site.title
    .description= site.configs.sub_title

Nav

Bitcron提供了带有默认样式的菜单栏,当然也可以只引用结构,自定义样式。使用API的好处是内容可以在后台的自定义菜单中更改,不需要修改模板。

nav
   +site.nav

我一般都会根据主题样式统合菜单栏的设计,所以使用+site.just_nav比较多。如果不喜折腾,用+site.nav也足够了,自带样式很简洁,而且也是响应式的(responsive),很好地照顾到了小屏幕的浏览体验。

Footer

Footer里最常放置的是版权信息,同时还有补全header和nav的功能,可以放置一些譬如社交按钮、搜索框、文章总数等网站或站长的补充信息。

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.jadeindex.jade,相信实操之后印象会更加深刻。

相关阅读

下一篇:Bitcron主题的文章内页
返回目录:Bitcron主题制作系列教程
上一篇:高效的模板写法

EOF
154°
Bitcron主题的文章内页
点击加载Disqus