Heading link example

Posted 2023-02-21 胡争辉

Heading link example

文章目录

• Heading link example
• • 简介
  • 相关文件
  • 内容
  • • `/content/posts/render/heading/example.md`
  • 模板
  • • `/layouts/render-heading-example/_markup/render-heading.html`

简介

本例为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 >