博客页脚获取随机友联

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

效果预览

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

魔改方案

通过json方式实现

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

【新建】butterfly/source/frendlink.json

[{
        "class_name": "推荐",
        "class_desc": "参与本站开发、提供设计灵感、捐助本站的优秀博主，综合排序",
        "class_mode": "MxBlog",
        "link_list": [
            { "name": "满心", "link": "https://blog.lovelu.top" },
            { "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
1
2
3
4
//- 初步进入需要加载的函数
.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方式实现

方案二（推荐）