当前分类 / 主题开发 / 总共3篇

Hexo主题开发手记(1)

最近抽空学习了一下前端的基础知识,在之前我也抽空看了相关知识,但是发现没有实践而且不够系统,所以索性这次借着hexo博客搭建来巩固和实践一下所学。

准备

虽然我们是开发hexo的博客主题,但是为了方便我们开发中调试和预览,所以我们还是首先得安装hexo到我们本地目录。

hexo init 搭建hexo主题

注意,上面的“搭建hexo主题”是我本地的一个目录。

然后发布,http://localhost:4000 查看

cd 搭建hexo主题
hexo server

hexo主题

阅读更多

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

阅读更多