feat: 配置首页下划线

README.md

@@ -2,7 +2,7 @@
 
 “简单步骤与实用技巧”
 
-> 文档地址：[coder-xiaomo.github.io/tutorials/](coder-xiaomo.github.io/tutorials/)
+> 文档地址：[coder-xiaomo.github.io/tutorials/](https://coder-xiaomo.github.io/tutorials/)
 >
 > 开源地址：
 > [GitHub](https://github.com/coder-xiaomo/tutorials)

develop/Git 脚本.md

@@ -0,0 +1,47 @@
+
+```bash
+# 本地设置多远端
+git clone git@git.only4.work:coder-xiaomo/tutorials.git
+git remote add github  git@github.com:coder-xiaomo/tutorials.git
+git remote add gitee   git@gitee.com:coder-xiaomo/tutorials.git
+git remote add gitcode git@gitcode.com:coder-xiaomo/tutorials.git
+
+git remote add all           git@git.only4.work:coder-xiaomo/tutorials.git
+git remote set-url --add all git@github.com:coder-xiaomo/tutorials.git
+git remote set-url --add all git@gitee.com:coder-xiaomo/tutorials.git
+git remote set-url --add all git@gitcode.com:coder-xiaomo/tutorials.git
+
+# 拉取全部仓库代码
+git fetch --all
+git pull --all
+
+```
+
+`.git/config` 文件部分配置如下：
+
+```
+[branch "main"]
+	remote = all
+	merge = refs/heads/main
+
+[remote "origin"]
+	url = git@git.only4.work:coder-xiaomo/tutorials.git
+	fetch = +refs/heads/*:refs/remotes/origin/*
+[remote "github"]
+	url = git@github.com:coder-xiaomo/tutorials.git
+	fetch = +refs/heads/*:refs/remotes/github/*
+	pushurl = git@github.com:coder-xiaomo/tutorials.git
+[remote "gitee"]
+	url = git@gitee.com:coder-xiaomo/tutorials.git
+	fetch = +refs/heads/*:refs/remotes/gitee/*
+[remote "gitcode"]
+	url = git@gitcode.com:coder-xiaomo/tutorials.git
+	fetch = +refs/heads/*:refs/remotes/gitcode/*
+[remote "all"]
+	url = git@git.only4.work:coder-xiaomo/tutorials.git
+	fetch = +refs/heads/*:refs/remotes/all/*
+	url = git@github.com:coder-xiaomo/tutorials.git
+	url = git@gitee.com:coder-xiaomo/tutorials.git
+	url = git@gitcode.com:coder-xiaomo/tutorials.git
+
+```

docs/.vitepress/config.mts

@@ -1,10 +1,14 @@
 import { defineConfig } from 'vitepress'
+import { base } from '../env.mts'
 import { sidebar } from '../sidebar.mts'
 import { nav } from '../nav.mts'
 import {
   GitChangelog,
   GitChangelogMarkdownSection,
 } from '@nolebase/vitepress-plugin-git-changelog/vite'
+// import {
+//   InlineLinkPreviewElementTransform
+// } from '@nolebase/vitepress-plugin-inline-link-preview/markdown-it'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -14,18 +18,43 @@ export default defineConfig({
     },
 
     plugins: [
+      // [配置] 基于 Git 的页面历史
       GitChangelog({
         // 填写在此处填写您的仓库链接
         repoURL: () => 'https://github.com/coder-xiaomo/tutorials',
       }),
       GitChangelogMarkdownSection(),
     ],
+
+    optimizeDeps: {
+      exclude: [
+        // [配置] 行内链接预览
+        // '@nolebase/vitepress-plugin-inline-link-preview/client',
+        // [配置] 阅读增强
+        '@nolebase/vitepress-plugin-enhanced-readabilities/client',
+        'vitepress',
+        '@nolebase/ui',
+      ],
+    },
+    ssr: {
+      noExternal: [
+        // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 //
+        // [配置] 行内链接预览
+        // '@nolebase/vitepress-plugin-inline-link-preview',
+        // [配置] 阅读增强
+        '@nolebase/vitepress-plugin-enhanced-readabilities',
+        '@nolebase/ui',
+        // [配置] @theojs/lumen
+        // issue: https://github.com/Theo-Messi/lumen/issues/234
+        'dayjs',
+      ],
+    },
   },
 
   title: "就这么弄 (🚧 施工中)",
   description: "简单步骤与实用技巧",
 
-  base: '/tutorials/',
+  base: base,
   locales: {
     root: {
       label: '简体中文',
@@ -44,7 +73,8 @@ export default defineConfig({
     sidebar: sidebar,
 
     editLink: {
-      pattern: 'https://github.com/coder-xiaomo/tutorials/edit/main/docs/:path'
+      text: '在 GitHub 上编辑此页面',
+      pattern: 'https://github.com/coder-xiaomo/tutorials/edit/main/docs/:path',
     },
 
     socialLinks: [
@@ -77,8 +107,37 @@ export default defineConfig({
       provider: 'local'
     },
 
+    docFooter: {
+      prev: '上一篇',
+      next: '下一篇'
+    },
+
+    outline: {
+      label: '页面导航'
+    },
+
     lastUpdated: {
       text: '最近更新',
+      formatOptions: {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      }
     },
-  }
+
+    langMenuLabel: '多语言',
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '菜单',
+    darkModeSwitchLabel: '主题',
+    lightModeSwitchTitle: '切换到浅色模式',
+    darkModeSwitchTitle: '切换到深色模式'
+  },
+
+  // markdown: {
+  //   config(md) {
+  //     // 其他 markdown-it 配置... //
+  //     // [配置] 行内链接预览
+  //     // refer: https://nolebase-integrations.ayaka.io/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/getting-started
+  //     md.use(InlineLinkPreviewElementTransform)
+  //   }
+  // },
 })

docs/.vitepress/theme/components/Announcement.vue

@@ -0,0 +1,63 @@
+<template>
+    <div v-if="isShow" class="announcement-container">
+        <h3 class="announcement-title">{{ title }}</h3>
+        <p class="announcement-content">{{ content }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 公告栏创意来自: https://lumen.theojs.cn/guide/announcement
+
+const isShow = ref<boolean>(true)
+
+const title = ref<string>(
+    'hahaha'
+)
+
+const content = ref<string>(
+    'hahaha'
+)
+</script>
+
+<style scoped>
+.announcement-container {
+    background-color: #f0f0f0;
+    border-radius: 10px;
+
+    /* 窄屏 */
+    text-align: left;
+
+    width: min(80%, 360px);
+
+    padding: 10px 15px;
+
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 32px;
+    margin-bottom: 15px;
+}
+
+@media (min-width: 960px) {
+    .announcement-container {
+        /* 宽屏 */
+        text-align: unset;
+
+        width: 280px;
+
+        padding: 15px 20px;
+
+        margin-left: unset;
+        margin-right: unset;
+        margin-top: unset;
+        margin-bottom: 15px;
+    }
+}
+
+.announcement-title {
+    font-weight: bold;
+}
+
+.announcement-content {}
+</style>

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

@@ -4,23 +4,56 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
 import './custom.css'
+import Announcement from './components/Announcement.vue'
 import ArticleInfo from './components/ArticleInfo.vue'
+import { FooterData } from '../../home-footbar.mts'
+import {
+  HomeFooter,
+  HomeUnderline,
+  ShareButton
+} from '@theojs/lumen'
 import {
   NolebaseGitChangelogPlugin
 } from '@nolebase/vitepress-plugin-git-changelog/client'
+import {
+  LayoutMode,
+  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,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      // 首页公告栏
+      'home-hero-info-before': () => h(Announcement),
+      // 文档前内容
       'doc-before': () => h(ArticleInfo),
+      // [配置] 阅读增强
+      // 为较宽的屏幕的导航栏添加阅读增强菜单
+      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
+      // 为较窄的屏幕（通常是小于 iPad Mini）添加阅读增强菜单
+      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
+      // [配置] 首页 Footbar
+      'layout-bottom': () => h(HomeFooter, { Footer_Data: FooterData }),
+      // [配置] 侧栏分享按钮
+      'aside-outline-before': () => h(ShareButton, {
+        buttonIcon: 'fa6-solid:share-nodes', // 自定义图标 //
+        buttonText: '分享此页面', // 自定义按钮文本 //
+        copiedIcon: 'mdi:thumbs-up', // 自定义复制成功后的图标 //
+        copiedText: '链接已复制！' // 自定义复制成功后的文本 //
+      }),
     })
   },
   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 +69,40 @@ 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: '调整页面布局中页面的宽度，以适配不同的阅读习惯和屏幕环境。'
+            },
+          },
+        },
+      },
+      layoutSwitch: {
+        defaultMode: LayoutMode.BothWidthAdjustable,
+        pageLayoutMaxWidth: {
+          defaultMaxWidth: 96, // 60 - 100
+        },
+        contentLayoutMaxWidth: {
+          defaultMaxWidth: 90, // 60 - 100
+        }
+      },
+    } as Options)
+
+    // [配置] 首页下划线
+    // docs: https://lumen.theojs.cn/guide/homeunderline
+    app.component('Home', HomeUnderline)
   }
 } satisfies Theme

docs/components/contents.vue

@@ -29,6 +29,7 @@
 
 <script setup lang="ts">
 import { useRouter, DefaultTheme } from 'vitepress';
+import { base } from '../env.mts';
 
 const props = defineProps<{
     base?: string,
@@ -38,7 +39,8 @@ const props = defineProps<{
 const router = useRouter()
 
 function goTo(link: string) {
-    const target = (props.base || '') + link?.replace('.md', '.html')
+    const baseUrl = (base.endsWith('/') ? base.substring(0, base.length - 1) : base)
+    const target = baseUrl + (props.base || '') + link?.replace('.md', '.html')
     console.log('base', props.base)
     console.log('link', link)
     console.log('target', target)

docs/env.mts

@@ -0,0 +1,5 @@
+// 全局配置
+
+// 部署后网站的 base URL。
+// 注意：前后都带 /
+export const base = '/tutorials/'

docs/home-footbar.mts

@@ -0,0 +1,42 @@
+import type { FooterData as FooterDataType } from '@theojs/lumen'
+
+// [配置] 首页 Footbar
+export const FooterData: FooterDataType = {
+    // beian: { icp: '备案号', police: '公网安备号', showIcon: true },
+    author: {
+        name: 'coder-xiaomo', // 程序员小墨
+        // link: 'https://',
+    },
+    group: [
+        // {
+        //     title: '外部链接',
+        //     icon: 'bx:link', // `iconify`图标
+        //     color: 'rgba(255, 87, 51, 1)',
+        //     links: [
+        //         { name: '示例1', link: 'https://', icon: 'solar:book-bold' },
+        //         { name: '示例2', link: 'https://' }
+        //     ]
+        // },
+        {
+            title: '开源地址',
+            icon: 'bx:link',
+            color: 'rgba(255, 87, 51, 1)',
+            links: [
+                {
+                    name: 'GitHub',
+                    icon: 'octicon:mark-github-16',
+                    link: 'https://github.com/coder-xiaomo/tutorials',
+                },
+                {
+                    name: 'Gitee (码云)',
+                    link: 'https://gitee.com/coder-xiaomo/tutorials',
+                },
+                {
+                    name: 'GitCode',
+                    link: 'https://gitcode.com/coder-xiaomo/tutorials',
+                },
+
+            ]
+        }
+    ]
+}

docs/index.md

@@ -4,22 +4,23 @@ layout: home
 
 hero:
   name: "就这么弄"
-  text: "简单步骤与实用技巧"
+  text: "简单步骤"
+  textsuffix: "与实用技巧"
   image:
     src: /assets/logo.svg
     alt: VitePress
     style: "border-radius: 50%"
-  tagline: 时间应该更重要的事情
+  tagline: 你的时间应该去做更重要的事情
   actions:
     - theme: brand
       text: 进入教程
       link: /how-to/intro
-    - theme: alt
+    # - theme: alt
-      text: Markdown Examples
+    #   text: Markdown Examples
-      link: /markdown-examples
+    #   link: /markdown-examples
-    - theme: alt
+    # - theme: alt
-      text: API Examples
+    #   text: API Examples
-      link: /api-examples
+    #   link: /api-examples
 
 # features:
 #   - title: Feature A
@@ -30,6 +31,8 @@ hero:
 #     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
 
+<Home />
+
 ::: warning 🚧 施工中
 
 很高兴见到你！但很抱歉，这个项目还在施工中。

docs/nav.mts

@@ -2,11 +2,11 @@ import { DefaultTheme } from 'vitepress'
 
 export const nav: DefaultTheme.NavItem[] = [
     {
-        text: 'Home',
+        text: '首页',
         link: '/',
     },
     {
-        text: 'Home2',
+        text: '教程',
         link: '/how-to/intro',
         activeMatch: '/how-to/',
     },

package.json

@@ -8,9 +8,11 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "@theojs/lumen": "^5.4.0",
     "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"
   }