typecho 实现“那年今日”功能

寻梦xunm| 787| 收集

3年前

超过1279天温馨提示

本文最后更新于2021年06月03日，已超过1279天没有更新，若内容或图片失效，请留言反馈。

经常逛 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>

文章来源于:https://cmsblog.cn/1205.html

typecho css 教程 php html js 历史今天

0 赞 or 打赏

喜欢就打赏一点