HEXO友链随机排序-CSDN博客

本文链接：https://blog.csdn.net/z591593455/article/details/107931226

动机

最近做博客做的很有乐趣，到处找人换友链

然后我就发现排在前面和排在后面点击效果比较好

这对排在中间的朋友们极其不公平。

我就想搞个随机友链

找出目录

首先我们思考一下hexo原理，他是把你的配置文件还有静态资源通过各种类似脚本的方式生成静态页面

那么就要去找到友链所对应的脚本或者资源

首先打开主题文件夹，友链无非就那几个关键字 link，links，friend，反正看到类似的就可以

我的是在 layout/links.ejs文件下面

原来的代码

<%
page.layout = "links"
page.title = theme.links.title || __('links.title')
page.subtitle = theme.links.subtitle || __('links.subtitle')
page.banner_img = theme.links.banner_img
page.banner_img_height = theme.links.banner_img_height
page.banner_mask_alpha = theme.links.banner_mask_alpha
%>

  <% for(const each of theme.links.items) { %>
    <% if (!each.title || !each.link) continue %>
    <div class="card col-lg-4 col-md-6 col-sm-12">
      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener">
        <div class="card-content">
          <% if (each.image) { %>
            <div class="link-avatar my-auto">
              <img src="<%= each.image %>" alt="<%= each.title %>" />
            </div>
          <% } %>
          <div class="link-text">
            <div class="link-title"><%- each.title %></div>
            <div class="link-intro"><%- each.intro %></div>
          </div>
        </div>
      </a>
    </div>
  <% } %>
</div>

看到这几个for循环，感觉亲切了许多是吧。

theme.links.items应该就是存放友链的数组了

继续思考

hexo是生成静态页面的，我们打开看一下生成的public文件夹，很明显，每一条数据都直接固定写成了html

那说明这里只是拼接html的脚本

我有两种想法

通过js操作dom来修改html数据(太过于繁琐，放弃)

直接在生成前，把数组打乱(so easy，就他了)

大家看上面的<% %>了吗很明显，这里是动态获取数据的地方

那我们就开始写了

打乱数组：

其实我们可以使用js的sort，然后给他一个随机对比

这样

function randomsort(a, b) {
return Math.random()>.5 ? -1 : 1;
}
theme.links.items.sort(randomsort);

//这是一种最简单的方法，但是你可想一下前面的在前面的概率比较大，后面的在后面的概率比较大，对不对

(比如先给你加友链的小伙伴，很大的改了可以在前面对不对)

//当然，我们还是的采用更公平的随机算法：随机洗牌算法

Array.prototype.shuffle = function() {
var input = this;
for (var i = input.length-1; i >=0; i–) {
var randomIndex = Math.floor(Math.random()*(i+1));
var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
return input;
}
theme.links.items.shuffle();

修改后的代码

<%
page.layout = "links"
page.title = theme.links.title || __('links.title')
page.subtitle = theme.links.subtitle || __('links.subtitle')
page.banner_img = theme.links.banner_img
page.banner_img_height = theme.links.banner_img_height
page.banner_mask_alpha = theme.links.banner_mask_alpha

function randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
    //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
theme.links.items.sort(randomsort);
%>
  <% for(const each of theme.links.items) { %>
    <% if (!each.title || !each.link) continue %>
    <div class="card col-lg-4 col-md-6 col-sm-12">
      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener">
        <div class="card-content">
          <% if (each.image) { %>
            <div class="link-avatar my-auto">
              <img src="<%= each.image %>" alt="<%= each.title %>" />
            </div>
          <% } %>
          <div class="link-text">
            <div class="link-title"><%- each.title %></div>
            <div class="link-intro"><%- each.intro %></div>
          </div>
        </div>
      </a>
    </div>
  <% } %>
</div>

好像这个主题友链没带加评论，也没有自我介绍

那让想要添加我的小伙伴操作起来多么繁琐，找到代码加上去

<%
page.layout = "links"
page.title = theme.links.title || __('links.title')
page.subtitle = theme.links.subtitle || __('links.subtitle')
page.banner_img = theme.links.banner_img
page.banner_img_height = theme.links.banner_img_height
page.banner_mask_alpha = theme.links.banner_mask_alpha


function randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
    //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
theme.links.items.sort(randomsort);

%>

 <a href="https://www.jimu98.cn/img/avatar.png">本站友情链接顺序随机</a>
</p>
<div class="content-tab-content  " data-tab-index="2">名称：积木<br>网址：<a href="https://www.jimu98.cn">https://www.jimu98.cn</a><br>头像：<a href="https://www.jimu98.cn/img/avatar.png">https://www.jimu98.cn/img/avatar.png</a><br>描述：积木-互联网的一只小菜鸡。</div>
<div class="row links">

	

  <% for(const each of theme.links.items) { %>
    <% if (!each.title || !each.link) continue %>
    <div class="card col-lg-4 col-md-6 col-sm-12">
      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener">
        <div class="card-content">
          <% if (each.image) { %>
            <div class="link-avatar my-auto">
              <img src="<%= each.image %>" alt="<%= each.title %>" />
            </div>
          <% } %>
          <div class="link-text">
            <div class="link-title"><%- each.title %></div>
            <div class="link-intro"><%- each.intro %></div>
          </div>
        </div>
      </a>
    </div>
  <% } %>
</div>
              <div class="comments" id="comments">
                <% var type = '_partial/comments/' + theme.post.comments.type %>
                <%- partial(type) %>
              </div>