feat: 添加首页公告栏

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/index.ts

@@ -4,6 +4,7 @@ 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 {
   NolebaseGitChangelogPlugin
@@ -24,6 +25,9 @@ export default {
   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),
       // [配置] 阅读增强
       // 为较宽的屏幕的导航栏添加阅读增强菜单