mayx/blog
1
0
Fork 0
mirror of https://github.com/Mabbs/mabbs.github.io synced 2025-07-20 09:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
blog/_posts/2025-06-02-optimize.md
mayx d60d41a008 Update 3 files 
- /404.md
- /_data/ai-cache.json
- /_posts/2025-06-02-optimize.md
2025-06-07 07:09:48 +00:00

85 lines
14 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
layout: post
title: 近期对博客的修改与优化记录
tags: [博客, 优化, IndieWeb]
---
在修改博客的时候也能学到不少新知识啊～<!--more-->
# 起因
在两个月前，我写了一篇[针对博客搜索功能优化的记录](/2025/04/04/search.html)。在写完之后没几天，有位名叫[@xymoryn](https://github.com/xymoryn)的大佬看到了我的博客并且进行了[吐槽](https://github.com/Mabbs/mabbs.github.io/issues/167)，内容很值得参考。不过我自从用[minimal](https://github.com/pages-themes/minimal)主题以来从来没有改过样式的原因主要还是写不来CSS😂，并不是真的不想改，但其中提到可以让AI优化，我觉得也很有道理，现在AI这么发达实在不会用AI改就好啦～
# 对博客样式的优化
虽然大佬给出了参考的CSS，但我不太喜欢那种风格，尤其还把之前的左右布局改成了上下布局。我当年之所以选择minimal主题就是因为它是左右布局的，如果选择上下布局的话我还不如用[hacker](https://pages-themes.github.io/hacker/)这个主题，另外那个参考的CSS可能是因为AI写的，有很多没有考虑到的地方，比如主题自带的CSS鼠标放到链接上字体会变粗，然后可能会变宽，导致影响整体的布局，而参考的CSS选择直接让所有的链接放到上面都变细，即使原来是粗字体也变细，比如标题之类的，这就更难受了。像这种情况要怎么改呢？我还是希望能用minimal主题的CSS，但让链接变粗的体验确实不太好，所以我选择问问AI。
最后AI给出的答复是使用`font-weight: inherit;`，看起来确实解决了问题，不过如果鼠标移到链接上没有任何反应也不太好，所以就学GitHub在鼠标移到链接时加上了下划线。
除此之外就是字号、行高和布局，字号和行高我也不希望改的太激进，所以就稍微加了一点点，看起来没那么密就好。至于布局，之前minimal主题的宽度是写死的，左边是270px，右边是500px，对于我的MacBook看起来也还好，因为MacBook的屏幕比较小，屏幕的利用率还是比较高的。不过对于更大的屏幕总共860px大小的区域确实不太够，尤其是4K屏幕可能只有中间一点点的区域有内容，会看着很难受，所以我想了一下还是改成百分比布局比较好，这样无论屏幕有多宽也能利用得到。
还有一点就是分段，虽然我也知道在Markdown中两个换行是分段，但是感觉在文本中两个换行隔得太远了，所以一开始写文章的时候就选择只换行。不过在中文里确实不分段也不太好看，但是又不想去动之前写的文章，那该怎么办呢？思来想去干脆把换行全部替换成分段好啦，在Jekyll中可以用replace过滤器把所有的“\<br\>”替换成“\</p\>\<p\>”，因为Markdown解析本来就会有一个段落，所以直接闭合加开始就能分割成多个段落了。那么加了分段是为了什么？其实主要是为了首行缩进，有首行缩进对阅读还是有挺大帮助的，至于怎么做也非常简单，直接给p标签设置`text-indent: 2em;`就可以了。
最后就是评论授权的问题，我用的Gitalk也有人问了[这个问题](https://github.com/gitalk/gitalk/issues/95)，我仔细看了一下GitHub官方文档中[OAuth可以授权的作用域](https://docs.github.com/zh/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps)发现确实是没办法限制只写Issues😥，至于其他的评论系统对后端的依赖又太多了，尤其是Giscus，居然是直接用iframe引用Giscus网站中的页面😅，如果Giscus哪天挂了，那评论系统不也挂了（虽然GitHub也不可靠……），至于自托管就更不可能了，我能让服务器持续运营可比不上大厂😆。所以最后我选择给Gitalk加个提示，不想登录也可以跳转到GitHub上进行评论，至于怎么加？还是让AI来吧，最后AI给我写了这么一串CSS：
```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](https://archive.org/details/wlsetup-all_201802)等等，可惜后来全部被微软砍掉了🤣。考虑到Windows 7如此优秀，那要不然兼容一下它旗下的Internet Explorer 8浏览器吧？
其实GitHub给的那些Jekyll主题本身都是兼容IE8的，包括我在用的minimal主题也一样。但随着我这么多年加了许许多多的功能，绝大多数功能都没有考虑兼容性，只想着能用就行。不过我写的功能基本上都非常简单，如果想改得让它兼容IE8也并非难事，只要理论上可行就可以。当然也有些理论上不可能的东西，比如WebGL。因此，我的[Live2D看板娘](/Live2dHistoire/)就没有任何可能性被支持了，至于其他的……也许有一些理论上可以支持，但是改起来比较麻烦的就也算了吧（比如Gitalk之类的）。
## 对文章点击计数器的兼容性优化
其实我的文章点击计数器从[之前](/2019/06/22/counter.html)改成用jQuery调用自己的接口以后就没有什么兼容性的问题了，因为jQuery本来就是处理浏览器之间差异的库，而且也是兼容IE8的。只不过有个问题是IE8不支持用XHR跨域请求，只能用“XDR（XDomainRequest）”进行跨域请求……还好有个[现成的库](https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest)能让jQuery在遇到这种情况时使用XDR请求，于是我就用条件注释让IE9以下的浏览器引入这个库，这样在IE下也能正常显示文章点击数了😆。
## 关于响应式布局的兼容性优化
在IE8中的CSS是不支持媒体查询的，所以在修改窗口大小时也不能根据情况使用合适的样式。本来我没打算解决这个问题，结果恰好看到了一个库：[Respond.js](https://github.com/scottjehl/Respond)，所以就直接拿来用了😝。
## 关于全文搜索的兼容性优化
其实从功能的角度来说这种东西肯定是在IE8下可以实现的，但是我用的[那个库](https://github.com/christian-fei/Simple-Jekyll-Search)有点迷，到处都用的是const关键字结果还莫名其妙[判断XHR](https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/src/JSONLoader.js#L29)搞的好像是在兼容旧浏览器？改起来有点麻烦懒得搞了……不过除此之外还有个取巧的方式，既然我搜不了，干脆让谷歌来搜吧，至于谷歌支不支持IE8就不是我的事了🤣，所以直接给搜索框外面套了一个form表单，这样甚至可以在不启用JS的情况下搜索（假设谷歌支持没有JS的情况）。
## 对于订阅软件的兼容性支持
之前我的博客对订阅的支持是使用的官方的[jekyll-feed](https://github.com/jekyll/jekyll-feed)插件，它只支持Atom格式的订阅，一般的阅读器也是支持这种格式的（即使是IE8也是完美支持）。但是我发现有非常少数的某些网站没办法解析Atom，只支持RSS……所以我只好特地加了[对RSS格式的支持](https://github.com/Mabbs/mabbs.github.io/blob/master/rss.xml)，还顺带搞了支持Atom和RSS格式的[XSLT模板](https://github.com/Mabbs/mabbs.github.io/blob/master/feed.xslt.xml)来预览。既然RSS也支持了，那干脆连[JSONFeed](https://github.com/Mabbs/mabbs.github.io/blob/master/feed.json)也一起做了吧😆，虽然意义不是很大……
## 给博客添加网页快讯
既然要兼容IE8，那当然是能用的都用啦，在IE8订阅网站源的地方，有一个‘添加网页快讯’的功能。因为没有可以参考的网站，我甚至都没理解这个功能展现的效果是什么样的。我看这个网页快讯好像是抄了一部分[hAtom Microformat](http://microformats.org/wiki/hatom)的规范，我还以为是每个条目都单独需要一个entry-title和entry-content，结果发现并不是😅，一个hslice只能有一个entry-title……
这个功能其实非常简单，主要作用就是把网页的一部分切出来单独展示，当这一部分发生更新的时候IE浏览器就会提示用户。然后在这之中hslice要包裹所有需要处理的元素，写到最外面元素的class中就可以，entry-title是希望用户订阅时展示的名字，而entry-content是被切下来展示的网页。具体的内容可以在[微软官方文档](https://learn.microsoft.com/en-us/previous-versions/windows/desktop/cc304073(v=vs.85))中看到。
# 让网站增加对IndieWeb的支持
既然说到Microformat，那就要提到[IndieWeb](https://indieweb.org/IndieWeb)了。虽然这个东西网络上也没几个人搞，但看起来有点意思就整下玩玩呗。
## 第零级：域名
根据他们的[入门教程](https://indieweb.org/Getting_Started)来看，成为IndieWeb最重要的一点就是有自己的域名。看到这一点我都怀疑这是不是卖域名的用来忽悠人的玩意？我一分钱也不想给域名注册商，虽然DNS这套系统确实维护需要成本，但是能有多大成本呢？绝大多数不都让ISP摊了？另外他们所说的大公司的服务可能会消失，那么域名就不会吗？注册商和注册局完全有能力让你的域名用不了，这也是我们不可控的东西，因此尽管这对于IndieWeb很重要，但是我不打算搞，于是我的博客就不是IndieWeb了🤣。
## 第一级：识别身份
没有域名也不影响接下来的步骤，大公司的域名也是域名（虽然不属于我）。根据教程来看，支持IndieAuth非常简单，只需要在head中加一个`rel=me`的link标签，指向IndieAuth支持的个人主页，并且那个个人主页有一个反链指向自己的网站就可以，比如指向自己的GitHub主页，那么就可以使用GitHub登录来验证这个网站属于我。这一步可以使用[IndieWebify.Me](https://indiewebify.me/validate-rel-me/)来验证。
## 第二级：发布内容
在发布前，为了更好的让其他软件读取网站内容，需要用microformats2来标注网站内容，这个倒也不复杂，可以根据[这个教程](https://microformats.org/wiki/h-entry)按照上面所说的东西用class名去标注对应的元素，标注完之后就可以用[IndieWebify.Me](https://indiewebify.me/validate-h-entry/?url=https%3A%2F%2Fmabbs.github.io%2F2025%2F06%2F02%2Foptimize.html)验证了。
除此之外还需要用[h-card](https://microformats.org/wiki/h-card)标注网站的身份，解析完之后可以当网站名片用，具体可以看[这里](https://indiewebify.me/validate-h-card/?url=https%3A%2F%2Fmabbs.github.io)。
另外还有一点就是Webmentions，在网站上声明Webmentions可以让别人引用你的文章时通知一下你。不过对于静态博客不是很友好。一是要收，收完还要展示，二是要发，引用了别人的文章如果对面支持Webmentions要把自己引用的文章链接发给对方。虽然Jekyll有[插件](https://github.com/aarongustafson/jekyll-webmention_io)可以支持，但是我用GitHub额外装插件还得自己写Actions，而且我发布一次要在一堆Pages上更新，也不太适合，所以我打算光收不发（只需要在link标签中添加Webmentions的端点就可以），也不展示了，而且国内根本没几个人用Webmention🤣。如果有人对谁给我发了Webmention感兴趣，可以在[这里](https://webmention.io/api/mentions.html?token=Dan9NrE8CLsFJ1qdRq2hjg)查看（不过绝大多数都是我自己手动发的🤣）
如果谁有兴趣给自己的网站添加完整的Webmention，可以用[Webmention Rocks!](https://webmention.rocks/)进行测试（如果使用了WordPress是自带的，只需要打开相关的功能就可以）。
## 第三级：进行交流
在IndieWeb中有一个很重要的事情就是相互交流，搞这个比较重要的目的是为了避免大公司的服务炸了，所以要替代比如推特，Facebook之类的服务，但是在这些服务还没炸的时候仍然可以在上面发自己的网站，也算是引流吧。他们把这个行为叫做[POSSE](https://indieweb.org/POSSE)。对我来说，我在微信、QQ之类的上面发自己新写的文章就算是POSSE了，毕竟我又不玩国外的社交平台😆。
除此之外似乎还要把别人的评论同步到自己网站？我能做到的顶多就是Gitalk了，更多的就算了吧～
## 额外的内容
既然已经支持了IndieWeb，那么不妨加入IndieWeb Webring吧。在[IndieWeb Webring 🕸💍](https://xn--sr8hvo.ws)中的大多数网站都是适配了IndieWeb的，加入他们也算是证明自己适配IndieWeb的努力了吧😊。
# 对博客可靠性的优化
以前为了应对[GitHub](/2022/01/04/banned.html)的不可靠，我仅仅是在各个Pages上部署了我的网站，但是后来我想了想Git本身就是分布式的，分发是一件很简单的事情啊，我要是想提高博客的可靠性，不如直接用Git分发到各个Git托管商就好了啊～因此我就利用GitLab镜像仓库的功能，一键把我的网站同步到数十个知名的Git托管商，提高了网站的可靠性，具体的列表可以在[这里](/proxylist.html#git列表)查看。
# 感想
在这次的博客优化中，了解了不少新的东西啊，不仅学习了CSS，还有了解如何提高网站兼容性，以及提高了博客的可靠性和曝光度。果然折腾博客本身也能提高自己啊，还能写文章分享一下折腾的经验😆。虽然折腾的内容不一定能在未来的生活中用得上，但是有意思就足够了😁。
Reference in New Issue View Git Blame Copy Permalink