请注意,本文编写于 1056 天前,最后修改于 1056 天前,其中某些信息可能已经过时。
由于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>
相关的文章参考:
修改代码: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-->