由于handsome基于bootstrap V3，内容页中相关文章、随机文章列表的样式根据下面的代码而来：

<div class="row">
<div class="list-group col-lg-6">
      <span class="list-group-item active">
        猜你想看
      </span>
      <a href="#" class="list-group-item text-ellipsis">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item text-ellipsis">猜你想看猜你想看</a>
      <a href="#" class="list-group-item text-ellipsis">Porta ac consectetur ac</a>
</div>
    
<div class="list-group col-lg-6">
      <span class="list-group-item active">
        随便逛逛
      </span>
      <a href="#" class="list-group-item text-ellipsis">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item text-ellipsis">Morbi leo risus</a>
      <a href="#" class="list-group-item text-ellipsis">猜你猜你想看</a>
    </div>
</div>

相关的文章参考：

Typecho调用相关文章、随机文章、热门文章

由于需要调用Typecho的相关文章、随机文章、热门文章显示，整理了对应的代码列出，以备不时之需。其中的热门文章在...

修改代码：post.php 与 functions_mine.php：
post.php

<div class="row">
<!-- 相关文章 -->
<?php $this->related(3)->to($relatedPosts); ?>
<?php if ($relatedPosts->have()): ?>
<div class="list-group col-lg-6">
      <span class="list-group-item active">
        猜你想看
      </span>
    <?php while ($relatedPosts->next()): ?>
        <a class="list-group-item text-ellipsis" href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
    <?php endwhile; ?>
</div>
<?php endif; ?>
<!-- 相关文章  End  -->

<!--随机文章-->
<div class="list-group col-lg-6">
      <span class="list-group-item active">
        随机文章
      </span>
      <?php getRandomPosts(3);?>
</div>
</div>

functions_mine.php：

/**
     * 随机文章，在需要添加随机文章的地方加上代码：<?php getRandomPosts(10);?>
     * 数字10为要调用的文章数量。
     */
    function getRandomPosts($random)
    {
        $modified = $random->modified;
        $db = Typecho_Db::get();
        $adapterName = $db->getAdapterName();//兼容非MySQL数据库
        if ($adapterName == 'pgsql' || $adapterName == 'Pdo_Pgsql' || $adapterName == 'Pdo_SQLite' || $adapterName == 'SQLite') {
            $order_by = 'RANDOM()';
        } else {
            $order_by = 'RAND()';
        }
        $sql = $db->select()->from('table.contents')
            ->where('status = ?', 'publish')
            ->where('table.contents.created <= ?', time())
            ->where('type = ?', 'post')
            ->limit($random)
            ->order($order_by);

        $result = $db->fetchAll($sql);
        foreach ($result as $val) {
            $val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val);
            echo '<a class="list-group-item text-ellipsis" href="' . $val['permalink'] . '" title="' . $val['title'] . '"> ' . $val['title'] . ' </a>';
        }
    }

相关文章及随机文章列表的标题增加了自定义样式：tt-suiji-title

.tt-suiji-title{color: #777;background-color: #eee;}

为了避免没有相关文章的时候，随机文章的列表的宽度过小不美观，重新设置了逻辑语句为下面。 本文章未添加标签，可以对比查看本页和其它页面的对比显示。

post.php

<!--随机及相关文章-->
<div class="row">
<?php $this->related(3)->to($relatedPosts); ?>
<?php if ($relatedPosts->have()): ?>
<!-- 相关文章 -->
<div class="list-group col-lg-6">
      <span class="list-group-item tt-suiji-title">
        猜你想看
      </span>
    <?php while ($relatedPosts->next()): ?>
        <a class="list-group-item text-ellipsis" href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
    <?php endwhile; ?>
</div>
<!--随机文章-->
<div class="list-group col-lg-6">
      <span class="list-group-item tt-suiji-title">
        随机文章
      </span>
      <?php getRandomPosts(3);?>
</div>
<?php else: ?>
<!--随机文章-->
<div class="list-group">
      <span class="list-group-item tt-suiji-title">
        随机文章
      </span>
      <?php getRandomPosts(3);?>
</div>
<?php endif; ?>
<!--随机及相关文章  End-->
Last modification：November 14, 2021
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏