说实话,Typecho 搭配 Handsome 绝对算得上是独立博客圈里的“常青树”组合了。
但我估计大部分人跟我一样,买下这个主题或者搭好环境之后,前几个星期根本不是在写文章,而是天天顶着个黑眼圈在研究怎么改 CSS、怎么压加载速度。
在经历了无数次“F12 调试到凌晨四五点”的折腾后,我把手里这套用得最顺手的优化和调教方案整理了一下。如果你也嫌博客加载慢、或者觉得页面不够个性,这篇或许能帮你少踩几个坑。
🚀 为什么兜兜转转,最后还是选了它?
这几年静态博客(Hugo、Hexo)和各种新 CMS 满天飞,但真要用起来,我还是觉得动态博客最对胃口。
- Typecho 够轻: 纯净得像张白纸,服务器买个 1核1G 的学生机,跑起来依然轻轻松松。
- Handsome 够省心: 功能直接全给塞满了——时光机、头图、各种卡片、播放器,基本不用自己再去到处找插件拼凑。
🛠️ 我的“私房”调教与优化指南
为了让博客既能保持高颜值,又不会慢得像龟速,我主要动了这几个地方:
1. 速度优化:把加载时间硬生生压进 1 秒内
Handsome 功能确实多,但如果不做优化,那一堆 JS 和 CSS 压下来,小水管服务器是真的吃不消。
我的血泪建议:
静态资源全站分离:别把主题自带的 assets 文件夹全塞在本地服务器,乖乖丢到对象存储(COS/OSS)挂 CDN。
图片全员上云 + WebP:本地绝对不存图,全量上图床并转 WebP,打开速度肉眼可见地变快。
静态资源全站分离:别把主题自带的 assets 文件夹全塞在本地服务器,乖乖丢到对象存储(COS/OSS)挂 CDN。
图片全员上云 + WebP:本地绝对不存图,全量上图床并转 WebP,打开速度肉眼可见地变快。
2. 视觉微调:给文字一点“呼吸感”
原主题默认的排版有时候觉得字和字挤在一块。我在后台的“自定义 CSS”里常年塞着这几行代码,改完之后看着舒服多了:
/* 自定义文章内页排版,加点行高和字间距 */
.post-content p {
line-height: 1.8 !important;
letter-spacing: 0.05em;
margin-bottom: 1.5em;
}
/* 给代码块加个圆角和柔和阴影 */
pre code {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}如需要其他美化可参考