Typecho-Joe主题实现最后更新修改时间提示

前言

原文：https://laolion.com/archives/2547.html
今天在老狮的博客里到一个类似的博文，于是在本站也弄了一个，但样式并不符合我的审美，所以参照了一下Joe6.1版的时间提示样式改了改。

步骤

在post.php文件 上面放入以下代码：

<?php if ($this->options->JOverdue && $this->options->JOverdue !== 'off' && floor((time() - ($this->modified)) / 86400) > $this->options->JOverdue) : ?>
<div class="joe_detail__overdue-wrapper">
<div class="title">
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18" style="vertical-align: middle;"><path d="M0 512c0 282.778 229.222 512 512 512s512-229.222 512-512S794.778 0 512 0 0 229.222 0 512z" fill="#FF8C00" fill-opacity=".51"></path><path d="M462.473 756.326a45.039 45.039 0 0 0 41.762 28.74 45.039 45.039 0 0 0 41.779-28.74h-83.541zm119.09 0c-7.73 35.909-39.372 62.874-77.311 62.874-37.957 0-69.598-26.965-77.33-62.874H292.404a51.2 51.2 0 0 1-42.564-79.65l23.723-35.498V484.88a234.394 234.394 0 0 1 167.492-224.614c3.635-31.95 30.498-56.815 63.18-56.815 31.984 0 58.386 23.808 62.925 54.733A234.394 234.394 0 0 1 742.093 484.88v155.512l24.15 36.454a51.2 51.2 0 0 1-42.668 79.48H581.564zm-47.957-485.922c.069-.904.12-1.809.12-2.73 0-16.657-13.26-30.089-29.491-30.089-16.214 0-29.474 13.432-29.474 30.089 0 1.245.085 2.491.221 3.703l1.81 15.155-14.849 3.499a200.226 200.226 0 0 0-154.265 194.85v166.656l-29.457 44.1a17.067 17.067 0 0 0 14.182 26.556h431.155a17.067 17.067 0 0 0 14.234-26.487l-29.815-45.04V484.882A200.21 200.21 0 0 0 547.26 288.614l-14.985-2.986 1.331-15.224z" fill="#FFF"></path><path d="M612.864 322.697c0 30.378 24.303 55.022 54.272 55.022 30.003 0 54.323-24.644 54.323-55.022 0-30.38-24.32-55.023-54.306-55.023s-54.306 24.644-54.306 55.023z" fill="#FA5252"></path>
</svg>
<span class="text">温馨提示：</span>
</div>
<div class="content">
本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>，已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新，若内容或图片失效，请留言反馈。
</div>
</div>
<?php endif; ?>

在functions.php文件适当位置添加以下代码：

$JOverdue = new Typecho_Widget_Helper_Form_Element_Select(
        'JOverdue',
        array(
            'off' => '关闭（默认）',
            '30' => '大于30天',
            '60' => '大于60天',
            '90' => '大于90天',
            '120' => '大于120天',
            '180' => '大于180天'
        ),
        'off',
        '是否开启文章更新时间大于多少天提示（仅针对文章有效）',
        '介绍：开启后如果文章在多少天内无任何修改，则进行提示'
    );
    $JOverdue->setAttribute('class', 'j-setting-content j-setting-post');
    $form->addInput($JOverdue->multiMode());

然后在主题自定义CSS中放入以下样式代码：

/*最后更新修改时间*/
.joe_detail__overdue-wrapper {
    width: 100%;
    padding: 15px 15px 15px 15px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
    font-size: 14px;
    color: #e6a23c;
    border: 1px solid #ffbb76;
    background: #fffcef;
}
.joe_detail__overdue-wrapper .title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}
.joe_detail__overdue-wrapper .content {
    padding-left: 25px;
}
.joe_detail__overdue-wrapper .text {
    padding-left: 6px;
}

接着在joe.min.css（Joe4.7.6）中适当位置添加如下代码：

html[dark='true'] .joe_detail__overdue-wrapper {background: var(--classD);}

最后在joe.responsive.min.css中适当位置添加如下代码：

@media (max-width: 768px){html .joe_detail__overdue-wrapper{padding: 10px;}
@media (max-width: 768px){html .joe_detail__overdue-wrapper .content {font-size: 13px;padding-left: 0;}
@media (max-width: 768px){html .joe_detail__overdue-wrapper .title {margin-bottom: 5px;font-size: 14px;}

至此应该就可以了，如还未成功，请留言反馈，可能我漏了什么。