feat: 引入 @nolebase/vitepress-plugin-enhanced-readabilities 插件以实现阅读增强

docs/.vitepress/config.mts

@@ -14,12 +14,30 @@ export default defineConfig({
     },
 
     plugins: [
+      // [配置] 基于 Git 的页面历史
       GitChangelog({
         // 填写在此处填写您的仓库链接
         repoURL: () => 'https://github.com/coder-xiaomo/tutorials',
       }),
       GitChangelogMarkdownSection(),
     ],
+
+    optimizeDeps: {
+      // [配置] 阅读增强
+      exclude: [
+        '@nolebase/vitepress-plugin-enhanced-readabilities/client',
+        'vitepress',
+        '@nolebase/ui',
+      ],
+    },
+    // [配置] 阅读增强
+    ssr: {
+      noExternal: [
+        // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 //
+        '@nolebase/vitepress-plugin-enhanced-readabilities',
+        '@nolebase/ui',
+      ],
+    },
   },
 
   title: "就这么弄 (🚧 施工中)",

docs/.vitepress/theme/custom.css

@@ -9,3 +9,8 @@
   /* 首页与顶部之间的距离加高 */
   padding-top: calc(var(--vp-nav-height) + 48px) !important;
 }
+
+/* [配置] 阅读增强 */
+.VPSocialLinks.VPNavBarSocialLinks.social-links {
+  margin-right: 0;
+}

docs/.vitepress/theme/index.ts

@@ -8,8 +8,15 @@ import ArticleInfo from './components/ArticleInfo.vue'
 import {
   NolebaseGitChangelogPlugin
 } from '@nolebase/vitepress-plugin-git-changelog/client'
+import {
+  NolebaseEnhancedReadabilitiesMenu,
+  NolebaseEnhancedReadabilitiesScreenMenu,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
+import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
+import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
 
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
+import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 
 export default {
   extends: DefaultTheme,
@@ -17,10 +24,16 @@ export default {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
       'doc-before': () => h(ArticleInfo),
+      // [配置] 阅读增强
+      // 为较宽的屏幕的导航栏添加阅读增强菜单
+      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
+      // 为较窄的屏幕（通常是小于 iPad Mini）添加阅读增强菜单
+      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
     })
   },
   enhanceApp({ app, router, siteData }) {
     // ...
+    // [配置] 基于 Git 的页面历史
     app.use(NolebaseGitChangelogPlugin, {
       // see: https://nolebase-integrations.ayaka.io/pages/zh-CN/integrations/vitepress-plugin-git-changelog/configure-ui
       locales: {
@@ -36,5 +49,27 @@ export default {
         },
       }
     })
+
+    // [配置] 阅读增强
+    app.provide(InjectionKey, {
+      // refer: node_modules/@nolebase/vitepress-plugin-enhanced-readabilities/dist/locales/index.mjs
+      locales: { // 配置国际化 //
+        'zh-CN': { // 配置简体中文 //
+          title: {
+            title: '阅读增强插件',
+          },
+          layoutSwitch: {
+            titleHelpMessage: '调整页面布局样式，以适配不同的阅读习惯和屏幕环境。',
+            optionOriginalWidthHelpMessage: '默认布局宽度',
+            contentLayoutMaxWidth: {
+              titleHelpMessage: '调整页面布局中内容区域的宽度，以适配不同的阅读习惯和屏幕环境。'
+            },
+            pageLayoutMaxWidth: {
+              titleHelpMessage: '调整页面布局中页面的宽度，以适配不同的阅读习惯和屏幕环境。'
+            },
+          },
+        },
+      }
+    } as Options)
   }
 } satisfies Theme

package-lock.json

@@ -9,6 +9,7 @@
         "vue": "^3.5.13"
       },
       "devDependencies": {
+        "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.15.1",
         "@nolebase/vitepress-plugin-git-changelog": "^2.15.1",
         "vitepress": "^1.6.3"
       }
@@ -743,6 +744,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/@iconify-json/carbon": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/carbon/-/carbon-1.2.8.tgz",
+      "integrity": "sha512-6xh4YiFBz6qoSnB3XMe23WvjTJroDFXB17J1MbiT7nATFe+70+em1acRXr8hgP/gYpwFMHFc4IvjA/IPTPnTzg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/icon-park-outline": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park-outline/-/icon-park-outline-1.2.2.tgz",
+      "integrity": "sha512-7VkMWOZTIMNkC9+oAL4I5kVlVC5Pq3nQpruZ4E3cLyKaeV95gaUrEilUkvGW71fgsFYCBWAmOZ3KpM4ux0j0zA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/octicon": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/@iconify-json/octicon/-/octicon-1.2.5.tgz",
@@ -829,6 +850,22 @@
         "vitepress": "^1.5.0 || ^2.0.0-alpha.1"
       }
     },
+    "node_modules/@nolebase/vitepress-plugin-enhanced-readabilities": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmmirror.com/@nolebase/vitepress-plugin-enhanced-readabilities/-/vitepress-plugin-enhanced-readabilities-2.15.1.tgz",
+      "integrity": "sha512-M02A54mM8nQch8jyuzHOYJGvn/fr5Ihz2a82TnzZNbVDrrKXEKAOf9LmcidLUVPwG/Z0hE5dQA8y0EEZHgd5TA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify-json/carbon": "^1.2.8",
+        "@iconify-json/icon-park-outline": "^1.2.2",
+        "@nolebase/ui": "^2.15.1",
+        "less": "^4.2.2"
+      },
+      "peerDependencies": {
+        "vitepress": "^1.5.0 || ^2.0.0-alpha.1"
+      }
+    },
     "node_modules/@nolebase/vitepress-plugin-git-changelog": {
       "version": "2.15.1",
       "resolved": "https://registry.npmmirror.com/@nolebase/vitepress-plugin-git-changelog/-/vitepress-plugin-git-changelog-2.15.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.15.1",
     "@nolebase/vitepress-plugin-git-changelog": "^2.15.1",
     "vitepress": "^1.6.3"
   }