关于博客（3）

鸽子 aka. Kar1n Lv1
  2024-03-09 08:36:42 2024-03-09 08:36:42 Created   2025-01-18 08:49:10 2025-01-18 08:49:10 Updated  

细微配置

如果不出意外的话，这一篇文章将会是很长的，也会是这个系列的最后一篇。这个关于了我整个hexo页面究竟是怎么给我鼓捣出来的，主要点事关于左下角那个live2d，不过大概率你们看不见，cdn污染这件事情造成的麻烦倒是挺多的。
那么，我们先聊关于hexo的theme的事情。

关于主题

讲道理，这玩意儿本不应该由我来讲，但这个bug倒是挺奇怪的。我使用redefine主题，用npm安装。这件事情直到我把所有文件传到github上面，vercel部署后一直不出现主题才知道。
在本地使用hexo cl && hexo g && hexo s 的时候，网页正常，而我push上去后，变成了默认主题，就挺奇怪的。
然后，在bing上面搜索结论无果，抱着试试看的想法把位于node_modules里面的hexo-theme-redefine剪切进themes，重命名为redefine，然后push进github，结果，成了。
暂时不知道这个问题的来源，不过瞎猜是hexo和npm的bug或者vercel的hexo版本过于老旧导致的（？
反正这个问题是解决了。

关于live2d-widget

这个东西是hexo-helper-live2d的作者推荐的，我也只是个使用者。我首先是用的hexo-helper-live2d，然后把我自己搞到的model放进了处于根目录（自己创建）的live2d_models文件夹里面去。记得把model.json改成 角色名.model.json，角色名也就是你放进live2d_models的那个文件夹的名字。
hexo-helper-live2d的作者对这个方式有更为详细的描述。
但是，我们如果自己放模型的话，会有很多功能难以实现，所以并不推荐。
那么，我们来讲讲关于live2d-widget的玩意儿。
这个东西相比较hexo-helper-live2d更为复杂，它请求的是live2d_api。
网址贴在下面：
https://github.com/stevenjoezhang/live2d-widget
https://github.com/fghrsh/live2d_api
实际上这个方式大部分都可以自己搞。
先说model来源吧。
感谢Eikanya提供的模型，记得去点个星。
https://github.com/Eikanya/Live2d-model
去下载整个git源码，大约10个g，都在里面。因为live2d-widget只能使用moc版本而非moc3版本的模型，记得挑一挑。
接下来才是重头戏。
直接下载live2d-widget的全部源码，然后放进你的hexo的源目录的source文件夹里面。之所以下载全部源码的理由是能够自定义。
现在，hexo运行的时候，将会在网页直属的public文件夹下直接创建live2d-widget的文件夹（如果在source内装有live2d-widget的内容物的文件夹名字为live2d-widget的话）因此，我们进入你的主题配置文件的yml文件，将inject中带有管理live2d-widget的行：

1
2
3
4
5
6
7
8
...
    inject:
        head:
            ...
            - <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
            ...
        footer:
            ...

修改为：

1
2
3
4
5
6
7
8
9
10
11
...
    inject:
        head:
            ...
            - <script src="/live2d-widget/autoload.js"></script>
            ...
        footer:
            ...
        ...
    ...
...

请不能理解的去复习网页知识。我现在默认你已经装上了live2d-widget的线上版本，而这一步的目的是让你使用本地版本，易于更改配置。我们同时也需要修改本地的autoload.js脚本，需要修改的地方为第二行的live2d_path，修改为你自己的本地路径。例如/live2d-widget/，需要带上斜杠，否则脚本会出错。
接下来是关于live2d_api的问题。
fork我上面提到的live2d_api仓库，在本地对model部分和model_list.json进行修改。按照他在readme.md中写的方式对模型进行添加等一系列操作。
当你放完模型后，你不仅需要把每个model.json改成index.json，还需要将layout添加进每一个model.json内部。这是为了修改模型的大小。例如： 

1
2
3
4
5
6
7
8
9
10
11
{
    ...
    "layout":{
        "center_x": 0,
        "center_y": -0.16,
        "width": 1,
        "height": 2
        },
    ...`
}

修改或者添加这个设置，就能让你的live2d小人的模型正常一些。例如不会缺失半个头。
接下来，将改动push到你的github仓库后，进入release进行发布。请放心，这个release啥事没有。这是为了能够使用cdn的api，让你的网页能够直接使用你刚刚完成的这个新的api。
当release成功，你的api将会在这个页面上：https://cdn.jsdelivr.net/gh/你的github账户/live2d_api@latest/
将这个cdn放入autoload.js的initWidget函数中的cdnPath，用来启用你写好的api和模型。同时，如果你希望的话，修改一下waifu-tips.json文件。
现在，将你的整个博客的修改push到github上，大功告成！

  • Title: 关于博客（3）
  • Author: 鸽子 aka. Kar1n
  • Created at : 2024-03-09 08:36:42
  • Updated at : 2025-01-18 08:49:10
  • Link: https://cole-anderson.top/posts/75c110a1.html
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
关于博客（3）