今天试了试 astro,感觉真不错,文档整体阅读下来体验很舒服,跑起来也很快,一整个感觉很现代,而且 next 味好浓,next + tailwind 秒入门了~
- 项目结构 使用 astro 项目结构,阅读 astro 文档以了解项目结构。
- Prettier 格式化 这次试了试 prettier-plugin-lint-md 感觉挺好的,可以格式化 markdown 文件,遵循中文技术文档的写作规范。
- 从 hexo 迁移
多亏这篇文章:再见 Hexo,你好 Astro!
首先的问题是 link to 的迁移,因为 hexo 的 link 和 astro 的 page 冲突,需要使用内容集功能
不过好在 Astro 处理起来并不复杂。只需创建一个名为 post/[slug]/index.astro 的页面,并在此页面中处理链接,将其与 md 文件中的 permalink 字段进行映射即可。
2025.01.07 今天加了 husky 和 lint-staged
2025.01.17 今天加了 tags 页面
2025.01.18 今天加了 RSS 订阅
- 根据 https://docs.astro.build/en/recipes/rss/ 添加 RSS 订阅
- Storyblok-Astro Storyblok-Astro 是一个为 Astro 框架开发的 Storyblok CMS 集成工具。支持可视化编辑器、支持动态路由、内容管理集成
- Spotlight Spotlight 是 Sentry 的错误监控工具,可以监控 Astro 应用程序的错误,并提供详细的错误报告和解决方案,Spotlight 是一个专门为 Astro 应用程序开发的工具包。它可以通过一个简单的命令就能将 Spotlight 功能集成到 Astro 应用中。
- 白水推荐的 astro-loading-indicator,很方便地搞定加载提示
- astro-tooltips 一个简单的工具提示组件,可以方便地添加到 Astro 项目中。
- astro-icon 这个库可以让你在 astro 项目中使用 iconify 的图标,很方便。
- prettier-plugin-astro 这篇文章介绍了如何在 Astro 3.0 项目中设置 Prettier 来自动排序 Tailwind CSS 类。
感谢以下所有 astro 博客的仓库代码参考让我少走很多弯路~
/scripts/transformShokaConfig.ts
原 shoka 主题的分类配置是 yaml 格式,需要转换为 json 格式,方便 astro 使用。
category_map:
随笔: life
笔试面经: review
笔试复盘: exam-record
面经: interview
题目记录: coding-train
竞赛: contest
字节校园: bytedance
剑指offer: offer
项目集锦: project
笔记: note
青训营笔记: bytedance-note
算法: algorithm
后端: back-end
前端: front-end
JavaScript: javascript
React: react
CS基础: cs-basics
数据结构: data-structure
工具: tools
转换后
分类映射已成功转换: {
'随笔': 'life',
'笔试面经': 'review',
'笔试复盘': 'exam-record',
'面经': 'interview',
'题目记录': 'coding-train',
'竞赛': 'contest',
'字节校园': 'bytedance',
'剑指offer': 'offer',
'项目集锦': 'project',
'笔记': 'note',
'青训营笔记': 'bytedance-note',
'算法': 'algorithm',
'后端': 'back-end',
'前端': 'front-end',
JavaScript: 'javascript',
React: 'react',
'CS基础': 'cs-basics',
'数据结构': 'data-structure',
'工具': 'tools'
}