希望能让每一个访问到这里的人能有一个更好的体验，因此最近把博客做了一点小调整。目前基本是达到我最满意的状态了，短期内除了 bug 应该是不会再动博客的源码了。

下图是使用谷歌浏览器的 Lighthouse 对网站首页的简单测试结果：

移动端测试结果
移动端测试结果

桌面端测试结果
桌面端测试结果

这里做一个小总结，总结一下主要是哪些方面发生了变化。

  1. 修改了代码块的样式以及字体，使其更符合网站的整体风格。

    代码块样式修改
    代码块样式修改


  2. 优化评论内容的渲染规则。
    主要是换行的方式，以前需要一个独立的空行或者是在文字结尾输入两个空格然后换行才是真正的换行，但是很多人都不怎么注意这个 markdown 的规则，因此现在修改了渲染规则，换行即是换行，如果需要空行，则需要输入 <br/>。

    原来需要空行
    原来需要空行

    现在不需要空行
    现在不需要空行

    预览
    预览


  1. 评论时 “使用邮件接收回复通知” 文案修改且默认为勾选。
    因为之前发现其实有好多朋友留言时都没有选择接收回复通知，不知道是因为留言时并不知道这个选项是可以勾选的，还是说刻意不勾选的。
    我自己私心还是希望大家能选择接收回复的。因此首先是将文案修改了（有新回复时发送邮件通知改为使用邮件接收回复通知），因为发送方应该是我，而不是访客，对于访客而言，用接收一词应该更合适一些。然后就是将其默认设置为勾选，经过这一段时间的观察来看，虽然样本量较小，但最近的评论都是接受了这个选项的。


  2. 网站滚动条美化。
    也是为了更加贴合网站整体风格。

    滚动条美化
    滚动条美化

    css 如下：

    /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
width: .9rem;
height: .9rem
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
border-radius: 2rem
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
background-image: url('../img/scrollbar-img.jpg');
background-size: cover;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
border-radius: 2rem
}

  1. 优化网站访问体验：
    • nginx 开启 http2
    • nginx 将静态资源文件过期时间设置更长，尽可能减少客户端向服务器的请求，同时配合代码将站内资源文件全部添加了版本号控制，方便服务端修改了样式或者图片之类的通知客户端重新请求数据
    • 网站的图片资源在不影响视觉效果的前提下进一步压缩
    • 删除了百度统计以及谷歌统计的 js 代码，因为这两个 js 相对现在网站的响应速度来说还是比较有影响的，而且本身也没有什么流量，统计其实也没有太大意义。

  1. SEO 优化：
    • 增加 robots.txt 文件，链接在页面页脚处
    • 支持自动生成 sitemap.xml 文件（生成代码 demo：sitemap-generator），链接在页面页脚处

  1. 调整文章详情页面的一些链接跳转路径：
    • 文章的作者链接以前是跳转到博客首页，现在改为跳转到“关于”页面的“关于我”锚点处
    • 文章内容末尾的转载声明以前点击后是跳转到“关于”页面，现在改为跳转到“关于”页面的“找到我”锚点处