From 7a1bffd4b11c302c8d7871202e7f937ee506b6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <codingzhang@126.com>
Date: Thu, 13 Mar 2025 23:31:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/Announcement.vue         | 63 +++++++++++++++++++
 docs/.vitepress/theme/index.ts                |  4 ++
 2 files changed, 67 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/Announcement.vue

diff --git a/docs/.vitepress/theme/components/Announcement.vue b/docs/.vitepress/theme/components/Announcement.vue
new file mode 100644
index 0000000..9d99b75
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 6ee1ebf..10fdcca 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/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),
       // [配置] 阅读增强
       // 为较宽的屏幕的导航栏添加阅读增强菜单