偶然在搜索网页时,发现一个看上去不错的网站,整体的风格很简洁,没有除去文章功能外花里胡哨的模块,对专注写博客的个人网站非常适合,顺着顶部一看,是 Vitepress 的主题。呀!搜了搜看并没有 Typecho 版本!于此同时发现主题源代码是 MIT 协议,既然在 Vibe Coding 的时代,那么就索性用 AI 进行移植吧!
引用站外地址,请注意甄别链接安全性主题安装
主题安装教程:
- 前往 主题仓库的 Releases 下载最新的
typecho-theme-curve-*.zip。 - 将压缩包解压到 Typecho 的 usr/themes/ 目录。压缩包内已经包含 curve 主题目录,不需要再次重命名。
- 在 Typecho 后台进入「控制台 → 外观」,启用 Curve。
- 进入「外观 → 设置外观」,按需完成主题配置。
主题特色
干净!整洁!专注于博客文章及内容的展示和呈现。在移植版本中保留了原主题大部分功能,也有对 Typecho 博客系统的特点对部分功能进行适配和优化。
- 明暗切换:支持手动调节和跟随当前系统模式。
- 懒加载:文章页内的图片与友链页的图片均采用懒加载。
- 右键菜单:全站自定义右键菜单,支持部分常用功能,其实就是为了统一主题样式。
- 首页分类切换:首页支持对不同的分类下的文章列表进行切换展示,不跳转到单独的分类页面呈现。
- 原生 Typecho 体验:沿用 Typecho 的文章、评论、嵌套回复、分类标签和权限体系,无需依赖额外评论或统计服务。
- 评论:移植版本采用 Typecho 自带评论系统,支持 IP 归属地和操作系统展示。
- 丰富的配置:站点信息、菜单、社交链接、主题色、字体、背景、Banner、评论与页脚内容等等。
- 后台可视化配置:主题适配的自定义配置,对配置进行分类、复杂配置可视化呈现与编辑、配置导入导出功能。
- ...(我也留个 todo 吧)
(部分节选来自于原作者主题介绍:新年新气象!基于 VitePress 开发一个新主题)
首页分类切换
原主题在首页点击分类标题时的逻辑是,点击之后跳转到具体的分类页面,但是这时候这个分类选择的小模块还在,并且选中的分类名会出现在首页左边,这样的实现我觉得很别扭...
原点击后的逻辑,跳转到分类页面,并且选中的分类名会出现在首页左边。
我的直觉告诉我,比较好的方式应该是点击分类标签后,直接在当前页面动态加载文章,并且在文章列表滑到下面之后,分类选择的小模块应该固定不动,方便用户及时切换分类。于是改为了下面这种形态。
首页直接切换分类的文章列表
Curve 拓展标签
原主题在文章中以丰富文章内容结构而拓展的一些原生 Markdown 不存在的一些语法模块,移植版主题同样进行保留,在文章编辑的顶部存在这些标签的插入形式。(拓展标签示例文章待更新)
文章编辑页拓展的 Curve 标签
头像状态展示
底部的 Logo 头像让我觉得还有什么东西可以往上加,于是乎想到可以放一个自定义状态上去,鼠标没有浮动在上方展示一个 emoji,浮动后展示一段标语。
头像状态展示
头像鼠标 Hover 状态标语
原生 Typecho 体验
原主题依托的 Vitepress 由于并不是动态网站,没有后台服务支撑,顾没有评论系统、访问量统计、动态配置更新等功能,评论基本都是使用第三方自部署的 Twikoo 等一些开源的评论系统。在移植过程中通通把这些能力转化为 Typecho 自有功能。
页面模板定制化
原主题的 友情链接、关于我们、文章归档、全部分类、全部标签 和 隐私协议 等页面,均在 Typecho 进行实现,使用时选择模板即可。同时在配置之后,将会在顶部菜单中自动呈现(后续考虑将顶部的菜单全部自定义配置化)。
选择各种模板
部分模板有特殊的样式(如友情链接的链接、关于我们的各模块的参数等),选择模板后内容为空的情况下,文章访问会有格式示例教程,方便进行配置。
模板示例配置教程
评论适配及优化
移植后主题使用 Typecho 自带的评论系统,并补齐评论缺失的样式,同时支持评论区的 IP 地区、操作系统和作者区分展示。
Typecho 自有评论
后台可视化配置
在做这一块的时候,我发现有些功能配置比较复杂,使用单纯的文本输入需要用一些复杂的语法,人工写起来麻烦,同时在解析时可能遇到一些匹配问题,所以索性将外观设置界面进行可视化改造。将配置项全部归类处理,可以方便跳转到想要的配置,同时复杂配置可以进行可视化新增和编辑,并且支持配置的导入与导出功能方便备份与恢复。
外观可视化配置
从 0 开始的移植
主包原来是有了解过一点 Typecho 的插件及主题开发,在 Vibe Coding 还没盛行的时候也手搓过一个 Cloudflare R2 Typecho Plugin 插件 。
在 AI 时代,模型已有知识的情况下对于各种博客系统主题的开发和插件开发、搭建对应的博客环境进行调试它完全能够胜任,在平常的 Vibe Coding 时比较需要人参与的地方还是验证阶段,这里说的并不是单元测试,而是真正在实际环境下的端到端验证,例如写的页面渲染出来之后是否所有页面符合要求?改动一些共用的组件后使用到这些组件的页面是否都渲染正常?一些难以预料到的边缘或特定的条件是否能够 Cover 验证?...当前的视觉模型应该比较难去辅助做到这些。
在实践过程中还发现面对这种大型的移植需求如果一次性让它全部进行,它大概率会仿照写一些类似的页面“忽悠你”,最好的方式是可以让他列出计划,有序的对每一种的页面进行移植并验证,然后再开启下一种页面的移植。在全部移植验证完之后,再来将一些想要的新功能给添加进来。
后记
目前本站一直在使用移植主题进行 Dogfood,在修复过好多轮 bug 之后用起来还是比较稳定,如果有发现新的 bug 欢迎提 issue 或 PR~。比较可惜的是原主题已经停更,如果你有好的功能想法的话也欢迎提 issue 或 PR~
暂无评论,欢迎留下第一条评论。