Merge pull request #9 from ChengCheng0v0/develop

v2.0.4 版本开发完毕

.prettierrc

@@ -0,0 +1 @@
+{ "printWidth": 480, "tabWidth": 4, "semi": true, "singleQuote": false, "quoteProps": "as-needed", "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "avoid", "proseWrap": "never", "vueIndentScriptAndStyle": true, "endOfLine": "lf", "embeddedLanguageFormatting": "off" }

README.md

@@ -1,15 +1,14 @@
 ## ACG Home
 
-一个二次元风格的个人主页！  
+一个二次元风格的个人主页！
 
 ## 预览
 
-[https://acg-home.pages.dev](https://acg-home.pages.dev)
-
-![_20241016_002741.png](https://s2.loli.net/2024/10/16/fvapGBQDeRkzTHh.png)
+![预览](https://s2.loli.net/2024/11/10/nHRUIDs6pjLfkBz.png)
 
 > [!TIP]  
-> 上面的预览链接中的内容会即时同步 `main` 分支的更改，但预览图就不一定会及时更新了哦。
+> 此预览使用 [Liora](https://github.com/ChengCheng0v0/Liora) 主题，它是 ACG-Home 的官方推荐主题。  
+> 强烈建议在安装完本项目后立刻配置一个主题样式，因为默认主题实在是不太好看~~
 
 ---
 
@@ -63,7 +62,7 @@
 
 其实非常简单，只需要一个 class 为 `markdown-content` 的任意元素就行了！例如：
 
-``` html
+```html
 <div class="markdown-content" src="./assets/markdown/content-page.md"></div>
 ```
 
@@ -83,4 +82,4 @@
 ## 参与贡献
 
 直接提 PR 就行啦！  
-\(真的会有人对这个小破项目感兴趣吗 Σ(っ °Д °;)っ  \)
+\(真的会有人对这个小破项目感兴趣吗 Σ(っ °Д °;)っ \)

assets/markdown/announcement.md

@@ -1,3 +1,4 @@
-╮(╯▽╰)╭ 没什么好说的欸
+### 这里是公告栏
+
+你可以通过编辑 `assets/markdown/announcement.md` 来修改它的内容！
 
-> 滚来滚去……~(～o￣▽￣)～o 。。。滚来滚去……o～(＿△＿o～) ~。。。

assets/markdown/content-page.md

@@ -1,49 +1,6 @@
-**你好，欢迎来到我的个人网站！ ヾ(≧▽≦\*)o**
+**你好，感谢使用 ACG-Home！ ヾ(≧▽≦\*)o**
 
-## 我最喜欢的音乐
-<iframe style="border-radius: 12px" src="https://open.spotify.com/embed/track/1yt4wO7dKCwsfjch8SN9aU?utm_source=generator" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-mfullscreen; picture-in-picture" loading="lazy"></iframe>
+这里是内容区域！你可以通过编辑 `assets/markdown/announcement.md` 来修改它的内容~
 
----
+初次使用，你可以先看看 `config.json`！
 
-## 自我介绍
-我是一名正在学习 **Java** 和 **Vue.js** 的学生，拥有前端开发经验，能够使用 **Vue** 框架（尽管在更简单的项目中，我通常更倾向于使用更轻量级的框架或原生技术）。  
-在后端方面，我有一定的 **Java** 基础，并且喜欢使用 **Spring** 框架开发 Web 应用程序。  
-我还会使用 **Node.js** 和 **Electron** 开发桌面应用程序。此前，我为一些小公司和个人开发过网站。
-
-除了编程，我最大的爱好是摆弄各种硬件（包括 **NAS** 和 **软路由** 的配置）。  
-我热爱自由软件，也是 **Linux** 的忠实粉丝，它是我的首选操作系统！我现在正在使用的发行版是 **Arch** 和 **Ubuntu**。
-
-听音乐也是我的一大爱好！我的口味比较杂，但主要以电音为主。我的听歌软件是 **Spotify**，我的听歌设备（耳机）是 **AKG K240S**。
-
-当然，和大多数人一样，我还喜欢玩游戏！我主要玩单机游戏，我的游戏平台是 **PC** 和 **Nintendo Switch** (吃灰ing...)。  
-**《塞尔达传说：旷野之息》** 和 **《荒野大镖客：救赎2》** 是我心目中的满分神作！我偶尔还会玩 **《黎明杀机》**（但是比较菜！）。
-
----
-
-## 我的技能
-- **前端开发**: HTML、CSS、JavaScript、Vue.js
-- **后端开发**: Java、Spring
-- **桌面应用程序**: Node.js、Electron
-- **开发运维与系统管理**:  
-  - **Linux** (高级用户)
-  - **网络** (基础知识)
-  - **技术**: Docker、ESXi、Nginx、MySQL 等
-
----
-
-## GitHub 统计数据
-[![](https://github-readme-stats.ccs.cool/api?username=ChengCheng0v0&theme=rose&show_icons=true&locale=cn)](https://github.com/anuraghazra/github-readme-stats)
-&emsp;
-[![](https://github-readme-stats.ccs.cool/api/top-langs/?username=ChengCheng0v0&theme=rose&show_icons=true&locale=cn&layout=compact)](https://github.com/anuraghazra/github-readme-stats)  
-
-**\*** 统计数据中包含来自私有仓库的数据。
-
----
-
-## 开源项目
-- [ACG-Home](https://github.com/ChengCheng0v0/ACG-Home) | 一个好看的二次元风格的个人主页！
-
----
-
-## 联系方式
-请随时通过 **chengcheng@miao.ms** 与我联系。我更喜欢电子邮件而不是即时通讯，期待您的来信！

assets/scripts/index.js

@@ -41,7 +41,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     // 创建一个数组，用来存放生成的链接 HTML
     const socialIconLinks = config.content.masterInfo.socialLink.enable
-        .map((key) => {
+        .map(key => {
             const icon = config.content.masterInfo.socialLink.icon[key]; // 获取对应的 icon
             const link = config.content.masterInfo.socialLink.link[key]; // 获取对应的 link
             if (icon && link) {
@@ -59,8 +59,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     // 获取 Hitokoto 一言
     fetch("https://v1.hitokoto.cn")
-        .then((response) => response.json())
-        .then((data) => {
+        .then(response => response.json())
+        .then(data => {
             const hitokoto = document.querySelector("#hitokoto-text");
             hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`;
             hitokoto.innerText = data.hitokoto;
@@ -71,7 +71,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     // 创建一个数组，用来存放生成的链接 HTML
     const icpInfoLinks = config.content.icp.enable
-        .map((key) => {
+        .map(key => {
             const code = config.content.icp.info.code[key]; // 获取对应的 code
             const link = config.content.icp.info.link[key]; // 获取对应的 link
             if (code && link) {

assets/scripts/meting.js

@@ -92,8 +92,8 @@ class MetingJSElement extends HTMLElement {
         let url = this.api.replace(":server", this.meta.server).replace(":type", this.meta.type).replace(":id", this.meta.id).replace(":auth", this.meta.auth).replace(":r", Math.random());
 
         fetch(url)
-            .then((res) => res.json())
-            .then((result) => this._loadPlayer(result));
+            .then(res => res.json())
+            .then(result => this._loadPlayer(result));
     }
 
     _loadPlayer(data) {

assets/scripts/theme-loader.js

@@ -60,7 +60,7 @@ class ThemeManager {
 
         // 解析基本样式 URL 并赋值给数组
         styleLinks = metaData.files.styles
-            .map((key) => {
+            .map(key => {
                 if (key) {
                     // 创建 <link> 标签
                     return `<link rel="stylesheet" href="${themePath}/styles/${key}" />`;
@@ -72,7 +72,7 @@ class ThemeManager {
 
         // 解析配色方案样式 URL 并插入数组
         metaData.colors.index
-            .map((key) => {
+            .map(key => {
                 let targetColor = localStorage.getItem("theme.color"); // 存储目标配色方案的变量
 
                 // 如果目标配色方案为保留关键字“!autoSwitch”（自动切换配色方案），将其改为实际需要加载的配色方案
@@ -90,7 +90,7 @@ class ThemeManager {
                 // 根据目标配色方案决定是否生成标签
                 if (styles && targetColor === key) {
                     // 如果 styles 是数组，生成多个 link 标签
-                    return styles.map((file) => `<link rel="stylesheet" href="${themePath}/colors/${key}/styles/${file}" />`).join(""); // 将生成的所有 link 标签拼接成字符串
+                    return styles.map(file => `<link rel="stylesheet" href="${themePath}/colors/${key}/styles/${file}" />`).join(""); // 将生成的所有 link 标签拼接成字符串
                 } else if (localStorage.getItem("theme.color") !== key) {
                     console.log("%c[I]%c " + `跳过了生成 ${key} 配色方案样式标签的步骤，因为 key 的值不符合用户设置`, "background-color: #00896c;", "");
                     return;
@@ -99,7 +99,7 @@ class ThemeManager {
                 throw new Error("配色方案样式 Tag 生成失败，无法继续执行操作");
             })
             .filter(Boolean) // 过滤掉无效的值
-            .forEach((linkTags) => {
+            .forEach(linkTags => {
                 styleLinks.push(linkTags); // 将生成的 link 标签插入到数组中
             });
 
@@ -110,7 +110,7 @@ class ThemeManager {
 
         // 解析基本脚本 URL 并赋值给数组
         scriptLinks = metaData.files.scripts
-            .map((key) => {
+            .map(key => {
                 if (key) {
                     // 创建 <script> 标签
                     return `<script src="${themePath}/scripts/${key}"></script>`;
@@ -122,7 +122,7 @@ class ThemeManager {
 
         // 解析配色方案脚本 URL 并插入数组
         metaData.colors.index
-            .map((key) => {
+            .map(key => {
                 let targetColor = localStorage.getItem("theme.color"); // 存储目标配色方案的变量
 
                 // 如果目标配色方案为保留关键字“!autoSwitch”（自动切换配色方案），将其改为实际需要加载的配色方案
@@ -140,7 +140,7 @@ class ThemeManager {
                 // 根据目标配色方案决定是否生成标签
                 if (scripts && targetColor === key) {
                     // 如果 scripts 是数组，生成多个 script 标签
-                    return scripts.map((file) => `<script src="${themePath}/colors/${key}/scripts/${file}"></script>`).join(""); // 将生成的所有 link 标签拼接成字符串
+                    return scripts.map(file => `<script src="${themePath}/colors/${key}/scripts/${file}"></script>`).join(""); // 将生成的所有 link 标签拼接成字符串
                 } else if (localStorage.getItem("theme.color") !== key) {
                     console.log("%c[I]%c " + `跳过了生成 ${key} 配色方案脚本标签的步骤，因为 key 的值不符合用户设置`, "background-color: #00896c;", "");
                     return;
@@ -149,7 +149,7 @@ class ThemeManager {
                 throw new Error("配色方案脚本 Tag 生成失败，无法继续执行操作");
             })
             .filter(Boolean) // 过滤掉无效的值
-            .forEach((linkTags) => {
+            .forEach(linkTags => {
                 scriptLinks.push(linkTags); // 将生成的 link 标签插入到数组中
             });
 
@@ -217,7 +217,7 @@ class ThemeManager {
 
     runScripts() {
         // 遍历 <theme> 中的所有 <script> 标签
-        document.querySelectorAll("theme > script").forEach((script) => {
+        document.querySelectorAll("theme > script").forEach(script => {
             // 获取当前 script 标签的 src
             const src = script.src;
 
@@ -265,7 +265,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // 创建一个数组，用来存放生成的按钮 HTML
     const themeButtons = config.content.theme.colors.enable
-        .map((key) => {
+        .map(key => {
             let displayName;
             let icon;
             let color;

assets/scripts/utils.js

@@ -28,25 +28,28 @@ config.init();
 
 // 对象递归初始化代理
 function autoInitObject() {
-    return new Proxy({}, {
-        get(target, prop) {
-            // 如果属性不存在，则递归返回一个新的代理
-            if (!(prop in target)) {
-                target[prop] = autoInitObject();
-            }
-            return target[prop];
-        },
-        set(target, prop, value) {
-            // 正常设置属性
-            target[prop] = value;
-            return true;
+    return new Proxy(
+        {},
+        {
+            get(target, prop) {
+                // 如果属性不存在，则递归返回一个新的代理
+                if (!(prop in target)) {
+                    target[prop] = autoInitObject();
+                }
+                return target[prop];
+            },
+            set(target, prop, value) {
+                // 正常设置属性
+                target[prop] = value;
+                return true;
+            },
         }
-    });
+    );
 }
 
 // 初始化 markdown-it 实例
 const md = new markdownit({
-    html: true // 允许 HTML 标签
+    html: true, // 允许 HTML 标签
 });
 
 // Markdown 渲染器
@@ -55,26 +58,26 @@ function renderMarkdown() {
     const markdownElements = document.querySelectorAll(".markdown-content");
 
     // 遍历每个元素，获取其 src 指定的 Markdown 文件并渲染
-    markdownElements.forEach((element) => {
+    markdownElements.forEach(element => {
         const src = element.getAttribute("src"); // 获取 src 属性
 
         if (src) {
             // 使用 fetch 来获取 .md 文件内容
             fetch(src)
-                .then((response) => {
+                .then(response => {
                     if (!response.ok) {
                         throw new Error(`无法获取 Markdown 文件: ${src}`);
                     }
                     return response.text();
                 })
-                .then((markdownContent) => {
+                .then(markdownContent => {
                     // 使用 markdown-it 库将 Markdown 转换为 HTML
                     const renderedHTML = md.render(markdownContent);
 
                     // 使用渲染后的 HTML 直接替换原始内容
                     element.innerHTML = renderedHTML;
                 })
-                .catch((error) => {
+                .catch(error => {
                     console.error(error);
                     element.innerHTML = `<span style='color: red;'>加载 Markdown 文件失败: ${src}</span>`;
                 });

assets/styles/index.css

@@ -233,7 +233,7 @@ body {
     background-color: #e5e5e5;
     box-shadow: inset 0 -4px 8px 6px rgba(0, 0, 0, 0.06);
     font-size: 14px;
-    line-height: 18px;
+    line-height: 20px;
 }
 
 .footer > br {

config.json

@@ -1,8 +1,8 @@
 {
-    "title": "成成0v0 の 个人网站",
+    "title": "我是网站的标题~",
     "theme": {
         "theme": "defdark",
-        "displayName": "Default",
+        "displayName": "ACG-Home",
         "colors": {
             "autoSwitch": {
                 "displayName": "Auto",
@@ -19,7 +19,7 @@
         }
     },
     "masterInfo": {
-        "name": "成成0v0",
+        "name": "<站长名字>",
         "avatar": "./assets/images/avatar.png",
         "website": "https://hic.top",
         "socialLink": {

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh">
     <head>
         <meta charset="UTF-8" />
@@ -78,6 +78,7 @@
             <span
                 >本站由 <span class="webmaster-info"><a :href="config.content.masterInfo.website" target="_blank" x-text="config.content.masterInfo.name">[Loading...]</a> 和 </span><a href="https://hic.top" target="_blank">成成0v0</a> 用 <i class="fa-solid fa-heart"></i> 制作</span
             >
+
             <span>Powered by <a href="https://github.com/ChengCheng0v0/ACG-Home" target="_blank">ACG-Home</a></span>
         </div>
 

loaders/global.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
     <head>
         <meta charset="UTF-8" />
@@ -166,7 +166,7 @@
             <div class="loader"></div>
             <div class="text-info">
                 <span class="loading">Loading...</span>
-                <span>Welcome to Cheng's website!</span>
+                <span>Welcome to my website!</span>
             </div>
         </div>
     </body>