把 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 比一般人想象的要强大很多,发挥想象力它可以做到更多的事情。
订阅频道第一时间掌握作者博客的最新动态,获取更多的分享。