Jade文档的基本写法

2017. 10.18 12:51 / 792字 / 1,084阅 / 0评

head
body
结合
相关阅读

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

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

html
    head
        具体内容
    body
        具体内容

是不是很简单！接下来分别解释一下head和body里面的具体内容。

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
            具体内容

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

Jade文档的基本写法

head

body

结合

相关阅读