当前标签 / 模板引擎 / 总共3篇

我为什么要从 Hexo 更换到 Hugo

前言

最近比较烦的是我的博客本以为很完美了,不用再折腾了,没想到 Hexo 有一个很大的弊端。我忍痛割爱的计划将 Hexo 引擎更换为基于 Go 语言的 Hugo 模板引擎。Hexo 优点很多,缺点就是生成静态文件 (hexo g) 速度真的是太慢了。Hexo 是基于 Nodejs 的,有很多插件,而 Hugo 没有插件,使用自带的 Go html 模板实现, 这个速度真的是牛,基本上在 Hexo 上面十几分钟,使用 Hugo 只需要几秒钟。

在更换过程中我想保留我原来博客的主题风格,所以很多东西都是逐渐仿照实现过去的,但是最让人头疼的并不是去实现这些功能,而是迁移过程中为了防止路径不同(大小写)和 keywords description 的不同导致的 SEO 问题。 其实目前我已经完全实现模板复制,但是我还是计划花一两个月慢慢迁移过去,这样对本站的影响可以尽量做到最小。

阅读更多

pug模板引擎(下)

逻辑语法

以下是关于模板逻辑的语法。

JavaScript代码

不输出的代码

- 开始一段不直接进行输出的代码。

- for (var x = 0; x < 3; x++)
  li item

生成后

<li>item</li>
<li>item</li>
<li>item</li>

输出的代码

用=开始一段带有输出的代码,它应该是可以被求值的一个 JavaScript 表达式。为安全起见,它将被 HTML 转义。

p
  = '这个代码被 <转义> 了!'
p= '这个代码被 <转义> 了!'

生成后


<p>这个代码被 &lt;转义&gt; 了!
</p>
<p>这个代码被 &lt;转义&gt; 了!</p>

不转义的输出代码

!= 开始一段不转义的,带有输出的代码。这将不会做任何转义,所以用于执行用户的输入将会不安全。

p
  != '这段文字<strong>没有</strong>被转义!'
p!= '这段文字' + '<strong>没有</strong>被转义!'

生成后

​```xml

这段文字没有被转义!

这段文字没有被转义!

阅读更多

pug模板引擎(上)

安装

sudo npm install pug

但命令行提示 pug 命令未找到,接下来安装 pug-cli,注意一定要全局安装,否则无法正常编译。

sudo npm install pug-cli -g

查看版本

>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

生成HTML

新建文件命名为index.pug

html
    head
        title dp2px
    body

在命令行输入

>>> $ pug index.pug 
rendered index.html

你会发现在同目录生成了一个 index.html 文件,内容如下

<html><head><title>dp2px</title></head><body></body></html>

接下来我们使用pug -w实现自动编译。

>>> $ pug index.pug -w

我使用的 VS Code,你可以让你的编辑器左右两边显示,方便实时查看。

pug

阅读更多