Merge pull request #10 from ChengCheng0v0/develop

v2.0.5 版本开发完毕

README.md

@@ -10,6 +10,8 @@
 > 此预览使用 [Liora](https://github.com/ChengCheng0v0/Liora) 主题，它是 ACG-Home 的官方推荐主题。  
 > 强烈建议在安装完本项目后立刻配置一个主题样式，因为默认主题实在是不太好看~~
 
+你也可以看看[我的个人网站 (hic.top)](https://hic.top)，它也使用 ACG-Home + Liora Theme 的组合！
+
 ---
 
 项目的开发工作会在 `develop` 分支中进行，对于最新的改动预览请查看：[https://develop.acg-home.pages.dev](https://develop.acg-home.pages.dev)。

assets/markdown/content-page.md

@@ -2,5 +2,9 @@
 
 这里是内容区域！你可以通过编辑 `assets/markdown/announcement.md` 来修改它的内容~
 
-初次使用，你可以先看看 `config.json`！
+初次使用，你可以先看看 `config.json`，并在这里写点东西！  
+在此之前，你也可以先安装一个主题（因为默认主题确实不太好看，它基本仅用作调试）。试试 [Liora](https://github.com/ChengCheng0v0/Liora)？
 
+你可能已经注意到右边有个超出内容区域的贴纸（如果你的屏幕比较窄的话也可能没有），这是因为这里的初始内容太短了，可以不用在意它啦。再多写点内容就好了！  
+如果需要更改贴纸，请替换 `assets/images/content_page_sticker.png` 并在需要时（因为可能大小之类的会有点问题）修改 `assets/styles/index.css` 中的对应样式~  
+如果你不需要它，最简单的办法是直接删除刚才提到的图像文件。

assets/scripts/index.js

@@ -1,4 +1,4 @@
-/* global config, Alpine, getWebsiteConfig, Typed, swal, renderMarkdown */
+/* global config, throttle, debounce, Alpine, getWebsiteConfig, Typed, swal, renderMarkdown */
 
 // 初始化 Alpine
 document.addEventListener("alpine:init", () => {
@@ -8,11 +8,20 @@ document.addEventListener("alpine:init", () => {
 document.addEventListener("DOMContentLoaded", async () => {
     // 获取 DOM 元素
     var element = {
+        pageHead: document.querySelector(".page-head"),
+        leftArea: document.querySelector(".primary-container > .left-area"),
         socialIcons: document.querySelector(".social-icons"),
         icpInfo: document.querySelector(".icp-info"),
         webmasterInfo: document.querySelector(".webmaster-info"),
     };
 
+    // 查询屏幕宽度并设置 Flag
+    var mobileMode = false;
+    if (window.matchMedia("(max-width: 899px)").matches) {
+        mobileMode = true;
+        console.log("%c[I]%c " + `mobileMode: true`, "background-color: #00896c;", "");
+    }
+
     // 设置网站标题
     document.title = config.content.title;
 
@@ -67,6 +76,21 @@ document.addEventListener("DOMContentLoaded", async () => {
         })
         .catch(console.error);
 
+    // 非移动端下自动悬浮左侧区域
+    if (!mobileMode) {
+        const pageHeadHeight = element.pageHead.clientHeight;
+        const updateFloatPageHeadMargin = debounce(() => {
+            element.leftArea.style.marginTop = window.scrollY - pageHeadHeight + "px";
+        }, 60);
+        document.addEventListener("scroll", () => {
+            if (window.scrollY >= pageHeadHeight) {
+                updateFloatPageHeadMargin();
+            } else {
+                element.leftArea.style.marginTop = "unset";
+            }
+        });
+    }
+
     /* 生成页脚 ICP 备案信息 */
 
     // 创建一个数组，用来存放生成的链接 HTML

assets/scripts/theme-loader.js

@@ -15,7 +15,7 @@ class ThemeManager {
     // 解析主题
     parse() {
         // 构建主题目录
-        themePath = window.location.origin + "/assets/themes/" + config.content.theme.theme;
+        themePath = window.location.href + "/assets/themes/" + config.content.theme.theme;
         console.log("%c[I]%c " + `Theme Path: ${themePath}`, "background-color: #00896c;", "");
 
         // 使用 XML 获取主题的元数据

assets/scripts/utils.js

@@ -7,7 +7,7 @@ function getWebsiteConfig() {
         init() {
             try {
                 const xhr = new XMLHttpRequest();
-                xhr.open("GET", "../../config.json", false); // 使用同步请求
+                xhr.open("GET", "./config.json", false); // 使用同步请求
                 xhr.send();
 
                 if (xhr.status >= 200 && xhr.status < 300) {
@@ -47,6 +47,32 @@ function autoInitObject() {
     );
 }
 
+// 节流函数
+// NOTE: 节流的作用是：无论事件触发频率多高，目标函数都只会在指定时间间隔内执行一次。
+function throttle(func, interval) {
+    let lastTime = 0;
+    return function (...args) {
+        const now = Date.now(); // 当前时间
+        if (now - lastTime >= interval) {
+            func.apply(this, args); // 如果距离上次执行的时间超过间隔，执行函数
+            lastTime = now; // 更新上次执行时间
+        }
+    };
+}
+
+// 防抖函数
+// NOTE: 防抖的作用是：在事件触发后的 delay 时间内没有再次触发时，才会执行目标函数。
+function debounce(func, delay) {
+    let timer;
+    return function (...args) {
+        const context = this;
+        clearTimeout(timer); // 每次触发事件都清除之前的定时器
+        timer = setTimeout(() => {
+            func.apply(context, args); // 重新设定定时器并调用函数
+        }, delay);
+    };
+}
+
 // 初始化 markdown-it 实例
 const md = new markdownit({
     html: true, // 允许 HTML 标签

assets/styles/index.css

@@ -79,6 +79,8 @@ body {
     max-width: 350px;
     width: 30%;
     margin-right: 16px;
+
+    transition: margin-top, ease-in, 0.2s;
 }
 
 /* 右侧区域 */
@@ -90,13 +92,36 @@ body {
 
 /* 内容版块 */
 .primary-container > .right-area > .content-page {
+    position: relative;
     width: 100%;
     margin-top: 16px;
     border-radius: 12px;
     padding: 20px 46px 46px 46px;
     background-color: #ffffff;
     box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.06);
     box-sizing: border-box;
+
+    * {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+/* 内容板块的贴纸 */
+.primary-container > .right-area > .content-page::before {
+    content: "";
+    position: absolute;
+
+    /* 如果需要修改贴纸请根据图片情况调整此处的值~ */
+    bottom: 20px;
+    right: 0;
+    width: 400px;
+    height: 500px;
+
+    background-color: #aaaaaa;
+    mask: url(../images/content_page_sticker.png) no-repeat center;
+    mask-size: contain;
+    z-index: 0;
 }
 
 /* - 左侧卡片 */

assets/styles/responsive/index.css

@@ -19,6 +19,11 @@
     }
     /* - 主体容器 End */
 
+    /* 内容版块 */
+    .primary-container > .right-area > .content-page {
+        padding: 20px 20px 46px 20px;
+    }
+
     /* - Fixes */
     img {
         max-width: 100%;