让 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

第三步，重新部署。

效果

现在每次打开或刷新友链页，卡片顺序都会重新洗牌，每个朋友的博客都有机会出现在第一位。