💡
原文中文，约3100字，阅读约需8分钟。
📝
内容提要
Hugo 0.60+ 版本引入了渲染钩子功能，允许用户自定义 Markdown 中的图片、链接、标题和代码块等元素的 HTML 输出。用户可以通过创建模板文件覆盖默认渲染逻辑，实现个性化效果。文章介绍了五种渲染钩子的使用方法及示例，提升内容展示的灵活性和维护效率。
🎯
关键要点
- Hugo 0.60+ 版本引入渲染钩子功能，允许用户自定义 Markdown 中的图片、链接、标题和代码块等元素的 HTML 输出。
- 用户可以通过创建模板文件覆盖默认渲染逻辑，实现个性化效果。
- 渲染钩子包括 render-image.html、render-link.html、render-heading.html、render-codeblock.html 和 render-table.html 五种类型。
- 每种渲染钩子都有示例，展示如何自定义输出，例如为图片添加懒加载、为链接添加安全属性、为标题添加编号和图标等。
- 用户需在项目目录下创建相应的模板文件，并重新构建网站以启用自定义渲染。
❓
延伸问答
Hugo 渲染钩子是什么？
Hugo 渲染钩子是一套模板文件，允许用户自定义 Markdown 中图片、链接、标题和代码块等元素的 HTML 输出。
如何在 Hugo 中启用渲染钩子？
在 Hugo 项目目录下创建文件夹 layouts/_default/_markup/，并放入相应的 render-*.html 模板，然后重新构建网站。
Hugo 支持哪些类型的渲染钩子？
Hugo 支持 render-image.html、render-link.html、render-heading.html、render-codeblock.html 和 render-table.html 五种类型的渲染钩子。
如何自定义 Markdown 中的图片渲染？
可以在 layouts/_default/_markup/render-image.html 中编写自定义 HTML 代码，例如为图片添加懒加载和 CSS 类。
使用渲染钩子有什么好处？
使用渲染钩子可以提升内容展示的灵活性和维护效率，快速打造个性化的内容页面。
如何为链接添加安全属性？
在 layouts/_default/_markup/render-link.html 中，可以判断链接是否为外链，并为外链添加 target="_blank" 和 rel="noopener noreferrer" 属性。
➡️
