-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhexo-pug-notes.html
550 lines (331 loc) · 38.2 KB
/
hexo-pug-notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme="auto">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
<link rel="icon" href="/img/favicon.png">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="theme-color" content="#2f4154">
<meta name="description" content="pug原名jade，因版权问题更名为pug，即哈巴狗。与hexo默认模块ejs一样，pug也是一个模板引擎，可用于快速的网站开发，当然也可以用于静态博客网站的设计。本站点现时所用主题manupassant也使用了pug。
本文针对Hexo中使用pug的情况为例，说明其基本语法。">
<meta name="author" content="凹凸曼达人">
<meta name="keywords" content="一网盟,yiwangmeng,GoodHexo,hexo便携版">
<title>网页模板 pug 基本语法 - 我的博客</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
<link rel="stylesheet" href="/lib/hint/hint.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/github-gist.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<!-- 主题依赖的图标库，不要自行修改 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">
<link rel="stylesheet" href="/css/main.css" />
<!-- 自定义样式保持在最底部 -->
<script id="fluid-configs">
var Fluid = window.Fluid || {};
var CONFIG = {"hostname":"yiwangmeng.com","root":"/","version":"1.8.9","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
</script>
<script src="/js/utils.js" ></script>
<script src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="我的博客" type="application/atom+xml">
</head>
<body>
<header style="height: 70vh;">
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<a class="navbar-brand"
href="/"> <strong>一网盟</strong> </a>
<button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="/">
<i class="iconfont icon-home-fill"></i>
首页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/archives/">
<i class="iconfont icon-archive-fill"></i>
归档
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/categories/">
<i class="iconfont icon-category-fill"></i>
分类
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tags/">
<i class="iconfont icon-tags-fill"></i>
标签
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about/">
<i class="iconfont icon-user-fill"></i>
关于
</a>
</li>
<li class="nav-item" id="search-btn">
<a class="nav-link" data-toggle="modal" data-target="#modalSearch"> <i
class="iconfont icon-search"></i> </a>
</li>
<li class="nav-item" id="color-toggle-btn">
<a class="nav-link" href="javascript:"> <i
class="iconfont icon-dark" id="color-toggle-icon"></i> </a>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner" id="banner" parallax=true
style="background: url('/img/default.png') no-repeat center center;
background-size: cover;">
<div class="full-bg-img">
<div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
<div class="page-header text-center fade-in-up">
<span class="h2" id="subtitle" title="网页模板 pug 基本语法">
</span>
<div class="mt-3">
<span class="post-meta">
<i class="iconfont icon-date-fill" aria-hidden="true"></i>
<time datetime="2020-12-10 15:22" pubdate>
2020年12月10日 下午
</time>
</span>
</div>
<div class="mt-1">
<span class="post-meta mr-2">
<i class="iconfont icon-chart"></i>
2.1k 字
</span>
<span class="post-meta mr-2">
<i class="iconfont icon-clock-fill"></i>
31
分钟
</span>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container-fluid nopadding-x">
<div class="row nomargin-x">
<div class="d-none d-lg-block col-lg-2"></div>
<div class="col-lg-8 nopadding-x-md">
<div class="container nopadding-x-md" id="board-ctn">
<div class="py-5" id="board">
<article class="post-content mx-auto">
<!-- SEO header -->
<h1 style="display: none">网页模板 pug 基本语法</h1>
<div class="markdown-body">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>pug 原名 <code>jade</code> ，因版权问题更名为 <code>pug</code> ，即哈巴狗。与 hexo 默认模块 <code>ejs</code> 一样，pug 也是一个模板引擎，可用于快速的网站开发，当然也可以用于静态博客网站的设计。本站点现时所用主题 manupassant 也使用了 <code>pug</code> 。</p>
<p>本文针对 Hexo 中使用 <code>pug</code> 的情况为例，说明其基本语法。</p>
<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs sh"><span class="hljs-comment"># common install</span><br>npm install pug<br><br><span class="hljs-comment"># install for hexo blog</span><br>npm install hexo-renderer-pug --save<br></code></pre></td></tr></table></figure>
<h1 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h1><p>pug 不同于 html ，前者不需要标签的开和闭，如 html 的 <code><p>Demo</p></code> ，在 pug 使用 <code>p Demo</code> 即可。</p>
<h2 id="缩进"><a href="#缩进" class="headerlink" title="缩进"></a>缩进</h2><p>pug 对空格敏感，有点类似 python 对制表符tab敏感。pug 使用空格作为缩进符，当然用 <code>soft tab</code> 也可行。同一级标签需保证左对齐。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs pug">div<br> p Hello, world!<br> p Hello, pug.<br></code></pre></td></tr></table></figure>
<p>渲染结果如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hellow, world!<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello, pug.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br></code></pre></td></tr></table></figure>
<h2 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h2><p>pug 使用 <code>//-</code> 或 <code>//</code> 对代码进行注释，前者注释内容不出现在渲染后的 html 文件中，后者反之。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- html中不包含此行<br>// html中会包含此行<br></code></pre></td></tr></table></figure>
<h2 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h2><p>pug 将标签属性存放于括号 <code>()</code> 内，多个属性之间以 <code>逗号</code> 或 <code>空格</code> 分隔。此外，对于标签的 <code>id</code> 和 <code>class</code> ，pug 使用 <code>#</code> 紧跟标签 <code>id</code> ,使用 <code>.</code> 紧跟标签 <code>class</code> ，可以同时设置多个 <code>class</code> 。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs pug">h1#title Test title<br>img#name.class1.class2(src="/test.png" alt="test")<br></code></pre></td></tr></table></figure>
<p>渲染结果如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span>></span>Test title<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"class1 class2"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/test.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span>></span><br></code></pre></td></tr></table></figure>
<h2 id="包含"><a href="#包含" class="headerlink" title="包含"></a>包含</h2><p>为了方便代码复用，pug 提供了 <code>include</code> 包含功能，以下代码会将 <code>_partial</code> 目录下的 <code>head.pug</code> 文件内容包含到当前调用的位置。有点 C/C++ 中内联函数的意思。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs pug">doctype html<br>html(lang='en')<br> include _partial/head.pug<br></code></pre></td></tr></table></figure>
<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><p>下面是一个简单的 <code>base</code> 模板，通过 <code>block</code> 定义了页面头部 <code>head</code> 和内容 <code>body</code> 。块 <code>block</code> 有点类似 C/C++ 的抽象函数，需要在继承者中完成定义，填充具体内容。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- base.pug<br>html<br> head<br> block title<br> body<br> block content<br></code></pre></td></tr></table></figure>
<p>以下文件使用 <code>extends</code> 继承以上模板，通过 <code>block</code> 覆盖或替换原有块 <code>block</code> 。当然，继承者也可以在原有基础上继续扩展。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- index.pug<br>extends base.pug<br><br>block title<br> title "Test title"<br><br>block content<br> h1 Hello world!<br> block article<br></code></pre></td></tr></table></figure>
<h2 id="定义变量"><a href="#定义变量" class="headerlink" title="定义变量"></a>定义变量</h2><p>pug中通过 <code>- var name = value</code> 的形式定义变量</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs pug">- var intData = 100<br>- var boolData = false<br>- var stringData = 'Test'<br>p.int= intData<br>p.bool= boolData<br>p.stringData= stringData<br></code></pre></td></tr></table></figure>
<blockquote>
<p>需注意的是，在引用变量时，需要在引用位置加上=号，否则会默认将变量名当成普通字符串使用。</p>
</blockquote>
<p>如果想要将变量与其它字符串常量或是变量连接在一起，就不能用等号了，而是应该用 <code>#{}</code> ，该符号会对大括号内的变量进行求值和转义，最终得到渲染输出的内容。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs pug">- var girl = 'Lily'<br>- var boy = 'Jack'<br>p #{girl} is so beautiful!<br>p And #{boy} is handsome.<br></code></pre></td></tr></table></figure>
<h2 id="条件结构"><a href="#条件结构" class="headerlink" title="条件结构"></a>条件结构</h2><p>pug 的条件语句与其它语言类似，均是如下这般：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs pug">- var A = {value: 'Test'}<br>- var B = true<br>if A.value<br> p= A.value<br>else if B<br> p= B<br>else<br> p nothing<br></code></pre></td></tr></table></figure>
<h2 id="迭代"><a href="#迭代" class="headerlink" title="迭代"></a>迭代</h2><p>pug 中使用 <code>each</code> 和 <code>while</code> 实现循环迭代，<code>each</code> 可以返回当前所在项的索引值，默认从 <code>0</code> 开始计数。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- each<br>ol<br> each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']<br> li= item<br><br>//- get index of each<br>- var week = ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']<br>ol<br> each item, index in week<br> li= index + ':' + item<br></code></pre></td></tr></table></figure>
<p>渲染成 html 后：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sun<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Mon<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Tus<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Wen<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Thu<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Fri<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sat<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>0:Sun<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>1:Mon<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>2:Tus<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>3:Wen<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>4:Thu<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>5:Fri<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>6:Sat<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br></code></pre></td></tr></table></figure>
<p><code>while</code> 调用方式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- while<br>- var day = 1<br>ul<br> while day < 7<br> li= day++<br></code></pre></td></tr></table></figure>
<h2 id="Minix"><a href="#Minix" class="headerlink" title="Minix"></a>Minix</h2><p><code>mixin</code> 名曰混入，类似其它编程语言中的函数，也是为了代码复用，可带参数或不带参数，定义方式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs pug">mixin menu-item(href, name)<br> li<br> span.dot ●<br> a(href=href)= name<br></code></pre></td></tr></table></figure>
<p>其中，<code>menu-item</code> 为调用时所用名称，可认为是函数名，<code>href</code> 及 <code>name</code> 是参数。同上定义变量所说，<code>a(href=href)= name</code> 中第二个 <code>=</code> 是为了将后面的 <code>name</code> 当作参数来处理，而不是当作字符串 <code>"name"</code> 来处理。</p>
<p>调用 <code>mixin</code> 定义的代码块，需通过 <code>+</code> 号紧跟 <code>mixin</code> 名称及参数:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs pug">+menu-item('/Archives','Archives')<br>+menu-item('/About','About')<br></code></pre></td></tr></table></figure>
<p><code>mixin</code> 之所以称为混入，是因为其语法不局限于函数调用，在 <code>mixin</code> 可以使用块 <code>block</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs pug">mixin print(post)<br> if block<br> block<br> else<br> p= post<br><br>+print("no block")<br>+print("")<br> div.box<br> p this is the content of block<br></code></pre></td></tr></table></figure>
<p>对应 html 代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>no block<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>this is the content of block<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br></code></pre></td></tr></table></figure>
<h2 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h2><blockquote>
<p>注意以下 <code>pug</code> 语句中第一行的 <code>.</code> 号。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs pug">script(type='text/javascript').<br> var data = "Test"<br> var enable = true<br> if enable<br> console.log(data)<br> else<br> console.log('nothing')<br></code></pre></td></tr></table></figure>
<p>对应的 JS 代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><script type=<span class="hljs-string">'text/javascript'</span>><br> <span class="hljs-keyword">var</span> data = <span class="hljs-string">"Test"</span><br> <span class="hljs-keyword">var</span> enable = <span class="hljs-literal">true</span><br> <span class="hljs-keyword">if</span> enable<br> <span class="hljs-built_in">console</span>.log(data)<br> <span class="hljs-keyword">else</span><br> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'nothing'</span>)<br></script><br></code></pre></td></tr></table></figure>
<p>对于简单脚本，使用 pug 尚可，复杂的还是单独写到 <code>.js</code> 文件中，然后通过 pug 引用方便一些，引用方式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs pug">script(type='text/javascript', src='/path/to/js')<br><br>//- with hexo function url_for<br>script(type='text/javascript', src=url_for(theme.js) + '/ready.js')<br></code></pre></td></tr></table></figure>
<h1 id="hexo-相关"><a href="#hexo-相关" class="headerlink" title="hexo 相关"></a>hexo 相关</h1><p>在 hexo 主题中使用 pug 时，可以通过使用 hexo 提供的全局变量 <code>config</code> ， <code>theme</code> 来分别调用博客根目录下 <code>_config.yml</code> 文件中的参数以及主题根目录下 <code>_config.yml</code> 文件中的参数。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- blog config<br>p= config.description<br><br>//- theme config<br>p= theme.title<br></code></pre></td></tr></table></figure>
<p>当然，pug 中可以直接使用 hexo 提供的其它全局变量及辅助函数，使用方法详见 hexo 的文档。</p>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- head.pug<br>head<br> meta(http-equiv='content-type', content='text/html; charset=utf-8')<br> meta(content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', name='viewport')<br> meta(content='yes', name='apple-mobile-web-app-capable')<br> meta(content='black-translucent', name='apple-mobile-web-app-status-bar-style')<br> meta(content='telephone=no', name='format-detection')<br> meta(name='description', content=config.description)<br> block title<br> link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/style.css' + '?v=' + theme.version)<br> link(rel='Shortcut Icon', type='image/x-icon', href=url_for('favicon.png'))<br> script(type='text/javascript', src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js')<br> block more<br></code></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs pug">//- base.pug<br>doctype html<br>html(lang='en')<br> include _partial/head.pug<br> block more<br> link(rel='stylesheet', type='text/css', href=url_for(theme.plugins) + '/prettify/doxy.css')<br> script(type='text/javascript', src=url_for(theme.js) + '/ready.js' + '?v=' + theme.version, async)<br> <br> //- body<br> body: #container.box<br> .h-wrapper<br> include _partial/nav-menu.pug<br> // article content<br> block content<br><br> include _partial/footer.pug<br></code></pre></td></tr></table></figure>
<p>其中:</p>
<ul>
<li><code>theme.*</code> 为主题配置文件 <code>_config.yml</code> 中的参数</li>
<li><code>url_for</code> 为 hexo 提供的用于查找资源路径的函数</li>
</ul>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>pug 提供了 <code>包含</code> ，<code>继承</code> ，<code>Mixin</code> 等多种方式用于代码复用，语法简洁易懂，除了初学时需花费一些时间学习各种标点符号的含义外，其它倒也没有太大困难。</p>
<p>当然啦，pug 还有许多其它特性，但就我目前使用情况而言，以上这些便已足够。</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ol>
<li><a target="_blank" rel="noopener" href="https://pugjs.org/zh-cn/api/getting-started.html">pugjs.org</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/">hexo.io/zh-cn/docs/</a></li>
</ol>
<h2 id="原文出处"><a href="#原文出处" class="headerlink" title="原文出处"></a>原文出处</h2><ul>
<li>作者：litreily</li>
<li>链接：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903668383236104">https://juejin.cn/post/6844903668383236104</a></li>
<li>来源：掘金</li>
<li>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</li>
</ul>
</div>
<hr>
<div>
<div class="post-metas mb-3">
<div class="post-meta mr-3">
<i class="iconfont icon-category"></i>
<a class="hover-with-bg" href="/categories/%E5%AD%A6%E7%BC%96%E7%A8%8B/">学编程</a>
</div>
<div class="post-meta">
<i class="iconfont icon-tags"></i>
<a class="hover-with-bg" href="/tags/%E5%8D%9A%E5%AE%A2%E5%BB%BA%E7%AB%99/">博客建站</a>
</div>
</div>
<p class="note note-warning">
本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
</p>
<div class="post-prevnext">
<article class="post-prev col-6">
<a href="/how-to-use-goodhexo.html">
<i class="iconfont icon-arrowleft"></i>
<span class="hidden-mobile">GoodHexo仓库版使用简介</span>
<span class="visible-mobile">上一篇</span>
</a>
</article>
<article class="post-next col-6">
<a href="/aardio-notes-02.html">
<span class="hidden-mobile">从零开始学aardio笔记：基础规范</span>
<span class="visible-mobile">下一篇</span>
<i class="iconfont icon-arrowright"></i>
</a>
</article>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
<div id="toc">
<p class="toc-header"><i class="iconfont icon-list"></i> 目录</p>
<div class="toc-body" id="toc-body"></div>
</div>
</div>
</div>
</div>
<!-- Custom -->
<a id="scroll-top-button" href="#" role="button">
<i class="iconfont icon-arrowup" aria-hidden="true"></i>
</a>
<div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">搜索</h4>
<button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<input type="text" id="local-search-input" class="form-control validate">
<label data-error="x" data-success="v"
for="local-search-input">关键词</label>
</div>
<div class="list-group" id="local-search-result"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-center mt-5 py-3">
<div class="footer-content">
<a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
</div>
<!-- 网易云音乐插件 -->
<div style="position:absolute; bottom:120px; left:auto; width:100%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=1332647902&auto=0&height=32"></iframe>
</div>
</footer>
<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />
<script>
NProgress.configure({"showSpinner":false,"trickleSpeed":100})
NProgress.start()
window.addEventListener('load', function() {
NProgress.done();
})
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script src="/js/debouncer.js" ></script>
<script src="/js/events.js" ></script>
<script src="/js/plugins.js" ></script>
<!-- Plugins -->
<script src="/js/img-lazyload.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>
<script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
<script>
(function (window, document) {
var typing = Fluid.plugins.typing;
var title = document.getElementById('subtitle').title;
typing(title)
})(window, document);
</script>
<script src="/js/local-search.js" ></script>
<script>
(function () {
var path = "/local-search.xml";
$('#local-search-input').on('click', function() {
searchFunc(path, 'local-search-input', 'local-search-result');
});
$('#modalSearch').on('shown.bs.modal', function() {
$('#local-search-input').focus();
});
})()
</script>
<!-- 主题的启动项 保持在最底部 -->
<script src="/js/boot.js" ></script>
</body>
</html>