把 Typed、Live2d、Mermaid、p5、Pixi 等等好玩的都集成到 Hugo 中吧！

前言

Hugo 是一个静态的网站生成器，但是它在内容的灵活性上有很大的发挥空间。本文将向你展示 Hugo 的网站（本博客）如何显示更为复杂的内容。

Typed.js

Live2D

Live2D 可以让 2D 插图动画化，让平面人物如同 3D 效果般流畅自然的活动。它起初被用于游戏，后来在 VTuber 领域得到了大规模应用和发展。将 Live2D 集成到博客的实际作用不大，但能增加趣味和互动性。

很多人将可爱的 Live2D 模型添加到自己的网站角落，让模型人物跟着鼠标位置互动。就像下面这样：

本博客的 Live2D 使用 pixi-live2d-display 项目实现。同时本博客提供对原生 Pixi 的集成。

Mermaid

Mermaid 是一个将文本语法渲染为可视化图解的库，它可以轻易的集成到 Hugo 中。

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

上面是一个稍复杂的类图。图形由 SVG 呈现，以文本的形式定义。这是此 Mermaid 图形的语法内容：

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

p5.js

p5 是一个易于使用的绘图和动画库。它可以绘制 2D/3D 图形，并让图形运动和交互。如果在代码块中包含一个 p5 的 sketch 对象，就可以直接在文章中呈现出来，那岂不是很好？

这里我使用 p5 生成了一个魔方。它的核心代码是这样的：

const sketch = (p) => {
  p.setup = () => {
    p.createCanvas(width, height, p.WEBGL);
  };

  p.draw = () => {
    p.background(255);
    p.rotateX(p.millis() / 1000);
    p.rotateY(p.millis() / 1000);
    for (let x = -1; x <= 1; ++x) {
      for (let y = -1; y <= 1; ++y) {
        for (let z = -1; z <= 1; ++z) {
          p.push();
          p.translate(
            x * (cubeSize + cubePadding),
            y * (cubeSize + cubePadding),
            z * (cubeSize + cubePadding),
          );
          p.box(cubeSize);
          p.pop();
        }
      }
    }
  };
};

如果你对交互有兴趣，可以参考这个例子。

PixiJS

Pixi 是一个 2D 渲染引擎，它非常快，可以用来制作高性能的前端游戏。

如上我创建了一个鱼塘，包含一张静态背景和多条游动的鱼以及不断移动的水面。这些鱼可以在穿出屏幕边界后从另一侧继续无缝游出。并且有模拟水面对物体的扭曲效果。详见这里。

二维码

二维码是一种很好的传播方法，集成 EasyQRCodeJS 可以轻易的在 Hugo 博客中生成二维码。例如：

更多例子

在《幻兽帕鲁词条继承，最短配种路径查询》的文章页面中，我甚至实现了一个动态查询的功能。就像传统的前后端网站那样，调用 API 查询数据。

结束语

Hugo 比一般人想象的要强大很多，发挥想象力它可以做到更多的事情。