细节优化

ikenxuan · Sep 22, 2024 · 8b83e95 · 8b83e95
1 parent 1e13b23
commit 8b83e95
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath, URL } from 'node:url'
+import { cwd } from 'node:process'
 import { defineConfig } from 'vitepress'
 import { DefaultTheme } from 'vitepress/theme'
 import nav from './script/nav'
@@ -10,7 +10,7 @@ import taskLists from "markdown-it-task-lists"
 // mathjax3公式支持
 import mathjax3 from 'markdown-it-mathjax3'
 // 页脚
-import footnote_plugin from 'markdown-it-footnote'
+import MarkdownItFootnote from 'markdown-it-footnote'
 // 双向链接
 import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
 // 行内链接预览
@@ -34,6 +34,8 @@ import pwa from './script/pwa'
 import { withPwa } from "@vite-pwa/vitepress"
 // 代码组图标
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'
+// 懒加载模糊预览图
+import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
 
 export default
   withPwa(defineConfig({
@@ -58,21 +60,31 @@ export default
         // 公式
         md.use(mathjax3)
         // 脚注
-        md.use(footnote_plugin)
-        // 双向链接
-        md.use(BiDirectionalLinks())
+        md.use(MarkdownItFootnote)
         // 行内链接预览
         md.use(InlineLinkPreviewElementTransform)
         // 代码组图标
         md.use(groupIconMdPlugin)
       },
+      preConfig: (md) => {
+        // 双向链接
+        md.use(BiDirectionalLinks({
+          dir: cwd(),
+        }))
+        // 懒加载模糊预览图
+        md.use(UnlazyImages(), {
+          imgElementTag: 'NolebaseUnlazyImg',
+        })
+      },
       codeTransformers: [
         transformerTwoslash()
       ]
     },
     vite: {
       plugins: [
+        // 缩略图模糊哈希生成
         ThumbnailHashImages(),
+        // git提交历史记录
         GitChangelog({
           maxGitLogCount: 2000,
           // 要获取git日志的仓库
@@ -105,11 +117,20 @@ export default
       ssr: {
         noExternal: [
           '@nolebase/*',
+          'axios'
         ]
       }
     },
     vue: {
       template: {
+        transformAssetUrls: {
+          video: ['src', 'poster'],
+          source: ['src'],
+          img: ['src'],
+          image: ['xlink:href', 'href'],
+          use: ['xlink:href', 'href'],
+          NolebaseUnlazyImg: ['src'],
+        },
         compilerOptions: {
           isCustomElement: (tag) => tag === 'iconify-icon'
         },

diff --git a/.vitepress/theme/components/ChangeLogs.vue b/.vitepress/theme/components/ChangeLogs.vue
@@ -1,12 +1,16 @@
 <template>
-  <div v-if="loading">正在请求更新日志...</div>
-  <div v-else-if="error">获取更新日志失败，错误: {{ error }}</div>
-  <div v-else v-html="compiledMarkdown"></div>
+  <div>
+    <transition name="fade-slide" mode="out-in">
+      <div v-if="loading" key="loading" class="loading">处理中......</div>
+      <div v-else-if="error" key="error" class="error">获取更新日志失败，错误: {{ error }}</div>
+      <div v-else key="content" v-html="compiledMarkdown" class="content"></div>
+    </transition>
+  </div>
 </template>
 
 <script>
 import axios from 'axios';
-import {marked} from 'marked';
+import { marked } from 'marked';
 
 export default {
   props: {
@@ -47,4 +51,20 @@ export default {
     }
   }
 };
-</script>
+</script>
+
+<style>
+.fade-slide-enter-active, .fade-slide-leave-active {
+  transition: opacity 0.5s, transform 0.5s;
+}
+.fade-slide-enter, .fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(300px); /* 滑动效果 */
+}
+
+.loading, .error {
+  text-align: left;
+  font-size: 30px;
+  color: #000000;
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -63,6 +63,11 @@ import { inBrowser } from 'vitepress'
 import busuanzi from 'busuanzi.pure.js'
 // 首页公告栏
 import { Announcement } from '@theojs/lumen'
+// 缩略图模糊哈希生成
+import {
+  NolebaseUnlazyImg,
+} from '@nolebase/vitepress-plugin-thumbnail-hash/client'
+import '@nolebase/vitepress-plugin-thumbnail-hash/client/style.css'
 // 图标库
 import '@theojs/lumen/icon'
 //代码组图标样式
@@ -83,6 +88,7 @@ export default {
     app.component('Confetti', Confetti)
     app.component('ChangeLogs', ChangeLogs)
     app.component('Task', Task)
+    app.component('NolebaseUnlazyImg', NolebaseUnlazyImg)
     app.use(TwoslashFloatingVue as unknown as Plugin)
     app.use(NolebaseGitChangelogPlugin as Plugin)
     app.provide(InjectionKey, {

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@nolebase/markdown-it-bi-directional-links": "2.5.0",
+    "@nolebase/markdown-it-unlazy-img": "^2.5.0",
     "@nolebase/vitepress-plugin-enhanced-mark": "2.5.0",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "2.5.0",
     "@nolebase/vitepress-plugin-git-changelog": "2.5.0",
@@ -32,6 +33,8 @@
     "marked": "^14.1.2",
     "medium-zoom": "^1.1.0",
     "ncu": "^0.2.1",
+    "sass": "^1.79.3",
+    "typescript": "^5.6.2",
     "vite": "^5.4.7",
     "vite-plugin-pwa": "^0.20.5",
     "vitepress": "^1.3.4",

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,12 +11,12 @@
       "vitepress": [
         "node_modules/vitepress/types/index"
       ]
-    }
+    },
   },
   "include": [
     "**/.vitepress/**/*.ts",
     "**/.vitepress/**/*.mts",
-    "**/.vitepress/**/*.vue"
+    "**/.vitepress/**/*.vue",
   ],
   "exclude": [
     "node_modules"