BIG-feat: 将config.js文件改为ts格式，修改了“主页”和“关于我”页面大量样式

01Petard · Dec 17, 2024 · c512a52 · c512a52
1 parent 301e512
commit c512a52
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 27 deletions.
diff --git a/docs/.vitepress/config.js → docs/.vitepress/config.mts b/docs/.vitepress/config.js → docs/.vitepress/config.mts
@@ -1,6 +1,8 @@
 // .vitepress/config.js
+import { defineConfig } from 'vitepress';
+
 const base = "/blog-vue-vitepress/";
-export default {
+export default defineConfig({
   base,
   lang: 'zh-cn',
   title: "代码港湾",
@@ -18,7 +20,7 @@ export default {
     },
     // 修改侧边栏导航的标题
     outline: {
-      level: [1, 2, 3, 4],
+      level: [1, 2],
       label: "目录导航"
     },
     // 文档页脚的文字
@@ -287,4 +289,4 @@ export default {
       {icon: 'github', link: 'https://github.com/01Petard'}
     ],
   }
-};
+});
diff --git a/docs/about.md b/docs/about.md
@@ -5,32 +5,73 @@ type: "about"
 comments: false
 ---
 
-<div style="color:red;font-weight:bold;">
-	<p style="">
-  	I wish you to become your own sun , no need to rely on who’s light.
-  </p>
-  <p>
-    —— 愿你成为自己的太阳，无需凭借谁的光芒。
-  </p>
-</div>
+
+<style>
+    /* 定义背景闪耀动画 */
+    @keyframes shine {
+      0% { background-position: 0 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0 50%; }
+    }
+
+    /* 闪耀背景效果，仅限该 div */
+    .shiny-div {
+      font-weight: bold; /* 加粗字体 */
+      padding: 20px; /* 增加内边距 */
+      text-align: center; /* 居中对齐 */
+      /*background-image: linear-gradient(120deg, #dd206f, #ea8011, #1c7526, #2b77b5, #51259c);*/
+      background-image: linear-gradient(
+				120deg,
+			  #bd34fe, /* 紫色 */
+			  #47caff, /* 蓝色 */
+			  #2dd4bf, /* 青绿 */
+			  #facc15, /* 金色 */
+			  #ff4d4d, /* 红色 */
+			  #bd34fe /* 回到紫色 */
+			);
+      background-size: 300% 300%;
+      -webkit-background-clip: text; /* 使用背景裁剪文字 */
+      background-clip: text;
+      color: transparent; /* 让文字透明显示背景 */
+      animation: shine 5s infinite linear; /* 应用动画 */
+      font-size: 1.2rem;
+    }
+
+    /* 单独设置中文部分的颜色 */
+    .shiny-div p:nth-child(2) {
+      /*color: #ff4d4d; !* 深红色 *!*/
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  </style>
+
+  <div class="shiny-div">
+    <p>
+      Wish you to become your own sun, no need to rely on who’s light.
+    </p>
+    <p>
+      —— 愿你成为自己的太阳，无需凭借谁的光芒。
+    </p>
+  </div>
 
 ## 👲 基本信息
 
 ```yaml
-Name: 伪音花火 / 01Petard
-Address: Zhejiang, Hangzhou
-Github: https://github.com/01Petard
-Blog: https://01petard.github.io/blog-vue-vitepress/
-Blog(Legacy): https://01petard.github.io/
-Hobbies: Bangumis, Doujin, Surfing Online, Digital Devices
+👤 Name: 伪音花火 / 01Petard
+🏠 Address: Zhejiang, Hangzhou
+📮 Email: [email protected]
+🐱 Github: https://github.com/01Petard
+💻 Blog: https://01petard.github.io/blog-vue-vitepress/
+💻 Blog(Legacy): https://01petard.github.io/
+❤️ Hobbies: Bangumis, Doujin, Surfing Online, Digital Devices
 ```
 
 ## 🔨 技术栈
 
-- 后端学习的还挺多的，但感觉自己还是个菜鸟（Java要死了，那我转Go？）
-- 暴学前端，目前Vue3基本入门了，自我感觉良好（学多了感觉JavaScript也看顺眼了）
-- 还了解一点Python，懂点Flask框架，会运用简单的AI模型（语法还行，主要是语法糖的问题）
-- 懂点开发板相关的硬件，对硬件开发了解不多，但是热衷于捣鼓软路由、NAS相关的东西
+- 后端学习的还挺多的，感觉自己可以自己行了👍（Java要死了，那我转Go？）
+- 暴学前端，目前Vue3基本ok了，自我感觉良好（学多了感觉JavaScript也看顺眼了）
+- 了解 a little of Python，懂点Flask框架，会运用简单的AI模型（对 Ollama 这玩意儿比较看好）
+- 懂点开发板相关的硬件，对硬件开发了解不多，但是热衷于捣鼓“软路由”、“NAS”相关的东西
 - ……
 
 ## 💘 关于本站

diff --git a/docs/index.md b/docs/index.md
@@ -34,23 +34,35 @@ features:
   - title: 光速构建，无限知识
     details: 如闪电般的加载速度，快速访问到丰富的知识宝库。多端设备都能享受流畅的阅读体验。
     icon:
-      src: /public/闪电.png
+      src: /闪电.png
   - title: 简约不简单，高效传播智慧
     details: 功能直观，轻松创建专业的博客和文档。专注于内容创作，快速发布高质量的文章。
     icon:
-      src: /public/安全高效.png
+      src: /安全高效.png
   - title: 代码与文字的交响，编织未来
     details: 完美展示了前端工具链的最佳实践，从HMR到TS支持，每一个特性都是为了提升文档开发体验。
     icon:
-      src: /public/拥抱未来.png
+      src: /拥抱未来.png
 
 ---
 
 <style>:root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+	--vp-home-hero-name-background: -webkit-linear-gradient(
+	  120deg,
+	  #bd34fe, /* 紫色 */
+	  #47caff, /* 蓝色 */
+	  #2dd4bf, /* 青绿 */
+	  #facc15, /* 金色 */
+	  #ff4d4d, /* 红色 */
+	  #bd34fe  /* 紫色 */
+	);
+
+  --vp-home-hero-image-background-image: linear-gradient(
+		-45deg, 
+		#bd34fe 50%, 
+		#47caff 50%
+	);
   --vp-home-hero-image-filter: blur(44px);
 }