修改主页背景

Author: Jursin

docs/index.md

@@ -55,7 +55,33 @@ pageLayout: page
 	</div>
 </div>
 
-<div class="pixel-blast" aria-hidden="true"></div>
+<div class="pixelblast-layer" aria-hidden="true">
+  <ClientOnly>
+    <PixelBlast
+      class="pixelblast-canvas"
+      variant="square"
+      color="#5086a1"
+      :speed="0.5"
+      :pixel-size="4"
+      :pattern-scale="2"
+      :pattern-density="0.8"
+      :edge-fade="0.5"
+      :pixel-size-jitter="0"
+      :antialias="true"
+      :enable-ripples="true"
+      :ripple-intensity-scale="1"
+      :ripple-thickness="0.1"
+      :ripple-speed="0.3"
+      :liquid="false"
+      :liquid-strength="0.1"
+      :liquid-radius="1"
+      :liquid-wobble-speed="4.5"
+      :auto-pause-offscreen="true"
+      :transparent="true"
+      :noise-amount="0"
+    />
+  </ClientOnly>
+</div>
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -87,70 +113,18 @@ pageLayout: page
   z-index: 1;
 }
 
-.pixel-blast {
+.pixelblast-layer {
   position: fixed;
   inset: 0;
-  pointer-events: none;
   z-index: 0;
-  background: radial-gradient(circle at 12% 22%, rgba(0, 217, 255, 0.32), transparent 38%),
-              radial-gradient(circle at 80% 12%, rgba(167, 139, 250, 0.3), transparent 36%),
-              radial-gradient(circle at 65% 78%, rgba(255, 125, 72, 0.28), transparent 42%),
-              radial-gradient(circle at 28% 70%, rgba(63, 185, 80, 0.26), transparent 44%),
-              radial-gradient(circle at 90% 65%, rgba(255, 225, 128, 0.24), transparent 48%);
-  mix-blend-mode: normal;
-  opacity: 1;
-  filter: saturate(115%) brightness(105%);
+  pointer-events: auto;
+  overflow: hidden;
 }
 
-.pixel-blast::before,
-.pixel-blast::after {
-  content: '';
+.pixelblast-layer :deep(.home-hero-effect-pixel-blast) {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 6px;
-  height: 6px;
-  background: var(--vp-c-brand-1);
-  box-shadow: 12px -18px 0 rgba(0, 217, 255, 0.65),
-              -24px 14px 0 rgba(167, 139, 250, 0.65),
-              30px 6px 0 rgba(255, 125, 72, 0.6),
-              -32px -24px 0 rgba(63, 185, 80, 0.6),
-              8px 28px 0 rgba(255, 225, 128, 0.6),
-              48px -10px 0 rgba(0, 217, 255, 0.4),
-              -14px -40px 0 rgba(167, 139, 250, 0.5),
-              60px 22px 0 rgba(63, 185, 80, 0.45),
-              -54px 18px 0 rgba(255, 125, 72, 0.5),
-              20px -52px 0 rgba(255, 225, 128, 0.55),
-              -64px -8px 0 rgba(0, 217, 255, 0.45),
-              72px -36px 0 rgba(167, 139, 250, 0.35),
-              -78px 34px 0 rgba(63, 185, 80, 0.35),
-              34px 60px 0 rgba(255, 125, 72, 0.35),
-              -20px 72px 0 rgba(0, 217, 255, 0.35);
-  opacity: 0.8;
-  transform: translate(-50%, -50%) scale(0.55);
-  animation: pixelBlast 6s linear infinite;
-  filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.3));
-}
-
-.pixel-blast::after {
-  animation-duration: 9s;
-  animation-delay: -2s;
-  opacity: 0.55;
-  filter: hue-rotate(28deg) drop-shadow(0 0 12px rgba(167, 139, 250, 0.28));
-}
-
-@keyframes pixelBlast {
-  0% {
-    transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
-    opacity: 0.9;
-  }
-  60% {
-    opacity: 0.65;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1.6) rotate(12deg);
-    opacity: 0.08;
-  }
+  inset: 0;
+  pointer-events: auto;
 }
 
 .avatar img {
@@ -208,7 +182,7 @@ pageLayout: page
 
 .tag {
   padding: 7px 10px;
-  background: var(--vp-c-default-soft);
+  background: var(--vp-c-bg-soft);
   border-radius: 8px;
   font-size: 16px;
   display: inline-flex;
@@ -225,12 +199,18 @@ pageLayout: page
   font-size: 22px;
   color: var(--vp-c-text-2);
 }
+
 .desc {
   font-size: 20px;
   color: var(--vp-c-text-1);
   padding-left: 16px;
   border-left: 3px solid var(--vp-c-brand-1);
 }
+
+.info > blockquote {
+  background-color: var(--vp-c-bg-soft);
+}
+
 .hitokoto {
   margin: 0;
   font-size: 20px !important;
@@ -247,7 +227,7 @@ pageLayout: page
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  background: var(--vp-c-default-soft);
+  background: var(--vp-c-bg-soft);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -292,18 +272,20 @@ pageLayout: page
 }
 </style>
 
-<script>
-	(async function loadHitokoto() {
-		try {
-			const res = await fetch('https://v1.hitokoto.cn/?encode=json&c=d&c=h&c=i');
-			const data = await res.json();
-			const el = document.getElementById('hitokoto_text');
-			if (el && data && data.hitokoto) {
-				const from = data.from || data.from_who || '一言';
-				el.textContent = `${data.hitokoto} — ${from}`;
-			}
-		} catch (err) {
-			// 静默失败，保留占位文本
-		}
-	})();
+<script setup>
+import PixelBlast from '@theme/background/PixelBlast.vue'
+
+(async function loadHitokoto() {
+  try {
+    const res = await fetch('https://v1.hitokoto.cn/?encode=json&c=d&c=h&c=i');
+    const data = await res.json();
+    const el = document.getElementById('hitokoto_text');
+    if (el && data && data.hitokoto) {
+      const from = data.from || data.from_who || '一言';
+      el.textContent = `${data.hitokoto} — ${from}`;
+    }
+  } catch (err) {
+    // 静默失败，保留占位文本
+  }
+})();
 </script>

package.json

@@ -24,7 +24,9 @@
     "typescript": "^5.9.3",
     "vue": "^3.5.25",
     "vuepress": "2.0.0-rc.26",
-    "vuepress-theme-plume": "1.0.0-rc.184"
+    "vuepress-theme-plume": "1.0.0-rc.184",
+    "postprocessing": "^6.38.2",
+    "three": "^0.182.0"
   },
   "pnpm": {
     "onlyBuiltDependencies": [