新增自定义侧边栏组件操作步骤

[CuteLeaf]

自定义侧边栏组件操作步骤

注意，因为是静态网站，一些代码不要使用服务端渲染。

步骤一：创建组件文件

在 src/components/widget/ 目录下创建新的 .astro 文件作为你的自定义组件。组件需要使用 WidgetLayout 包裹内容以保持统一样式，并接收 class 和 style 两个 props 用于外部控制显示。

步骤二：注册组件类型

打开 src/types/config.ts 文件，找到 WidgetComponentType 类型定义，在类型联合中添加你的自定义组件类型名称。

步骤三：更新组件映射表

需要在三个侧边栏文件中分别添加你的组件：

1. 导入组件：在src/components/layout/ 目录下的 SideBar.astro文件顶部添加对新组件的导入语句

2. 注册映射：在SideBar.astro文件中找到 componentMap 对象，添加你的组件类型名称到组件的映射关系

步骤四：配置启用组件

打开 src/config/sidebarConfig.ts 文件，在 components 数组中添加一个新的配置对象。