chore(package): update to version 26.2.22(289)

.vitepress/theme/components/Footer.vue

@@ -28,7 +28,7 @@ const siteVersion = theme.value.siteVersion;
       </div>
       <div class="beian-info">
         <div class="beian-gongan">
-          <img src="/assets/images/beian.png" loading="eager" />
+          <img src="/assets/images/beian.webp" loading="eager" />
           <a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank"
             >黑公网安备23020002230215</a
           >

.vitepress/theme/components/Header.vue

@@ -217,76 +217,87 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <header ref="headerRef" class="Header">
-    <div class="carousel-container" :impression-color="frontmatter.color">
-      <template v-if="hasMultiple">
-        <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
-          <div v-for="slot in slotStates" :key="slot.id" class="item" :class="slot.className" :style="{ order: slot.order }">
-            <img :src="slot.imgUrl" />
+  <Transition name="header" mode="in-out" :duration="10000" appear>
+    <header ref="headerRef" class="Header">
+      <div class="carousel-container" :impression-color="frontmatter.color">
+        <template v-if="hasMultiple">
+          <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
+            <div
+              v-for="slot in slotStates"
+              :key="slot.id"
+              class="item"
+              :class="slot.className"
+              :style="{ order: slot.order }"
+            >
+              <img :src="slot.imgUrl" />
+            </div>
           </div>
-        </div>
-        <div class="progress-ring">
-          <svg width="24" height="24" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
-            <circle
-              cx="12"
-              cy="12"
-              r="9"
-              fill="none"
-              stroke="var(--md-sys-color-tertiary)"
-              stroke-width="5"
-              stroke-linecap="round"
-              :style="{
-                strokeDasharray: `${2 * Math.PI * 9}`,
-                strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
-                transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
-              }"
-            />
-          </svg>
-        </div>
-        <div class="controls">
-          <div class="prev" title="上一张" @click="handleNav(-1)"></div>
-          <div class="next" title="下一张" @click="handleNav(1)"></div>
-        </div>
-        <div class="indicators">
-          <button
-            v-for="(_, idx) in rawImgList"
-            :key="idx"
-            class="dot"
-            :class="{ active: currentRealIndex === idx }"
-            @click="jumpTo(idx)"
-          ></button>
-        </div>
-      </template>
-      <template v-else>
-        <ClientOnly>
-          <svg width="0" height="0">
-            <defs>
-              <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                  :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
-                  type="turbulence"
-                  baseFrequency="0.15"
-                  numOctaves="2"
-                  stitchTiles="stitch"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="1"></feColorMatrix>
-                <feComponentTransfer>
-                  <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
-                </feComponentTransfer>
-                <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
-              </filter>
-            </defs>
-          </svg>
-        </ClientOnly>
-        <div class="single">
-          <h1>{{ frontmatter.title || page.title }}</h1>
-          <img :src="getGradientUrl(rawImgList[0])" />
-          <img :src="rawImgList[0]" />
-        </div>
-      </template>
-    </div>
-  </header>
+          <div class="progress-ring">
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+                fill="none"
+                stroke="var(--md-sys-color-tertiary)"
+                stroke-width="5"
+                stroke-linecap="round"
+                :style="{
+                  strokeDasharray: `${2 * Math.PI * 9}`,
+                  strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
+                  transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
+                }"
+              />
+            </svg>
+          </div>
+          <div class="controls">
+            <div class="prev" title="上一张" @click="handleNav(-1)"></div>
+            <div class="next" title="下一张" @click="handleNav(1)"></div>
+          </div>
+          <div class="indicators">
+            <button
+              v-for="(_, idx) in rawImgList"
+              :key="idx"
+              class="dot"
+              :class="{ active: currentRealIndex === idx }"
+              @click="jumpTo(idx)"
+            ></button>
+          </div>
+        </template>
+        <template v-else>
+          <ClientOnly>
+            <svg width="0" height="0" style="display: none">
+              <defs>
+                <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
+                  <feTurbulence
+                    :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
+                    type="turbulence"
+                    baseFrequency="0.15"
+                    numOctaves="2"
+                    stitchTiles="stitch"
+                  ></feTurbulence>
+                  <feColorMatrix type="saturate" values="1"></feColorMatrix>
+                  <feComponentTransfer>
+                    <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
+                  </feComponentTransfer>
+                  <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
+                </filter>
+              </defs>
+            </svg>
+          </ClientOnly>
+          <div class="single">
+            <h1 class="overlay">{{ frontmatter.title || page.title }}</h1>
+            <h1 :style="`background-image: url(${getGradientUrl(rawImgList[0])})`">
+              {{ frontmatter.title || page.title }}
+            </h1>
+            <img :src="getGradientUrl(rawImgList[0])" />
+            <img :src="rawImgList[0]" />
+          </div>
+        </template>
+      </div>
+    </header>
+  </Transition>
 </template>
 
 <style lang="scss" scoped>

.vitepress/theme/components/PageIndicator.vue

@@ -25,7 +25,7 @@ const { start: lockTimer } = useTimeoutFn(
     isLocked.value = false;
   },
   1200,
-  { immediate: false }
+  { immediate: false },
 );
 
 /** 计算文章 ID 与短链 */
@@ -126,11 +126,11 @@ if (isClient()) {
               headingsActiveId.value = bestId;
             }
           },
-          { rootMargin: "-20% 0px -60% 0px", threshold: [0, 0.1, 0.5, 1] }
+          { rootMargin: "-20% 0px -60% 0px", threshold: [0, 0.1, 0.5, 1] },
         );
       });
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   /** 监听容器及其子元素尺寸变化 */
@@ -153,7 +153,7 @@ watch(
     } else {
       indicator.value.opacity = 0;
     }
-  }
+  },
 );
 
 watch(headingsActiveId, () => {
@@ -174,7 +174,7 @@ onMounted(() => {
 <template>
   <div ref="pageIndicator" class="PageIndicator">
     <div class="label">
-      <p class="text">在此页上</p>
+      <p class="text">文章短链</p>
       <p class="icon">link</p>
       <p class="article-id" :title="isCopied ? '已复制' : '复制短链'" v-if="articleId" @click="copyShortLink">
         {{ isCopied ? "已复制" : articleId }}

.vitepress/theme/layouts/Default.vue

@@ -158,7 +158,7 @@ onMounted(() => {
                 <h3>
                   {{ randomGreeting }}
                 </h3>
-                <img src="/assets/images/avatar_transparent.png" alt="" />
+                <img src="/assets/images/avatar_transparent.webp" alt="" />
                 <span></span>
               </div>
             </ClientOnly>

.vitepress/theme/styles/animation.scss

@@ -1,20 +1,3 @@
-.layout-enter-active {
-  transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
-      var(--md-sys-motion-duration-short1);
-}
-
-.layout-leave-active {
-  transition: opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-}
-
-.layout-enter-from,
-.layout-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
 @keyframes fade-out {
   0% {
     opacity: 0;

.vitepress/theme/styles/components/Header.scss

@@ -37,26 +37,59 @@
         @include mixin.typescale-style(
           "display-large",
           $font-size: 72rem,
-          $line-height: 72rem,
-          $font-variation-settings: "wght" 700
+          $line-height: 78rem,
+          $font-variation-settings: "wght" 900
         );
 
         grid-column: 1 / 2;
         grid-row: 1;
 
+        position: relative;
+
         margin-inline-start: 48px;
 
-        color: var(--md-ref-palette-secondary80);
+        color: transparent;
 
-        mix-blend-mode: difference;
+        background-clip: text;
+        background-position: 0% 0%;
+        background-repeat: no-repeat;
+        background-size: 100%;
+
+        animation: title-gradient 5s var(--md-sys-motion-spring-slow-effect) infinite alternate-reverse;
         z-index: 2;
 
+        &.overlay {
+          color: var(--md-ref-palette-primary20);
+
+          background: none;
+
+          animation: none;
+          mix-blend-mode: luminosity;
+          z-index: 3;
+        }
+
+        @keyframes title-gradient {
+          0% {
+            background-position: 0% 0%;
+            background-size: 100%;
+          }
+
+          50% {
+            background-position: 100% 0%;
+          }
+
+          100% {
+            background-position: 100% 100%;
+            background-size: 200%;
+          }
+        }
+
         @media screen and (max-width: 1200px) {
           @include mixin.typescale-style(
             "display-large",
-            $font-size: 60rem,
-            $line-height: 72rem,
-            $font-variation-settings: "wght" 600
+            $font-size: 72rem,
+            $line-height: 78rem,
+            $font-variation-settings: "wght" 800
           );
 
           margin-inline: 36px;
@@ -66,8 +99,8 @@
           @include mixin.typescale-style(
             "display-large",
             $font-size: 48rem,
-            $line-height: 60rem,
-            $font-variation-settings: "wght" 600
+            $line-height: 54rem,
+            $font-variation-settings: "wght" 900
           );
 
           grid-column: 1 / 3;
@@ -93,12 +126,19 @@
           backdrop-filter: blur(10px);
           filter: url(#noise-filter);
           mask-image: linear-gradient(to right, black 0%, transparent 60%);
+          mix-blend-mode: screen;
           z-index: 1;
         }
 
         &:nth-of-type(2) {
           z-index: 0;
         }
+
+        @media screen and (max-width: 840px) {
+          &:nth-of-type(1) {
+            mask-image: linear-gradient(to right, black 0%, transparent 100%);
+          }
+        }
       }
     }
 
@@ -297,3 +337,58 @@
     grid-column: span 4;
   }
 }
+
+.header-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+
+  .carousel-container .single {
+    h1 {
+      transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        transition: 5s var(--md-sys-motion-spring-slow-effect);
+      }
+
+      &:nth-of-type(2) {
+        transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-default-effect)
+          var(--md-sys-motion-spring-fast-effect-duration);
+      }
+    }
+  }
+}
+
+.header-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.header-enter-from,
+.header-leave-to {
+  opacity: 0;
+  transform: scale(0.985);
+
+  .carousel-container .single {
+    h1 {
+      opacity: 0;
+      transform: translateX(5%);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        opacity: 0;
+        transform: translateX(-25%);
+      }
+
+      &:nth-of-type(2) {
+        opacity: 0;
+        transform: scale(1.005);
+      }
+    }
+  }
+}

.vitepress/theme/styles/layouts/Article.scss

@@ -337,7 +337,7 @@
     }
 
     &:first-child .title-with-achor {
-      margin-block-start: 0px;
+      margin-block-start: 24px;
     }
 
     .title-with-achor {
@@ -350,6 +350,7 @@
         display: inline-block;
 
         line-height: 54px;
+        font-variation-settings: "wght" 600;
 
         border-radius: var(--md-sys-shape-corner-medium);
 
@@ -451,7 +452,12 @@
   }
 
   a {
-    text-decoration: underline solid;
+    text-decoration: underline 2px dotted;
+    text-underline-offset: 3px;
+
+    &:hover {
+      text-decoration-style: solid;
+    }
   }
 
   blockquote {

.vitepress/theme/styles/layouts/Default.scss

@@ -66,7 +66,8 @@
           animation: avatar-box-h3 var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial)
             var(--md-sys-motion-spring-fast-spatial-duration) both;
           overflow: hidden;
-          transition: color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect),
+          transition:
+            color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect),
             background-color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
           transform-origin: 0px 0px;
           z-index: 2;
@@ -119,7 +120,9 @@
           width: 200px;
 
           animation: avatar-box-span 60s linear infinite;
-          mask: linear-gradient(45deg, black, transparent), var(--via-svg-mask) 0 / 100% no-repeat;
+          mask:
+            linear-gradient(45deg, black, transparent),
+            var(--via-svg-mask) 0 / 100% no-repeat;
           mask-composite: intersect;
           mask-mode: alpha;
           opacity: 0.5;
@@ -169,6 +172,7 @@
         h1 {
           @include mixin.typescale-style("display-large");
 
+          font-variation-settings: "wght" 600;
           text-align: center;
           word-break: keep-all;
         }
@@ -254,3 +258,22 @@
     }
   }
 }
+
+.layout-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+}
+
+.layout-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+  transform: scale(0.99);
+}

.vitepress/theme/styles/layouts/NotFound.scss

@@ -30,8 +30,6 @@
     h2,
     a {
       @include mixin.typescale-style("display-small");
-
-      text-decoration: none;
     }
   }
 

.vitepress/theme/styles/main.scss

@@ -122,7 +122,8 @@ a {
 
   color: var(--md-sys-color-primary);
   letter-spacing: 0px;
-  text-underline-offset: 5px;
+  text-decoration: underline solid;
+  text-underline-offset: 6px;
 
   code {
     color: var(--md-sys-color-inverse-primary) !important;

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+COPY . /app
+
+RUN npm install
+
+EXPOSE 4173
+
+CMD ["npm", "run", "docs:preview"]

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "26.2.6(272)",
+  "version": "26.2.22(289)",
   "scripts": {
     "update-version": "bash ./scripts/update-version.sh",
     "docs:dev": "vitepress dev",
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.0",
     "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@mdit/plugin-align": "^0.23.0",
-    "@mdit/plugin-footnote": "^0.22.3",
-    "@mdit/plugin-tasklist": "^0.22.2",
+    "@mdit/plugin-align": "^0.23.1",
+    "@mdit/plugin-footnote": "^0.22.4",
+    "@mdit/plugin-tasklist": "^0.22.3",
     "markdown-it-anchor": "^9.2.0",
-    "sass-embedded": "^1.93.0",
-    "vitepress": "^2.0.0-alpha.15",
-    "vue": "^3.5.0"
+    "sass-embedded": "^1.97.3",
+    "vitepress": "^2.0.0-alpha.16",
+    "vue": "^3.5.28"
   }
 }

posts/markdown-examples.md

@@ -1,8 +1,8 @@
 ---
 title: "Markdown 扩展示例"
 description: "本页面展示了 VitePress 提供的一些内置 markdown 扩展功能。"
-color: ""
-impression: ""
+color: "#f53283"
+impression: "/assets/images/138124971_p0.webp"
 categories:
 tags:
   - markdown 语法

posts/关于这个主题的一些事.md

@@ -1,8 +1,8 @@
 ---
 title: "关于这个主题的一些事"
 description: ""
-color: "#59f3b3"
-impression: "/assets/images/133925125_p0.webp"
+color: "#0084ff"
+impression: "/assets/images/131559307_p0.webp"
 categories:
   - 随笔
 tags:

posts/设置开机自启动的 Jekyll 服务.md

@@ -1,8 +1,8 @@
 ---
 title: "设置开机自启动的 Jekyll 服务"
 description: "通过 systemd 实现一个开机自启的 Jekyll 服务，通常来说，这对使用 Jekyll 作为服务后端的网站很有用。"
-color: ""
-impression: ""
+color: "#aa0c2b"
+impression: "/assets/images/120678678_p0.webp"
 categories: 
   - 随笔
 tags:

scripts/update-version.sh

@@ -7,8 +7,8 @@ REMOTE="${1:-origin}"
 BRANCH="${2:-master}"
 
 echo "🚀 开始版本更新流程..."
-echo "  远程: ${REMOTE}/${BRANCH}"
-echo ""
+echo "远程: ${REMOTE}/${BRANCH}"
+echo "::>------------------------"
 
 # 获取当前提交数
 COMMIT_COUNT=$(git rev-list --count HEAD)
@@ -27,25 +27,32 @@ echo "📝 更新版本号..."
 # 使用 sed 更新 package.json 中的版本号
 # 匹配 "version": "..." 模式
 sed -i "s/\"version\": \".*\"/\"version\": \"${NEW_VERSION}\"/" package.json
-echo "   ✓ 版本已更新为: ${NEW_VERSION}"
+echo "版本将更新到: ${NEW_VERSION}"
+echo "::>------------------------"
 
 # Git 操作
 echo "📦 提交更改..."
 git add package.json
 git commit -m "chore(package): update to version ${NEW_VERSION}"
-echo "✓ 已提交: chore(package): update to version ${NEW_VERSION}"
+echo "已提交: chore(package): update to version ${NEW_VERSION}"
+echo "::>------------------------"
 
 echo "🏷️ 创建标签..."
 git tag "${NEW_VERSION}"
-echo "✓ 已创建标签: ${NEW_VERSION}"
+echo "已创建标签: ${NEW_VERSION}"
+echo "::>------------------------"
 
 echo "🌐 推送更改..."
 git push "${REMOTE}" "${BRANCH}"
-echo "✓ 已推送提交到 ${REMOTE}/${BRANCH}"
+echo "已推送提交到 ${REMOTE}/${BRANCH}"
+echo "::>------------------------"
 
 echo "🌐 推送标签..."
 git push "${REMOTE}" "${NEW_VERSION}"
-echo "✓ 已推送标签: ${NEW_VERSION}"
+echo "已推送标签: ${NEW_VERSION}"
+echo "::>------------------------"
 
+echo "==========================="
 echo "✅ 版本更新完成！"
 echo "新版本: ${NEW_VERSION}"
+echo "==========================="