mirror of
https://github.com/Mabbs/mabbs.github.io
synced 2025-07-20 05:02:01 +00:00
Update 3 files
- /_posts/2025-06-02-optimize.md - /assets/js/main.js - /index.html
This commit is contained in:
mayx
parent
c2351bc269
commit
8fd0fd107f
85
_posts/2025-06-02-optimize.md
Normal file
85
_posts/2025-06-02-optimize.md
Normal file
@ -0,0 +1,85 @@
|
||||
---
|
||||
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，还有了解如何提高网站兼容性，以及提高了博客的可靠性和曝光度。果然折腾博客本身也能提高自己啊，还能写文章分享一下折腾的经验😆。虽然折腾的内容不一定能在未来的生活中用得上，但是有意思就足够了😁。
|
||||
@ -47,6 +47,10 @@ $(function () {
|
||||
});
|
||||
|
||||
function getSearchJSON(callback) {
|
||||
if (typeof Storage == 'undefined') {
|
||||
$.getJSON("/search.json", callback);
|
||||
return;
|
||||
}
|
||||
var searchData = JSON.parse(localStorage.getItem("blog_" + lastUpdated.valueOf()));
|
||||
if (!searchData) {
|
||||
for (var i = 0; i < localStorage.length; i++) {
|
||||
|
||||
@ -3,7 +3,7 @@ layout: default
|
||||
title: 首页 - 我的文章
|
||||
---
|
||||
{% if paginator.page == 1 %}<div class="hslice" id="LatestPost">{% endif %}
|
||||
<h1 class="entry-title" style="display:inline"> 首页 - 我的文章 </h1><small><a href="/archives.html">Archives</a> <!--[if !IE]> --> | <a href="javascript:getSearchJSON(function(data){window.location = data[Math.floor(Math.random()*data.length)].url})">Random</a> <!-- <![endif]--> </small><br /><br />
|
||||
<h1 class="entry-title" style="display:inline"> 首页 - 我的文章 </h1><small><a href="/archives.html">Archives</a> | <a href="javascript:getSearchJSON(function(data){window.location = data[Math.floor(Math.random()*data.length)].url})">Random</a></small><br /><br />
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user