最近抽空学习了一下前端的基础知识,在之前我也抽空看了相关知识,但是发现没有实践而且不够系统,所以索性这次借着hexo博客搭建来巩固和实践一下所学。
准备
虽然我们是开发hexo的博客主题,但是为了方便我们开发中调试和预览,所以我们还是首先得安装hexo到我们本地目录。
|
|
注意,上面的“搭建hexo主题”是我本地的一个目录。
然后发布,http://localhost:4000 查看
|
|
以下是关于模板逻辑的语法。
用 -
开始一段不直接进行输出的代码。
|
|
生成后
|
|
用=开始一段带有输出的代码,它应该是可以被求值的一个 JavaScript 表达式。为安全起见,它将被 HTML 转义。
|
|
生成后
|
|
用 !=
开始一段不转义的,带有输出的代码。这将不会做任何转义,所以用于执行用户的输入将会不安全。
|
|
生成后
|
|
|
|
但命令行提示 pug 命令未找到,接下来安装 pug-cli,注意一定要全局安装,否则无法正常编译。
|
|
查看版本
|
|
新建文件命名为index.pug
|
|
在命令行输入
|
|
你会发现在同目录生成了一个 index.html 文件,内容如下
|
|
接下来我们使用pug -w实现自动编译。
|
|
我使用的 VS Code,你可以让你的编辑器左右两边显示,方便实时查看。