A simple tutorial that offers samples and code snippets show how to create rich content.
安装
Please check out the installation section.
安装依赖
1npm ci
或者全局安装。
1sudo npm i -g postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss
后者最适合多个 HB 站点，因为它需要执行一次。两个都成立，选一个你喜欢的。
启动 Hugo 服务器
1npm run dev
现在可以通过 http://localhost:1313 访问站点。
该模板预定义了一个 npm run prod 脚本，用于预览生产环境的站点，其可以通过 http://localhost:1314 进行访问。
新增内容
1hugo new blog/new-post/index.md
新创建的内容处于草稿状态，发布时需要移除 draft参数或者将其设为 false。
请指定 --buildDrafts (-D) 标识以预览草稿，如 hugo server --gc -D --disableFastRender。
npm run dev 默认会构建草稿内容。
代码块
1```[lang]
2CODE
3```
请将 [lang] 替换为对应的语言标识，如 js、php、go、html 等。
1console.log('Hello world!')
代码高亮样式
HB 提供了数十个代码高亮样式，详情请参阅代码高亮样式模块。
导入对应的样式模块，并重启 Hugo 服务器以完整地载入模块的资源。
hugo.toml
1[module]
2[[module.imports]]
3 path = 'github.com/hbstack/syntax-highlighting/styles/github-dark'
hugo.yaml
1module:
2 imports:
3 - path: github.com/hbstack/syntax-highlighting/styles/github-dark
hugo.json
1{
2 "module": {
3 "imports": [
4 {
5 "path": "github.com/hbstack/syntax-highlighting/styles/github-dark"
6 }
7 ]
8 }
9}
KaTex
1```katex
2MATH
3```
$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
Read more on KaTex Usage.
Mermaid
1```mermaid
2DIAGRAM
3```
graph TD; A-->B; A-->C; B-->D; C-->D;
Read more on Mermaid Usage.
短代码
除了 Hugo 内置的短代码外，HB 集成了 Bootstrap 模块，其提供了一些使用的短代码。