insights/content/blog/tutorial/index.zh-hans.md

title	date	draft	description	noindex	pinned	nav_weight	series	categories	tags	images	authors
指南	2023-03-31T11:47:31+08:00	false		false	true	1000	Tutorial	Content	Shortcode Code Block KaTex Mermaid Math Diagram		razonyang hugomods

本教程提供简单的示例和代码段，以展示如何创建富文本，更多用法请查阅文档。

安装

请注意本主题需要安装 Go 和最新的扩展版 Hugo。

详情请阅读安装一文。

新增内容

hugo new blog/new-post/index.md

新创建的内容处于草稿状态，发布时需要移除 draft参数或者将其设为 false。

{{< bootstrap/alert >}} {{% markdownify %}} 请指定 --buildDrafts (-D) 标识以预览草稿，如 hugo server --gc -D --disableFastRender。

npm run dev 默认会构建草稿内容。 {{% /markdownify %}} {{< /bootstrap/alert >}}

代码块

```[lang]
CODE
```

{{% bootstrap/collapse "[lang]" %}} 请将 [lang] 替换为对应的语言标识，如 js、php、go、html 等。 {{% /bootstrap/collapse %}}

console.log('Hello world!')

代码高亮样式

HB 提供了数十个代码高亮样式，详情请参阅代码高亮样式模块。

导入对应的样式模块，并重启 Hugo 服务器以完整地载入模块的资源。

{{< bootstrap/config-toggle hugo >}} module: imports: - path: github.com/hbstack/syntax-highlighting/styles/github-dark {{< /bootstrap/config-toggle >}}

KaTex

```katex
MATH
```

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

Read more on KaTex Usage.

Mermaid

```mermaid
DIAGRAM
```

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

Read more on Mermaid Usage.

短代码

详情请参阅短代码。

部署

领请参阅部署以部署你的站点。