Heading link example

Heading link example

目录

简介

本例为Hugo自定义Heading模板，仓库在

https://github.com/huzhenghui/Hugo-Bootstrap-Templates

效果参见

https://huzhenghui.github.io/Hugo-Bootstrap-Templates/posts/render/heading/example/

本文发表在

https://blog.csdn.net/hu_zhenghui/article/details/128727127

相关文件 

./
├── content/
│   └── posts/
│       └── render/
│           └── heading/
│               └── example.md
└── layouts/
    └── render-heading-example/
        └── _markup/
            └── render-heading.html

内容

/content/posts/render/heading/example.md

本文件，位置在https://github.com/huzhenghui/Hugo-Bootstrap-Templates/blob/master/content/posts/render/heading/example.md

Since v0.3

https://github.com/huzhenghui/Hugo-Bootstrap-Templates/blob/v0.3/content/posts/render/heading/example.md

在front matter中设置type属性

---
title: Heading link example
date: 2023-01-18
publishdate: 2023-01-18
type: render-heading-example
---

type属性值为render-heading-example，表示优先使用/layouts/render-heading-example/中的模板，因此渲染时，在渲染Markdown的标题时，将使用 /layouts/render-heading-example/_markup/render-heading.html

效果为

<h1 id="heading-link-example">
    Heading link example
    <a href="#heading-link-example">¶</a>
</h1>

模板

/layouts/render-heading-example/_markup/render-heading.html

自定义Heading链接模板，位置在https://github.com/huzhenghui/Hugo-Bootstrap-Templates/blob/master/layouts/render-heading-example/_markup/render-heading.html

Since v0.3

https://github.com/huzhenghui/Hugo-Bootstrap-Templates/blob/v0.3/layouts/render-heading-example/_markup/render-heading.html

<h{{ .Level }} id="{{ .Anchor | safeURL }}">
    {{ .Text | safeHTML }}
    <a href="#{{ .Anchor | safeURL }}">¶</a>
</h{{ .Level }}>