导言

本文主要内容有:本博客对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同学512MB10GB1TB@1Gbps美国洛杉矶$8.89/yr 年付
J同学512MB5GB无限流量@200Mbps美国达拉斯₽104/mo 月付
D同学512MB10GB300GB@50Mbps中国香港¥18/mo 月付
H同学512MB10GB500GB@500Mbps日本大阪¥22/mo 月付
F同学1GLinux 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版本更新,我使用下来最大的变化就是后台兼容竖屏,躺在床上也管理博客了(这篇文章有一大半都是在手机上完成的)。

总结

搭建博客确实是一个挺消磨时间的工程,完美满足了我的间歇性整理房间症(?)希望疫情早日过去,在家真是太无聊了。

我永远喜欢徵羽摩柯!

最后修改:2022 年 04 月 16 日
感谢阅读。
能够结识读友即是对我最大的支持。
如果您坚持要打赏我的话,
请确保同意赞赏规则