❌

阅读视图

发现新文章，点击刷新页面。

typecho支持avif图片格式

✇水清无鱼
bosir

在张洪大佬《实现全站图片使用avif格式，替代臃肿的webp教程》一文中学习并认识到了AVIF这个图片格式。这个格式相较于传统的jpg、png甚至webp等都具有很大的优势，唯一小遗憾就是有些许浏览器或者手机端不支持。但，无所畏惧。喜欢折腾和动手的我，准备开启博客的avif之旅。

什么是AVIF？

AVIF是一种基于AV1视频编码的新图像格式，相对于JPEG、WebP等图片格式压缩率更高，并且画面细节更好。AVIF通过使用更现代的压缩算法，在相同质量的前提下，AVIF文件大小是JPEG文件的35%左右。

AVIF支持高动态范围（HDR）和标准动态范围 （SDR）内容，包括常用的sRGB和BT.2020色彩空间。它支持8、10和12位的颜色深度、胶片颗粒保留、PNG图像的透明度以及GIF格式的动画。

实际情况就是，更小的图片，更快的加载速度，且画质还不怎么受影响。实际请看下图。同样一张图片，avif和webp相差的大小和加载速度不同，所以avif还是有点香的。

当然，avif的缺点就是并不兼容有些浏览器，比如Edge

Nginx添加规则

在你的nginx服务器http里面添加如下规则后，重启服务器即可。

types {
    image/avif avif;
}

Typecho怎么实现avif

Typecho打开网站根目录，进入Var找到Widget，打开Options.php文件，大约673行，差不多最后面，添加AVIF，例

    /**
     * 允许上传的文件类型
     *
     * @return array
     */
    protected function ___allowedAttachmentTypes(): array
    {
        $attachmentTypesResult = [];
        if (null != $this->attachmentTypes) {
            $attachmentTypes = str_replace(
                ['@image@', '@media@', '@doc@'],
                [
                    'gif,jpg,jpeg,png,avif,tiff,bmp,webp', 'mp3,mp4,mov,wmv,wma,rmvb,rm,avi,flv,ogg,oga,ogv',
                    'txt,doc,docx,xls,xlsx,ppt,pptx,zip,rar,pdf'
                ],
                $this->attachmentTypes
            );
            $attachmentTypesResult = array_unique(array_map('trim', preg_split("/(,|\.)/", $attachmentTypes)));
        }
        return $attachmentTypesResult;
    }
}

阿里云怎么实现avif

阿里云OSS定义图片为avif，后缀
?x-oss-process=image/format,avif

我自己的博客不是从官网添加的规则，是直接通过AliOssForTypecho的默认自定义样式实现。即不管你上传的是什么照片格式，添加了这个后缀以后，呈现出来的就是avif图片。但你上传的源文件还是原本的图片格式，存在在oss里面。当然我自己的服务器也有备份。

考虑到目前大部分浏览器和手机都兼容AVIF，所以不兼容的方案我没有添加进去。当然，也是因为目前我使用的几个方法都不太成功。如果有会的，留言说一下。阿里云官方的使用picture标签和CSS+JS方式都不太适合我，我想直接通过在Nginx里进行判断，但现在还没有找对方法。

CSS移除特定a类标签的伪元素样式

✇水清无鱼
bosir

今天，在修改主题的时候，发现自己post-content中的a类元素，使用:after伪元素以后，同时作用于cl-offset且name属性以cl-开头的和href属性包含#cl-且onclick属性为Catalogswith()的标签。

.post-content a:after{
        content: '↷';
    font-size: .9rem;
}

这两个代码共同性就是a类元素，我们需要做的事情就是，移除掉不需要:after伪元素的属性。

移除特定a标签的 :after 伪元素的样式，需要使用CSS选择器来精确选中这个a标签，并设置 :after 伪元素的content属性为空。这样，:after伪元素就不会显示任何内容。

以下是CSS代码示例，它会移除所有.post-content下具有类cl-offset和a，并且name属性以cl-开头的a标签的:after伪元素：

.post-content a.cl-offset[name^="cl-"]:after {
    content: '' !important;
}

这里的 ^="cl-" 是一个属性选择器，它会匹配所有name属性值以cl-开头的元素。 content: '' 会移除:after伪元素的内容，!important是一个强制性声明，确保这个规则会覆盖其他可能存在的规则。

把这段CSS代码应该放在CSS样式表中，它将确保所有符合条件的a标签的:after伪元素都不会显示任何内容。

同理如果想要为.post-content类下的所有a标签添加:after伪元素，并设置其内容为↷和字体大小为.9rem，但同时想要移除特定a标签的:after伪元素（即那些href属性包含#cl-且onclick属性为Catalogswith()的标签），可以使用以下CSS代码：

/* 为所有.post-content下的a标签添加:after伪元素 */
.post-content a:after {
    content: '↷';
    font-size: .9rem;
}

/* 移除具有特定href和onclick属性的a标签的:after伪元素 */
.post-content a[href^="#cl-"][onclick="Catalogswith()"]:after {
    content: none;
}

这段CSS代码起了两个作用：

它为.post-content类下的所有a标签添加了一个:after伪元素，内容为↷，字体大小为.9rem。然后，针对那些href属性以#cl-开头且onclick属性为Catalogswith()的a标签，将:after伪元素的内容设置为none，从而移除了这些特定标签的:after伪元素。
除了符合特定条件的a标签外，其他所有.post-content下的a标签都会在其后显示一个↷符号。
果然，学习才能使人进步啊，现在不就知道什么a类元素，什么伪元素了吗。不然连怎么问Ai都不知道。

参考资料
  • CSDN：//blog.csdn.net/libol/article/details/139976586
  • 腾讯云：//cloud.tencent.com/developer/article/1407981
  • 简书：//www.jianshu.com/p/77f0efab3747
  • php中文网：//www.php.cn/code/894.html
  • picprose：//picprose.net/zh

typecho使用instant.page和opcache扩展

✇水清无鱼
bosir

本周对博客进行了许多精简和优化，诸如合并订阅、友人页面，摒弃下拉菜单，修改主题..当然，也有一些新添加的东西，预加载脚本和缓存等。本地测试首页打开耗时应该成功降到了300ms以下，各页面的打开也更加顺滑。

折腾是一种自我实现的过程，不管结果怎样，都是值得的，你越折腾就越精彩。

instant.page

这是一个网站预加载的js脚本，可以提升网站速度。如图，鼠标悬停超过65毫秒，自动加载页面文本信息，但是不加载图片资源。对于用户体验会有提升，具体提升多大，只有自己测试了。
部署方式，直接引用js脚本即可。PS.推荐放在footer

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

国内服务器可以直接本地部署，不推荐CDN部署，会增加请求数消耗资源。

<script src="https://你的存储位置/instantpage.js" type="module"></script>

官网和脚本下载

php8.4开启 Opcache

想体验php8.0以上的终极奥妙，你就开启这个，也是一种缓存机制.

[Zend Opcache]
zend_extension="opcache.so" ;
opcache.enable = 1
opcache.memory_consumption=256
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=100000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1
opcache.file_cache=/tmp
opcache.jit_buffer_size=64M
opcache.jit=1205
[Zend Opcache]

当然，以上折腾属于做好网站备份的，如果你没有做好准备，那就赶快准备起来吧。

放下后的生活

✇水清无鱼
bosir

人生路上，要学会善待他人，也要懂得善待自己。善待他人，是在地铁里为赶时间的人让开通道的举手之劳，是倾听失意者倾诉时递上的一杯热茶，是面对分歧时先予理解的柔软心肠。这些细碎的善意如同投入湖面的石子，涟漪会一圈圈荡回自身...你为他人撑伞的时刻，风雨也会绕开你的肩。善待自己，则是允许偶尔的软弱而非苛责不休，是在疲惫时暂停赶路的脚步，是接纳不完美如同接纳四季的更迭。当你学会与自己和解，便会发现内心的荒芜正在长出春天，这份丰沛的生命力，终将成为照亮他人的光源。

“提起千斤重，放下二两轻”，一念放下，万般自在。放下不是认输，而是给心灵松绑的智慧。如同园丁修剪病枝不是扼杀生机，而是让树木更茁壮地生长。放下职场上的无谓攀比，才能看见自己独特的花期；放下对过往遗憾的反复咀嚼，才能给未来腾出存放惊喜的空间。苏轼因“乌台诗案”被贬黄州，却在赤壁之下放下仕途失意，写下“大江东去”的千古绝唱；弘一法师李叔同放下俗世荣华，终成“悲欣交集”的一代高僧。真正的放下，是在风起时欣赏落花的轻盈，在雨落时聆听滴答的诗意，让心如同空谷，容得下鸟鸣，也容得下寂静。

生活本不苦，苦的是欲望过多；心本无累，累的是放不下的太多。欲望是悬在心头的钟摆，越是追逐越会摇摆不定。古人云“良田万顷，日食一升；广厦千间，夜眠八尺”，可现代人身处物欲洪流，却总在“想要更多”的漩涡里挣扎：为了限量款包包省吃俭用，为了虚名头衔透支健康，为了朋友圈点赞焦虑不安。而沉淀，是在喧嚣中给自己沏一壶茶的耐心，是在刷屏时代坚持手写日记的沉静，是在众说纷纭时守住内心标尺的笃定。就像河床在水流冲刷中沉淀出珍珠，生命也在取舍间沉淀出智慧——那些被过滤掉的浮躁，终将化为滋养灵魂的沃土。

心性调柔了，一切自然就顺于慈悲而行。调柔心性，不是变得软弱，而是像水一样包容却有力量。当他人误解时，不急于辩解而是换位思考，这是慈悲；当自己犯错时，不沉溺自责而是修正前行，这也是慈悲。就像暗夜中的一盏灯，不仅驱散自身的恐惧，也会吸引迷路者向光而来。弘一法师说“不为自己求安乐，但愿众生得离苦”，这份慈悲并非遥不可及——给流浪猫留一碗饭，为陌生人指一次路，甚至对镜中的自己说一句“今天辛苦了”，都是心灯点亮的瞬间。心的本性原是澄澈的天空，偶有乌云掠过，却从未改变它包容日月的本质。

生活里不必要渴求别人的理解和认同。每个人都是自己宇宙的中心，他人的目光不过是偶然划过的流星。梵高生前无人理解他的向日葵，却不妨碍百年后世界为其燃烧的生命力震撼；梭罗在瓦尔登湖畔独居两年，用孤独浇灌出超越时代的哲思。在这个人人急于“被看见”的时代，真正的强大是“自洽”：你不必向不懂你的人解释你的沉默，不必为了合群而伪装自己的棱角。就像深山里的兰草，不因无人欣赏而不芬芳，它的绽放只是因为它本就属于春天。心若磐石，风来不动；心若明镜，岁月无伤——你活成自己喜欢的样子，就是对生命最好的致敬。

父与子的成长

✇水清无鱼
bosir

该怎么形容我的父亲呢？

没有日记、也没有散文诗，既不沉默寡言、也不喋喋不休。有时候也爱吹点小牛逼，自恋的讲述一下自己的过往。有时候也会有点佝偻着背，虽然才五十多岁。有一次，他胆结石犯了，疼的哭出来，算是我第一次见父亲流眼泪。不过，我的父亲也有缺点，就是对我的要求是向他人看齐，这个他人或许是亲戚朋友的孩子、或许是他看见的某类人。

我平常和他的对话并不多，父与子之间的对话很少有，但我知道他是爱我的，只是比较内敛和沉默。曾经他也曾跨越几千公里回来参加我的十八岁成人礼，请了我的朋友吃了顿饭，那时候我也是第一次见这样的父亲。我的家庭并不富裕，所以从小到大，难免会常有自卑感和懦弱感，成长至今自己做父亲了，才感知家庭和父亲对于孩子的影响。

[photos]
微信图片_2025-06-13_180437_483.png
微信图片_2025-06-13_180450_972.png
[/photos]

年轻的父与子好像和以前不一样了，也许是孩子没有长大，我作为父亲和孩子的对话还是挺多的。他喜欢车车类的玩具，也喜欢去游乐园，因为我工作在上海，日常他在嘉兴上学，一周只能见一次，好多时候好像只能依靠这些外在的东西去弥补他。

[photos]
微信图片_2025-06-13_180442_054.png
微信图片_2025-06-13_180500_659.png
[/photos]

冬天的风吹到了夏天，孩子的快乐其实很简单，就如同放风筝一样，拉着一根线，太远了拉进一点，太近了就松一点。小的时候他的眼里可能只有父母，长大一些了有了其他的东西，我们也应该允许。

[photos]
微信图片_20250613180426_115.png
微信图片_2025-06-13_180547_316.png
[/photos]

希望我的孩子能健康的长大，我没有望子成龙的期盼，只求他有自己想要的人生，无论快乐与否。

生命和生活

✇水清无鱼
bosir

有天和朋友聊天，问人死了到底还存不存在？是真的变成了灵体，还是去到了另一个平行世界，还是真的直接就消散了？当然，聊不出答案，因为你怎么想的，可能结果就是怎么样。毕竟大多数人，连活都活不明白，更妄论死了呢！

说起活着，想起了汪曾祺和余华两位作家。一个把生活写进了生命，一个把生命放入生活。当然，这个不是著名的鲁迅和麦克阿瑟评价的。

个人对于汪曾祺先生的认知，来源于更多的是《草木人间》这本书，里面有很多画面温暖了我，都是对生活的刻画。很喜欢他对于生活中的那种观察和体会。

如果你来访我，我不在，请和我门外的花坐一会儿。它们很温暖，我注视它们很多很多日子了。它们开得不茂盛，想起来什么说什么，没有话说时，尽管长着碧叶。
在黑白里温柔地爱彩色，在彩色里朝圣黑白。 浮云一别后，流水十年间。 曾经知已再无悔，已共春风何必哀。虔诚地呼唤风。那一刻，人与天有种神秘又真诚的交流。 光才是现实世界，而树木不过是用来反映和折射光线的间隔物.愿你自己有充分的忍耐去担当，有充分单纯的心去信仰。

而余华先生，是因为先看了他参加的综艺，觉得他不像传统作家，反而很幽默很有梗，像是身边的朋友。所以去读了他的《活着》，这本书里也有好多人生心得。

人啊，活着时受了再多的苦，到了快死的时候也会想个法子来宽慰自己。
人是为了活着本身而活着，而不是为了活着之外的任何事物而活着。

前两天，在小视频刷到了一个非常具有开放性的观念，说人只是来体验生命的，我举得很有趣且对我个人而言是一次不错的观念洗礼。你只是来体验生命的，不是来演绎完美的。你什么都拥有不了，也都留不住，更不需要证明什么。这世上99%的人都不会有太大出息，都只能普普通通的过完这一生。所以请放下你的焦虑，这辈子无论你怎么过，怎么活都不重要。

你到这世上也仅仅是为了体验这个世界的花花草草，成功了体验而已，失败了体验而已，结婚了体验而已，离婚了体验而已，这其中你带不走任何东西，也没有什么是一定要完成的，也许对我们来讲，健康的活着，平静的过着，开心的笑着，适当的忙着，就是对自己，对人生最好的交代。

致小友的一封信

✇水清无鱼
bosir
我是一名十多年的狼人杀玩家，这封信是写给狼人杀小友的。不会玩狼人杀的朋友可能不理解里面的专业术语，但是不影响阅读。只是想表达尊重二字大于任性。

亲爱的朋友：

小蹄子，见字如面。

很高兴和你相识、相知，在我看来你是一个很单纯的姑娘。

不知道何时起，如老友一般，对你有了牵挂和思念。可能是参与了你人生中一些看似坎坷却又无足挂齿的小事，使我有了共情之感。因而借故调侃，似你叔辈，像是看待和照顾女儿一样。

我是一个多情善感之人，也是充满了悲悯之心。看似心胸豁达，但我知道，其实我还是挺小心眼的一个人。这种小心眼来自于对自我规则和认知的构建，简单点说，是我们每个人称之为的底线和安全线。高手说我生你气了，确实也生气了，但是气的不是你瞎玩，气的是你对自己和他人也丢失了尊重。我说这些话，或许有点上纲上线了，但我是较真儿了。

我是可以接受很多玩法的人，也是一个能接受水平参差的人，甚至可以接受谩骂的人，但我不接受不尊重自己的人。就像昨天我没参与的一把和参与的一把。凸凸猎人接狼人查杀可以带走真预言家，7号在形成反水单边预的情况下拿不到警徽，这已经脱离了游戏玩法的范畴，而是带入了太多的不应该，失去了对自己底牌的尊重。

游戏结束，当我看见你和9号都是好人的时候，我是气愤的。因为我一直以为9可能是好人，你可能是狼在打情绪。我和女巫的对话都是，你要先毒9号，在出11号，因为你在单边预的第一警徽流，我都没有舍得一棍子把你打死，我是真的有在给你空间，哪怕后面你说我的铁狼，你出局那一天，你的头上都没有我这一票。说的明白一点，你和9号都应该出局，但是我宁愿9号出在你前面，和轮次、发言、逻辑都没有关系了。

小蹄子，我是一介凡人。高手和我说，你应该是心情不好或者有原因才这样的，我信她说的，也信你可能真的当时判断过激了。但游戏结束，我迟迟没有等来，你在游戏里面和很多认识或者不认识的朋友说一声对不起，也没有对你自己说一声对不起。真因为是好友，这句对不起，才显得尤其的珍贵。我要的一直不是道歉，我要的是你明白，狼人杀是我们交友的媒介或者平台，但是我们还是要立足于该有的判断之上。这种判断是基于最底层的逻辑和规则，应该保有的遵守和尊重。

我希望这段文字，不会如一页薄纸或寥寥几句废话，轻易消逝在风中。它代表的是我想对你说的话，也是对我自己的一个警戒与要求。嘻嘻哈哈、打打闹闹是朋友间的常态，但更因为是朋友，才需要知道朋友间需要的是什么。愿你拥有最美好的爱情，也愿你拥有最纯粹的友情！

离婚这件小事

✇水清无鱼
bosir

当我手里拿着“离婚证”的时候，有些丧气，包含着酸甜苦辣、茶米油盐、点点滴滴的婚姻生活，就这样薄薄的结束了。我一直认为婚姻应该是厚重的，但是现在看来，却也是渺小和不起眼的。

没结婚的时候，对于婚姻的理解是基于美好爱情的幻想；结婚以后，才发现婚姻是对现实生活的各种妥协，反而爱情逐渐变得不值一提。我的婚姻，之所以结束，我归结的根本原因，还是双方的认知相差比较大。就像指鹿为马、对牛谈情、混淆是非......这种认知差，一定是让人痛苦的，比没有共同兴趣爱好要痛苦的多，会让人减少沟通的欲望和和解的可能。

经历了一段婚姻后，谈不上有多深刻或者真知灼见，毕竟当你爱上一个人的时候，还是想和在一起，还是想和她结婚生子，只不过对于婚姻生活有了更多的理解，更多的学会了在婚姻中，除了妥协之外，更需要保持自我、坚守个性。很多时候，我以为结婚后，不需要伪装或者不需要遮掩，应该坦坦荡荡的赤裸相待。但我现在不那么认可了，未来可能我会保留自己的私人空间，持续包装充实自己，也要学会留存着彼此各自的秘密。距离产生美，空间感、距离感是夫妻生活应该保留的状态。

可能，婚姻结束伤害最大的是小孩子，不过我这次选择了自私一些。我好像真的不能接受，自己后半生的日子伴随这种认知鸿沟。我承认我爱我的孩子，我可以为他牺牲很多；但是我也爱我自己，已经妥协了那么多，也应该为了自己不妥协那么一次了。

有人问过我，还相信爱情和婚姻吗？我说当然相信。记得有位辩论选手说过那么一个结论，说人的左脑会分泌一种化学物质，这种化学物质就是遇到某个人会产生愉悦感、快乐感、亲密感。科学能解释这种化学物质，但是不能解释这种化学物质面对谁的时候分泌。也就是说，人的这种情感是不可控的。我们标榜的条条框框、标标准准都不能阻止你爱上某人，只会阻止爱下去的可能。所以我是相信爱情的，也相信婚姻的。

矛盾的纠结体，不在于自己分不清楚什么是铆，什么是钉，而是在于自我构建的解析当中去寻找最优解，但我们明明知道，大多数情况下，万事万物哪里有那么多最优解，所以就变成了纠结的矛盾体。我依然相信爱情和婚姻，却又不敢轻易尝试了，因为它包含着对自己和家人的负责。就是在这样的究极折磨之下，你又好难去重新开始一段。当然，现在讲这个，有些为时尚早。

前两天，博客清空了。原因是服务器貌似崩盘了，虽然有备份，但是纠结了没一会儿，还是选择舍弃了。可能这也是一种断舍离吧，水清无鱼本质其实是一个更偏向于生活的博客，却写一些技术的东西比较多，总觉得比较偏了些。感谢彼岸临窗的主题，很干净很漂亮，也很适合文字输出。

重新上路，继续前行，十年之约，今年满打满算7年了，愿与诸君共同见证！

认知觉醒

✇水清无鱼
bosir

《认知觉醒》里说:“我敢打赌，凡是买了一堆书没读、报了一堆课没上、心中有无数欲望的人，几乎没有主动做成过一件事，比如养成早起、跑步、阅读的习惯，练就写作、画画的技能，考个好成绩、有高收入等等。”

心态

这个世界上，最容易失败的两种心态，一个是看到别人的明确结果，然后自己在付出行动；另一个就是盲目相信选择大于努力。归结起来就一句话 想要找到捷径。其实一个人在日常生活之中，每天需要去产生连接的，是万事万物，是自己丰盛的内在体验，而不是去连接自己的看法和观念，让看法和观念把自己封闭在一个牢笼里。

改变

改变自己的第一步，不是洗心革面，来一次彻头彻尾的大改造，而是把以前想改变但半途而废的事做起来。比如把买了没读的书先看完，报了名没认真学的课去学一遍。

如果没有自己喜欢且专注的事，一天很容易就过去了。有几件自己明确要持续坚持的事，好像一天就变得特别长。时间从来就是公平的，它的价值只取决于你给它赋予的意义。如果人生有什么算是真正意义上的“失去”的话，第一是失去身心的健康；第二是失去感受美好的意识；第三是失去了成长和更新自己的能力。可惜，真正值得人们在意的内在的失去，人们却最不在意。

如果你都不知道要做什么，那就关掉手机，早睡早起，开始健身，去读书，去学一段舞蹈，做好一步步的规划，一点点去实现。不要刚读一本书前几页，就想知道全部内容，刚运动几天，就想瘦到理想的目标，慢慢来，你会得到更好的自己。

放开视野，放下包袱，去尝试新事物，认识新的人。不计较短期的得失，不顾虑一兵一卒的进退，只有一个目的，就是尝试，要不断重复迷茫时做的那些事，要走出舒适区，让自己看到更多的可能。

意义

滴水如金，丝履似银。世间上无论什么东西，都是来之不易，因此要懂得珍惜;乃至金钱、时间，甚至感情，也要爱惜。生活中能减少一点浪费，减少过度消耗，就是爱惜自己的福报。

任何事情，只要懂得转弯，自我调适，能够自我调适的人，无论生活、感情、经济、处世，都能有另外一番的境界。人生的意义，能在“自在”中生活，最为成功。只要我心自在，一切自然就都能自在了，无论身处称、讥、毁、誉、利、衰、苦、乐的“八风”里，都能不为所动。

世间是一半一半的世界，白天一半、夜晚一半，好的一半、坏的一半。我们对于好的固然要接受，对于不好的也要能包容;唯有好坏都能接受、包容，才能成就全面的人生。

情绪

情绪”最源头上的因与最终的果都在，真自己身上，遇见什么人，发生什么事，仅仅只是引发情绪的机缘而已。遇见符合自己观念和看法的人和事，就产生正面情绪;遇见不符合自己观念和看法的事物就产生负面情绪。

各种情绪的产生在源头上的原因，是自己的观念和看法，与什么样的人和什么样的事，其实毫无关系。
被你讨厌到了极致的人，一样会有人喜欢。被你认为丑的衣服，一样有其他人觉得好看，一样有人心甘情愿买单。偏偏人们从来不能这样去理解世界，这样去理解自己和别人。

自己遇见的一切，不过只是遇见自己的机缘而已，遇见的不过是自己的观念和看法而已，遇见的不过只是自己的好恶而已，而真实的遇见，毫无关系。

这也正是哲学家和智者们所说的:任何事物存在的本质都是中性的，不好也不坏7的，是我们对事物的看法。所以，同样一件事，同一个人，不同的人产生不同的反应。

通过Service Worker‌ 缓存优化 Typecho 的首页访问加速

✇水清无鱼
bosir

Service Worker‌ 是一种运行在浏览器背景的脚本，它可以在页面关闭后继续运行，主要用于处理网络请求、缓存资源、推送消息等功能。

认识

Service Worker 也是一个后台运行的脚本，充当一个代理服务器，拦截用户发出的网络请求，比如加载脚本和图片。Service Worker 可以修改用户的请求，或者直接向用户发出回应，不用联系服务器，这使得用户可以在离线情况下使用网络应用。它还可以在本地缓存资源文件，直接从缓存加载文件，因此可以加快访问速度。

条件

要使用 Service Worker‌ 确保网站支持 HTTPS 协议，这是必要条件。

注册

Typecho 使用的话，需要在主题的 header.php 或者 footer.php 里面添加如下代码，以完成 Service Worker 注册。

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js')
            .then(registration => {
                console.log('Service Worker 注册成功:', registration);
            })
            .catch(error => {
                console.log('Service Worker 注册失败:', error);
            });
    }
</script>

新建

在网站的根目录新建 serviceworker.js 和 offline.html 两个独立文件，其中js为引入的必需文件，offline为非必需离线文件。

const CACHE_NAME = 'typecho-cache-v2';
const OFFLINE_URL = '/offline.html';

const urlsToCache = [
    '/',
    '/index.php',
    '/usr/themes/你的主题名字/css/style.min.css', /**css文件
    '/usr/themes/你的主题名字/js/script.min.js', /**js文件
    '/usr/uploads/ /**存储在服务器的图片或文件
    '/favicon.ico',
    OFFLINE_URL,
    'https://artalk.bosir.cn/dist/Artalk.js' /**第三方缓存文件
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
            .then(() => self.skipWaiting())
    );
});

self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(name => {
                    if (name !== CACHE_NAME) {
                        return caches.delete(name);
                    }
                })
            );
        }).then(() => self.clients.claim())
    );
});

self.addEventListener('fetch', event => {
    if (event.request.method !== 'GET') return;

    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) return response;

            return fetch(event.request).then(response => {
                if (!response || response.status !== 200 || response.type !== 'basic') {
                    return response;
                }
                const responseToCache = response.clone();
                caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseToCache));
                return response;
            }).catch(() => {
                return caches.match(OFFLINE_URL);
            });
        })
    );
});

offline模式，即离线模式，f12 打开开发者工具后找到 online选项，点击后会出现offine 字样，点击打开离线模式，刷新页面会发现首页依然可以访问，而没有缓存的页面就显示下面的离线页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水清无鱼</title>
</head>
<body>
    <h1>离线模式</h1>
</body>
</html>

缓存

为了防止在浏览器需要请求新版本的 serviceworker.js 文件时，而文件自身被缓存，所以需要给 serviceworker.js 文件单独指定缓存头 Cache-control: no-store 或 no-cache 。然后在 Nainx 的 server { 区域内添加：

# serviceworker.js 不设置缓存
location ~* /(.*)/serviceworker\.js {
    add_header Cache-Control no-cache;
    add_header Pragma no-cache;
    add_header Expires 0;
}

添加完毕后，重启Nginx服务器。

更新

在更新 Service Worker 时，需要修改 CACHE_NAME 的版本号以触发缓存更新

const CACHE_NAME = 'typecho-cache-v1';
或
const CACHE_NAME = 'typecho-cache-v2';

总结

整体来说，只要不涉及复杂的主题和js，Typecho 已经足够快，且拥有良好的打开速度。可如果你像我一样比较追求极致性能，喜欢折腾，也可以尝试一下。我的目标是把博客优化到和静态博客一样丝滑，目前缓存过后进入首页只需要100ms以内，en...

题外话

目前 typecho 已经出现了 1.3.0测试版本，没错，就是目前我现在使用的这个版本。不过我并不建议大家进行升级，毕竟BUG有点多。我目前是全站 0 插件，测试版本的兼容性有待考量。且如果php像我一样为最新版，出现的问题可能更多...

参考资料

1.// cloud.tencent.com/developer/article/2005909

2.// www.luolt.cn/archives/1848.html

3.// www.bookstack.cn/read/webapi-tutorial/docs-service-worker.md

2025年尝试的第一款AI写作工具NoteGen

✇水清无鱼
bosir

我不是个工具流玩家，写作也用Typecho博客后台自带的编辑器，但有个缺憾就是不能实时预览。于是，大多时候我还是使用在线Markdown写作，比如印象笔记之类。一直也有看很多朋友使用很多笔记工具，不过大多比较复杂且不愿意折腾使用频率不高的工具。最近，偶尔遇见了一个比较简单的笔记工具，试用了一下，感觉还行，就推荐一下。

NoteGen.png

NoteGen

NoteGen 是一款专注于记录和写作的跨端 AI 笔记应用，基于 Tauri 开发。它具备几个不错的优势：
1.支持Mac、Windows、Linux平台
2.Ai模型接入，如ChatGPT、Kimi、DeepSeek等
3.同步存储和Github图床
NoteGen的核心理念是将记录、写作和AI结合使用。

DeepSpeek

Kimi和DeepSpeek是我使用最多的两个ai工具，一个更利于搜索输出，一个更利于优化代码。所以在NoteGen上面我就使用API调用SeepSpeek-chat模型。

base_url：api.deepseek.com 
 api_key: platform.deepseek.com/usage「官网申请」
    model: deepspeek-chat 「V3模型」

配置好相关的调用数据，即可使用Deepspeek-V3模型，具体配置查阅：//api-docs.deepseek.com/zh-cn/

结语

也许还没有掌握方法，输出问题后，反馈的速度相较于平台还是有些差别。还有就是markdown的页面，对于不熟悉markdown语法的人来说，功能还是偏少，且提示以及UI还是比较简陋。整体来说瑕不掩瑜，对于不是重度且需求特别高的人来说，这还是一款值得尝试一下的软件。

禅修#05：滋养心态，控制情绪，改变自己

✇水清无鱼
bosir

《认知觉醒》里说:“我敢打赌，凡是买了一堆书没读、报了一堆课没上、心中有无数欲望的人，几乎没有主动做成过一件事，比如养成早起、跑步、阅读的习惯，练就写作、画画的技能，考个好成绩、有高收入等等。”

心态

这个世界上，最容易失败的两种心态，一个是看到别人的明确结果，然后自己在付出行动；另一个就是盲目相信选择大于努力。归结起来就一句话 想要找到捷径。其实一个人在日常生活之中，每天需要去产生连接的，是万事万物，是自己丰盛的内在体验，而不是去连接自己的看法和观念，让看法和观念把自己封闭在一个牢笼里。

改变

改变自己的第一步，不是洗心革面，来一次彻头彻尾的大改造，而是把以前想改变但半途而废的事做起来。比如把买了没读的书先看完，报了名没认真学的课去学一遍。

如果没有自己喜欢且专注的事，一天很容易就过去了。有几件自己明确要持续坚持的事，好像一天就变得特别长。时间从来就是公平的，它的价值只取决于你给它赋予的意义。如果人生有什么算是真正意义上的“失去”的话，第一是失去身心的健康；第二是失去感受美好的意识；第三是失去了成长和更新自己的能力。可惜，真正值得人们在意的内在的失去，人们却最不在意。

如果你都不知道要做什么，那就关掉手机，早睡早起，开始健身，去读书，去学一段舞蹈，做好一步步的规划，一点点去实现。不要刚读一本书前几页，就想知道全部内容，刚运动几天，就想瘦到理想的目标，慢慢来，你会得到更好的自己。

放开视野，放下包袱，去尝试新事物，认识新的人。不计较短期的得失，不顾虑一兵一卒的进退，只有一个目的，就是尝试，要不断重复迷茫时做的那些事，要走出舒适区，让自己看到更多的可能。

意义

滴水如金，丝履似银。世间上无论什么东西，都是来之不易，因此要懂得珍惜;乃至金钱、时间，甚至感情，也要爱惜。生活中能减少一点浪费，减少过度消耗，就是爱惜自己的福报。

任何事情，只要懂得转弯，自我调适，能够自我调适的人，无论生活、感情、经济、处世，都能有另外一番的境界。人生的意义，能在“自在”中生活，最为成功。只要我心自在，一切自然就都能自在了，无论身处称、讥、毁、誉、利、衰、苦、乐的“八风”里，都能不为所动。

世间是一半一半的世界，白天一半、夜晚一半，好的一半、坏的一半。我们对于好的固然要接受，对于不好的也要能包容;唯有好坏都能接受、包容，才能成就全面的人生。

情绪

情绪”最源头上的因与最终的果都在，真自己身上，遇见什么人，发生什么事，仅仅只是引发情绪的机缘而已。遇见符合自己观念和看法的人和事，就产生正面情绪;遇见不符合自己观念和看法的事物就产生负面情绪。

各种情绪的产生在源头上的原因，是自己的观念和看法，与什么样的人和什么样的事，其实毫无关系。
被你讨厌到了极致的人，一样会有人喜欢。被你认为丑的衣服，一样有其他人觉得好看，一样有人心甘情愿买单。偏偏人们从来不能这样去理解世界，这样去理解自己和别人。

自己遇见的一切，不过只是遇见自己的机缘而已，遇见的不过是自己的观念和看法而已，遇见的不过只是自己的好恶而已，而真实的遇见，毫无关系。

这也正是哲学家和智者们所说的:任何事物存在的本质都是中性的，不好也不坏7的，是我们对事物的看法。所以，同样一件事，同一个人，不同的人产生不同的反应。

Typecho博客引入Pjax无刷新页面的两种方式

✇水清无鱼
bosir

使用Pjax可以在不刷新整个页面的情况下加载新的内容，它利用 AJAX（XmlHttpRequest）和 pushState() 来提供网站的交互性和响应速度，从而提升流畅的浏览体验。Pjax和我使用的instant.page类似，都是为了提升用户体验，让页面更顺滑且加快一定的响应速度，两者并不冲突，可以共存。

Typecho中，有很多主题都集成了Pjax无刷新功能，例如迷你日志、handsome主题等。但也有很多主题没有集成这项功能，所以提供两种Pjax部署方式。

Jquery.pjax

传统的Pjax部署方式，应该前后引入Jquery和Pjax库，且版本需要匹配。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

或者你也可以使用比较稳定的jquery2.1.4和pjax1.9.6版本。主要前后顺序不能出错。

<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {container: '#main',fragment: '#main',timeout: 10000})
</script>

这段js部署在 /body 之前。如果需要加载动画，可以访问我提供的参考资料。

Pjax

Pjax是一个独立的 JavaScript 模块，不依赖于像 jQuery 这样的其他库，它完全用原生 JavaScript 编写。并且体积更小，压缩后载入时间会更短。

<script src="//cdn.bosir.cn/js/pjax.min.js"></script>

我已经部署到阿里云CDN，有需要的可以直接复制过去。随后引入

<script> var pjax = new Pjax({elements: 'a',selectors: ["#main"],timeout: 10000, push: true, replace: false,maxCacheLength: 20, }); </script>

这是根据自己主题修改的，需要更新的部分 #mainbody，如果CSS结构中，没有使用 id 就使用 .mainbody 相反有的话就使用 # 号。

验证方式

以Chrome为例，F12 打开控制台，点击 Network 后，Ctrl+R 刷新，随便点击一个页面，如果出现 xhr 开头的文件，表明成功。 当然更详细的成功部署验证，大家可以自己查阅相关资料。

相关资料:

[1] Gitcode: //gitcode.com/gh_mirrors/pj/pjax?utm_source=artical_gitcode&index=top&type=href
[2] 万维易源: //www.showapi.com/news/article/66d5a0754ddd79f11a002a13
[3] cdnjs: //cdnjs.com/

PHP8.4开启opcache扩展加速和网站instant.page预加载脚本

✇水清无鱼
bosir

本周对博客进行了许多精简和优化，诸如合并订阅、友人页面，摒弃下拉菜单，修改主题..当然，也有一些新添加的东西，预加载脚本和缓存等。本地测试首页打开耗时应该成功降到了300ms以下，各页面的打开也更加顺滑。

折腾是一种自我实现的过程，不管结果怎样，都是值得的，你越折腾就越精彩。

instant.page

这是一个网站预加载的js脚本，可以提升网站速度。如图，鼠标悬停超过65毫秒，自动加载页面文本信息，但是不加载图片资源。对于用户体验会有提升，具体提升多大，只有自己测试了。部署方式，直接引用js脚本即可。PS.推荐放在footer

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

国内服务器可以直接本地部署，不推荐CDN部署，会增加请求数消耗资源。

<script src="https://你的存储位置/instantpage.js" type="module"></script>

官网和脚本下载

php8.4开启 Opcache

想体验php8.0以上的终极奥妙，你就开启这个，也是一种缓存机制.

[Zend Opcache]
zend_extension="opcache.so" ;
opcache.enable = 1
opcache.memory_consumption=256
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=100000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1
opcache.file_cache=/tmp
opcache.jit_buffer_size=64M
opcache.jit=1205
[Zend Opcache]

测试指南

当然，以上折腾属于做好网站备份的，如果你没有做好准备，那就赶快准备起来吧。

装修难做，周末加个小班，做个展厅出样

✇水清无鱼
bosir

现在不管什么行业都非常卷，而且生意不好做。要么落后淘汰，要么升级抢客。这次客户是一个顶墙品牌，依托合作商大角鹿瓷砖3000多平的展厅，局部出样做展厅升级。后期业主要以异业或者联盟活动为主。相较于传统展厅或者展会展厅的局限性，这次设计还是以双结合为主，有区域划分的同时，尽量减少空间壁垒。做好区域规划，剩下的就要细细琢磨了。

未命名方案_00.png

其实装修，不需要那么花里胡哨，这也是目前很多家装设计师在推的理念。墙就以油漆为主，放心刷，油漆的环保性比其它材料都要高很多很多，毕竟国家标准放在那里。吊顶方面，厨卫可以考虑使用蜂窝大板，预算够的话，确实实用美观。其余区域依然是石膏板搭配单双眼皮组合即可。至于定制方面，大家不用去管什么材质，要好用就多层实木柜体和欧松门板就行，投影面积价格基本在1200-1300左右每平方即可拿下。至于设计费、管理费这种，其实都是可免的。真要找设计师设计，就去找专业设计院。

展厅方案.png

重温《哈利波特与魔法石》，想回到2002年的冬天

✇水清无鱼
bosir

《哈利波特与魔法石》2002年初在国内上映，那个时候我应该是四年级，学校组织了免费观影活动，这也让这部电影成我了我第一部进入影院观看的电影。

1734680462809.jpg

当时看这部电影还是很震撼的，真的有被”霍格沃茨魔法学校“震撼到。而且当时非常羡慕哈利波特，不仅拥有支持他的小伙伴，还有能骑着扫帚飞的魔法。当然，时隔二十多年，再让我去回忆当时的情境已然不太现实，只能模模糊糊的想起丝毫。当然，这并不重要。重要的是，通过回顾这部电影，又能依稀见到十岁的自己。我不禁想，如果有一个魔法，能让我与以前的我对话该是多么的好，不需要改变什么，就只聊聊天，说说话，就会十分的美妙吧。

2024-12-20T07:43:47.png

重温这部电影，从如今的视角去看主角团，还是挺奇妙的。哈利波特-丹尼尔·雷德克里夫，和我差不多年龄，这么多年来，发展也还可以，2018年的那部《困兽之斗》的惊悚电影还不错；赫敏-艾玛·沃特森，越大越漂亮，真女神，布朗大学的文学学士，2023年又去牛津读创意写作硕士学位去了，她后期的电影，只看过一部《美女与野兽》，观感一般吧，没什么特别的印象了；马尔福-汤姆·费尔顿，金色小背头，小时候特别讨厌这个坏同学，现在去看，真帅！而且，他演过《猩球崛起》，虽然不算出位，但还是很帅的。至于韦斯莱，确实存在感不强，没啥印象了。

2024-12-20T07:47:11.png

暗杠《童话镇plus》

“哈利波特可以骑着扫帚自由自在飞，而我的扫帚却只能用来清理垃圾堆。”

本文图片来源

[1]草莓有草没味：//mbd.baidu.com/newspage/data/dtlandingsuper?nid=dt_5008507543840740065
[2]那些珍贵老照片：//weibo.com/2930792450/OmJ5zpNOs
[3]小豆当家：//weibo.com/1673854010/ODwBmwmwD
[4]影视大全：//www.xabaotu.com/album/haliboteyumofashi1-1-1.html

CSS中添加伪元素，并移除特定a类标签的伪元素的样式

✇水清无鱼
bosir

今天，在修改主题的时候，发现自己post-content中的a类元素，使用:after伪元素以后，同时作用于cl-offset且name属性以cl-开头的和href属性包含#cl-且onclick属性为Catalogswith()的标签。

.post-content a:after{
        content: '↷';
    font-size: .9rem;
}

这两个代码共同性就是a类元素，我们需要做的事情就是，移除掉不需要:after伪元素的属性。

2024-12-17-15-41-44.png

移除特定a标签的 :after 伪元素的样式，需要使用CSS选择器来精确选中这个a标签，并设置 :after 伪元素的content属性为空。这样，:after伪元素就不会显示任何内容。

以下是CSS代码示例，它会移除所有.post-content下具有类cl-offset和a，并且name属性以cl-开头的a标签的:after伪元素：

.post-content a.cl-offset[name^="cl-"]:after {
    content: '' !important;
}</div>

这里的 ^="cl-" 是一个属性选择器，它会匹配所有name属性值以cl-开头的元素。 content: '' 会移除:after伪元素的内容，!important是一个强制性声明，确保这个规则会覆盖其他可能存在的规则。

把这段CSS代码应该放在CSS样式表中，它将确保所有符合条件的a标签的:after伪元素都不会显示任何内容。

同理如果想要为.post-content类下的所有a标签添加:after伪元素，并设置其内容为↷和字体大小为.9rem，但同时想要移除特定a标签的:after伪元素（即那些href属性包含#cl-且onclick属性为Catalogswith()的标签），可以使用以下CSS代码：

/* 为所有.post-content下的a标签添加:after伪元素 */
.post-content a:after {
    content: '↷';
    font-size: .9rem;
}

/* 移除具有特定href和onclick属性的a标签的:after伪元素 */
.post-content a[href^="#cl-"][onclick="Catalogswith()"]:after {
    content: none;
}

这段CSS代码起了两个作用：

  1. 它为.post-content类下的所有a标签添加了一个:after伪元素，内容为↷，字体大小为.9rem。然后，针对那些href属性以#cl-开头且onclick属性为Catalogswith()的a标签，将:after伪元素的内容设置为none，从而移除了这些特定标签的:after伪元素。
  2. 除了符合特定条件的a标签外，其他所有.post-content下的a标签都会在其后显示一个↷符号。

果然，学习才能使人进步啊，现在不就知道什么a类元素，什么伪元素了吗。不然连怎么问Ai都不知道。

参考资料：

[1]CSDN：//blog.csdn.net/libol/article/details/139976586
[2]腾讯云：//cloud.tencent.com/developer/article/1407981
[3]简书：//www.jianshu.com/p/77f0efab3747
[4]php中文网：//www.php.cn/code/894.html
[5]picprose：//picprose.net/zh

十年之约第五年，我都收获了些什么

✇水清无鱼
bosir

时间，是最无情的东西；当然，也是我们最需要的东西。

2018年的时候，我说我发现了一个网站，名字叫博客志,因为它我建立了水清无鱼。刚开始，主要用作禅修记录的，那个时候写了半年多，一直无人问津。知道后面上了博客志，慢慢有人留言回复了。我便多写了些生活的、折腾博客等相关记录。也就是那时候开始，从Typecho转换到WordPress，然后又从Word Press转到了Z-blog。期间认识了很多朋友，比如临海草原、灰常记忆

那个时候的博客圈，没有今天那么热闹，新鲜血液也并不多。有一天，我开始发现了一个[十年之约]项目，然后写下了那句“十年之约，贵在坚持”，并把域名续约了十年，服务器续约了三年。还有一些令人记忆深刻的，像BlogWe、中国博客联盟等。

1734320555961.jpg

以我龟速效率，平均一个月大概会有2篇文章，5年大概有120篇文章。这么多文章，和很多的友链、评论以及其它数据，被淹没在了2023年的某一天，具体哪一天忘记了。因为那段时间，我真的没有关注过一点博客的信息。想想真的有点后悔和遗憾。要不是灰常记忆在微信里面告诉我，可能到今天我都遗忘了。

1734320606381.jpg

五年时间一晃而过，到写下这篇文章应该马上6年了。生活和工作，没有太大的进展。但是博客和它带给我的成长，却是有很多的。从一个一无所知的小白，到今天能自主消化和改进一些东西。当然，也感谢科技的进步，Ai让我们简单了很多。

例如，前不久被我刚下线的SIMTEXT主题，鼓捣了好几个月成型吧，然后发现视觉疲劳了，于是，它消失了。但不管怎么样，它依然算作我的一个重要节点，到今天，我也开源给喜欢的人下载使用。《Typecho主题模板：SimText列表主题，真正的又快又简单》

1734320104584.jpg

以前，访亲寻友习惯的输入网址，现在则习惯了RSS订阅。就像前一段时间大火的FreshRss，目前是我最喜欢使用的，每天都再看，遇到喜欢的或者感兴趣的，都会区作者的博客留下足迹。这也加速了，博客圈的互动交流。这其中，也有其它很优秀的一些项目，像BlogFinder、博客圈等等。

最近，也发现了比较火的Foloow，某宝花了3块钱，买了个邀请码，不过目前来说，使用频率不是很高。因为我主要订阅的还是独立博客，像视频、图片等内容，我浏览的很少。

1733966400247.jpg

这五年，也可以说这六年，站在独立博客作者的角度来说，是开心的、满足的。大家都相对比较友好，没有那么多的戾气，也没有其它一些平台的花里胡哨。我们也有更多的可能展现自己，也有更多的方式，留住自己的记忆。

希望，五年之后又五年，也期待收到十年之约项目组的“恭喜您，解锁「十年之约」持续十年的持续运营成就。”

❌