在修改博客的时候也能学到不少新知识啊～ 起因 在两个月前，我写了一篇针对博客搜索功能优化的记录。在写完之后没几天，有位名叫@xymoryn的大佬看到了我的博客并且进行了吐槽，内容很值得参考。不过我自从用minimal主题以来从来没有改过样式的原因主要还是写不来CSS😂，并不是真的不想改，但其中提到可以让AI优化，我觉得也很有道理，现在AI这么发达实在不会用AI改就好啦～ 对博客样式的优化 虽然大佬给出了参考的CSS，但我不太喜欢那种风格，尤其还把之前的左右布局改成了上下布局。我当年之所以选择minimal主题就是因为它是左右布局的，如果选择上下布局的话我还不如用hacker这个主题，另外那个参考的CSS可能是因为AI写的，有很多没有考虑到的地方，比如主题自带的CSS鼠标放到链接上字体会变粗，然后可能会变宽，导致影响整体的布局，而参考的CSS选择直接让所有的链接放到上面都变细，即使原来是粗字体也变细，比如标题之类的，这就更难受了。像这种情况要怎么改呢？我还是希望能用minimal主题的CSS，但让链接变粗的体验确实不太好，所以我选择问问AI。 最后AI给出的答复是使用font-weight: inherit;，看起来确实解决了问题，不过如果鼠标移到链接上没有任何反应也不太好，所以就学GitHub在鼠标移到链接时加上了下划线。 除此之外就是字号、行高和布局，字号和行高我也不希望改的太激进，所以就稍微加了一点点，看起来没那么密就好。至于布局，之前minimal主题的宽度是写死的，左边是270px，右边是500px，对于我的MacBook看起来也还好，因为MacBook的屏幕比较小，屏幕的利用率还是比较高的。不过对于更大的屏幕总共860px大小的区域确实不太够，尤其是4K屏幕可能只有中间一点点的区域有内容，会看着很难受，所以我想了一下还是改成百分比布局比较好，这样无论屏幕有多宽也能利用得到。 还有一点就是分段，虽然我也知道在Markdown中两个换行是分段，但是感觉在文本中两个换行隔得太远了，所以一开始写文章的时候就选择只换行。不过在中文里确实不分段也不太好看，但是又不想去动之前写的文章，那该怎么办呢？思来想去干脆把换行全部替换成分段好啦，在Jekyll中可以用replace过滤器把所有的“
”替换成“

”，因为Markdown解析本来就会有一个段落，所以直接闭合加开始就能分割成多个段落了。那么加了分段是为了什么？其实主要是为了首行缩进，有首行缩进对阅读还是有挺大帮助的，至于怎么做也非常简单，直接给p标签设置text-indent: 2em;就可以了。 最后就是评论授权的问题，我用的Gitalk也有人问了这个问题，我仔细看了一下GitHub官方文档中OAuth可以授权的作用域发现确实是没办法限制只写Issues😥，至于其他的评论系统对后端的依赖又太多了，尤其是Giscus，居然是直接用iframe引用Giscus网站中的页面😅，如果Giscus哪天挂了，那评论系统不也挂了（虽然GitHub也不可靠……），至于自托管就更不可能了，我能让服务器持续运营可比不上大厂😆。所以最后我选择给Gitalk加个提示，不想登录也可以跳转到GitHub上进行评论，至于怎么加？还是让AI来吧，最后AI给我写了这么一串CSS： .gt-btn-login::after { content: "如果不想登录，请点击上方评论数跳转至对应ISSUE进行评论"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; z-index: 10; } .gt-btn-login:hover::after { opacity: 1; visibility: visible; } .gt-btn-login::after { margin-top: 8px; } .gt-btn-login::after { box-shadow: 0 2px 8px rgba(0,0,0,0.15); } 至此，关于博客样式的部分我觉得已经提高不少读者的用户体验了，也感谢大佬提出的建议。 对博客兼容性的优化 最近由于某些原因我又用起Windows 7了。其实我觉得Windows 7是一个很不错的操作系统，有很多人性化的东西，比如桌面小工具，自带Feed订阅，还有Windows Live Essentials等等，可惜后来全部被微软砍掉了🤣。考虑到Windows 7如此优秀，那要不然兼容一下它旗下的Internet Explorer 8浏览器吧？ 其实GitHub给的那些Jekyll主题本身都是兼容IE8的，包括我在用的minimal主题也一样。但随着我这么多年加了许许多多的功能，绝大多数功能都没有考虑兼容性，只想着能用就行。不过我写的功能基本上都非常简单，如果想改得让它兼容IE8也并非难事，只要理论上可行就可以。当然也有些理论上不可能的东西，比如WebGL。因此，我的Live2D看板娘就没有任何可能性被支持了，至于其他的……也许有一些理论上可以支持，但是改起来比较麻烦的就也算了吧（比如Gitalk之类的）。 对文章点击计数器的兼容性优化 其实我的文章点击计数器从之前改成用jQuery调用自己的接口以后就没有什么兼容性的问题了，因为jQuery本来就是处理浏览器之间差异的库，而且也是兼容IE8的。只不过有个问题是IE8不支持用XHR跨域请求，只能用“XDR（XDomainRequest）”进行跨域请求……还好有个现成的库能让jQuery在遇到这种情况时使用XDR请求，于是我就用条件注释让IE9以下的浏览器引入这个库，这样在IE下也能正常显示文章点击数了😆。 关于响应式布局的兼容性优化 在IE8中的CSS是不支持媒体查询的，所以在修改窗口大小时也不能根据情况使用合适的样式。本来我没打算解决这个问题，结果恰好看到了一个库：Respond.js，所以就直接拿来用了😝。 关于全文搜索的兼容性优化 其实从功能的角度来说这种东西肯定是在IE8下可以实现的，但是我用的那个库有点迷，到处都用的是const关键字结果还莫名其妙判断XHR搞的好像是在兼容旧浏览器？改起来有点麻烦懒得搞了……不过除此之外还有个取巧的方式，既然我搜不了，干脆让谷歌来搜吧，至于谷歌支不支持IE8就不是我的事了🤣，所以直接给搜索框外面套了一个form表单，这样甚至可以在不启用JS的情况下搜索（假设谷歌支持没有JS的情况）。 对于订阅软件的兼容性支持 之前我的博客对订阅的支持是使用的官方的jekyll-feed插件，它只支持Atom格式的订阅，一般的阅读器也是支持这种格式的（即使是IE8也是完美支持）。但是我发现有非常少数的某些网站没办法解析Atom，只支持RSS……所以我只好特地加了对RSS格式的支持，还顺带搞了支持Atom和RSS格式的XSLT模板来预览。既然RSS也支持了，那干脆连JSONFeed也一起做了吧😆，虽然意义不是很大…… 给博客添加网页快讯 既然要兼容IE8，那当然是能用的都用啦，在IE8订阅网站源的地方，有一个‘添加网页快讯’的功能。因为没有可以参考的网站，我甚至都没理解这个功能展现的效果是什么样的。我看这个网页快讯好像是抄了一部分hAtom Microformat的规范，我还以为是每个条目都单独需要一个entry-title和entry-content，结果发现并不是😅，一个hslice只能有一个entry-title…… 这个功能其实非常简单，主要作用就是把网页的一部分切出来单独展示，当这一部分发生更新的时候IE浏览器就会提示用户。然后在这之中hslice要包裹所有需要处理的元素，写到最外面元素的class中就可以，entry-title是希望用户订阅时展示的名字，而entry-content是被切下来展示的网页。具体的内容可以在微软官方文档中看到。 让网站增加对IndieWeb的支持 既然说到Microformat，那就要提到IndieWeb了。虽然这个东西网络上也没几个人搞，但看起来有点意思就整下玩玩呗。 第零级：域名 根据他们的入门教程来看，成为IndieWeb最重要的一点就是有自己的域名。看到这一点我都怀疑这是不是卖域名的用来忽悠人的玩意？我一分钱也不想给域名注册商，虽然DNS这套系统确实维护需要成本，但是能有多大成本呢？绝大多数不都让ISP摊了？另外他们所说的大公司的服务可能会消失，那么域名就不会吗？注册商和注册局完全有能力让你的域名用不了，这也是我们不可控的东西，因此尽管这对于IndieWeb很重要，但是我不打算搞，于是我的博客就不是IndieWeb了🤣。 第一级：识别身份 没有域名也不影响接下来的步骤，大公司的域名也是域名（虽然不属于我）。根据教程来看，支持IndieAuth非常简单，只需要在head中加一个rel=me的link标签，指向IndieAuth支持的个人主页，并且那个个人主页有一个反链指向自己的网站就可以，比如指向自己的GitHub主页，那么就可以使用GitHub登录来验证这个网站属于我。这一步可以使用IndieWebify.Me来验证。 第二级：发布内容 在发布前，为了更好的让其他软件读取网站内容，需要用microformats2来标注网站内容，这个倒也不复杂，可以根据这个教程按照上面所说的东西用class名去标注对应的元素，标注完之后就可以用IndieWebify.Me验证了。 除此之外还需要用h-card标注网站的身份，解析完之后可以当网站名片用，具体可以看这里 另外还有一点就是Webmentions，在网站上声明Webmentions可以让别人引用你的文章时通知一下你。不过对于静态博客不是很友好。一是要收，收完还要展示，二是要发，引用了别人的文章如果对面支持Webmentions要把自己引用的文章链接发给对方。虽然Jekyll有插件可以支持，但是我用GitHub额外装插件还得自己写Actions，而且我发布一次要在一堆Pages上更新，也不太适合，所以我打算光收不发（只需要在link标签中添加Webmentions的端点就可以），也不展示了，而且国内根本没几个人用Webmention🤣。如果有人对谁给我发了Webmention感兴趣，可以在这里查看（不过绝大多数都是我自己手动发的🤣） 如果谁有兴趣给自己的网站添加完整的Webmention，可以用Webmention Rocks!进行测试（如果使用了WordPress是自带的，只需要打开相关的功能就可以）。 第三级：进行交流 在IndieWeb中有一个很重要的事情就是相互交流，搞这个比较重要的目的是为了避免大公司的服务炸了，所以要替代比如推特，Facebook之类的服务，但是在这些服务还没炸的时候仍然可以在上面发自己的网站，也算是引流吧。他们把这个行为叫做POSSE。对我来说，我在微信、QQ之类的上面发自己新写的文章就算是POSSE了，毕竟我又不玩国外的社交平台😆。 除此之外似乎还要把别人的评论同步到自己网站？我能做到的顶多就是Gitalk了，更多的就算了吧～ 额外的内容 既然已经支持了IndieWeb，那么不妨加入IndieWeb Webring吧。在IndieWeb Webring 🕸💍中的大多数网站都是适配了IndieWeb的，加入他们也算是证明自己适配IndieWeb的努力了吧😊。 对博客可靠性的优化 以前为了应对GitHub的不可靠，我仅仅是在各个Pages上部署了我的网站，但是后来我想了想Git本身就是分布式的，分发是一件很简单的事情啊，我要是想提高博客的可靠性，不如直接用Git分发到各个Git托管商就好了啊～因此我就利用GitLab镜像仓库的功能，一键把我的网站同步到数十个知名的Git托管商，提高了网站的可靠性，具体的列表可以在这里查看。 感想 在这次的博客优化中，了解了不少新的东西啊，不仅学习了CSS，还有了解如何提高网站兼容性，以及提高了博客的可靠性和曝光度。果然折腾博客本身也能提高自己啊，还能写文章分享一下折腾的经验😆。虽然折腾的内容不一定能在未来的生活中用得上，但是有意思就足够了😁。