Hugo增加远程服务器绘图模式支持

techzealot

2023-05-10

hugo

Hugo增加远程服务器绘图模式支持

实现思路1(推荐)：

获取代码块内容，处理为服务器支持的格式组装到新创建的image的src属性，然后隐藏代码块

实现思路2：

使用自定义shortcodes功能

缺点：该功能需要在markdown中编写特定于hugo的语法，不利于兼容及查看

增加plantuml支持

<!-- plantuml -->
{{ if or .Page.Params.plantuml .Site.Params.plantuml }}
<script src="https://cdn.jsdelivr.net/gh/jmnote/plantuml-encoder@1.2.4/dist/plantuml-encoder.min.js"></script>
<script>
    (function () {
        let plantumlPrefix = "language-plantuml";
        Array.prototype.forEach.call(document.querySelectorAll("[class^=" + plantumlPrefix + "]"), function (code) {
            let image = document.createElement("IMG");
            image.loading = 'lazy'; // Lazy loading
            image.src = 'http://www.plantuml.com/plantuml/svg/~1' + plantumlEncoder.encode(code.innerText);
            code.parentNode.insertBefore(image, code);
            code.style.display = 'none';
        });
    })();
</script>
{{ end }}

示例效果：

@startmindmap
* Debian
** Ubuntu
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** LMDE
** SolydXK
** SteamOS
** Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
@endmindmap

增加gravizo支持

<!-- https://www.gravizo.com/ -->
{{ if and .IsPage (eq (.Param "gravizo") true) }}
<script>
    // Replace gravizo pre.code to div
    Array.from(document.getElementsByClassName("language-gravizo")).forEach(
        (code) => {
            let image = document.createElement("IMG");
            image.loading = 'lazy'; // Lazy loading
            image.src = 'https://g.gravizo.com/svg?' + code.innerText;
            code.parentNode.insertBefore(image, code);
            code.style.display = 'none';
        }
    );
</script>

示例效果：

digraph G {
    size ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf}
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
}

使用shortcode实现gravizo支持

创建layouts/shortcodes/gravizo.html

{{ $title := "Diagram" }}
{{ if .IsNamedParams }}
  {{ with .Get "title" }}
    {{ $title = . }}
  {{ end }}
{{ else }}
  {{ with .Get 0 }}
    {{ $title = . }}
  {{ end }}
{{ end }}

<figure>
  <img
    src='https://g.gravizo.com/svg?{{ .Inner }}'
    alt='{{ $title  }}'
    />
    <figcaption>{{ $title  }}</figcaption>
</figure>

使用：

小技巧：

可通过注释shortcodes(</* xxx */>,</* / xxx */>)可实现在代码块中不渲染shortcodes同时也不会显示注释，从而方便查看原始代码

{{< gravizo "DOT Language (GraphViz) Example" >}}
digraph G {
    aize ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf}
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
  }
{{< /gravizo >}}

示例效果: