为博客添加 Bangumi 页面

文章封面图像

另辟蹊径

最近参观别人的博客，发现有些博客有 Bangumi 的页面，可以显示个人的动画、漫画的进度，很有趣，于是我也想为我的博客添加一个类似的页面。

很可惜的是，这些插件都是 Node.js 生态下的产物，更精确地说，我所见的插件都是基于 Hexo 的。对于 Hugo 这样的非 Node.js 站点生成器，想要直接使用这类插件，应该是不可能的。

我灵机一动，想到了 Serverless Functions。各种云服务商的 Serverless Functions 都提供了 Node.js 环境，以运行函数，既然 Hugo 站点不能使用 Node.js，我们就借用云端的运行环境。

最开始，我打算使用大模型辅助我完成插件的开发，幸亏我提前搜索了有没有类似的项目，要不然就白白浪费了时间。事实证明，我并不是第一个想出这种玩法的人，前人的智慧更胜于我。最后我采用的是 bilibili-bangumi-component¹，类似的项目还有 BangumiTV²。

理论上，其他非 Node.js 生态的静态站点生成器也可以采用这个方案，例如 Zola 和 Pelican。使用 Node.js 的站点同样可以使用，但是并无必要。

快速实战

bilibili-bangumi-component 给出的后端部署教程极其详细，按步骤操作即可。

前端的设置上，我们需要到 layouts/shortcodes 路径下创建一个供 Hugo 使用的 shortcodes。使用 CDN 引入，并在 HTML 中使用组件，就能完成最基础的使用。

<bilibili-bangumi
    api="https://xeonzilla.top/api/bangumi"
    bilibili-enabled="false"
></bilibili-bangumi>

<style>
    bilibili-bangumi {
        --bbc-text-base-color: rgb(51, 65, 85);
        --bbc-label-color: rgb(96, 165, 250);
        --bbc-primary-color: rgb(96, 165, 250);
    }

    bilibili-bangumi[dark] {
        --bbc-text-base-color: rgb(203, 213, 225);
        --bbc-label-color: rgb(37, 99, 235);
        --bbc-primary-color: rgb(37, 99, 235);
    }
</style>

<script
    type="module"
    src="https://fastly.jsdelivr.net/npm/bilibili-bangumi-component@latest/dist/bilibili-bangumi-component/bilibili-bangumi-component.esm.js"
></script>

<script>
    const bangumi = document.querySelector("bilibili-bangumi");

    function applyBangumiTheme() {
        const isDark = document.documentElement.classList.contains("dark");
        if (isDark) {
            bangumi.setAttribute("dark", "");
        } else {
            bangumi.removeAttribute("dark");
        }
    }

    applyBangumiTheme();

    const observer = new MutationObserver(applyBangumiTheme);
    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
    });
</script>

我创建的组件中，除了基础调用，还调整了主题色以适配 Blowfish、适配了 Blowfish 的黑暗模式逻辑，各位可以根据需求修改。

创建 shortcodes 后，我们就可以在需要的页面中通过调用 shortcodes 的方法调用组件。

实际上，完全可以为此创建一个全新的模板，但是这对 Go template 熟悉程度的要求较高，并不适合我这样的初阶用户。使用 shortcodes 快速创建并插入现有模板，实现难度就要低上许多。

bilibili-bangumi-component 的不足之处，就是可定制之处不多，可能这就是 WebComponent 的特性。同时，作者的代码也看得我一头雾水，大概率是经过混淆，所有的变量与函数都难以辨认，直接修改源代码这条路也行不通了。

至少它在完成本职工作的方面完成得出色，基本的功能都实现了，甚至还有按页码跳转，算是勉强让我满意。

生态的力量

在完成了本次添加 Bangumi 页面的工作后，我深刻感受到了 Node.js 生态的力量，不仅有大量的 npm 包，还有繁荣的社区。相比之下，非 Node.js 的站点生成器们只能完成最基本的站点生成功能，确实可以称作生态贫瘠了。如果追求极简化，那么 Hugo 与 Zola 之流就很合适；但是对于我这样的“玩家”，与 Node.js 的臃肿一体两面的丰富生态，或许是更适合的去处。

正值博客动工的一周年之际，我打算为站点进行一次彻底、完全的重构，从生成器、到主题、再到托管方式。在这次的迁徙中，我就可以慢慢接触 Node.js，让它向我展示无与伦比的可玩性与可扩展性。

为博客添加 Bangumi 页面

另辟蹊径

快速实战

生态的力量

脚注

评论