导言
本文主要内容有:本博客对Handsome主题的修改、VPS的选择以及搭建博客的原因。本博客对于Handsome主题的修改会在此持续更新。如有需要查阅其中具体内容请使用右侧目录树跳转。
本博客对Handsome主题的修改
Handsome的自定义功能足够强大,所以我仅仅根据我的xp进行了一些小修改。
缺省文章头图及图标修改
缺省文章头图位于 usr/themes/handsome/assets/img/sj
,而缺省右边栏图标位于 usr/themes/handsome/assets/img/sj2
,都是jpg,把缺省图换成了摩柯和小豆泥。右边栏小图标比较小,图片分辨率就调得比较低,而缺省文章头图用的分辨率比较高的图片。原版的图都是色块,所以压一压也看不出来,但是换成摩柯之后发现压缩完都是噪点,索性直接上原图,反正开了懒加载观感也不差。因为懒得进一步修改,所以仅仅进行了文件替换,要注意文件名和文件数量都要保持一致,完事之后去Handsome插件那边更新离线缓存。请注意,测试下来360极速浏览器和移动端Safari似乎不会响应Service Worker刷新,不知道是不是个例,所以尽可能的在搭建初期就把assets修改好。
字体及文章字体颜色修改
一个合适的字体能够指数级提升产品的气质。博客使用的是思源宋体,调用Google Fonts,修改教程参考自09.handsome主题修改总结-LaoK,原博主的修改方案我测试下来会导致夜间模式异常以及顶栏在Safari浏览器下显示异常,故在引用时作了修改。
在外观-开发者设置-自定义CSS插入如下代码:
*{font-family: 'Noto Serif SC';}
随后在“自定义输出head 头部的HTML代码”中插入如下代码:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet">
一开始有点担心调用Google Fonts会拖慢大陆访问速度,百度了一下有些人推荐360的镜像源,也有人推荐Google Fonts的中文站,后来发现360的镜像源早已关闭,而中文站的服务器位于日本,反而是原版的服务器位于北京以及上海谷歌云,延迟很低。
用词修改
按照自己的喜好调整了部分用词,比如很喜欢文言维基百科以“清风翻书”表示“随机页面”,所以我也依葫芦画瓢进行了替换。
打开 usr/themes/handsome/index.php
,可以看到:
<!--首页右侧栏-->
<?php $this->need('component/sidebar.php') ?>
</div>
指明右侧栏位于 usr/themes/handsome/component/sidebar.php
修改很简单,直接查找相关文本替换即可,要注意总共有两处需要替换,不知道为啥有两处,反正全部替换了就行。其他地方的修改以此类推。
去除左侧栏图标
因为中文足够简洁明了,所以我决定去除左侧栏的图标
左侧栏位于usr/themes/handsome/component/aside.php
,通过搜索“首页”“页面”等语句可以定位到图标位于<span><?php _me("首页") ?></span>
上方:
<span class="nav-icon"><i data-feather="home"></i></span>
注释或者删除即可。
去除时光机首字下沉变大
时光机页面分为两部分,模板由usr/themes/handsome/cross.php
管理,而时光机内容位于usr/themes/handsome/component/say.php
。首字下沉的实现位于say.php代码末尾:
<?php
if (Utils::getExpertValue("time_first_letter",true)):?>
<style>
#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
font-size: 140%;
/* float: left; */
vertical-align: middle;
}
</style>
<?php endif; ?>
注释或者删除即可。
去除时光机更新角标
时光机更新之后顶栏出现的“新”字角标由usr/themes/handsome/component/headnav.php
管理,搜索“新”,可以定位到这几行代码:
=if (!empty($read_id) && !empty($latest_time_id)){
=$not_read = $latest_time_id - $read_id;
if ($not_read > 0){
_me("新");
可见角标出现与否是由$not_read
决定的,那么我们只要将$not_read
的值固定为0,即刻去除时光机更新角标。
=$not_read = 0;
调整默认字体大小及修复由此带来的问题
因为思源宋体比较细,在移动端显得比较小,所以适当调大了文章默认字体大小。修改字体大小在Handsome的外观设置中就可以修改,但修改后会出现“改变文章字体大小”按钮功能出现异常,原本点击这个按钮会使文章字体变大,但是现在反而变小了。
按钮功能的实现位于blog/usr/themes/handsome/assets/js/
,打开之后搜索plus-font-size
,可以看到
{$(".plus-font-size").click(function(){var a=$("#post-content").css("font-size"),b=parseFloat(a,10);a.slice(-2);b<=14?b+=2:b-=2,$("#post-content").css("font-size",b+"px")})}
由此可见,按钮时通过来判断字体大小是否>=14决定是变大还是变小,这也就解释了修改默认字体大小之后出现的问题。只要将b<=14?b+=2:b-=2,
中的14修改为你调整后的默认字体大小即可。修改b+和b-的值,还可以对点击按钮后字体大小的变化进行修改。
修改文章字体颜色
Handsome原版的文章字体颜色是比较淡的,再加上思源宋体比较细,会有些影响阅读。
浅色模式的文章字体颜色我修改为纯黑色。浅色模式的文章字体颜色位于usr/themes/handsome/assets/css/handsome.min.css
,搜索body,html
,将color改为color:#000
而深色模式的文章字体颜色我修改为纯白色。深色模式的字体颜色可根据你对深色模式的见解进行修改。有些人将深色模式用作夜间模式,那就可以不做修改。而我将深色模式用作专注模式,所以修改为纯白色。深色模式的文章字体颜色位于usr/themes/handsome/assets/css/features/dark.min.css
,搜索post-content
,将color改为color:#fff
。
需要注意的是,因为原版的文章字体颜色是淡灰色,所以有些地方在深色模式不会改变颜色,比如手动调整深色模式的菜单,以及目录树,因为我的css技术也不是很好,暂时没法给出解决方法。
修改完毕后,去Handsome插件那边刷新一下离线缓存。
去除顶栏阴影
改完字体后,不知道为什么顶栏的阴影错位了,看着很难受,酒干脆去掉了。
顶栏阴影位于usr/themes/handsome/component/headnav.php
,把box-shadow-bottom-lg
删掉就行了。
修改Typecho的Gravatar镜像源
VPS的选择
在搭建博客的过程中,我手上共有5台VPS,分别是美国某R,俄国某J,国内某F,国内某D和国内某H,最后使用的是D同学。接下来会分析这几家的利弊,因为买的都是便宜VPS,没法代体现主机商的全部实力,就不记录主机商的名字了,仅仅记录一下需要避坑的地方。
各台VPS配置情况
商家 | 内存 | 硬盘 | 网络 | 位置 | 价格 |
---|---|---|---|---|---|
R同学 | 512MB | 10GB | 1TB@1Gbps | 美国洛杉矶 | $8.89/yr 年付 |
J同学 | 512MB | 5GB | 无限流量@200Mbps | 美国达拉斯 | ₽104/mo 月付 |
D同学 | 512MB | 10GB | 300GB@50Mbps | 中国香港 | ¥18/mo 月付 |
H同学 | 512MB | 10GB | 500GB@500Mbps | 日本大阪 | ¥22/mo 月付 |
F同学 | 1G | Linux 30GB Windows 50GB | 无限流量 @1Mbps UL 10Mbps DL | 中国香港 | ¥9/mo 月付 |
各台VPS优劣分析
首先是R同学,这家属于性价比很高的类型,虽然线路一般但是很稳定,白天和晚高峰表现差不多,路由也不绕,用来干什么都很不错,但是相比搬瓦工那种线路还是感觉的出差距的。缺点就是租用的是ColoCrossing机房,这家机房估计滥用的太厉害,所以谷歌、CloudFlare等等对它不太友好,用来魔法上网必弹验证码,而且很难通过(顺带一提,经过无数次验证码折磨之后得出一个结论:正确输入验证码只是提交个验证申请,关于你是不是真人这事还是靠系统判断,和验证码输入正确与否无关)。这家的VPS我使用了将近一年,总体来说还是不错的。
因为一直受验证码折磨,所以在R同学快要到期的时候开始考虑更换主机商,随后在网上找到了J同学,这家的优点就是支持月付,而且因为是自有机房用来魔法没有弹验证码的问题。
由于物理因素,美国线路的延迟比较高,最后还是决定换一个亚洲的VPS,经过查找入手了D同学和H同学的VPS。H同学延迟比较低,路由也不绕,晚高峰也没有明显降速,但是时不时就断流十几秒,不知道是不是因为使用的加拿大广播IP的原因,用起来很不爽。
而D同学虽然带宽比H同学低,实际体验却比H同学稳定很多,路由直连,延迟非常低。不过近期其所在的机房持续收到网络攻击,被攻击的时候就会切换到绕美国的高防线路,但即便如此仍然比H同学稳定。所以最后选择了D同学的VPS。
F同学的VPS是这家主机商刚成立时赔本赚吆喝的推广套餐,是这几家唯一可以跑Windows的VPS,现在被我用来挂机器人,本来想让他兼任建站任务,可惜实在玩不来Windows Server,总是出现奇奇怪怪的问题,遂放弃。
关于博客
搭建博客的原因
我和其他人博客的使用方式不太一样,因为我还没有养成每日记录生活的习惯,所以我的博客一般用以作为备忘录的补充。iPhone上面的备忘录很方便快捷,还可以多终端同步,但是对于长篇或者复杂的记录就有些力不从心了,所以只适合临时记录一些灵感或者存一些短期的记录,长篇的复杂的就放在博客上了。而且我有间歇性收拾东西的习惯,有个能自定义的博客正好可以消磨一下(?)
之前在高中的时候也搭建过一个博客,主要放学习笔记和摩柯后援会的活动公告,因为这俩都是图文表格互相穿插而且需要在发布后修改的。高中毕业之后就变懒了,于是就把原来的博客关了,原来的域名续费了差不多三年,我这个贫穷大学生也渐渐负担不起79一年的.com域名了(?)于是换成了现在的.cc域名。
博客的搭建
因为VPS配置比较低,所以用的Typecho。其实哪怕以后提升VPS的配置也不会去用WordPress,这玩意现在已经过于臃肿和商业化了。主题使用的handsome,handsome说他是主题实在是太委屈了,可以称之为一个完整的博客解决方案,用过的懂都懂。
有意思的是,在我决定搭建博客的前一天,Typecho时隔四年多发布了1.2版本更新,我使用下来最大的变化就是后台兼容竖屏,躺在床上也管理博客了(这篇文章有一大半都是在手机上完成的)。
总结
搭建博客确实是一个挺消磨时间的工程,完美满足了我的间歇性整理房间症(?)希望疫情早日过去,在家真是太无聊了。
2 条评论
typecho的有序列表和无序列表渲染都很奇怪,跟其他博客网站或者啥之类的内容网站都不一样,是紧贴着渲染的。博主有什么思路优化嘛
我来留个言 泰酷辣