时隔九月,更改博客外观配置

写在前面

自从今年一月我建立起这个博客,我再没对博客进行任何外观上的更改。但实际上,当时的很多配置我自己是不太满意的。首先,整个主题的色调过于花俏,与我个人对简洁的偏爱不符;另外,我彼时使用的material主题版本过低,很多功能不够完善。

明天就是开学日,想着开学之后我应该没有闲情来布置这些,因此我决定趁着最后一个放假日来做这样一件“毫无用处”的事情。

主页

这是过去九个月里我博客的外观:

prev

客观地说,它并不难看(要不然我也没法忍受它九个月),但实在非常随意。背景这张毛玻璃效果的图片是主题内置提供的,漂亮归漂亮,但是很难说有多少个人同时在使用它作为背景;标题框和Logo框中图片的选择就更随便了,我本人是巴塞罗那足球俱乐部的忠实拥趸,因此在标题框中就选择了巴塞罗那的一张风景图,而右边的Logo则直接使用了巴塞罗那历史上最伟大的球员——莱昂内尔·梅西的个人Logo,甚至你点击这个Logo网站还会自动跳转到梅西官网(这是多么无聊的设计);至于颜色的选择我更是分毫未改地沿用了默认值,因为搭建博客时正值期末,我实在没空去干选颜色这么费时费力的事情。

现在我对它的更改,如上所述,主要是使它看起来更简洁。我觉得只有简洁的东西才不会使人轻易看腻。首先我把背景换成了纯色(#F5F5F5),并且把主题的色调换成了灰色(主:#3B4247 次:#959FA6)。然后我更换了那两张选择得非常随意的图片,用一种另外的随意方式。右侧这个我的个人Logo,事实上是我在一个免费生成Logo的网站画5分钟做的,虽然免费,但我还挺满意的;至于左侧这张图……可能比之前还要随意吧,这是我Google “Minimalism”搜出来的一张图片,万幸还挺合适。下面是现在的效果图:

current

你可能还会注意到一些区别:

  • 在上一张图片里,我的名字是“Waiyin Wong”,而在这张里变成了“Weiran Huang”。需要指出的是,“Waiyin Wong”是我名字的粤语拼音(我先前以为它是威妥玛拼音,但并不是),而后者才是我姓名的标准汉语拼音。粤语拼音很有趣,但我本人并不说粤语,而且无论是我的网站名还是我的邮箱都使用的是汉语拼音,因此这里做一个统一。
  • 网站标题的 “My trantor” 变成了 “My Trantor”Trantor是我非常喜欢的科幻小说《基地》系列中银河帝国的首都星球的名字(中文译名川陀),我给我的网站起名“My Trantor”也是希望这个博客能作为我精神世界的一颗”首都星“,记录我的经历和见识。毫无疑问,作为地名,Trantor 当然应该大写,之前没有纯粹是我的失误。
  • 网站副标题 “My life of…” 改为首字母大写,不必多提。
  • 我对Sidebar做了部分调整:更换了标题图,增加了Number of Articles一栏。
  • 在首页的footer位置(如下),我去掉了不常用的SNS——Google+,增加了Instagram和GitHub。在Copyright下增加了一句《圣经》中的引文:“Act justly, love mercy, walk humbly”

footer

其实大多数改动都非常细微,如果不特别记录一下可能我自己也忘了。这也是我写这篇看起来毫无意义的博客的目的:看看自己以前对博客做过什么,也挺有趣的。

评论系统

另一个比较大的改变是我更换了评论系统。显然,我的博客流量是微乎其微的,并不太会有人看,甚至评论。而当我使用Disqus这一在国内被墙了的评论系统时,这样的概率就更低了。作为一个写作者,总是会希望有读者能够和你互动的,哪怕读者不存在,我们也应该给他们的出现创造条件。因此我换用了Livere(来必力)作为我的评论系统,这次不会被墙啦。

最后弱弱说一句,仅从外观来说,我更喜欢Disqus。

UPDATE ON OCT 9TH: 我再次将评论系统更换为了Valine。这个评论系统支持Markdown

UPDATE ON OCT 14TH: 经过多次更换,我又把评论系统换回了Disqus……我必须认清一个事实,那就是我写的东西纯是自娱自乐所用,并没有人会和我互动,所以用哪个评论系统其实都无所谓;但其他评论系统实在太糟糕了,Gitment和Gittalk在移动端的体验不好,Valine的邮件通知功能又不完善。换来换去,Disqus还是最好用的一个,除去它被墙了这一个事实,但反正没人评论,那用哪个都一样了。

许可证

我为我的每篇博客增加了一份CC BY-SA 3.0协议文本许可证声明。这意味着,对我的所有文章:

您可以自由地:

  • 共享 — 在任何媒介以任何形式复制、发行本作品
  • 演绎 — 修改、转换或以本作品为基础进行创作

惟须遵守下列条件:

具体条文请参考链接。

代码高亮

之前我使用的代码高亮插件是hexo-prism-plugin。但这款插件的很多主题和material兼容性很差,最后使用效果非常糟糕,我几乎把所有主题都尝试了一遍,才选定ghcolor这一款主题。因此这次我本希望使用Prettify来做代码高亮。事实上我几乎已经做完了这件事,让文章中的代码块从:

cbp

变成了:

cbc

不得不说Prettify的代码高亮还是挺好看的。但使用之后我才发现,相较Prism它有一个很严重的问题,那就是在移动端阅读时,如果一行代码无法显示完全,代码块是无法横向拖动的。这造成了移动端阅读体验不佳的问题,因此我最后还是换回了之前的样子。这是一个遗憾了。

CDN加速

material的新版本是提供CDN加速的,你可以直接在配置文件中做到这件事。

你可以把博客的静态页面放在私人CDN上,也可以使用几个第三方库的CDN,包括:

# Files Vendors
# Set a CDN for the files src you want to customize. The url should with protocol.
# Default(empty) will load the files from the origin server.
vendors:
# MaterialCDN
#   You can load theme unique files from your private cdn or oss.
#   The new src will have the base domain you configured below.
#   For example
#       materialcdn: https://cdn.jsdelivr.net/npm/hexo-material@1.4.0/source
    materialcdn:

# Third party library
#   You can load these files from public cdn.
#   For example
#       jquery: https://cdn.bootcss.com/jquery/2.2.1/jquery.js
    # jQuery 2.2.0
    jquery: https://cdn.bootcss.com/jquery/2.2.1/jquery.js
    # nprogress 0.2.0
    nprogress:
    # FontAwesome 4.5.0
    fontawesome: https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css
    # MathJax 2.7.0-2.7.1
    mathjax: https://cdn.bootcss.com/mathjax/2.7.1/latest.js
    # Prettify r298 (only prettify.js)
    prettify: https://cdn.bootcss.com/prettify/r298/prettify.js
    # Material Icons 3.0.1
    material_icons: https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css

这里的mathjax是很值得一提的。Hexo的Markdown不支持数学公式,因此之前每次当博客里需要使用MathJax的时候,我都不得不在文章开头放上这么长一串来加载它:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

而现在使用了它的CDN,我可以直接在标题框中enable MathJax, 只需增加一行:mathjax: true即可。

P.S.:但Hexo还有一个地方非常烦人,它会将MathJax中的\_当作Markdown中的转义字符,导致你的公式显示失败;这时候除了去修改内置转义规则之外,只能通过强制禁止渲染来解决了。

使用TiddlyWiki

Added on Nov 21st.

TiddlyWiki是一款非常有趣的笔记软件,它仅有一个html页面,但你可以用它做几乎任何事。我目前用它来做一些细碎的记录以及学校课程的笔记,目前你已经可以通过博客Sidebar的wiki打开它。

想要了解TiddlyWiki,请访问它的官方网站。但我觉得这个官网的教程似乎不太user-friendly(也许是我的问题),在我初次接触的时候,是通过youtube上这个系列视频来学习的。当然看完之后你最好还是回到官网继续深入使用,看视频只是为了减缓你的learning curve。

我现在使用的主题是material风格的,与我当下博客使用的主题很契合。

另外提一下如何在hexo中加入html页面……因为hexo是会默认渲染source文件夹中的文件的,也就是说它只默认处理md文件。所以你需要在_config.yml中找到skip_render一项来阻止它渲染html文件。这个操作可以参见这里

增加在线和可供下载的简历

Added on Nov 21st

这两项的查看和下载链接我放在了About页面里(你可以通过Sidebar打开它)。Online-CV早几个月就弄了,不过里面内容一直没去好好整(现在也还没整,有一半是模板内容,主要原因是实在没什么经历和技能可写……)。

PDF版本是上周申请暑研的时候临时拿一个模板改的。原模板没有Course Projects这一项,我强行加的,虽然知道加了也没什么用,但不写我的简历就真的……很空。希望明年这时候申请可以有更多东西可以写,让我去掉这些傻透了的Course Projects吧 :)。

全站https

几个月前GitHub宣布对GitHub Pages的自定义域名提供https服务,这需要修改域名解析的A record,然后在博客的repo里选择enforce https。但是由于我博客之前的图片都是托管在作业部落上,它并没有https。因此我花费了相当长的时间把博客里所有的图片都移动到提供https的图床里了。因此现在我的博客是一个非常安全的地方了。

大概就是这些了,其他一些修改拼写错误的URL就不细说了。总之,这一波操作又成功夺走了我在实验室的一个悠长下午,但说真的还挺有意思的。这样看来,设计行业的工作(或者前端)好像还蛮有趣味性的?

This blog is under a CC BY-NC-SA 3.0 Unported License
Link to this article: http://huangweiran.club/2018/09/02/时隔九月,更改博客外观配置/