1
export const announcementConfig: AnnouncementConfig = {
2
  title: "公告", // 公告标题
3
  content: "欢迎来到我的博客！这是一则示例公告。", // 公告内容
4
  closable: true, // 允许用户关闭公告
5
  link: {
6
    enable: true, // 启用链接
7
    text: "了解更多", // 链接文本
8
    url: "/about/", // 链接 URL
9
    external: false, // 内部链接
10
  },
11
};

1
export const announcementConfig: AnnouncementConfig = {
2
  title: "欢迎",
3
  content: "欢迎来到我的个人博客！这里分享技术文章和生活感悟。",
4
  closable: true,
5
  link: {
6
    enable: true,
7
    text: "了解我",
8
    url: "/about/",
9
    external: false,
10
  },
11
};

1
export const announcementConfig: AnnouncementConfig = {
2
  title: "更新通知",
3
  content: "网站已更新到 v2.0 版本，新增了多项功能！",
4
  closable: true,
5
  link: {
6
    enable: true,
7
    text: "查看更新日志",
8
    url: "/changelog/",
9
    external: false,
10
  },
11
};

1
export const announcementConfig: AnnouncementConfig = {
2
  title: "重要提醒",
3
  content: "网站将于今晚 22:00-24:00 进行维护，期间可能无法访问。",
4
  closable: false, // 重要提醒不可关闭
5
  link: {
6
    enable: false, // 不需要链接
7
    text: "",
8
    url: "",
9
    external: false,
10
  },
11
};

1
export const announcementConfig: AnnouncementConfig = {
2
  title: "新项目发布",
3
  content: "我的新项目已经发布到 GitHub！",
4
  closable: true,
5
  link: {
6
    enable: true,
7
    text: "查看项目",
8
    url: "https://github.com/username/project",
9
    external: true, // 外部链接
10
  },
11
};

1
export const announcementConfig: AnnouncementConfig = {
2
  title: "公告", // 公告标题
3
  content: "欢迎来到我的博客！迅雷APP搜索：【鹏摇星海】，即可获取网盘所有内容", // 公告内容
4
  icon: "fa6-solid:bullhorn", // 公告图标
5
  type: "success", // 公告类型：info, warning, success, error
6
  closable: false, // 允许用户关闭公告
7
  link: {
8
    enable: false, // 启用链接
9
    text: "", // 链接文本
10
    url: "", // 链接 URL
11
    external: false, // 内部链接
12
  },
13
};

1
export type AnnouncementConfig = {
2
  title?: string; // 公告栏标题
3
  content: string; // 公告栏内容
4
  icon?: string; // 公告栏图标
5
  type?: "info" | "warning" | "success" | "error"; // 公告类型
6
  closable?: boolean; // 是否可关闭
7
  link?: {
8
    enable: boolean; // 是否启用链接
9
    text: string; // 链接文字
10
    url: string; // 链接地址
11
    external?: boolean; // 是否外部链接
12
  };
13
};

1
enum I18nKey {
2
  // ....省略
3
  publishedAt = "publishedAt",
4
  license = "license",
5

6
  pinned = "pinned",
7

8
  series = "series",
9

10
  friends = "friends",
11

12
  donate = "donate",
13

14
  announcement = "announcement",
15
  announcementClose = "announcementClose",
16
}
17

18
export default I18nKey;

1
  // en.ts
2
  [Key.announcement]: "Announcement",
3
  [Key.announcementClose]: "Close",
4

5
  // es.ts
6
    [Key.announcement]: "Anuncio",
7
  [Key.announcementClose]: "Cerrar",
8

9
    // id.ts
10
    [Key.announcement]: "Pengumuman",
11
  [Key.announcementClose]: "Tutup",
12

13
    // ja.ts
14
    [Key.announcement]: "お知らせ",
15
  [Key.announcementClose]: "閉じる",
16

17
    // ko.ts
18
    [Key.announcement]: "공지사항",
19
  [Key.announcementClose]: "닫기",
20

21
    // th.ts
22
    [Key.announcement]: "ประกาศ",
23
  [Key.announcementClose]: "ปิด",
24

25
    // tr.ts
26
    [Key.announcement]: "Duyuru",
27
  [Key.announcementClose]: "Kapat",
28

29
    // vi.ts
30
    [Key.announcement]: "Thông báo",
31
  [Key.announcementClose]: "Đóng",
32

33
    // zh_CN.ts
34
    [Key.announcement]: "公告",
35
  [Key.announcementClose]: "关闭",
36

37
     // zh_TW.ts
38
     [Key.announcement]: "公告",
39
   [Key.announcementClose]: "關閉",

1
---
2
import { Icon } from "astro-icon/components";
3
import { announcementConfig } from "@/config/announcementConfig";
4
import I18nKey from "@/i18n/i18nKey";
5
import { i18n } from "@/i18n/translation";
6
import WidgetLayout from "./WidgetLayout.astro";
7

8
const config = announcementConfig;
9

10
interface Props {
11
  class?: string;
12
  style?: string;
13
}
14
const className = Astro.props.class;
15
const style = Astro.props.style;
16

17
// 根据公告类型确定样式类
18
const getTypeClass = (type: string | undefined) => {
19
  switch (type) {
20
    case "info":
21
      return "bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-900 dark:border-blue-300 dark:text-blue-200";
22
    case "warning":
23
      return "bg-yellow-100 border-yellow-500 text-yellow-700 dark:bg-yellow-900 dark:border-yellow-300 dark:text-yellow-200";
24
    case "success":
25
      return "bg-green-100 border-green-500 text-green-700 dark:bg-green-900 dark:border-green-300 dark:text-green-200";
26
    case "error":
27
      return "bg-red-100 border-red-500 text-red-700 dark:bg-red-900 dark:border-red-300 dark:text-red-200";
28
    default:
29
      return "bg-gray-100 border-gray-500 text-gray-700 dark:bg-gray-800 dark:border-gray-300 dark:text-gray-200";
30
  }
31
};
32
---
33

34

35
<WidgetLayout
36
    name={config.title || i18n(I18nKey.announcement)}
37
    id="announcement"
38
    class={className}
39
    style={style}
40
>
41
    <div class={`announcement-container border-l-4 p-4 rounded ${getTypeClass(config.type)}`}>
42
        <!-- 公告栏图标和标题 -->
43
        <div class="flex items-center gap-2 mb-2">
44
            {config.icon && <Icon name={config.icon} class="text-lg" />}
45
            {config.title && <h3 class="font-bold">{config.title}</h3>}
46
        </div>
47

48
        <!-- 公告栏内容 -->
49
        <div class="announcement-content mb-3">
50
            {config.content}
51
        </div>
52

53
        <!-- 可选链接和关闭按钮 -->
54
        <div class="flex items-center justify-between gap-3">
55
            <div>
56
                {
57
                    config.link && config.link.enable !== false && (
58
                        <a
59
                            href={config.link.url}
60
                            target={config.link.external ? "_blank" : "_self"}
61
                            rel={
62
                                config.link.external
63
                                    ? "noopener noreferrer"
64
                                    : undefined
65
                            }
66
                            class="announcement-link font-medium underline"
67
                        >
68
                            {config.link.text}
69
                        </a>
70
                    )
71
                }
72
            </div>
73

74
            {
75
                config.closable && (
76
                    <button
77
                        class="announcement-close"
78
                        onclick="closeAnnouncement()"
79
                        aria-label={i18n(I18nKey.announcementClose)}
80
                    >
81
                        <Icon name="fa6-solid:xmark" class="text-sm" />
82
                    </button>
83
                )
84
            }
85
        </div>
86
    </div>
87
</WidgetLayout>
88

89
<script>
90
    // 扩展 Window 接口以包含 closeAnnouncement 方法
91
    declare global {
92
        interface Window {
93
            closeAnnouncement: () => void;
94
        }
95
    }
96

97
    function closeAnnouncement() {
98
        // 通过data-id属性找到整个widget-layout元素
99
        const widgetLayout = document.querySelector(
100
            'widget-layout[data-id="announcement"]',
101
        );
102
        if (widgetLayout) {
103
            // 隐藏整个widget-layout元素
104
            (widgetLayout as HTMLElement).style.display = "none";
105
            // 保存关闭状态到localStorage
106
            localStorage.setItem("announcementClosed", "true");
107
        }
108
    }
109

110
    // 页面加载时检查是否已关闭
111
    document.addEventListener("DOMContentLoaded", function () {
112
        const widgetLayout = document.querySelector(
113
            'widget-layout[data-id="announcement"]',
114
        );
115
        if (
116
            widgetLayout &&
117
            localStorage.getItem("announcementClosed") === "true"
118
        ) {
119
            (widgetLayout as HTMLElement).style.display = "none";
120
        }
121
    });
122

123
    // 使公告栏函数全局可用
124
    window.closeAnnouncement = closeAnnouncement;
125
</script>

1
---
2
import type { MarkdownHeading } from "astro";
3
import Announcement from "./Announcement.astro";
4
import Categories from "./Categories.astro";
5
import Profile from "./Profile.astro";
6
import Series from "./Series.astro";
7
import Tag from "./Tags.astro";
8
import TOC from "./TOC.astro";
9

10
interface Props {
11
  class?: string;
12
  headings?: MarkdownHeading[];
13
  series?: string;
14
}
15

16
const className = Astro.props.class;
17
const headings = Astro.props.headings;
18
const series = Astro.props.series;
19
---
20
<div id="sidebar" class:list={[className, "w-full"]}>
21
    <div class="flex flex-col w-full gap-4 mb-4">
22
        <Profile></Profile>
23
    </div>
24
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
25
        <div id="series" class="flex flex-col w-full gap-4">
26
            { series && <Series series={ series }></Series> }
27
        </div>
28
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
29
        <Announcement></Announcement>
30
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
31
    </div>
32
</div>