05-01 又是一次大更啊

1. 切换包管理器为pnpm，更新相应文件和README
2. 完善CDocInfo.vue，完善版权声明，并对文档头部区域做了美化
3. 侧边栏滚动更新，并额外对os做了适配。见： github.com/vuejs/vitepress/pull/5194
4. LocalNav标题新增动画
5. 更新小说《磊水》
6. 样式修改，主要更改了背景遮罩颜色，以提高可读性

Author: Lukoning

.github/workflows/deploy.yml

@@ -34,21 +34,21 @@ jobs:
         uses: actions/checkout@v5
         with:
           fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
-      # - uses: pnpm/action-setup@v4 # 如果使用 pnpm，请取消此区域注释
-      #   with:
-      #     version: 9
+      - uses: pnpm/action-setup@v4 # 如果使用 pnpm，请取消此区域注释
+        with:
+          version: 10
       # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
       - name: 初始化 Node.js
         uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: npm # 或 pnpm / yarn
+          cache: pnpm # 或 npm / yarn
       - name: 配置 Pages
         uses: actions/configure-pages@v4
       - name: 安装依赖
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: 构建 VitePress 页面
-        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
+        run: pnpm docs:build # 或 npm docs:build / yarn docs:build / bun run docs:build
       - name: 上传构建产物
         uses: actions/upload-pages-artifact@v3
         with:

README.md

@@ -9,10 +9,17 @@ LKN是Lukoning的缩写哦喵🌟！
 
 首先得有Node.js喵，建议安装版本24（LTS）或最新版喵，最低版本20喵
 
-克隆本仓库，然后在仓库根目录润这行神秘代码喵：
+猫猫喜欢pnpm姐姐喵~pnpm姐姐不在的话，请在corepack处召唤pnpm姐姐喵：
 
+```bash
+corepack enable
+corepack prepare pnpm@latest --activate
 ```
-npm ci
+
+克隆本仓库，然后在仓库根目录润这行神秘代码喵：
+
+```bash
+pnpm install --frozen-lockfile
 ```
 
 这样构建猫猫的依赖环境就完成了喵\~！
@@ -21,22 +28,22 @@ npm ci
 
 回归正话喵，可以开始构建猫猫了喵：
 
-```
-npm run docs:build
+```bash
+pnpm docs:build
 ```
 
 不出喵意料的话，猫猫十几秒后就构建成了喵，可以在`docs/.vitepress/dist`找到猫猫哦喵
 
 构建成了喵后，想在浏览器浏览猫猫呜喵？可以润以下代码，然后访问控制台输出的URL喵：
 
-```
-npm run docs:preview
+```bash
+pnpm docs:preview
 ```
 
 如不想构建，或者想要喵实时预览修改，也可以润以下代码喵：
 
-```
-npm run docs:dev
+```bash
+pnpm docs:dev
 ```
 
 此法可在局域网中使用个中形状的计算机访问喵\~でも此时不能搜索喵。

docs/.vitepress/components/CDocInfo.vue

@@ -4,10 +4,11 @@
 import { useNavigatorLanguage } from '@vueuse/core'
 import { computed, onMounted, shallowRef, useTemplateRef, watchEffect } from 'vue'
 import { useData } from 'vitepress'
+import VPBadge from 'vitepress/dist/client/theme-default/components/VPBadge.vue'
 
 defineOptions({ name: "CDocInfo" })
 
-const { theme, page, lang: pageLang } = useData()
+const { theme, page, lang: pageLang, frontmatter } = useData()
 const { language: browserLang } = useNavigatorLanguage()
 
 const timeRef = useTemplateRef('timeRef')
@@ -28,11 +29,11 @@ const updatedDatetime = shallowRef('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
-    const lang = theme.value.lastUpdated?.formatOptions?.forceLocale
+    const lang = theme.value.CDocInfo?.lastUpdated?.formatOptions?.forceLocale
       ? pageLang.value
       : browserLang.value
 
-    const option = theme.value.lastUpdated?.formatOptions ?? {
+    const option = theme.value.CDocInfo?.lastUpdated?.formatOptions ?? {
       dateStyle: 'medium',
       timeStyle: 'medium'
     }
@@ -51,26 +52,34 @@ onMounted(() => {
 
 <template>
   <div class="CDocInfo">
-    <p class="doc-info created-time">
-      {{ theme.lastUpdated?.createdText || 'Created time' }}:
-      <time ref="createdTimeRef" :datetime="createdIsoDatetime">{{ createdDatetime }}</time>
-    </p>
-    <p class="doc-info last-updated">
-      {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-      <time ref="timeRef" :datetime="updatedIsoDatetime">{{ updatedDatetime }}</time>
-    </p>
+      <VPBadge :type="'info'" class="doc-info author" v-if="frontmatter.author !== false">
+        {{ theme.CDocInfo?.authorText || 'Author' }}:
+        {{ frontmatter.author || theme.CDocInfo?.defaultAuthor || 'Unknown' }}
+      </VPBadge>
+      <VPBadge :type="'info'" class="doc-info created-time" v-if="frontmatter.createdDate !== false">
+        {{ theme.CDocInfo?.lastUpdated?.createdText || 'Created time' }}:
+        <time ref="createdTimeRef" :datetime="createdIsoDatetime">{{ createdDatetime }}</time>
+      </VPBadge>
+      <VPBadge :type="'info'" class="doc-info last-updated" v-if="frontmatter.lastUpdated !== false">
+        {{ theme.CDocInfo?.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
+        <time ref="timeRef" :datetime="updatedIsoDatetime">{{ updatedDatetime }}</time>
+      </VPBadge>
+      <VPBadge :type="'info'" class="doc-info license" v-if="frontmatter.license !== false && (frontmatter.license || theme.CDocInfo?.defaultLicense)">
+        {{ theme.CDocInfo?.licenseText || 'License' }}:
+        {{ frontmatter.license || theme.CDocInfo?.defaultLicense }}
+      </VPBadge>
+      <VPBadge :type="'info'" class="doc-info copyright" v-if="frontmatter.copyright !== false && (frontmatter.copyright || theme.CDocInfo?.defaultCopyright)">
+        {{ theme.CDocInfo?.copyrightText || 'Copyright Notice' }}:
+        {{ frontmatter.copyright || theme.CDocInfo?.defaultCopyright }}
+      </VPBadge>
   </div>
-
 </template>
 
 <style scoped>
 .CDocInfo {
-  margin-bottom: 16px;
+  margin-bottom: 4px;
 }
 .doc-info {
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
+  margin: 2px;
 }
 </style>

docs/.vitepress/components/LKNLocalNav.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useData } from 'vitepress'
 import { useLayout } from 'vitepress/dist/client/theme-default/composables/layout'
 import VPLocalNavOutlineDropdown from './LKNLocalNavOutlineDropdown.vue'
@@ -18,15 +18,26 @@ const { isHome, hasSidebar, headers, hasLocalNav } = useLayout()
 const { y } = useWindowScroll()
 
 const navHeight = ref(0)
+const showTitle = ref(false)
+
+// 滚动事件处理
+function onScroll() {
+  showTitle.value = window.scrollY > 350; //滚动阈值 px
+}
+
 
 onMounted(() => {
   navHeight.value = parseInt(
     getComputedStyle(document.documentElement).getPropertyValue(
       '--vp-nav-height'
     )
-  )
+  );
+  window.addEventListener('scroll', onScroll);
+  onScroll();
 })
 
+onUnmounted(() => window.removeEventListener('scroll', onScroll))
+
 const classes = computed(() => {
   return {
     VPLocalNav: true,
@@ -55,9 +66,11 @@ const classes = computed(() => {
           {{ theme.sidebarMenuLabel || 'Menu' }}
         </span>
       </button>
-      <span class="title">
-        {{ frontmatter.title || '' }}
-      </span>
+      <Transition name="title">
+        <span v-if="showTitle" class="title">
+          {{ frontmatter.title || '' }}
+        </span>
+      </Transition>
 
       <VPLocalNavOutlineDropdown :headers :navHeight />
     </div>
@@ -150,17 +163,31 @@ const classes = computed(() => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /*还有这种解法？*/
-  padding-top: 4px;
+  padding-top: 2px;
   text-align: center;
   letter-spacing: -0.02em;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 16px;
 }
 
 @media (min-width: 960px) {
   .title {
     display: none;
   }
 }
+
+.title-enter-active,
+.title-leave-active {
+  transition: opacity .2s, transform .3s;
+}
+
+.title-enter-from {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 10px));
+}
+.title-leave-to {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% - 10px));
+}
 </style>