feat: add anchor points, structure code, and fix some bugs

yuanze-dev · Apr 15, 2024 · df9f274 · df9f274
1 parent 4eaccfb
commit df9f274
Show file tree

Hide file tree

Showing 23 changed files with 207 additions and 271 deletions.
diff --git a/.vitepress/components/ImgCenter.vue b/.vitepress/components/ImgCenter.vue
@@ -13,5 +13,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1;
 }
 </style>
diff --git a/.vitepress/components/ImgDesc.vue b/.vitepress/components/ImgDesc.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p align="center" style="font-size:12px; margin-top:0;">
+    <p align="center" style="font-size:14px; margin-top:0; color: var(--vp-c-text-2)">
       <slot></slot>
     </p>
   </div>

diff --git a/.vitepress/components/Link.vue b/.vitepress/components/Link.vue
@@ -2,11 +2,11 @@
 const props = defineProps({
   title: {
     type: String,
-    default: '这里是站点title'
+    default: '这里是站点 title'
   },
   logo: {
     type: String,
-    default: '这里是站点logo'
+    default: '这里是站点 logo'
   },
   link: {
     type: String,

diff --git a/.vitepress/components/UserGroup.vue b/.vitepress/components/UserGroup.vue
@@ -0,0 +1,5 @@
+<template>
+  <p>欢迎加入芦笋提词器用户交流群，你可以在群内随时反馈使用问题以及功能建议，期待你的声音～</p>
+  <ImgCenter><img src="../../public/.gitbook/assets/quncode.png" alt="" width="200"></ImgCenter>
+  <ImgDesc>芦笋提词器用户交流群</ImgDesc>
+</template>
diff --git a/.vitepress/config.mjs b/.vitepress/config.mjs
@@ -117,7 +117,7 @@ export default defineConfig({
     },
 
     outline: {
-      level: [2, 3],
+      level: [2, 4],
       label: "页面导航",
     },
 

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -13,24 +13,43 @@ section > div.item > h2 {
   font-size: 1rem;
 }
 
+.vp-doc h2{
+  margin-top: 1em;
+}
+
+.vp-doc h3{
+  margin: 1em 0;
+}
+
+.vp-doc h4{
+  margin: 1em 0;
+}
+
 /* 表格 */
 .vp-doc table > tbody > tr > td{
   vertical-align: top
 }
 
 /* 图片点击放大优先级调整 */
-.medium-zoom-image {
-  z-index: 49 !important;
+.medium-zoom-overlay {
+  z-index: 30;
+}
+
+.medium-zoom-image--opened {
+  z-index: 31;
 }
 
 /* 文章图片圆角 */
 #VPContent img {
-  border-radius: 1rem;
+  border-radius: 8px;
 }
 
 /* 联系我们 */
-#VPSidebarNav > div:nth-child(5) > section > div > div > div > a > p {
+#VPSidebarNav > div:nth-child(4) > section > div > div > div > a > p {
   color: var(--vp-c-text-1);
   margin-left: -1em;
   font-weight: 700;
+}
+#VPSidebarNav > div:nth-child(4) > section > div > div > div > a > p:hover{
+  color: var(--vp-c-brand-1);
 }
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
@@ -2,6 +2,7 @@
 import ImgCenter from "../components/ImgCenter.vue";
 import ImgDesc from "../components/ImgDesc.vue";
 import Link from "../components/Link.vue";
+import UserGroup from "../components/UserGroup.vue";
 import DefaultTheme from "vitepress/theme";
 import { onMounted, watch, nextTick } from "vue";
 import { useRoute } from "vitepress";
@@ -13,18 +14,34 @@ export default {
   ...DefaultTheme,
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    app.component("UserGroup", UserGroup);
     app.component("ImgCenter", ImgCenter);
     app.component("ImgDesc", ImgDesc);
     app.component("Link", Link);
   },
   setup() {
     const route = useRoute();
+    // 图片放大
     const initZoom = () => {
-      // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
       mediumZoom(".main img", { background: "var(--vp-c-bg)" });
     };
+    // 锚点定位
+    const fixAnchor = () => {
+      window.onload = function () {
+        var url = window.location.href;
+        var anchor = url.split("#")[1];
+        if (anchor) {
+          var targetElement = document.getElementById(anchor);
+          if (targetElement) {
+            var offsetTop = targetElement.offsetTop;
+            window.scrollTo(0, offsetTop);
+          }
+        }
+      };
+    };
     onMounted(() => {
       initZoom();
+      fixAnchor();
     });
     watch(
       () => route.path,

diff --git a/advanced/README.md b/advanced/README.md
diff --git a/advanced/accessvip.md b/advanced/accessvip.md
@@ -6,37 +6,30 @@ description: 这里介绍了如何免费领取芦笋提词器高级会员，以
 
 感谢你选择使用芦笋提词器，我们为大家开通了免费领取会员的通道。如果你刚了解芦笋提词器，推荐阅读 [芦笋提词器欢迎你](../) 了解更多～
 
-## 邀请好友得会员
+## 邀请好友得会员 {#invite}
 
-参与芦笋提词器的邀请活动，你将获得对应的会员奖励。你可以访问 [https://tcq.lusun.com/invite](https://tcq.lusun.com/invite) 将生成自己的邀请链接/海报，Ta 人通过你的专属链接注册成功后，你将获得对应的会员奖励，同时 Ta 也将获赠15 天会员
+参与芦笋提词器的邀请活动，你将获得对应的会员奖励。你可以访问 [https://tcq.lusun.com/invite](https://tcq.lusun.com/invite) 将生成自己的邀请链接/海报，Ta 人通过你的专属链接注册成功后，你将获得对应的会员奖励，同时 Ta 也将获赠 15 天会员
 
-## 参与芦笋提词器种草计划
+## 参与芦笋提词器种草计划 {#plan}
 
-如何参与芦笋提词器的种草笔记？你可以撰写一篇芦笋提词器的种草笔记（图文/视频均可），并发布在**小红书**或**抖音**平台，添加话题 <span style="color:green;"> **#芦笋提词器**</span> <span style="color:green;">**#直播提词 #AI提词**</span>
+如何参与芦笋提词器的种草笔记？你可以撰写一篇芦笋提词器的种草笔记（图文/视频均可），并发布在**小红书**或**抖音**平台，添加话题 <span style="color:green;"> **#芦笋提词器**</span> <span style="color:green;">**#直播提词 #AI 提词**</span>
 
 即可获得领取 2 个福利
 
-* 你将获得芦笋提词器 30日高级会员兑换码
-* 你将获得满300减30权益
+* 你将获得芦笋提词器 30 日高级会员兑换码
+* 你将获得满 300 减 30 权益
 
-<div align="center">
-  <img src="../public/.gitbook/assets/Tzhongcao.png" alt="" width="375">
-  <p align="center" style="font-size:12px; margin-top:0;" >芦笋提词器种草计划</p>
-</div>
+<ImgCenter><img src="../public/.gitbook/assets/Tzhongcao.png" alt="" width="375"></ImgCenter>
+<ImgDesc>芦笋提词器种草计划</ImgDesc>
 
+### 如何使用兑换码？{#exchange}
 
-### 如何使用兑换码？
+第一步：打开「芦笋提词器」客户端，点击左下角“兑换码”按钮
 
-第一步：打开 「芦笋提词器」 客户端，点击左下角“兑换码”按钮
-
-<div align="center">
-  <img src="../public/.gitbook/assets/duihuama1.png" alt="" width="375">
-  <p align="center" style="font-size:12px; margin-top:0;" >电脑端兑换码入口</p>
-</div>
+<ImgCenter><img src="../public/.gitbook/assets/duihuama1.png" alt=""></ImgCenter>
+<ImgDesc>电脑端兑换码入口</ImgDesc>
 
 第二步：在弹出的输入框中，输入兑换口令，点击确认，即可领取
 
-<div align="center">
-  <img src="../public/.gitbook/assets/duihuanma2.png" alt="" width="375">
-  <p align="center" style="font-size:12px; margin-top:0;" >输入兑换码</p>
-</div>
+<ImgCenter><img src="../public/.gitbook/assets/duihuanma2.png" alt=""></ImgCenter>
+<ImgDesc>输入兑换码</ImgDesc>
diff --git a/advanced/obslesson.md b/advanced/obslesson.md
@@ -2,34 +2,28 @@
 description: 这篇文章介绍了芦笋提词器终身版+OBS 精品课的超豪华套餐内容
 ---
 
-# 🫡 终身版+OBS精品课
+# 🫡 终身版+OBS 精品课
 
-## 终身版 + 精品课 具体是什么？
+> 这篇文章介绍了芦笋提词器终身版+OBS 精品课的超豪华套餐内容
+
+## 终身版 + 精品课 具体是什么？{#what}
 
 * 购买链接：请点击这里：[https://tcq.lusun.com/pricing/](https://tcq.lusun.com/pricing/)
 * 了解更多会员权益，请参考 [芦笋提词器会员特权介绍](../basic/vip.md)
 
-现在购买 【芦笋提词器终身版+精品课】 套餐包，你将可以获得价值 ¥399 的 OBS 宝藏教学礼包，该课程由鲁洪涛老师（小猪微课）精心打磨，帮助直播/录播课博主获得高阶能力
-
-### 课程内容大纲
+现在购买【芦笋提词器终身版 + 精品课】套餐包，你将可以获得价值 ¥399 的 OBS 宝藏教学礼包，该课程由鲁洪涛老师（小猪微课）精心打磨，帮助直播/录播课博主获得高阶能力
 
-<div align="center" style="margin:20px 0;">
-  <img src="../public/.gitbook/assets/xzwk5.png" alt="">
-</div>
+### 课程内容大纲 {#outline}
 
-### 课程海报介绍
+<ImgCenter><img src="../public/.gitbook/assets/xzwk5.png" alt=""></ImgCenter>
 
-<div align="center">
-  <img src="../public/.gitbook/assets/xiaozhu.jpeg" alt="" width="375">
-
-</div>
+### 课程海报介绍 {#lesson}
 
+<ImgCenter><img src="../public/.gitbook/assets/xiaozhu.jpeg" alt="" width="375"></ImgCenter>
 
-### 如何学习课程
+### 如何学习课程 {#learn}
 
 购买 [【终身版 + 精品课】](https://tcq.lusun.com/pricing/) 后，你的芦笋提词器账号将自动升级，购买的课程将获得小鹅通的观看链接，课程链接的获取请联系：
 
-<div align="center">
-  <img src="../public/.gitbook/assets/xiaoxiao.jpeg" alt="" width="198">
-  <p align="center" style="font-size:12px; margin-top:0;" >扫码获取</p>
-</div>
+<ImgCenter><img src="../public/.gitbook/assets/xiaoxiao.jpeg" alt="" width="198"></ImgCenter>
+<ImgDesc>扫码获取</ImgDesc>