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