From 81619e58e9c9de08891d0c449b4ef7bce829dbbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=91=E5=B0=8F=E9=B8=A6?=
 <61354956+crowya@users.noreply.github.com>
Date: Tue, 23 May 2023 23:11:58 +0800
Subject: [PATCH] Update README.md

---
 README.md | 117 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 65 insertions(+), 52 deletions(-)

diff --git a/README.md b/README.md
index 024b6ad..c22f298 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # Live2D with Music Player
 ![cut_20230523214257](https://github.com/crowya/live2d/assets/61354956/e9fb2dfe-d6ff-4c49-861d-64cf841890d8)
 
+效果演示：[Live2D 宠物功能修改 | 音乐播放器+右键秘密通道](https://crowya.com/1088)  
+
 Hi，这是鸦鸦自用的宠物播放器。  
 此版本极大地简化了代码逻辑，主要特点是：
 1. 不再需要 API
@@ -8,57 +10,10 @@ Hi，这是鸦鸦自用的宠物播放器。
 3. 不再需要修改任何 JS（所有配置参数已挪到页尾脚本）
 
 现在，使用者可以专心定制说话内容和模型皮肤，而不再需要理解复杂的代码。
-## 快速复现指南
-1. 下载整个 live2d 文件夹，通过宝塔面板上传到 `/www/wwwroot/wordpress/wp-content/uploads/`。
-2. 页尾脚本一共需要添加这些东西：（链接换成自己的）
-```
-<!--宠物播放器-->
-<script>const live2d_path = "https://crowya.com/wp-content/uploads/live2d/";</script>
-<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
-<script>
-//封装异步加载资源的方法
-function loadExternalResource(url, type) {
-	return new Promise((resolve, reject) => {
-		let tag;
-		if (type === "css") {
-			tag = document.createElement("link");
-			tag.rel = "stylesheet";
-			tag.href = url;
-		}
-		else if (type === "js") {
-			tag = document.createElement("script");
-			tag.src = url;
-		}
-		if (tag) {
-			tag.onload = () => resolve(url);
-			tag.onerror = () => reject(url);
-			document.head.appendChild(tag);
-		}
-	});
-}
 
-if (screen.width >= 768) {
-	Promise.all([
-		loadExternalResource(live2d_path + "waifu.css", "css"),
-		loadExternalResource(live2d_path + "live2d.min.js", "js"),
-		loadExternalResource(live2d_path + "waifu-tips.js", "js"),
-		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
-		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
-	]).then(() => {
-		loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
-	});
-	ap = null;
-	Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
-		set: function(aplayer) {
-        		ap = aplayer;
-        		ap_init();
-        		initWidget();
-		}
-	});
-}
-</script>
-```
-或者，用GitHub+CDN的方式直接引用，此时页尾脚本一共需要添加这些东西：
+## 快速复现指南
+### 方式一：直接引用CDN（或者复刻到自己的仓库再通过jsdelivr引用）
+此时页尾脚本一共需要添加这些东西：
 ```
 <!--宠物播放器-->
 <script>const live2d_path = "https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/";</script>
@@ -107,7 +62,62 @@ if (screen.width >= 768) {
 </script>
 ```
 
-## 文件功能说明（深度定制指南）
+### 方式二：放到自己服务器上
+1. 下载整个 live2d 文件夹，通过宝塔面板上传到 `/www/wwwroot/wordpress/wp-content/uploads/`
+2. 页尾脚本一共需要添加这些东西：（`live2d_path`换成自己的链接）
+```
+<!--宠物播放器-->
+<script>const live2d_path = "https://crowya.com/wp-content/uploads/live2d/";</script>
+<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
+<script>
+//封装异步加载资源的方法
+function loadExternalResource(url, type) {
+	return new Promise((resolve, reject) => {
+		let tag;
+		if (type === "css") {
+			tag = document.createElement("link");
+			tag.rel = "stylesheet";
+			tag.href = url;
+		}
+		else if (type === "js") {
+			tag = document.createElement("script");
+			tag.src = url;
+		}
+		if (tag) {
+			tag.onload = () => resolve(url);
+			tag.onerror = () => reject(url);
+			document.head.appendChild(tag);
+		}
+	});
+}
+
+if (screen.width >= 768) {
+	Promise.all([
+		loadExternalResource(live2d_path + "waifu.css", "css"),
+		loadExternalResource(live2d_path + "live2d.min.js", "js"),
+		loadExternalResource(live2d_path + "waifu-tips.js", "js"),
+		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
+		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
+	]).then(() => {
+		loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
+	});
+	ap = null;
+	Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
+		set: function(aplayer) {
+        		ap = aplayer;
+        		ap_init();
+        		initWidget();
+		}
+	});
+}
+</script>
+```
+
+## 初步修改
+- 如需改为自己的歌单，请修改 `<meting-js>` 标签内的[参数](https://github.com/metowolf/MetingJS#option)。  
+- 如需修改秘密通道或对话文本，请自定义 waifu-tips.json。 
+
+## 文件功能说明（深度修改指南）
 - model——模型文件直接作为子文件夹放于其中（可以自定义）  
 - model_list.json——模型列表（可以自定义）  
 - waifu-tips.json——对话文本（可以自定义）  
@@ -115,4 +125,7 @@ if (screen.width >= 768) {
 - waifu-tips.js——按钮功能，一般不需要修改  
 - waifu.css——外观样式，一般不需要修改  
 
-详情参阅：[Live2D 宠物功能修改 | 音乐播放器+右键秘密通道](https://crowya.com/1088)  
+## 相关项目
+- [APlayer](https://github.com/DIYgod/APlayer)
+- [MetingJS](https://github.com/metowolf/MetingJS)
+- [Live2D Widget](https://github.com/stevenjoezhang/live2d-widget)