doctype html html(lang=config.language, data-theme="light") head include ./head.pug body#body(data-type=page.type) // universe if theme.display_mode.universe canvas#universe
// loading if theme.loading.fullpage include ./loading.pug
// console include ./console.pug
// sidebar include ./sidebar.pug
// keyboard if theme.keyboard.enable include ./keyboard.pug
#body-wrap(class = is_post() ? 'post' : 'page') include ./header.pug
if(page.type !== '404') block content
footer#footer include ./footer.pug else .error#body-wrap block content
// right_menu if theme.right_menu.enable include rightmenu
// inject body include ./inject/body.pug
// search include ./widgets/third-party/search/index.pug
// Tianli-Talk if theme.tianli_talk.enable include ./widgets/third-party/tianli-talk.pug
// music if theme.capsule.enable include ./widgets/third-party/music.pug
通过观察上述的 pug 文件的内容我们不难发现，pug 文件中所有标签的用法和 html 一样，你想用什么标签就直接写标签名字就好，而不用像 html 一样使用一对闭合标签
pug 文件中以缩进来表达标签父子关系和编程常用的{}，比如你想在一个 div 里面再添加一个 ul 标签，就可以这样
1 2
div ul
想给标签添加类名、id 或者属性可以分别使用 . # ()，想添加文本直接在标签后面先添加一个空格然后再写就好，例如下面代码描述的是一个 id 为 nav 的 ul 标签，包含一个类名为 nav-item 的 li 标签，li 标签中又包含了一个类名为 nav-link 的 a 标签，其中 a 标签有一个 href 属性值为 #，同时 a 标签的文本内容为首页
1 2 3
ul#nav li.nav-item a.nav-link(href="#") 首页
接着我们看结构控制语法，首先是 if 判断语句
只需要一个 if 语句，然后接一个空格，空格后接条件就好，接着需要一个缩进来判断成功后的内容，例如下面语句表达的是如果 theme.display_mode.universe 为 true，则渲染一个 canvas 标签，id 为 universe
1 2 3 4
if <判断条件> <判断成功后执行的语句> if theme.display_mode.universe canvas#universe
each 循环语句
1 2 3 4
each <变量名> in <数组名> <循环体> each item in list li= item.name //因为文本使用的是变量，所以需要在标签后用=号，而不能直接在空格后面写文本
include 语句，后面跟随一个 pug 文件的路径，就等于把那个 pug 文件的内容复制到这里
1 2
include <文件路径> include ./head.pug
修改界面结构
比如新增一个右键菜单功能，你可以新建一个 rightmenu.pug 文件，然后像下面这样编写内容，然后在需要使用右键菜单的界面使用 include 语句引入一下就好啦
如果你想引入一个所有界面的样式，直接在主题中的 inject 配置项或者 extends 配置项的 head 或者 body 下添加就好，比如
添加 js
要添加交互的，可以直接在 pug 文件中使用 script 标签，有两种使用方式
第一种是直接在 script 标签中使用 js 代码，比如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
script. fetch("#{tj.url}") .then(res => res.text()) .then(data => { const title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"]; let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g); num = num.map(el => { let val = el.replace(/(<\/span><span>)/g, ""); return val.replace(/(<\/span><\/p>)/g, ""); }); const s = document.getElementById("statistic"); let html = ''; for (let i = 0; i < num.length; i++) { if (i === 0 || i === num.length - 1) continue; html += `<div><span>${title[i]}</span><span id="${title[i]}">${num[i]}</span></div>`; } s.innerHTML = html; });
