首篇文章：站点建立过程

文章发布时间:

最后更新时间:

文章总字数:
1.7k

预计阅读时间:
6 分钟

摘要

本文记叙了站点从开始建立、配置首页Live2D插件/脚本、在本地搭建Live2D Api遇到的问题和过程。
本文约1.7K字，阅读时长约 5 分钟

站点建立：顺利的前半程

站点的博客部分采用hexo。通过hexo搭建博客已经有较为成熟的教程
安装前置，再安装本体，最后选择一个好看的主题装上去（我在这里选择的是hexo-theme-melody）
简单而方便的配置使得从我在搜索引擎敲下第一个问题“Hexo 搭建”到我能够开始写下这篇文档的前半部分只花了几十分钟——大部分时间还都在下载文件上。

一切都非常的顺利，直到我在好奇中看到了melody主题配置的额外选项Live2D Model

弄个Live2D：探索的后半程

看到Live2D模块的效果图，我也想打算整一个
根据教程的指导，需要输入指令

1
npm install --save hexo-helper-live2d

问题从这里就开始了，下载完成之后报了错

错误大概长这个样子：

1
2
3
4
5
6
XX vulnerabilities (XX moderate, X high, X critical) 
To address all issues (including breaking changes), run: 

npm audit fix --force 

Run `npm audit` for details.

这里的意思是说npm安装时发现了很多漏洞，这里会显示出现问题的数量和等级。
通过搜索引擎的查找，解决方案是npm audit fix→npm audit fix --force等指令。
在执行的指令的时候，系统会给出各个问题的详情和修复。有的问题通过npm audit fix就可以修复，有的问题需要npm audit fix --force能进行修复，而还有很多问题根本没有给出修复。

在项目的Github页面上显示它已经不再维护，可以用另一个相似的项目Live2D Widget
不再维护

所以，安装进行到这里我选择换用Live2D Widget
在Live2D Widget的页面说明中，应当把

1
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

加入到页面的<head>或者<body>中，如果使用的是 Hexo，那么需要在主题的模版文件中添加以上代码。

那么下一步是寻找主题的模板文件：melody主题的特性页面有提到使用了pug模板引擎。再对pug进行搜索，可以看到在主题的layout文件夹下有很多pug，根据文件名和文件夹名推测这里便是存储模板文件的地方。

这里服务器是Windows Server 2022，选择这个系统另有原因

pug

考虑到我的目的是在主页添加Live2D，现在应当对index.pug进行编辑。
index.pug的内容打开如下：

1
2
3
4
5
extends includes/layout.pug

block content
  include includes/recent-posts.pug
  include includes/pagination.pug

截止到这里，我目前对于pug的语法还是一无所知。好在我需要进行的不是什么复杂操作，可以通过分析别的文件来推测如何操作。我的目标操作是添加一个<script>进去，所以在这里使用VS Code的多文件查找功能查找script关键词。
在多个文件中我看到了这样的写法：

1
script(src=...)

将src补充完整可得

1
script(src="http://localhost:4000/live2d-widget-master/autoload.js")

最后将语句放入index.pug，重新生成并部署。

成功了，但只成功了一半

页面刷新完成之后，左下角成功出现了对话框、功能按钮等等组件。可唯独图片没有显示，空无一物。
再继续对新的问题进行搜索，这次在issue和下方回复中的另一个帖子中找到了问题所在

然鹅，之前展示的好好的萌娘这次几乎全挂，又或者加载很慢，究其原因还是因为jsdeliver提供的cdn服务在中国被软墙，将后端api由jsdeliver更换为fghrsh提供的后端之后有所改善，但由于前端代码也挂载在jsdeliver，因此依然可能出现无法稳定加载的问题。
最后还是将所有资源挂载到了本地才解决这一问题。

原文:live2d部署实践

帖子的作者提供了自建的api，但考虑到为了让自己站点的Live2的访问更稳定，最终还是选择试着将模型文件存储在本地。

在插件的Github页面有提到过live2d_api相关的内容,将这个后端api下载到本地发现是一堆的php文件。
对于php我依旧是知之甚少，所以对于这个东西的运行只能继续求助于搜索引擎。
搜索引擎的很多回答都提到了构建一个Apache+PHP+MySQL环境的教程。考虑到这个api用不到MySQL，先安装Apache和PHP环境。
下载并解压二者，随后开始配置。
Apache需要先指定目录：

1
Define SRVROOT "C:/Users/ztcly/Apache24"

Apache需要php模块：

这里如果加载的是php7的话，应当写LoadModule php7_module "..."

1
2
3
LoadModule php_module "C:/Users/ztcly/php-8.2.1-Win32-vs16-x64/php8apache2_4.dll" 
PHPIniDir "C:/Users/ztcly/php-8.2.1-Win32-vs16-x64"
AddType application/x-httpd-php .php .html .htm

按照教程，php文件应该放在/htdocs目录下：

1
DocumentRoot "${SRVROOT}/htdocs"

创建完成之后启动Apache，待服务正常启动。
之后根据api教程中的说明更改Autoload.js中的apiPath字段，将其更改成Apache的地址和端口号，最后刷新页面。

老问题

刷新页面之后，模型的位置依旧是空白。但是这次在浏览器控制台的报错就是我所认识的了,它大概长这个样子:

1
Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

这是十分明显的跨域问题，请求被CORS策略所阻止了。
修改Apache/htdocs的CORS策略(xxxx为来源)：

1
2
3
4
5
6
7
8
9
DocumentRoot "${SRVROOT}/htdocs"
<Directory "${SRVROOT}/htdocs">
    ExecCGI MultiViews
    Options Indexes FollowSymLinks
    AllowOverride None
    Header set Access-Control-Allow-Origin xxxx
    Require all granted
    Allow from xxxx
</Directory>

继续重启服务，重新生成，再部署——还是不能用
检查控制台报错：Uncaught SyntaxError: Unexpected token '<'

等会，它给我传了点什么过来？
问题就出在上面那段配置中——Options Indexes FollowSymLinks
这里Indexes的作用就是当该目录下没有指定 index.html 文件时，就显示目录结构。也就是它传过来的东西是htdocs下的目录结构，以HTML形式。报错中提到的’<’就是<!DOCTYPE html>左边的”<”

删除掉Indexes，并且为这个api指定一个用不上的首页：

1
2
3
<?php
phpinfo();
?>

最后重启，终于成功了，芜湖

成功了

≡