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

发表于 更新于

前言

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

我并没有在 Markdown 中直接插入 HTML 去实现这些,而是将它们封装成了 Markup 的 hooks、shortcodes 和 partials。当前本文没有更新教程内容,后续有空会补充这一部分。

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 比一般人想象的要强大很多,发挥想象力它可以做到更多的事情。

作者头像 一点点入门知识 打赏作者
本文由作者按照 CC BY 4.0 进行授权
分享:

相关文章