网站改版记录（二）10-APR-2020

这段时间一直读读写写，看看别人的网站、主题以便我贯彻「拿来主义」，另一边把看到的好的特性研究下实现方法，摘录一些代码。看来看去好久，最终决定以 idealClover 为蓝本，规划设计自己的网站。^[1]

配色与字体

配色与字体对于一个网页看上去是否舒服还是非常重要的。字体与配色我参考了不少网站，最后选定的配色如下：

网页的配色参考了 Flat UI、flatuicolorpicker 和 Generate 这几个配色工具。

字体使用了 Google Font API，可以方便的选择并引入字体。这次我选择的字体中文使用 思源黑体，英文使用 Ubuntu。字重选择了300、400、700三种。

文章分类菜单

研究了下 Clover 这个主题，发现是以 bootstrap 框架实现的动态适应，但是仔细又看了下 bootstrap 这个框架，发现还是非常繁琐的。但是由于主题原作者已经使用 bootstrap 搭建好了，所以我就决定直接修改原作者的主题。因为是在 github 的公开仓库里，所以也版权也没有问题。

原作者的主题是为 Typecho 编写的，而我的博客是使用 Gridea 搭建，所以首先要做的就是将 Typecho 主题的文档结构和 Gridea 对应。这里有一个问题：Gridea 没有「Category」这个概念，想了一下，最后决定使用几个标签来代替 Category。但是这样又会引入另一个问题，那就是没办法将主题做到自动化，只能别人在使用主题的时候自己加进去。^[2]

鼠标特效与鼠标图标

看到好多个人博客的页面上都对鼠标特效与图标进行了自定义，为主要是文字的博客增加了一些点缀。在这次改版过程中，我也添加了特效与图标。

特效

特效比较简单，网上有好多类似的项目，像是点击时出现心心 ❤️ 或者是出现「和谐、民主、自由」之类的。我这里就直接使用了一个叫「烟花特效」的特效。我看到很多博客在用这个特效，比较低调，又能增加点缀。但是我查了一下，并没有找到出处，就只好直接拿来用了。

使用方法很简单，直接引入 js 文件就可以，默认的效果不错，也就没有再自己做调整。

图标

修改 css 文件就可以实现自定义鼠标图标的目的。代码如下：

body {
	cursor: url(../media/houxuan.cur),auto
	}
body:active{
	cursor: url("../media/zc.cur"),auto
	// 单击时鼠标图标
	}

代码高亮

代码高亮我使用的是 prism.js。这个模块可以自定义语言、高亮样式。使用也非常简单，只要在 prismjs 的网站上设置好自己喜欢的样式，然后就可以下载 js 与 css 文件。将这两个文件插入到自己的网页中就可以了。最终实现的效果如图：

主页

主页的设置就直接拿了 idealClover 这个主题来用的。Title 与 subtitle 使用的是 Random-Homepage。背景使用的是 canvas-nest.js。