明月登楼

Handsome 主题实现最新评论首页博客导航栏自动排第一功能
今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏...
扫描右侧二维码阅读全文
13
2018/08

Handsome 主题实现最新评论首页博客导航栏自动排第一功能

今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏自动排第一功能的功能,一直很想用上这个功能,可惜受制于自己几乎等同于“零”水准的CSS技术一直都无法实现,没有想到【知言笔记】上给移植到 Typecho 上并且CSS默认支持 Handsome 主题,哈哈,喜不胜收呀简直是!

150617_1074_1.jpg

为了表示对【知言笔记】分享精神的支持,特原文转载当做自己博客的折腾学习笔记,再次感谢【知言笔记】的分享。

做为独立博客网站的,一般都会有一个最新点入功能,大部分都是根据来访者的IP,自动把最新访客的博客排在第一位。而本站使用的最新访客却不是根据来访IP排行,而是根据最新评论/留言来自动排第一位。换句话就是说只要来访者在本站评论/留言,该访客的博客就会自动排在第一位。

使用效果

TIM截图20180813212841.png

使用方法

1.下面是主要代码(插入到functions.php中)

function Autofirst(){
    $db = Typecho_Db::get();
    $query = $db->select()->from('table.comments')->where('authorId = ?','0')->order('coid',Typecho_Db::SORT_DESC)->limit(100);
    $result = $db->fetchAll($query);
    $arrUrl = array();
    $arrAuthor = array();
    foreach ($result as $value) {
        if($value["url"]!==null){
            array_push($arrUrl,$value["url"]);
            array_push($arrAuthor,$value["author"]);
        }
    }
    $su=array_filter(array_merge(array_unique($arrUrl)));
    $sa=array_filter(array_merge(array_unique($arrAuthor)));
    $num=0;
    for($i=0;$i<count(array_unique($su));$i++){
        if($su[$i]!=="" && $num<16){
            $num+=1;
            $db1 = Typecho_Db::get();
            $query1 = $db1->select()->from('table.comments')->where('url = ?',$su[$i])->order('coid',Typecho_Db::SORT_DESC)->limit(100);
            $result1 = $db1->fetchAll($query1);
            $arrAuthor1 = array();
            foreach ($result1 as $value) {
                    array_push($arrAuthor1,$value["author"]);
            }
            echo '<a href="'.$su[$i].'" rel="external nofollow" class="item col-lg-3 col-md-3 visible-lg visible-md" target="_blank"><i class="glyphicon glyphicon-leaf"></i> '.$arrAuthor1[0].'</a>';
        }
    }
}
  • 2018.08.16更新适配最新样式代码(插入到functions.php中)
function Autofirst(){
    $db = Typecho_Db::get();
    $query = $db->select()->from('table.comments')->where('authorId = ?','0')->order('coid',Typecho_Db::SORT_DESC)->limit(100);
    $result = $db->fetchAll($query);
    $arrUrl = array();
    $arrAuthor = array();
    foreach ($result as $value) {
        if($value["url"]!==null){
            array_push($arrUrl,$value["url"]);
            array_push($arrAuthor,$value["author"]);
        }
    }
    $su=array_filter(array_merge(array_unique($arrUrl)));
    $sa=array_filter(array_merge(array_unique($arrAuthor)));
    $num=0;
    for($i=0;$i<count(array_unique($su));$i++){
        if($su[$i]!=="" && $num<8){
            $num+=1;
            $db1 = Typecho_Db::get();
            $query1 = $db1->select()->from('table.comments')->where('url = ?',$su[$i])->order('coid',Typecho_Db::SORT_DESC)->limit(100);
            $result1 = $db1->fetchAll($query1);
            $arrAuthor1 = array();
            foreach ($result1 as $value) {
                    array_push($arrAuthor1,$value["author"]);
            }
            echo '<div class="col-lg-3 col-md-3 item"><a href="'.$su[$i].'" rel="external nofollow" class="btn btn-default btn-block overflow" target="_blank">'.$arrAuthor1[0].'</a></div>';
        }
    }
}

可以通过修改上述代码的num<8来调整显示最新评论者的数量,以4的倍数为宜。

2.这是调用代码和css(如果你跟我一样,用的是handsome主题,就直接插入到index.php的下面)

<div class="row autofirst visible-lg visible-md">
<p>
<i class="glyphicon glyphicon-th"></i> 每评论一次就会自动排在本栏目第一位
</p>
    <?php Autofirst(100) ?>
</div>
<style>
.autofirst{
    margin:20px 20px 5px 20px;
    padding:10px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.12), 0 1px 8px rgba(0,0,0,0.24);
    background-color:white;
    border-radius:3px;
}.item{
    padding:5px 0px;
}
</style>
  • 2018.08.16更新的代码和最新样式,支持圆角。直接插入到index.php的<div class="wrapper-md" id="post-panel">下面可以有更加适配的显示的。
<div class="row visible-lg visible-md">
<div class="col-lg-12">
<div class="panel panel-default ggg">
    <div class="panel-heading">
        <i class="glyphicon glyphicon-th"></i> 您的每次评论都将会展示在本博客首页导航栏第一位
    </div>
    <div class="panel-body row autofirst1">
        <?php Autofirst(100) ?>
    </div>
</div>
</div>
</div>
    <style>
    .autofirst1 .item{
        padding:5px 10px
      }
    .item a{border-radius:10px}
    .overflow{
        overflow:hidden;
        white-space: nowrap;
        word-wrap: normal;
      }
    .autofirst1{
        padding:10px 20px
    }
    </style>

上面的这两段代码中的HTML和CSS是按照handsome主题制定的,使用其他主题的请你自己把HTML和css改一下。

WordPress 代码到 Typecho 代码的一直和 Handsome 主题下的CSS适配都完成了,真心给力呀!需要注意的是,不建议在 Typecho 后台——外观——编辑当前外观里添加代码,最好是通过FTP或者控制台终端来修改对应的文件,这样可以减少出错的概率,对原文的全文引用转载也是为了当作记录,以便下次更新主题时候可以完美继续使用。最后,再次感谢【知言笔记】的分享,谢谢哈兄弟!

重要声明

经了解本文原创出自【梁兴健个人博客】,原文:【实现每评论一次自动排第一功能(Typecho版)】,特此更正声明!

最后修改:2018 年 08 月 16 日 01 : 34 PM
如果觉得我的文章对你有用,请随意赞赏

26 条评论

  1. Mr.ChengPing

    我记得你好想有个Wordpress的站吧?两个站同时运维?

    1. 明月登楼
      @Mr.ChengPing

      是的,两个博客,内容侧重点不同而已!

  2. 木禾谷

    都是些大佬,效果看着不错。可是我已经换成WP程序了,

    1. 明月登楼
      @木禾谷

      怎么,不用 Typecho 了?

  3. iherb

    这个功能好 谁来过什么时候来的一清二楚了

    1. 明月登楼
      @iherb

      是的,最主要的是留言评论的还可以获得类似首页友链的待遇!

  4. B站

    感觉要飞了

  5. 清楼小筑

    有一个问题,希望可以得到你的指导,这个边框圆角化 还有改成你这样的样式,应该怎么操作呢?
    抱歉没找到你的联系方式 所以只能在这儿留言

    1. 明月登楼
      @清楼小筑

      你可以参考这里:https://liangxingjian.com/archives/271/
      新的样式!

      1. 清楼小筑
        @明月登楼

        好的 谢谢,已修改

        1. 明月登楼
          @清楼小筑

          不客气!欢迎常来哦!

          1. 清楼小筑
            @明月登楼

            一定 一定,

            1. 梁兴健
              @清楼小筑

              圆角加上这个样式: .item a{border-radius:10px} 其实你们可以考虑把html代码放在这个div里面,这样会有一点上边距OωO

              1. 明月登楼
                @梁兴健

                哦,圆角实现了!把html代码放在这个div里面这个没有明白啥意思?

              2. 梁兴健
                @梁兴健

                补上上面的没打完字。。。是 class="wrapper-md" id="post-panel" 的这个div里

                1. 明月登楼
                  @梁兴健

                  我准备给[友人C]提个建议,将这个代码植入到handsome主题里,不知可否呀?

                  1. 梁兴健
                    @明月登楼

                    可以,希望这段代码能让更多人使用,能够促进博客圈内的评论氛围

                2. 明月登楼
                  @梁兴健

                  OK,明白了!原来如此,这下看着和谐多了!谢谢提醒哈!

  6. 木禾谷

    你改版的效果还不错,

    1. 明月登楼
      @木禾谷

      谢谢哦!欢迎常来哦!

  7. Roogle

    这个功能还不错,增加了想上榜的访客互动的频率

    1. 明月登楼
      @Roogle

      嗯,是的,我一直期盼有这个!这次终于实现了!

  8. 趴在窗边数星星

    厉害呀,这个功能真心赞!

    1. 明月登楼
      @趴在窗边数星星

      谢谢支持!

  9. 薅羊毛

    能自学点HTML和CSS吗
    真想和楼主一样牛逼

    1. 明月登楼
      @薅羊毛

      我这有啥学的,就是复制粘贴!我一看到CSS就一脸懵逼!

发表评论