经常逛 QQ 空间的人会发现,它就有这个功能。这个功能是展示与今天同一天发生的事、写的文章,上传的图片等等。其实,在之前使用 Wordpress
程序时,我用的知更鸟主题集成了这个功能,他叫历史上的今天。改用了 typecho
程序后,JOE主题的作者不断加强主题,而这个"那年今日"的功能也在网友提出建议后如约而至了。作者只是写好了函数,前端并没有调用,所以也就没有具体的样式。我简单的写了一个样式,把这个功能用起来了,下面我把使用的方法分享一下吧。
函数部分
function _getHistoryToday($created)
{
$date = date('m/d', $created);
$time = time();
$db = Typecho_Db::get();
$prefix = $db->getPrefix();
$sql = "SELECT * FROM `{$prefix}contents` WHERE DATE_FORMAT(FROM_UNIXTIME(created), '%m/%d') = '{$date}' and created <= {$time} and created != {$created} and type = 'post' and status = 'publish' and (password is NULL or password = '') LIMIT 5";
$result = $db->query($sql);
if ($result instanceof Traversable) {
foreach ($result as $item) {
$item = Typecho_Widget::widget('Widget_Abstract_Contents')->push($item);
$title = htmlspecialchars($item['title']);
$permalink = $item['permalink'];
echo "
<li class='item'>
<a class='link' href='{$permalink}' title='{$title}'>{$title}</a>
</li>
";
}
}
}
前端调用
1、 文章页内
<?php _getHistoryToday($this->created) ?>
2、 全局调用
<?php _getHistoryToday(time()) ?>
效果查看
本站的侧边栏,可以看到。
CSS代码:
.joe_history{margin:15px 0;padding:15px;position:relative;border:1px dashed var(--classA);line-height:26px}.joe_history .title{position:absolute;top:0;left:15px;font-size:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--background);padding:0 5px;color:var(--main);font-weight:600}.joe_history .title-date{color:var(--theme)}.joe_history .item{display:flex;align-items:center;line-height:30px}.joe_history .item strong{color:var(--routine);margin-right:20px}.joe_history .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_history .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_history .item .link:hover{color:var(--theme)}.joe_history .item .link:hover::after{width:100%}.joe_history .item .icon{fill:var(--routine)}
侧边栏详细代码,添加到public/aside.php的恰当位置
<section class="joe_aside__item hot">
<div class="joe_aside__item-title">
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path d="M704 199.68h28.16c25.6 0 46.08-20.48 46.08-43.52V69.12c0-25.6-20.48-43.52-46.08-43.52h-28.16c-25.6 0-43.52 20.48-43.52 43.52v87.04c-2.56 25.6 17.92 43.52 43.52 43.52z m268.8 25.6v-102.4c0-20.48-17.92-38.4-38.4-38.4h-84.48-46.08v56.32c0 51.2-40.96 92.16-92.16 92.16h-5.12c-51.2 0-92.16-40.96-92.16-92.16V84.48h-171.52v56.32c0 51.2-40.96 92.16-92.16 92.16h-5.12c-51.2 0-92.16-40.96-92.16-92.16V84.48H179.2h10.24-99.84C69.12 84.48 51.2 102.4 51.2 122.88v844.8c0 20.48 17.92 38.4 38.4 38.4H184.32h-12.8H844.8h-15.36 97.28c20.48 0 38.4-17.92 38.4-38.4V232.96c7.68-2.56 7.68-5.12 7.68-7.68z m-58.88 663.04c0 53.76-5.12 58.88-58.88 58.88H168.96c-53.76 0-58.88-5.12-58.88-58.88V320h803.84v568.32zM332.8 199.68h28.16c25.6 0 46.08-20.48 46.08-43.52V69.12c0-25.6-20.48-43.52-46.08-43.52H332.8c-25.6 0-46.08 20.48-46.08 43.52v87.04c0 25.6 20.48 43.52 46.08 43.52zM302.08 640h391.68c-12.8 25.6-25.6 48.64-43.52 71.68-15.36 20.48-33.28 38.4-53.76 56.32-20.48 15.36-40.96 30.72-64 43.52-17.92 10.24-35.84 17.92-56.32 25.6-10.24 2.56-12.8 12.8-10.24 23.04 2.56 5.12 5.12 7.68 10.24 10.24 5.12 2.56 10.24 2.56 15.36 0 23.04-7.68 46.08-20.48 69.12-33.28 28.16-15.36 51.2-35.84 76.8-56.32 23.04-23.04 43.52-48.64 64-76.8 15.36-23.04 28.16-48.64 38.4-76.8 5.12-12.8-5.12-25.6-17.92-25.6H537.6v-66.56c0-10.24-7.68-17.92-17.92-17.92-10.24 0-17.92 7.68-17.92 17.92v66.56h-199.68c-10.24 0-17.92 7.68-17.92 17.92v2.56c-2.56 10.24 7.68 17.92 17.92 17.92z m17.92-102.4l74.24-76.8 12.8-12.8c10.24-7.68 17.92-12.8 30.72-15.36 5.12-2.56 12.8-2.56 23.04-2.56h122.88c7.68 0 15.36 0 23.04 2.56 5.12 0 12.8 2.56 17.92 5.12 10.24 5.12 17.92 12.8 25.6 20.48l71.68 76.8c7.68 7.68 17.92 7.68 25.6 0 5.12-5.12 5.12-7.68 5.12-12.8s-2.56-7.68-5.12-12.8L675.84 435.2l-17.92-17.92c-5.12-5.12-12.8-7.68-20.48-12.8-15.36-7.68-35.84-10.24-56.32-10.24h-122.88c-20.48 0-38.4 2.56-56.32 10.24-7.68 5.12-12.8 7.68-20.48 12.8l-17.92 17.92-71.68 76.8c-5.12 5.12-5.12 7.68-5.12 12.8s2.56 10.24 5.12 12.8c7.68 7.68 20.48 7.68 28.16 0z"></path>
</svg>
<span class="text">那年今日</span>
<span class="line"></span>
</div>
<ol class="joe_aside__item-contain">
<?php _getHistoryToday(time()) ?>
</ol>
</section>
学习到了,感谢博主