指南 - 博客 - HB 博客主题模板

A simple tutorial that offers samples and code snippets show how to create rich content.

安装

Please note that this theme requires the newest extended Hugo version.

Please check out the installation section.

新增内容

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

Mermaid

1```mermaid
2DIAGRAM
3```

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

短代码

除了 Hugo 内置的短代码外，HB 集成了 Bootstrap 模块，其提供了一些使用的短代码。