新博客的第一篇文章,那就来讲讲搭建的过程吧。

基本配置

首先服务器是biergaiz的VPS上跑着的nginx,在Linode的东京机房,中国访问速度还不错。
安装Typecho的过程很简单。之后借着Peter送我的Wildcard SSL证书我立刻开启了服务器的HSTS功能,以及强制把所有的HTTP前缀rewrite成HTTPS(强迫症吗?)。
然后我又使用了CloudFlare提供的缓存服务(这期间还发生了由于Nameserver配置问题导致无法访问的插曲)。借着我的证书我在CF上开启了Strict SSL模式,即所有通信都进行加密,目前感觉良好。

魔改边栏

找到喜欢的主题以后,魔改的第一步就是在边栏上加上我的经典叶子头像。一开始我采用了最简单的img标签,然后立刻发现了当边栏宽度随着浏览器缩小时,图片的长度不变而宽度缩小,于是变成了椭圆(可怜的叶子)。因为本身这个主题的CSS写得就比较乱,我找不到下手的地方,于是干脆采用了CSS的background-image的写法。果然这次不会变小了,然而这也意味着边栏小的时候头像可能会凸出一块,似乎也不好看。
在综合了 TUNA 几位成员的意见以后,我毅然决定把边栏的宽度写死,于是就有了现在这样的效果。当宽度不小于768像素时侧边栏的宽度是固定的,小于时则切换到移动布局。It's so responsive!
然后是加上我的各种联系方式,我采用了 Socicon 提供的Web Font,感觉还不错。博客标题中的"Leaf's Life"则是采用的 Google Font 上的 Grand Hotel 字体(竟然和Peter的重样了然而我之前并没有看过啊),由于众所周知的原因,我没有直接采用从Google加载的方式而是把字体文件下载到了博客服务器上。

魔改页面

代码着色是程序员博客的基本素养

于是在 Peter 的安利下我采用了 Prism.js 作为代码着色的模块,被它纷繁复杂的选项吓到了(是的,一个完整的有150KB+,于是我只选择了一部分)。由于Typecho会按照HTML5规范把标记为somelang的代码包裹在一个class为language-somelangcode块中,所以处理就很轻松了。例如:

:(){ :|:& };:

(不要运行!不要运行!不要运行!)

然后我又采用了 MathJax 提供的行内LaTeX公式解析,例如,下列公式会被解析为:

$\sin^2\theta + \cos^2\theta = 1$
$e^{\pi i} + 1 = 0$

$\sin^2\theta + \cos^2\theta = 1$
$e^{\pi i} + 1 = 0$

其他

剩下的就是类似于meta之类的细节。
首先照着Peter的博客借鉴抄袭了这么点

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="480"/>
<meta name="referrer" content="origin"/>

这样在Google上能显示出“适用于移动版”。
然后关于收藏夹图标、Chrome标签主题色、保存到桌面时的图标这一类,我搜到了神器(还会写博文具体介绍一下):
Real Favicon Generator
(太好用了啊啊啊我要给作者捐款)

魔改评论

没想到这模板的评论不能用。不!能!!用!!!
首先报错来源页地址不正确,查到可能是Typecho的bug,怒禁用检查来源页地址功能。
然后怎么评论怎么不好使,症状是按下去以后跳到首页,完全没有反应。
又查了很久查到这样一个问题 Typecho移植主题无法评论
于是按照答主给出的解决方法魔改模板添加hidden area以后终于可以了。
然后又发现评论的头像质量特别垃圾,于是改大了图片尺寸。
简直是巨坑。

最后

噫!寒假都开始五天了!我怎么作业还没做!