✨️ 复制成功,转载请标注本文地址

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

270 字
1 分钟
自定义侧边栏组件操作步骤

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

注意,因为是静态网站,一些代码不要使用服务端渲染。## 步骤一:创建组件文件

src/components/widget/ 目录下创建新的 .astro 文件作为你的自定义组件。组件需要使用 WidgetLayout 包裹内容以保持统一样式,并接收 classstyle 两个 props 用于外部控制显示。## 步骤二:注册组件类型

打开 src/types/sidebarConfig.ts 文件,找到 WidgetComponentType 类型定义,在类型联合中添加你的自定义组件类型名称。## 步骤三:更新组件映射表

需要在三个侧边栏文件中分别添加你的组件:- 导入组件:在src/components/layout/ 目录下的 SideBar.astro文件顶部添加对新组件的导入语句

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

步骤四:配置启用组件#

打开 src/config/sidebarConfig.ts 文件,在 components 数组中添加一个新的配置对象。 就是让你饿卡片放在哪个位置显示

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
自定义侧边栏组件操作步骤
https://blog.z2m.store/posts/技术/自定义侧边栏组件操作步骤/
作者
深漂小鱼
发布于
2026-08-14
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
深漂小鱼
扫码关注公众号
公告
欢迎来到我的博客!点击上方中间按钮可直接进入聊天室。
统计
分类
标签
最新动态
站点统计
文章
42
分类
4
标签
14
总字数
72,969
运行时长
0
最后活动
0 天前
--%
本年还剩 -- 天
--%
本月还剩 -- 天
--%
本周还剩 -- 天

距离 --

--

--

站点信息
构建平台
Cloudflare Pages
博客版本
Firefly v6.15.0
文章许可
CC BY-NC-SA 4.0
工具