如何让hugo支持infographic

LuYanFCP

2026/01/06

前言

infographic 是蚂蚁Antv的新组建，其目标是为AI提供更易用的可视化工具，定位类似于mermaid。其提供了开发者/AI易用的DSL，通过快捷的编写DSL就可以很快的快速可视化，各种图表例如折线图/饼图之类的，同时也可以可视化一些类似于PPT需要使用到的grid图/swot图之类的工具，非常的易用。因此我希望可以引入我的hugo博客，并且可以通过markdown code block快速的通过infographic 可视化我的想法。

怎么做?

Hugo提供了embedded code block render hook. 可以通过模版对特定的language的 code block进行渲染，Hugo中的Mermaid等图都可以使用这种方法。

step1: 增加js import

在全局header中增加对infographic的包的引用，可以在 layouts/partials/foot_custom.html 增加对AntV Infographic的引用

<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>

step2: 增加自定义渲染block的hook

  1. 增加layouts/_default/_markup/render-codeblock-infographic.html
  2. 通过模版和js脚本对整体html进行渲染和注入
<div id="infographic-{{ .Ordinal }}" class="infographic-container" style="min-height: 500px; width: 100%;"></div>
<script>
(function() {
  const container = document.getElementById('infographic-{{ .Ordinal }}');
  const syntax = `{{ .Inner | safeJS }}`;
  
  function renderInfographic() {
    if (window.AntVInfographic) {
      const { Infographic } = window.AntVInfographic;
      const infographic = new Infographic({
        container: container,
        width: '100%',
        height: '500px',
      });
      infographic.render(syntax);
    } else {
      // Retry if library not loaded yet
      setTimeout(renderInfographic, 100);
    }
  }
  
  if (document.readyState === 'complete') {
    renderInfographic();
  } else {
    window.addEventListener('load', renderInfographic);
  }
})();
</script>
{{ .Page.Store.Set "hasInfographic" true }}

效果

example1: 基础图

example2: 架构图

查看原始Issue