feat: 配置首页下划线

docs/.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { base } from '../env.mts'
 import { sidebar } from '../sidebar.mts'
 import { nav } from '../nav.mts'
 import {
@@ -43,6 +44,9 @@ export default defineConfig({
         // [配置] 阅读增强
         '@nolebase/vitepress-plugin-enhanced-readabilities',
         '@nolebase/ui',
+        // [配置] @theojs/lumen
+        // issue: https://github.com/Theo-Messi/lumen/issues/234
+        'dayjs',
       ],
     },
   },
@@ -50,7 +54,7 @@ export default defineConfig({
   title: "就这么弄 (🚧 施工中)",
   description: "简单步骤与实用技巧",
 
-  base: '/tutorials/',
+  base: base,
   locales: {
     root: {
       label: '简体中文',

docs/.vitepress/theme/index.ts

@@ -6,6 +6,12 @@ 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'
@@ -34,6 +40,15 @@ export default {
       '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 }) {
@@ -85,5 +100,9 @@ export default {
         }
       },
     } 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,7 +4,8 @@ layout: home
 
 hero:
   name: "就这么弄"
-  text: "简单步骤与实用技巧"
+  text: "简单步骤"
+  textsuffix: "与实用技巧"
   image:
     src: /assets/logo.svg
     alt: VitePress
@@ -30,6 +31,8 @@ hero:
 #     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
 
+<Home />
+
 ::: warning 🚧 施工中
 
 很高兴见到你！但很抱歉，这个项目还在施工中。

package.json

@@ -8,6 +8,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "@theojs/lumen": "^5.4.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -15,4 +16,4 @@
     "@nolebase/vitepress-plugin-git-changelog": "^2.15.1",
     "vitepress": "^1.6.3"
   }
-}
+}