Back

astro theme resumeastro theme resume
/ Updated:
7 min read

Configs of Astro Theme Resume

前段时间写了个前端项目,一时兴起,就顺便把博客也翻新了一遍。
views | comments

When

前段时间写了个前端项目(React + Antd),感叹前端变化太快,开发体验已经比几年前学 Vue 好上不少了。一时兴起 (上瘾) ,就顺便把博客也翻新了一遍。然而过程还蛮曲折的,有些东西要推翻重来,前前后后花了一个多月,也是挺令人感叹的。

Why

这事倒是早就想做了,因为旧博客问题实在是不少:

  1. 框架为 Hexo,稍有过时,更新不够积极;
  2. 主题大多不是很满意;
  3. 使用的主题已经快3年不更新了(并且没找到别的好看的);
  4. 使用的主题有一些莫名其妙的 Bug,比如本地预览重复使用导致崩溃;
  5. 使用的主题自定义能力太弱,实现方式不太优雅;
  6. 使用的主题在脚本兼容方面不够友好;
  7. 与我的主域名耦合度不好,很容易造成割裂体验;
  8. 子域名导致的链接较长。

新的框架使用 Astro,简单体验下来有以下优点:

  1. 大量优质主题(但更新可能不怎么勤快);
  2. 主题与源码耦合,能够随意拆解、修改主题代码(但更新可能更为困难);
  3. 对 Typescript 极其友好(可能会有一堆类型报错问题);
  4. 导入调用体验很好,并且会有针对性优化,不再需要强行塞进 public 文件夹了
  5. 性能强悍,渲染速度快、访问流畅,懒加载技术立竿见影;
  6. 支持 MDX 语法,文档内也能够自定义组件和内容(暂时用不上。?);
  7. 支持 Web Component 和文件拆分、Slot,使得源码能够组件话,抽丝剥茧、方便复用;
  8. 框架的说明文档丰富好用;
  9. 生态极其强大,对主流框架/服务平台支持极其完善
  10. 开发模式会有开发者工具栏,调试省心省力,优化建议更是避免了疏漏。

缺点也在括号里。不过明显是利大于弊了。

What

好马配好鞍,除了新的框架外,我还配合了一些新的东西:

  1. 基于知名优秀主题 Astro Cactus 最新改进的 Astro Resume 主题;
  2. 采用了 Tailwind CSS,帮助我快速搭建组件、布局样式;
  3. 后端改为有服务属性的 Vercel,能够在后端完成渲染。

Where

新的框架顺利帮助我完成了主页和博客页面的无缝衔接,顺利成章地合并进主域名,博客页面也就改为了cworld.top/blog。希望新博客能让我多一些更新动力吧。

Who

合并后名称改为了 CWorld Site,毕竟是主域名嘛。

How

目前博客的翻新进度:

  • 更换框架
  • 更换主题
  • 修改主页
  • 修改关于界面
  • 添加折叠组件
  • 完善博客列表展示,加入头图预览
  • 完善详情页面头图组件
  • 对接后端,完成首次部署
  • 利用 CI/CD 实现全自动部署
  • 添加时间轴组件
  • 清洗友链数据
  • 添加友链组件
  • 清洗评论数据,迁移到新博客
  • 添加评论组件
  • 完善页脚信息
  • 添加浏览数、评论数统计组件
  • 关闭旧博客评论区
  • 将旧博客地址迁移到 blogv2.cworld.top
  • 添加旧域名跳转页面,实现文章直接跳转
  • 优化手机端顶部导航栏样式(为点击展开菜单式)
  • 优化图标存储位置和存储方式
  • 为部分内容添加图标,用以替换原有的文本描述
  • 添加社交卡片(实时加载粉丝数等)
  • 优化 RSS,添加简单样式和完整内容预览
  • 完善使用工具组件
  • 添加朋友圈组件
  • 添加项目组件,把我写的一些有脸面的项目放进去
  • 添加 GPG Key 板块, 证明是我写的代码
  • 添加版权组件
  • 添加打赏板块
  • 版权组件优化,添加打赏、复制链接、分享等简单功能
  • 添加前后文章快速跳转
  • 添加文章数统计
  • 添加目录指示高亮功能
  • 优化回顶按钮显示当前阅读百分比
  • 添加按年份归档展示文章功能
  • 绑定内容同步到部分社区/频道
  • 添加内容搜索功能
  • 优化顶部导航栏逻辑,实现下滚隐藏、上滚呼出
  • 优化文章内容展示样式
  • 优化文章内容表格的展示和手机端优化
  • 通知友链好友们修改信息

要改的东西真的挺多的。不过样式好看,写起来得心应手,还算是愉快的。

同以往一样,博客已开源至 github - cworld1,如果喜欢博客,欢迎 Fork 和 Star。但是请注意:

  • 不能保留与我有关的内容,包括但不限于:我的主页信息、所有博文、项目展示、友链、关于;
  • 根据 GPL-3 协议规定,项目应当仍然保持开源;
  • 可以不保留原仓库指向或文本说明。
  • Author: CWorld
  • Update date: May 17, 2024
  • Copyright: Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
  • Link: https://cworld.top/blog/theme-resume
Comment seems to stuck. Try to refresh?✨