新的主题 Minimalism 返回首页

发表于 2018-08-17

回忆

想起来第一次搭建博客的时候还是大一 (2016/5/5),那时候觉得有一个自己的博客还是一件挺酷的事,就决定自己也要搭一个博客。那时候网上一搜,就是挺多 Hexo 框架搭建博客的教程,也就跟着弄了,选了一个觉得还不错的主题,跟着配置的教程捣鼓着,想着怎么样让自己的博客更漂亮。那时候也不知道写点啥,一个是自己接触编程时间也不久,很多也只是入门阶段,所以当时萌生了一个写写学校教的一些和软件相关的课程总结的想法,或许还能给学弟学妹看看呢。所以现在能看到初期写了几篇数据结构的文章,不过后来就没有执行下去了。主要是觉得自己写的东西很浅显,都是一些课本上的概念性的东西,所以就感觉没有写下去的必要了。后来的很长一段时间,都会想把以前写的一些文章删掉,就好像是把一些不好的东西扔掉一样,但是又想通了一点东西。不管怎么样,都是自己产出的东西,如果当你回首时,会觉得有些不堪,那说明是自己进步了,全当是一个记录吧。

在之后的一个闷热的夏天 (2016/8/21),那个时候发现了组织,正式申请加入。之后的一段时间博客才得以有持续的内容输出。其实那时候就对博客的样式不是很满意,Hexo 换了也有四五个主题了,后来看到猴哥的博客,觉得挺好看的,用的 Jekyll 框架,就开始去接触了解了一下。当时就感觉 Jekyll 清晰、简洁、可定制度高,于是就试着自己写个主题试试水了,看了官方文档,也仔细研究了一下猴哥的博客模板,差不多掌握了基本的用法后就开始写了。当时脑海里可能就是各种炫酷的画面吧 :joy: ,不过真轮到自己写页面的时候,发现还挺难的,也不是说代码难以实现,而是设计上脑袋的一片空白,不过后来还是勉强写出来了。下面截两张首页的图纪念一下上一版的博客吧 (本来是录制了屏幕视频的,介于太大了就没上传)。

homepage.jpg

homepage2.jpg

头像的动画和效果当时是看到 Twitter 的页面,觉得挺不错的,就自己实现了。之后只要是在网上看到什么稀奇好玩的小东西,都会往自己博客上加。这版博客也不能说不好看吧,毕竟自己还是花了点心思,很多细节也都是比较满意,以至于后面还纠结了很长一段时间,是在这个基础上修改,还是直接推翻。

直到后来,想明白了些事,或许长期以来自己所追求的都是些花里胡哨的东西。

hualihushao.jpg

博客,还是以文章、内容为主,渐渐地或许就会忘记了博客的本质。也有很多人,搭完博客之后,就再也没有动过笔了。或许就是因为没有优质的内容产出,才会转移到博客页面样式上去,想要以此来弥补?但是就算网站再好看,「没有内容」,顶多也就初见时一句 nb 就完事了。只有优质的内容,在此基础上加以舒服的阅读体验,简洁的设计,这才是博客的加分项。而其实自己一直以来也很喜欢极简主义风格的设计,且这正与博客真正的意义不谋而合,所以就有了 Minimalism 这款极简主义风格的主题。心里有了这个打算后 (当然,诞生这个想法的时候已经是在 2018 年了),但也没有立马动手,因为脑袋里一直还在构思,而且其实这还持续了挺长一段时间。

排版

排版,可以说是这个主题最为重要的一部分,因为之前说过,博客是基于文章,一个好的排版,对于阅读体验的提升是至关重要的。下面就来说说自己对排版的一些见解和心得。

关于英文排版和中文排版的讨论,曾看过一篇文章 —— 涨姿势!英文排版真得比中文排版好看吗? 但是对于其中几个观点并不认同。文章文本段落,中文字体的方正倒显得比英文的「错落感」好看很多,或许他讨论的范围不一样吧,如果是海报设计,一些文本主体,我倒是觉得英文的这种错落感要比中文好。文章段落中的那种「错落」跳跃会让我感觉很不舒服,尤其是涉及到一些较长的字词时,这种跳跃会让人感觉很突兀,所以,我会选择两端对齐。但是,这种做法也是存在弊端的,尤其是做开发的,写文章时难免会有中英文混排 (中英文混排的特殊性,会导致排版上出现很多问题)。因为当设置为两端对齐时,当出现「最后一个字符」长度超越文本行的长度时,会将这个字符排在下一行,而此行多出来的空间将均分给剩余字符。如果是纯中文文本,肯定是不会有太大的问题的,因为每个字所占得字符长度是相同的,不会出现较大的字符长度剩余。而涉及到中英文混排或者纯英文混排时,就必须进行取舍,对于英文,可以选择以每个词为单位进行分割,这样,当「最后一个字符」为长单词时,就会使本行字词间间隔的太远,另一种分割方法是不管字词的整体含义性,而是以字母为单位,到了行尾就强行截断,这一般不是很好的做法,对单词的分割会照成阅读时的断层,需要一定的时间对单词进行拼接。所以,综上所述,最后我推荐的做法是两端对齐,并以字词为分割单位。而至于它的弊端,其实一般来说,碰到那种特别长的单词是很少见的,倒是有时候在写一些文件路径名时,它好像并不会以 / 为分割单位,而是当成了字词的一部分,这就很容易造成较大的空间空余,所以在行文过程中因尽量避免出现这种较长的英文字符,必要时可用代码块来代替说明

其次是段落或者说文章的宽度,我看到过很多博客类型的网站,往往段落宽度占比非常大,而一旦段落文字又少 (就是经常换行的行文风格,每一换行为一个段落),整体感觉就非常的松散,而且宽度过长,因为换行时人眼的视距也会变长,这样容易加重视觉的疲劳。所以,一个合理的段落宽度,当然,还有合理的行高,这二者也是很重要的。

最后一个是从 HenCoder 网站所启发的 ——「颜色」。首先,纯黑的字体颜色是不推荐的,这样与白色背景的对比度太高了,可能一般都是使用 #111 或者 #333 的颜色。受 HenCoder 网站启发所吸纳的有两点:一个是文本主体使用 #666 颜色,标题使用 #111,我发现这种 #666 颜色的文本,在白色背景的对比之下,显得非常的舒服,减轻了用户视觉的负担,同时,这与标题形成了对比,这是除去字体大小差异所带来的另一种分明,可以比较好的形成文章结构的划分;另一个就是鼠标选中文本时的颜色,一般默认的都是蓝色,而这种淡黄色有一种荧光笔标记的视觉效果,而且对比度也控制的很好。

这是主题中最主要的排版部分,而 Markdown 的渲染则主要是参考 GitHub 的渲染风格。

页面布局

主题的整体色调就是黑、灰、白,其中还搭配着一些文本渲染样式的蓝、黄。我想怎么简洁怎么来吧,在设计完主页后,就是文章页了,整体布局中只存在着必要的元素,一个导航栏,一个文章列表,一个页脚的版权声明。文章详情页,一般会预留一个返回键,其实我很奇怪,我觉得这个按钮完全没有存在的必要,因为浏览器本身就自带返回等导航键,难道是为了使网站的结构更加清晰?如果少了这个返回键用户就不知道何去何从?为了保留这个引导,我将这个功能加在了文章的标题上,同时用闪烁的下划线来提示其可交互性。其余的就是归档、分类以及关于页面,几乎整个博客的风格都显得克制和简洁,只留下了必要的元素,或许对于一些追求各种「模块」的人来说,会觉得这个主题缺少了一些东西,但是从博客的整体来看,我认为已经具备了一个博客该有的所有东西。

写在最后

这应该是最后一次折腾自己博客的主题了,还是多看看书,写点优质的文章吧。


如果你觉得本文对你有帮助,不妨请我喝瓶葡萄味芬达


显示评论