使用 Astro 和 MDX 构建现代个人博客
探索如何利用 Astro、Markdown 和轻量交互保留内容优先的结构,同时延续原来模板的玻璃质感、动效和阅读体验。
阅读博客 →近期文章
查看全部Astro 内容集合实践笔记
记录使用 Astro Content Collections 管理文章元数据、排序和静态路由时的几个要点。
重新打磨玻璃拟态卡片
玻璃效果不只是透明度,背景深度、边框和阴影共同决定了界面是否耐看。
使用 React 与 Tailwind CSS 构建现代博客
从一个交互式 React 模板出发,理解现代个人博客常见的内容结构、排版与组件组织方式。
用 Astro ClientRouter 平滑页面切换
为静态博客加入客户端路由后,可以减少整页刷新带来的闪动。
理解 Markdown 与富文本写作
Markdown 用轻量语法表达结构,让写作保持简单,同时又能生成清晰的网页内容。
扁平化社交图标的统一语言
社交按钮不一定需要复杂发光,统一轮廓、尺寸和状态反馈更重要。
精通 React Hooks
理解 useEffect、useMemo 与自定义 Hook 的使用方式,写出更清晰的 React 组件。
本地 Markdown 预览编辑器
在静态博客中保留一个轻量写作页,用于草稿记录和排版预览。
Sticky 侧栏的跟随感
使用 CSS sticky 可以让侧栏元素在滚动中停靠,同时保留回到原位的自然感。
为什么 Tailwind CSS 改变了界面开发
Utility-first CSS 让样式更贴近组件,也让小步调整界面的过程变得更直接。
测试博客加载更多交互
当文章数量增加后,列表页需要一种方式保持首屏轻量,同时允许继续浏览。
响应式博客布局检查清单
从桌面到手机,博客布局需要保证文字、卡片和导航都能稳定显示。
MDX 与组件化内容简介
MDX 让 Markdown 能直接使用组件,适合构建更具交互性的技术文章和文档。
Sirius 品牌视觉刷新
从旧名称切换到 Sirius 后,导航、底部和图标都需要形成新的主题一致性。
静态博客部署流程
Astro 构建后的 dist 目录可以部署到 GitHub Pages、Vercel、Netlify 或 Cloudflare Pages。