OpenGraph 图自动生成
April 28, 2024
什么是 OpenGraph 💡以下介绍由 Kimi 生成。 大白话就是：这些数据专门告诉社交平台，我们这个网页的基础信息等数据。 OpenGraph 是一种由 Facebook 开发的元标签（meta tags），用于网页上的社交分享。当一个网页链接被分享到社交媒体平台时，这些标签可以提供额外...
博客更新热力图
April 27, 2024
这个功能最早是看到椒盐豆豉 如何给 Hugo 博客添加热力图 做的分享，不过当时还没下定心思来弄。后来陆续在蜗牛、空白大佬们的博客上看到，还是比较想加到自己博客上的，不过在这个月十几号的时候研究过一下，当时没太研究明白，放弃了。 但是今天在长毛象上看到空白大佬在 称赞蜗牛大佬的新热力图 ，所...
用 Alpinejs 完成主题切换功能
April 17, 2024
终于把网站的主题切换功能做好了，这次的实现相当满意。 并且我联动了几个主题颜色比较特别的博友，他们分别有：雅余（黄色）、昱行（粉色）、风清（蓝色），大家可以在本站左侧菜单栏选择自己喜欢的配色浏览本站，欢迎给出意见和分享感受。 之前虽然也写过主题切换功能，但是思路没有这次完整，所以索性写一篇...
Ghost 使用 11ty 时生成无插件生成 TOC 目录
April 16, 2024
分享一段之前和 ChatGPT 沟通得到的代码。 作用为传入一段 HTML 代码，并获取页面内的 H2、H3、H4 标签，组装成固定格式的 html 字符串返回。 const cheerio = require ('cheerio'); module.exports = (html) => { i...
关于友情链接和 SSG 在博客中展示 Flux 订阅
April 15, 2024
友情链接 此前我一直以文章内容的形式手动展示和维护博客的友链，并在文中附上了友情链接添加的条件，此间也收到过不少好友的链接申请。 不过在 2023 年 11 月 05 日 ，我对该页面的介绍做了更新，并在文中写到： 今天忽然发现我好像重新理解的「友邻」的意义，这个邻居应该是我喜欢、欣赏的，对我有「...
纯 CSS 解决网页因滚动条抖动问题
April 06, 2024
最近在做 11ty-book 的移植工作时发现，网站页面在从短内容页面跳转至长内容页面时，会因为从无滚动条切换到有滚动条状态而发生抖动，而这个滚动条在页面中是有自己的占位的，这个时候就会出现因为忽然出现滚动条而网页内容布局抖动的问题。 找了一些相关的资料，有不同的前辈都处理过这个问题，因为我也没...
MPA 网站使用 Chrome 原生过渡动画
April 02, 2024
之前 页面的过渡动画其实有很多种实现方式，之前在制作主题 rebron1900/11ty-theme-notability 时参考的主题 ByMattLee 11ty Starter 中就使用了 GSAP 这个库实现页面过渡动画。 我当时也研究了一下，不过这些动画库的各种参数都太过复杂，并且...