241° 2017792字评论

Jade文档的基本写法

欢迎来到《Bitcron主题制作系列教程》。在上一篇的背景介绍中我列举了Bitcron的主题模板文件,其中每个后缀为.jade的文件实际上都控制着一种类型的页面,比如首页、归档页面、文章内页等。那么这篇就说一说.jade文档的基本写法。

将标准的HTML格式转换为Jade之后,将得到以下模板:

html
    head
        具体内容
    body
        具体内容

是不是很简单!接下来分别解释一下headbody里面的具体内容。

head

head里面的内容是一些网站的基本信息和设置,并不直接显示在网页上。在Bitcron中常用的有以下三种:

head
    // 加入必要的信息比如小屏浏览和SEO
    +h.headers
    // 载入资源比如CSS、JS等,或是Bitcron特有资源比如markdown、font等
    +h.load('xxx', 'xxx')
    // 网站标题
    title= xxx

示例写法:

head
    +h.headers
    // 载入SCSS文件(SCSS是一种更简便的CSS)
    +h.load('/template/style.scss')
    // site.title是Bitcron API,取得后台填入的网站标题
    title= site.title

body

body里的内容则会被全部反映到网页上,故而相对复杂一些,不同的页面结构写法也不尽相同,但仍是有规律可寻的。可以想象一下用Word写报告时候的格式,其实是差不多的。一个页面里包含了页首(header)、主要内容(main)和页脚(footer)。再细分一下:页首(header)、菜单栏(nav)、主要内容(main)、侧边栏(aside)和页脚(footer)。当然根据需求还可以继续细分下去。

页面结构

一般来说,我只用到这几个组成部分——<header><nav><main><footer>,其他就用<div id="xxx">自定义,比如<div id="logo">。所以如果大家想要更规范的写法,可以使用更多的HTML5含有语义的元素(semantic elements)来构建页面结构;如果嫌麻烦,也可以按照我的做法,既能满足基本规范又很简洁明快。而按照我的写法,body模板如下:

body
    header
        具体内容
    nav
        具体内容(有时候我会把nav写进header里)
    main
        具体内容
    footer
        具体内容

结合

将以上所有内容合并之后便得出.jade文档的基本结构了:

html
    head
        +h.headers
        +h.load('/template/style.scss')
        title= site.title
    body
        header
            具体内容
        nav
            具体内容
        main
            具体内容
        footer
            具体内容

是不是觉得比想象的简单很多呢?那么从下一篇开始我将分文件说明更加具体的模板写法,大家可以对照官方主题或者我的主题的模板文件进行理解。

相关阅读

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

EOF
203°
高效的模板写法
点击加载Disqus