如果你想要对Hexo主题进行深度美化，且你要进行深度美化的主题模板引擎使用的就是pug(如butterfly)，则该文章将帮助到你

前言

给你的博客美化是博客建站中感觉重要但又可以丢掉的一点，大部分人会给自己的网站添加细节。但网上的Hexo美化还要分主题美化，一些你想要的美化功能只能在其他主题上使用，或者网上的这些美化你不喜欢，想自己整美化，那么本文章将帮助你初步了解pug，帮助你可以快速的在基于pug得主题上美化。

啥是Pug？

Pug 是一个用 JavaScript 实现的高性能的模板引擎，支持 Node.js 和浏览器运行环境，其灵感来自 Haml 项目。

判断主题是否使用pug

在一些主题上会用到pug。但不是完全。
打开如下文件夹：
直接存放在themes文件夹

博客根目录/themes/主题名/layout
npm方式安装
博客根目录/node_modules/hexo-theme-主题名/layout
如果发现该文件夹内文件后缀名为.pug，则该主题使用了pug。

安装pug

npm

1
npm install pug

pug 命令行

1
2
3
4
npm install pug-cli -g
# 查看安装情况
# 没找到命令请使用 npx pug --help
pug --help

一般情况下，pug在安装主题时便已安装完成。

基础语法

属性

1
2
3
4
a(href="toad114514.github.io")
|
|
a(href="#")

标签属性和 html 类似，但其实是 js 的普通表达式。允许使用逗号作为属性分隔符，不加也可以。
本页所有事例中包括管道符号”|”的行都用于控制空格上
支持所有 js 表达式

1
2
3
//- 已登录
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
1
2
3
4
5
iframe(
  scr="#"
  width="150"
  height="150"
)

pug允许把属性分多行编写。

如果属性里有特殊字符，且和 js 语法产生冲突，则需要用 “” 或 ‘’ 括起来

1
div(class="my-class" "(click)"="get()")

如果想要在属性中使用变量，则可以使用js写属性

1
2
3
4
5
6
- var url = 'pug-test.html';
a(href='/' + url) 链接
|
|
- url = 'https://example.com/'
a(href=url) 另一个链接

分支

case 属于 js 的 switch 缩写，接受如下形式：

1
2
3
4
5
6
7
8
- var num = 5
case num
  when 3
    p 数字是5
  when 5
    p 数字是5
  default
    p 数字是 $(num)

可以像js一样使用分支传递

1
2
3
4
case num
  when 3
  when 5
    p 数字应该是3或5

不想输出任何东西，可以明确性的加上break语句

1
2
3
case num
  when 3
    - break

可以使用块展开的语法

1
2
3
4
5
- var num = 5
case num
  when 3: p 数字是3
  when 5: p 数字是5
  default: p 数字是 $(num)

代码

pug提供了在模板中嵌入js代码的可能
不输出的代码
使用 “-“ 开始一段不输出的代码

1
2
- for (var i = 0; i < 5; i++)
  li $(i)

带输出的代码
使用 “=” 开始一段带输出的代码

1
2
3
4
p
  = "<转义> 的代码"
// 行内形式
p= "<转义> 的代码"

不转义的带输出代码

不安全警告
未转义的字符输出是危险的，可能导致跨站脚本攻击

用 “!=” 开始一段未转义的带输出字符

1
2
3
4
p 
 != "<strong>没转义</strong>的代码"
// 行内形式
p!= "<strong>没转义</strong>" + "的代码"

注释

带输出的注释和js注释一样，它们类似标签，能生成对应的html注释，而且必须单独一行

1
2
3
// legacy
p good
p 牢大我想你了

也有不输出的注释，在后期html渲染时不会出现对应的注释

1
2
3
4
//- 仅存在于pug模板中的注释
p man
p whatcanisay
p manbaout

一个正常的块注释如下

1
2
3
4
5
6
7
8
9
10
11
body
  //- 
    这里注释后期
    不会生成对应的html注释
    写多少字都行
    凉屋赶紧加强黑骑
  //
    这里注释
    后期会生成对应的html注释
    怎么写都行
    张浩没只因

条件注释
用于分辨新老ie浏览器的特殊标识，允许直接写html风格的注释

1
2
3
4
5
6
7
8
doctype html
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
</html>

条件

pug条件判断的一般形式的括号是可选的，所以其实可以省略开头的 “-“，效果完全相同，类似一个常规js语法形式

1
2
3
4
5
6
7
8
9
10
11
12
- var manba = ( msg: "out" )
- var uncomment = true
#user
  if manba.msg
    h2.yellow manba
    p.msg= manba.msg
  else if uncomment
    h2.blue 消息
    p.msg 没有添加消息
  else
    h2.red 消息
    没消息

oug同样提供反义版本 “unless”

1
2
3
4
5
6
\\\\\\\\\\ a.pug <
unless user.isAnonymous
  p 您已经以 #{user.name} 的身份登录。
\\\\\\\\\\ b.pug >
if !user.isAnonymous
  p 您已经以 #{user.name} 的身份登录。

包含

包含允许你把另外的内容插入进来
main.pug

1
2
3
4
5
6
7
8
doctype html
html
  include inc/head.pug
  body
    p 欢迎
    p.manba 牢大我想你了
    include inc/manba.pug
    include inc/foot.pug

head.pug

1
2
3
head
  title 扣1复活牢大
  script(src="/js/manba.js")

manba.pug

1
2
img(src="/img/laoda.jpg")
p.red 肘击24次只为纪念牢大

foot.pug

1
2
footer
  p give my like star kobe branyt

继承

pug允许使用 block 和 extends 关键字进行模板继承
layout.pug 文件

1
2
3
4
5
6
7
8
9
10
11
doctype html
html
  head
    title 我要把凉屋炸了
    block script
    script(src="js/liangwu.js")
  body
    block content
    block foot
      #footer
        p 炸凉屋时间！

扩展布局时，只需要在新的文件里使用 extends 指出被继承的模板路径即可
现在可以定义诺干个新块去覆盖父模板的父块
ext.pug 文件里面

1
2
3
4
5
6
7
8
9
10
11
extends layout.pug

block script
  script(src="js/zha.js")
block content
   h1 炸
   p 炸凉屋
   - var ways = ["小猫牢底", "PS5", "统帅力"]
   p 你可以用以下方法来炸凉屋
   each waysnum in ways
     p= waysnum

如下例子，content暴露出了”zha”和”zhuka”两个新块用于扩展。当然，子模块也可以把整个content覆盖。

1
2
3
4
5
6
7
block content
  .zha
    block zha
      p 没有任何东西
  .zhuka
    block zhuka
      i 把凉屋炸了

如果仅仅简单填一些东西上去而不是覆盖，这时便可使用 append / prepend。
append 在尾部部添加内容
prepend 在头部添加内容
如果你想要额外添砖加瓦，而不是推平重来，则可以这样做

1
2
block append head
  sxript(src="zhuka.js")

在有 append 或 prepend 情况下，可以将 block 省略

1
2
append head
  script(src="zhuka.js")

嵌入

pug提供多种嵌入方式

1
2
3
4
5
6
- var title = "local boradcast 24.5.16"
- var authon = "fimright-lztv"
- var zy = "<span>温度 27 度</span>"
h1= title
p #(authon) 制作
p 今日 #(zy)

不仅可以嵌入js，也可以嵌入pug书写的标签

1
2
3
4
5
6
p.
  这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。
  突然出现了一个 #[strong 充满力量感的单词]，这确实让人难以 #[em 忽视]。
p.
  使用带属性的嵌入标签的例子：
  #[q(lang="es") ¡Hola Mundo!]

迭代(循环)

pug提供了两种迭代方案，each 和 while
each迭代
pug的头等迭代方式，让你在模板中迭代数据和对象更方便

1
2
3
ul
  each num in [1, 2, 3, 4, 5]
    li 第 #(num) 个 列表

允许在迭代是获得索引值

1
2
3
ul
  each num, index in ["祖卡", "分裂", "美杜莎法袍"]
    li= index + ":" + num

同时，也允许获取键值

1
2
3
ul
  each num, index in {1:"祖卡", 2:"分裂", 3:"美杜莎法袍"}
    li= index + ":" + num

while 循环
利用 while 创建一个循环

1
2
3
4
- var i = 0
ul
  while i < 4
    li= i++

混入

混用允许你在pug中重复使用一整个代码块的方法

1
2
3
4
5
6
7
8
9
10
//-定义
mixin list
  ul 
    li a
    li b
  p lioMessy
//- 使用
+list
p useItAgain
+list

允许传递函数

1
2
3
4
5
6
mixin brofk(num)
  li.fk= "fk" + num
ul
  +brofk{1}
  +brofk(996)
  +brofk(114514)

结束

由于学业等问题，本文章并未写完。
本文章将会在1-2天内写完

现在，你懂了吗？