自定义侧边栏组件操作步骤
270 字
1 分钟
自定义侧边栏组件操作步骤
自定义侧边栏组件操作步骤
注意,因为是静态网站,一些代码不要使用服务端渲染。## 步骤一:创建组件文件
在 src/components/widget/ 目录下创建新的 .astro 文件作为你的自定义组件。组件需要使用 WidgetLayout 包裹内容以保持统一样式,并接收 class 和 style 两个 props 用于外部控制显示。## 步骤二:注册组件类型
打开 src/types/sidebarConfig.ts 文件,找到 WidgetComponentType 类型定义,在类型联合中添加你的自定义组件类型名称。## 步骤三:更新组件映射表
需要在三个侧边栏文件中分别添加你的组件:- 导入组件:在src/components/layout/ 目录下的 SideBar.astro文件顶部添加对新组件的导入语句
- 注册映射:在
SideBar.astro文件中找到componentMap对象,添加你的组件类型名称到组件的映射关系
步骤四:配置启用组件
打开 src/config/sidebarConfig.ts 文件,在 components 数组中添加一个新的配置对象。 就是让你饿卡片放在哪个位置显示
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
相关文章智能推荐
1
博客增加时段问候实时时钟组件
技术2026-08-15
2
How to Test Your SD Card?如何测试你的SD卡?
技术2026-08-15
3
给你的静态博客网站增加管理后台
技术2026-08-15
4
butterfly安装rss插件
技术2026-08-11
5
VitePress 集成 Giscus 评论插件
技术2026-08-11
随机文章随机推荐












