最近网站从 WordPress 迁移到了 Typecho,前前后后花费了近两周的时间,在这里记录一下 Typecho 的改造过程~
本站使用 handsome 主题,主题版本为 v9.2.1 Pro。
一、插件
名称 | 描述 | 版本 | 教程 & 下载地址 |
---|---|---|---|
AutoTags | 标签自动生成插件 | 1.0.0 | DT27 |
BaiduSubmit | 百度结构化插件魔改版——SQLite | 0.7 | 老高 & 迷你日志 |
CodePrettify | 基于 prismjs 的代码语法高亮插件可显示语言类型、行号,有复制功能 | 2.1.5 | Xcnte |
CommentPush | 评论通知推送多服务 | 1.7.1 | GitHub |
Copyright | Copyright for Typecho | 1.0.4 | GitHub |
DPlayer | DPlayer for Typecho | 1.1.0 | GitHub |
Handsome | handsomePro 唯一配套插件 | 8.0.0 | 友人C |
HoerMouse | 炫彩鼠标 | 1.3.0 | Hoe |
MarkdownParse | 更快、更全的 Markdown 解析插件 | 1.3.0 | GitHub |
SmartSpam | 智能评论过滤器,让机器人彻底远离你! | 2.6.0 | Yovi |
zbgray | 整站变灰 | 1.0.0 | zbgray.zip |
XQLocation | IP 属地显示 | 1.1.0 | 晓晴博客 |
二、修改网站底部信息
打开 ./usr/theme/handsome/component/footer.php
删除以下代码:
进入主题外观设置,开发者设置
-自定义 CSS
,添加以下代码:
进入主题外观设置, 开发者设置
-博客底部左侧信息
,添加以下代码:
进入主题外观设置, 开发者设置
-博客底部右侧信息
,添加以下代码:
三、评论区文本框打字特效
进入主题外观设置, 开发者设置
-自定义 JavaScript
,添加以下代码:
四、扩充评论区表情包
点击此处下载压缩包。
1.复制owo.json
到./usr/themes/handsome/usr
目录下;
2.复制目录paopao
和weibo
到./usr/themes/handsome/assets/img/emotion
目录下;
3.进入主题外观设置,开发者设置
-自定义 CSS
,添加以下代码:
4.清除缓存并刷新网页。
本功能由 Xcnte 提供。
五、网站页面预加载——instantpage.js
从 GitHub 项目中下载instantpage.js
并上传到自己服务器,进入主题外观设置,开发者设置
-自定义输出 body 尾部的HTML代码
,添加以下代码:
例如:
六、文章内嵌入 B 站视频
进入主题外观设置,开发者设置
-自定义 CSS
,添加以下代码:
嵌入视频时,在 B 站视频页面找到嵌入代码,例如:
给iframe
这个标签添加class="iframe_video"
,例如:
这样嵌入的视频默认清晰度是360P,实在是有点糊= =,并且想要切换到其它分辨率的话必须跳转到 B 站。若想提升清晰度并且不跳转 B 站播放,可以在src=""
的结尾添加参数&high_quality=1
,例如:
这样的话,默认清晰度就改变为非 B 站大会员的最高清晰度,例如:
- 原视频清晰度有360P、480P、720P,则外链播放器默认为最高的720P;
- 原视频清晰度有360P、480P、720P、1080P,则外链播放器默认为最高的1080P;
- 原视频清晰度有360P、480P、720P、1080P、1080P+,则外链播放器默认为1080P。
但需要注意的是,加入参数&high_quality=1
后,若用户未登录 B 站,则默认清晰度是480P,点击清晰度切换的按钮会提示“切换失败”。另外,这里的登录指的不是在 B 站官网登录,而是在优优教程网,打开该网址后,在播放器的右下角切换分辨率至高清 720P
或高清 1080P
,会弹出登录框,考虑到安全问题,请扫描二维码登录,登录后就可以以非大会员的最高清晰度播放所有加入了参数&high_quality=1
的 B 站视频啦~
还有一种登录方法,个人觉得更好一些,起码不需要跳转到外站。
七、Typecho 后台登录页美化
点击此处下载Typecho-login-page-modification.zip
,用解压后的文件替换./admin/login.php
和./admin/css/style.css
即可。
登录页背景图默认使用微软 Bing 搜索引擎的每日一图,若想更改背景图或者使用自己的 API 可以自行修改./admin/css/style.css
文件中的两处background-image:url(https://area.sinaapp.com/bingImg/);
,搭建 Bing 每日一图 API 的教程如下:
本功能由小马奔腾提供。
八、DIY 博客 logo(左上角)
访问 NameCheap 设计后缀为.svg
的网站 logo,如果没有喜欢的图标,可以结合阿里巴巴矢量图标库进行设计。
设计完成后,复制.svg
文件的内容,进入主题外观设置,粘贴到初级设置
-日间模式下博客logo的HTML结构
中即可。
本站的 logo 为:
详细教程可以参考 Naraku 和 kamezzz 的文章。
九、随机歌单
在 ./usr/themes/handsome/libs/interface/Get.php
的204行插入以下代码即可:
作为对比,修改前(第189行~第206行):
修改后(第189行~第208行):
十、在右侧边栏中显示“访客总数”和“响应耗时”
打开./usr/themes/handsome/libs/Content.php
,将以下代码添加至class Content {...}
前:
之后打开./usr/themes/handsome/component/sidebar.php
,根据注释找到博客信息
部分,在其中添加以下代码即可:
十一、修复 Typecho 后台“管理评论”页面图片超出显示范围的问题
打开 ./admin/css/style.css
,在最后添加以下代码:
十二、本地图片云存储(镜像)加速
使用腾讯云对象存储(COS)和内容分发网络(CDN)。
配置 COS
打开 控制台
-对象存储
,创建一个私有读取权限的 COS 存储桶,进入 基础设置-回源设置
,添加一条回源规则,配置如下图所示:

配置 CDN
打开 控制台
-内容分发网络
-域名管理
-添加域名
,填入以下信息:
- 加速域名:填写存放资源的域名,如
cdn.angustar.com
- 源站配置:选择
COS源
,并在下面源站地址
处点击下拉框选择刚才创建的 COS,打开私有存储桶访问
- 服务配置:按以下表格配置缓存
类型 | 内容 | 缓存行为 |
---|---|---|
文件类型 | php;jsp;asp;aspx | 不缓存 |
文件夹 | /usr/uploads | 缓存30天,强制缓存 |
文件夹 | /usr/themes/handsome/assets/img | 缓存30天,强制缓存 |
文件类型 | css;js | 缓存30天,强制缓存 |
文件类型 | jpg;jpeg;png;bmp;gif;ico | 缓存30天,强制缓存 |
进入创建的CDN进行配置,主要配置以下几个地方:
- 访问控制
- 防盗链配置:
*.angustar.com
,angustar.com
- IP访问限频配置:根据 requests 数量来配置,我设置为
50QPS
- 下行限速配置:根据情况设置,我设置为
10240KB/s
- 防盗链配置:
- HTTPS配置
- HTTPS配置:自行配置证书
- HTTP2.0配置:打开
- TLS版本配置:关闭
TLSv1.0
,开启TLSv1.1/1.2/1.3
- 高级配置
- 带宽封顶配置
- 带宽阈值:10Mbps
- 超出阈值处理:访问返回404
- Response Header配置:
- 头部操作:设置
- 头部参数:
Access-Control-Allow-Origin
- 头部取值:
*
- 智能压缩:打开
- 带宽封顶配置
主题外观配置
进入主题外观设置,速度优化
-本地图片云存储(镜像)加速
中填入 http(s)://加速域名 | QCLOUD
,如:https://cdn.angustar.com | QCLOUD
。
刷新一下博客,如果可以在 COS 存储桶中看到缓存的主题静态文件目录 ./usr/themes/handsome/
,即说明配置成功。
十三、Travelling
https://github.com/volfclub/travellings
十四、IP 属地显示
将<?php XQLocation_Plugin::render($comments->ip); ?>
添加至文件usr/themes/handsome/component/comments.php
对应位置处即可:
十五、感想
从 WordPress 迁移至 Typecho 已经近两周了,不得不说,Typecho 的速度真的很快,对系统资源的占用比 WordPress 小很多。
另外,handsome 主题也非常棒,集成了很多实用功能,入股不亏哈哈哈哈!正如那句话所说,“Typecho 的主题只有两种,handsome 和其它”。私以为,既是 Typecho 成就了 handsome,也是 handsome 成就了 Typecho。
基本折腾完啦,真爽。
版权属于:Angus
本文链接:https://blog.angustar.com/archives/typecho-diy.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。