!=partial()方法

在 Pug 模板语言中,!= 表示不转义插入,partial 用于插入另一个 Pug 模板片段。

!=partial('template_name')意思是:不转义插入名为 template_name 的 Pug 模板片段。

在pug中，!=partial有以下方法：

1.第一个参数:模板文件的路径,可以是绝对路径或者相对路径,用字符串表示。例如:header.pug

2.第二个参数:向模板文件传递局部变量的对象。例如:{title:'首页'}

3.第三个参数:编译选项的对象,通常用来缓存模板。例如:{cache: true}所以一个典型的 partial 用法是:

1
!= partial('header', {title:'首页'}, {cache: true})

这会引入 header.pug 模板,传递一个 title 变量,并缓存这个模板。

传递变量的解释如下：

例如:

1
2
3
// home.pug
- const name = '小明'
!= partial('header', {name: name})
1
2
3
// header.pug 
if name 
  p 欢迎 #{name}

在 home.pug 中,我们调用 partial 引入 header.pug 模板,同时传递了一个{name: '小明'}对象。在header.pug模板中,可以通过 pug.locals 访问传递的变量,这里我们取出了 name 变量并渲染。运行结果:

1
<p>欢迎 小明</p>

if方法

在pug中if的主要语法如下：

1
2
3
4
if condition
	your codes(when condition != null)
else(can be ignore)
	your codes(when condition == null)

下面举一个例子：

1
2
3
4
5
a(href=url_for('/') title=config.title)
     if theme.nav.logo
       img.site-icon(src=url_for(theme.nav.logo))
     if theme.nav.display_title
       span.site-name=config.title

在第一个if中，如果theme.nav.logo配置了图片链接，那么就为true就会执行img这一行代码

在第二个if中，如果theme.nav.display_title中配置了title，那么就会执行span这一行代码

现在再来举一个复杂一点的代码：

1
2
3
4
5
if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
      #search-button
        a.site-page.social-icon.search(href="javascript:void(0);")
          i.fas.fa-search.fa-fw
          span=' '+_p('search.title')

在这个if中，如果theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable中有一个配置了东西，if就会成立，就会执行下面的代码。

基本上if的语法和js中的语法相类似，有if else，if else if等

pug中的一些简单的语法

在pug中可以像js一样声明变量，并且使用三元表达式之类的，有很多类似js的操作都可以在pug中直接编写

例子1：

1
var top_img = page.top_img || page.cover || theme.default_top_img

解释：

定义一个变量top_img将右边的值赋值给这个变量，而右边采用了||这个逻辑运算符

从左到右，优先级逐渐递减，如果没有找到top_img就找cover然后接着往下找

例子2：

1
- top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)

解释：

在这个例子中就采用了三元表达式的赋值方法，这个例子主要逻辑是三元表达式中套用三元表达式，这也是js常用的写法

在pug中，生成各种标签的主要语法如下：

1
2
3
4
5
.header //生成一个id为header的div标签
nav#nav //生成一个nav自定义标签，且id为nav
span#blog-info //生成一个id为blog-info的标签
a(href=url_for('/') title=config.title)  //生成一个a标签并且配置它的href，title属性