博客页脚获取随机友联

博客页脚之前使用的是友联朋友圈部署随机获取的，前段时间突然发现无法访问了，重启才恢复正常，所以想将这部分独立出来，不再依赖友联朋友圈，废话不多说，开整

介绍两种魔改方案，一种是通过json方式来读取，另一种是通过hexo内置过滤器来实现

通过json方式实现

此方式就是需要手动创建json，每次添加友联补充进json文件即可

【新建】butterfly/source/frendlink.json

[{
      "class_name": "推荐",
      "class_desc": "参与本站开发、提供设计灵感、捐助本站的优秀博主，综合排序",
      "class_mode": "MxBlog",
      "link_list": [
          { "name": "满心", "link": "https://qq.mba" },
          { "name": "Jayhrn", "link": "https://blog.jayhrn.com" }
      ]
  },
  {
      "class_name": "资源",
      "class_desc": "寻找资源不迷路",
      "class_mode": "MxBlog",
      "link_list": [
          { "name": "steven安", "link": "https://chenjunan.top/" },
          { "name": "MacApp分享", "link": "https://macapp.org.cn/" },
          { "name": "精品MAC", "link": "https://pomac.cc/" }
      ]
  }
]

js中添加如下

var mx = {
addFriendLinksInFooter: function () {
    var fetchUrl = "/mx/friendlink.json";
    fetch(fetchUrl)
        .then((res) => res.json())
        .then((json) => {
            var result = [];
            var prevIndex = -1;
            for (const item of json) {
                const links = item.link_list;
                for (let i = 0; i < Math.min(links.length, 1); i++) {
                    let index = Math.floor(Math.random() * links.length);
                    while (index === prevIndex && links.length > 1) {
                        index = Math.floor(Math.random() * links.length);
                    }

                    prevIndex = index;
                    result.push({
                        name: links[index].name,
                        link: links[index].link,
                    });
                    links.splice(index, 1);
                }
            }
            //删除result中最后一个元素
            result.pop();

            var htmlText = "";
            for (let i = 0; i < result.length; ++i) {
                var item = result[i];
                htmlText += `<a class='footer-item' href='${item.link}'  target="_blank" rel="noopener nofollow">${item.name}</a>`;
            }
            htmlText += `<a class='footer-item' href='/link/'>更多</a>`;
            document.getElementById("friend-links-in-footer").innerHTML = htmlText;
        });
  }
}

【修改】butterfly/layout/includes/additional-js.pug
```
//- 初步进入需要加载的函数
.js-pjax
script.
  mx.addFriendLinksInFooter()
```
该方法，每天添加友联后，在json文件对应类别中添加即可
方案二（推荐）

此方式较为简单，无需json文件，直接读取，此方案来源于jayhrn

【新建】butterfly/scripts/helpers/random.js

hexo.extend.filter.register('after_render:html', function (data) {
  const flinks = []
  hexo.locals.get('data').link.map(function (list) {
      list.link_list.map(function (flink) {
          flinks.push(flink)
      })
  })
  data += `<script>
      let flinks=${JSON.stringify(flinks)} // 自己进行选择，可要可不要，本主题写了其他函数需要使用
      function getRandomFlink(num) {
          let randomLinks = [];
          while (randomLinks.length < num && flinks.length > 0) {
              let index = Math.floor(Math.random() * flinks.length);
              randomLinks.push(flinks.splice(index, 1)[0]);
          }
          return randomLinks;
      }
      </script>`
  return data
})

addFriendLinksInFooter: function() {
let randomFriendLinks = getRandomFlink(3)
  let htmlText = '';
  for (let i = 0; i < randomFriendLinks.length; ++i) {
    let item = randomFriendLinks[i]
    htmlText += `<a class='footer-item' href='${item.link}'  target="_blank" rel="noopener nofollow">${item.name}</a>`;
  }
  htmlText += `<a class='footer-item' href='/link'>更多</a>`
  document.getElementById("friend-links-in-footer").innerHTML = htmlText;
}

【修改】butterfly/layout/includes/additional-js.pug
```
//- 初步进入需要加载的函数
.js-pjax
script.
  mx.addFriendLinksInFooter()
```
该方法较为简单，推荐使用

博客页脚获取随机友联

通过json方式实现

方案二（推荐）

发表评论