公告小部件配置

约 1466 字大约 5 分钟

2025-11-20

公告侧边栏配置说明

这里补充一下公告侧边栏组件的配置说明，其他配置项请参考基础定位配置。

{
		type: "announcement",
		enable: true,
		order: 2,
		position: "top",
		sidebar: "left",
		class: "onload-animation",
		animationDelay: 50,
},

我来详细解析公告侧边栏组件（type: "announcement"）的配置和使用方法，其他配置项请参考基础定位配置。

公告组件功能与特点

公告组件是博客侧边栏的重要功能之一，用于向访客展示重要通知、网站更新、活动信息等。这个组件通常位于个人资料下方，是博主与访客沟通的重要渠道。

1. 基本配置解析

type: "announcement": 指定组件类型为公告组件，这是固定值。
enable: true: 控制该组件是否显示，true 为显示，false 为隐藏。
order: 2: 设置组件显示顺序，数值越小越靠前。通常公告组件设置为 2，显示在个人资料组件之后。
position: "top": 设置组件在侧边栏内的定位方式，"top" 表示固定在顶部。
sidebar: "left": 设置组件所属侧边栏，"left" 为左侧栏，"right" 为右侧栏（需配合 position: "both"）。
class: "onload-animation": 组件的 CSS 类名，用于应用样式和动画效果。
animationDelay: 50: 组件加载动画的延迟时间（单位：毫秒），设置为 50 表示在个人资料组件后加载。

公告内容配置

公告组件的内容不是在 sidebarLayoutConfig 中配置的，而是在 announcementConfig 对象中配置。下面是公告内容的详细配置示例：

export const announcementConfig: AnnouncementConfig = {
	title: "Announcement", // 公告标题
	content: "Welcome to my blog! This is a sample announcement.", // 公告内容
	closable: true, // 允许用户关闭公告
	link: {
		enable: true, // 启用链接
		text: "Learn More", // 链接文本
		url: "/about/", // 链接 URL
		external: false, // 内部链接
	},
};

1. 标题配置 (`title`)

作用: 设置公告的标题，显示在公告顶部。
配置说明:
- 可以使用简洁有力的标题，如 "Announcement"、"通知"、"最新公告" 等。
- 长度适中，避免过长导致显示问题。
- 可以根据网站风格使用不同语言的标题。

2. 内容配置 (`content`)

作用: 设置公告的主要内容，显示在标题下方。
配置说明:
- 可以是重要通知、网站更新、活动信息等。
- 长度适中，避免过长影响页面美观。
- 支持纯文本，不支持 HTML 格式。

3. 可关闭配置 (`closable`)

作用: 控制是否允许用户关闭公告。
配置说明:
- true: 显示关闭按钮，用户可以手动关闭公告。
- false: 不显示关闭按钮，公告将一直显示。
- 对于重要通知，建议设置为 false，确保访客看到。

4. 链接配置 (`link`)

作用: 为公告添加可点击的链接，引导访客获取更多信息。
子配置项:
- enable: 布尔值，控制是否启用链接，true 为启用。
- text: 字符串，设置链接显示的文本，如 "Learn More"、"查看详情"。
- url: 字符串，设置链接的 URL 地址。
- external: 布尔值，设置链接是否为外部链接，true 为外部链接（在新标签页打开），false 为内部链接（在同一标签页打开）。

如何使用和调整

找到配置:
- 公告组件的位置配置在 src/config.ts 文件中的 sidebarLayoutConfig.components 数组中。
- 公告的内容配置在 src/config.ts 文件中的 announcementConfig 对象中。
调整位置和顺序:
- 在 sidebarLayoutConfig.components 数组中找到 type: "announcement" 的对象。
- 修改 order 值调整显示顺序。
- 修改 sidebar 值设置所在侧边栏。
- 修改 position 值设置定位方式。
调整内容和样式:
- 在 announcementConfig 对象中修改标题、内容、链接等内容。
- 在 announcementConfig.link 中配置公告链接。
调整动画效果:
- 修改 animationDelay 值调整加载动画延迟。

配置示例

示例 1：基本公告配置

// 位置配置
{
    type: "announcement",
    enable: true,
    order: 2,
    position: "top",
    sidebar: "left",
    class: "onload-animation",
    animationDelay: 50,
},

// 内容配置
export const announcementConfig: AnnouncementConfig = {
    title: "网站公告",
    content: "欢迎访问我的博客！这里会分享技术文章和生活感悟。",
    closable: true,
    link: {
        enable: true,
        text: "关于我",
        url: "/about/",
        external: false,
    },
};

示例 2：活动公告配置

export const announcementConfig: AnnouncementConfig = {
    title: "限时活动",
    content: "本站正在进行技术分享活动，欢迎投稿参与！",
    closable: false, // 重要公告，不允许关闭
    link: {
        enable: true,
        text: "参与活动",
        url: "https://example.com/activity",
        external: true, // 外部链接，在新标签页打开
    },
};

示例 3：更新通知配置

export const announcementConfig: AnnouncementConfig = {
    title: "网站更新",
    content: "博客已更新至 v2.0 版本，新增了标签分类功能和夜间模式。",
    closable: true,
    link: {
        enable: true,
        text: "查看更新日志",
        url: "/changelog/",
        external: false,
    },
};

注意事项

内容更新: 定期更新公告内容，确保信息时效性，避免过期公告仍然显示。
链接有效性: 确保公告中的链接是有效的，指向正确的地址。
用户体验: 对于重要通知，建议设置 closable: false，确保访客看到；对于一般信息，可以设置为可关闭，避免长期占用页面空间。
内容长度: 公告内容应简洁明了，避免过长影响页面美观。
多语言支持: 如果网站支持多语言，可以考虑为不同语言设置不同的公告内容。

常见使用场景

欢迎信息: 向新访客展示网站介绍和欢迎词。
活动通知: 宣布即将进行的活动或正在进行的活动。
网站更新: 通知访客网站功能更新或内容更新。
重要公告: 发布临时性重要通知，如服务器维护、内容迁移等。
友情链接推广: 推广合作伙伴或友情链接网站。

版权所有

版权归属：Matsuzaka-Yuki

许可证：署名 4.0 国际 (CC-BY-4.0)

部署

整体布局

Markdown

组织

高级