让 Hexo Fluid 友链页每次刷新都随机排序
友链页每次打开都是同样的顺序,排在前面的朋友曝光率永远最高,排在后面的则几乎不会被注意到。于是我决定给友链页加一点小小的随机性:每次刷新,卡片顺序都不一样。
思路
Hexo 是静态博客,页面在 hexo g 时就已经生成好了,所以"随机"只能发生在浏览器端,也就是用 JavaScript 在页面加载后动态打乱卡片顺序。
用 Fluid 的自定义 JS 注入
Fluid 提供了全局注入自定义 JS 文件的配置项。
第一步,在 source/js/ 目录下新建 random-links.js:
document.addEventListener('DOMContentLoaded', function () {
// 只在友链页执行,避免影响其他页面
if (!document.querySelector('.links')) return;
const container = document.querySelector('.row.links');
if (!container) return;
const cards = Array.from(container.querySelectorAll(':scope > .card'));
// Fisher-Yates 洗牌算法
for (let i = cards.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
container.insertBefore(cards[j], cards[i]);
[cards[i], cards[j]] = [cards[j], cards[i]];
}
});
这里用的是经典的 Fisher-Yates 洗牌算法,时间复杂度 O(n),每张卡片出现在任意位置的概率完全相等,比 sort(() => Math.random() - 0.5) 那种写法严谨得多。
第二步,在 _config.fluid.yml 中注册这个文件:
custom_js:
- /js/random-links.js
第三步,重新部署。
效果
现在每次打开或刷新友链页,卡片顺序都会重新洗牌,每个朋友的博客都有机会出现在第一位。
发表评论