Links 插件链接随机排序

友情链接很少的时候,我从来都不会纠结排序,但当友链收集了满满一页的时候我就开始纠结了,孰先孰后在我心里也许并不重要,但是在访客眼里可能就不一样了。约定俗成的观念让排列在前面的链接更加让人注意,但这并不是我的初衷。所以我想为自己的后宫娘娘们随机排序。

本来是打算看看 Links 插件的 php 代码,想解决怎样改插件直接插件里随机排序,但是后来想想这对我这种菜鸡可能不太友好,毕竟也没学过 php ,想到这里我打开了百度Google :“友链随机排序”,看到排名靠前的方案都是 WordPress 我不禁心疼起我的 Typecho 。咳咳,往下翻找到了《Demo:友情链接随机排序 - CodePen》,看起来不错,JavaScript(又是你)怎么看起来就是..很亲和呢?

VOID 主题原本的友情链接展示的友链信息只有站点名称和站点图标,我还是希望展示站点标语,所以抄了原来 Material 友链的布局,插件输出主要像这样:

<!-- 友情链接部分,仍引用原 Material 主题设计 -->
<h2 id="Dalaos">Dalaos<span class="copy-link loaded" data-clipboard-text="https://monsterx.cn/links.html#Dalaos">¶</span></h2>
<div class="board-list link-list"><?php if (class_exists("Links_Plugin")): ?>    <?php Links_Plugin::output('    <div class="board-item link-item">        <div class="board-thumb" style="background-image:url({image})"></div>
        <div class="board-title"><a href="{url}" title="{title}" target="_blank">{name}</a></div>
        <div class="board-title description"><small>{description}</small></div>
    </div>
    ',0,"friends"); ?>
<?php endif; ?>
</div>
<h2 id="Schoolmates">Schoolmates<span class="copy-link loaded" data-clipboard-text="https://monsterx.cn/links.html#Schoolmates">¶</span></h2>
<div class="board-list link-list"><?php if (class_exists("Links_Plugin")): ?>    <?php Links_Plugin::output('    <div class="board-item-school board-item link-item">        <div class="board-thumb" style="background-image:url({image})"></div>
        <div class="board-title"><a href="{url}" title="{title}" target="_blank">{name}</a></div>
        <div class="board-title description"><small>{description}</small></div>
    </div>
    ',0,"school"); ?>
<?php endif; ?>
</div>

项目《Demo:友情链接随机排序 - CodePen》的解决方案主体如下:

var $friend = $('#friendlink');
    var $friendList = $friend.find('li');
    var $friendLink = $friendList.find('a');
    var $friendName = $friendLink.find('.friendlink-name');
    var $friendIntro = $friendLink.find('.friendlink-intro');
    var $friendPic = $friendLink.find('.friendlink-pic');
    var arr = [
      {
        'url': 'http://betahouse.us'
      , 'name': '贝塔豪斯工作室'
      , 'intro': '初见前端'
      , 'pic': 'http://makaiqian.com/wp-content/uploads/2014/08/betahouse.jpg'
      }
    , {
        'url': 'http://blog.linxz.de/'
      , 'name': '小志的博客'
      , 'intro': '《CSS那些事儿》'
      , 'pic': 'http://makaiqian.com/wp-content/uploads/2014/08/xiaozhi.jpg'
      }
    ];
    // 给数组随机排序
    function randomFunc() {
      return ( Math.random() - 0.5 );
    }
    arr.sort(randomFunc);
    // 显示出每一项信息
    var sHtml = '';
    for(var i = 0; i < arr.length; i++) {
        sHtml += '<li>'
               + '<a href="' + arr[i].url + '" target="_blank">'
               + '<h4 class="friendlink-name">' + arr[i].name +'</h4>'
               + '<p class="friendlink-intro">' + arr[i].intro + '</p>'
               + '<img class="friendlink-pic" src="' + arr[i].pic + '" width="80" height="80">'
               + '</a>'
               + '</li>'
    }
    $friend.append(sHtml);
<ul id="friendlink"></ul>

稍稍修改一下代码,用 Links 插件接口输出友链信息到数组:

今天换了 VOID 最新版本,友链布局改变了,这里也修改一下
<script> 放在 footer.php 里,查了一下文档,加一层判断,是友链页面就加载这段 JavaScript

  • JavaScript(运行在 php 中)
// 判断页面缩略名为 links 加载
<?php if ($this->is('page','links')): ?>
<script type="text/javascript">
    var $friend = $('#randomLinks');
    var arr = [
      <?php if (class_exists("Links_Plugin")): ?><?php Links_Plugin::output('
      {
        \'url\': \'{url}\',
        \'name\': \'{name}\',
        \'slogan\': \'{description}\',
        \'logo\': \'{image}\'
      },
      ',0); ?><?php endif; ?>
      {
        'url': 'http://mocurio.com/',
        'name': 'MoreCurio',
        'slogan': 'Another Blog',
        'logo': 'https://cdn.monsterx.cn/img/logo.jpg'
      }
    ];
    // 给数组随机排序
    function randomFunc() {
      return ( Math.random() - 0.5 );
    }
    arr.sort(randomFunc);
    var sHtml = '';
    for(var i = 0; i < arr.length; i++) {
    // 旧版本可以用这个布局
    //  sHtml += '<div class="board-item link-item">'
    //         + '<div class="board-thumb" style="background-image:url(' + arr[i].logo +')"></div>'
    //         + '<div class="board-title"><a href="' + arr[i].url + '" title="' + arr[i].name +'" target="_blank">' + arr[i].name +'</a></div>'
    //         + '<div class="board-title description"><small>' + arr[i].slogan + '</small></div>'
    //         + '</div>'
    sHtml += '<div class="board-item link-item">'
            + '<div class="board-thumb" data-thumb="' + arr[i].logo + '"><img class="lazyload instant loaded" data-src="' + arr[i].logo + '" src="' + arr[i].logo + '"></div>'
            + '<div class="board-title"><a target="_blank" href="' + arr[i].url + '">' + arr[i].name + '</a></div>'
            + '<div class="board-title description"><small>' + arr[i].slogan + '</small></div>'
            + '</div>'
    }
    $friend.append(sHtml);
</script>
<?php endif; ?>
  • CSS(这个是之前给校友加的伪毛玻璃特效样式,由于 VOID 主题已经自带了友链样式,所以这部分代码并没有什么用,只是我自己留着看而已。如果你也想尝试一下我这个伪毛玻璃特效,你可以在上面的 JvaScript 27 行加入样式 board-item-school
.board-item-school,.board-list {
    display: flex;
    justify-content: flex-start
}

.board-item-school {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    transition: all .3s;
    flex-flow: column;
    background-color: rgba(0,0,0,0);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px)
}

.board-item-school:hover {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
    background-color: rgba(0,0,0,0);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px)
}
  • HTML(在需要输出的地方引入 JavaScript 然后放上这个)
<div class="board-list link-list" id="randomLinks"></div>

好啦,到这里就结束啦,一边写博文一边改代码,觉得效率也还行8。

(又水了一篇博文,9月的更新就此结束了,国庆长假请快来拯救我吧!


根据评论区 ZigZagK 同学提醒,VOID 开启 Pjax 后会出现异常。需要把这段代码放入重载函数中。

另外,参考他博客的《魔改 Links 插件实现友链随机输出》修改插件代码可以在插件内建立友链数组,然后 php 随机排序数组输出到独立页面亦可。

插件 plugin.php 276 行的函数 output_str($pattern=NULL, $links_num=0, $sort=NULL) 内 294~305 行替换为下面的内容后将原来的输出字符串改为输出数组:

$number = 0;
foreach ($links as $link) {
    if ($link['image'] == NULL) {
        $link['image'] = $nopic_url;
    }
    $Links[$number++] = str_replace(
        array('{lid}', '{name}', '{url}', '{sort}', '{title}', '{description}', '{image}', '{user}'),
        array($link['lid'], $link['name'], $link['url'], $link['sort'], $link['description'], $link['description'], $link['image'], $link['user']),
        $pattern
    );
}
return $Links;

独立页面的输出格式修改为:

$Links=Links_Plugin::output('
    // 友链 <div>
');
shuffle($Links);                           // PHP 自带的函数,将数组随机打乱
$tot=count($Links);
for ($i=0;$i<$tot;$i++) echo $Links[$i];   // 输出友链

那就这样吧!看不懂戳上面 ZigZagK 的原文即可。喜欢 php 的同学可以不用 js 。

添加新评论

本站现启用评论投票,被踩过多的评论将自动折叠。无关评论请关于页留言。禁止哈哈,谢谢。


已有 18 条评论

大佬一步一步成长为菊苣>

还是蛮弱啦

我魔改了一下Links插件,有兴趣可以看一下啊QAQ
插件调用方法没变,就是把输出字符串改成输出数组了,然后对数组shuffle(随机打乱)一下再输出就可以了。
大概可以参考下这个代码

在?借轮子一用[手动滑稽]

我博客里刚写了个简略的教程,可以参考下QAQ

随机显示顺序好像很有道理啊
我也想整个了QwQ

整整整

发现了点 bug QAQ,PJAX 载入朋友界面的时候没有加载出友链,可能是没有重载

emm不是重载 $friend.append(sHtml); 就可以了吗 Σ(っ °Д °;)っ

我看了一下,可能得把全部代码来一遍?⌇●﹏●⌇

内个,虽然有点尴尬,但是大佬您的PJAX好像还是炸了QAQ

没有吧,我把 pjax 关了

这样啊QAQ,抱歉我多嘴了

懒得整,作业多的一批55

୧(๑•̀⌄•́๑)૭ 禁止吹捧吼吼

来看看 (☆ω☆)