How to make Hugo support infographic
Introduction
infographic is a new component from Ant Group’s AntV team. Its goal is to provide easier-to-use visualization tools for AI, positioned similarly to mermaid. It offers a DSL that is easy for developers and AI to use: by quickly writing DSL, you can rapidly visualize all kinds of charts, such as line charts and pie charts, and you can also visualize tools like grid diagrams and SWOT diagrams that are typically needed in PPTs. It is very easy to use. So I wanted to bring it into my Hugo blog, and be able to quickly visualize my ideas through infographic in a markdown code block.
How do we do it?
Hugo provides an embedded code block render hook. You can use a template to render code blocks for a specific language. Diagrams like Mermaid in Hugo can all be handled this way.
step1: Add the JS import
Add a reference to the infographic package in the global header. You can add a reference to AntV Infographic in layouts/partials/foot_custom.html
1<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
step2: Add a hook to render custom blocks
- Add
layouts/_default/_markup/render-codeblock-infographic.html - Render and inject into the overall HTML via templates and JS scripts
1<div id="infographic-{{ .Ordinal }}" class="infographic-container" style="min-height: 500px; width: 100%;"></div>
2<script>
3(function() {
4 const container = document.getElementById('infographic-{{ .Ordinal }}');
5 const syntax = `{{ .Inner | safeJS }}`;
6
7 function renderInfographic() {
8 if (window.AntVInfographic) {
9 const { Infographic } = window.AntVInfographic;
10 const infographic = new Infographic({
11 container: container,
12 width: '100%',
13 height: '500px',
14 });
15 infographic.render(syntax);
16 } else {
17 // Retry if library not loaded yet
18 setTimeout(renderInfographic, 100);
19 }
20 }
21
22 if (document.readyState === 'complete') {
23 renderInfographic();
24 } else {
25 window.addEventListener('load', renderInfographic);
26 }
27})();
28</script>
29{{ .Page.Store.Set "hasInfographic" true }}
Result
example1: basic diagram
example2: architecture diagram