页面添加自定义消息提示框

为页面添加自定义消息提示框，比如可用来提示文章很久没有更新内容可能已发生了变化等功能。

起因

无意中看到 @JDEAL 大佬的文章（详见参考链接），于是参考其实现方法进行重现，并且补充上其未提及的样式问题。

添加

在主题的 functions.php 中添加新函数

/**
 * 过期提醒函数
 * @return bool
 */
function timeZoneold($from){
    $now = new Typecho_Date(Typecho_Date::gmtTime());
    return $now->timeStamp - $from > 8760*60*60 ? true : false;
}

小贴士：其中 8760*60*60 为一年时长，可根据自身需求进行修改。

在主题的 functions.php 中合适的位置添加

<p class="post-fix"></p>
        <div class="expired-notice expired-notice-open-old" rel=nofollow><span
                class="expired-notice-banner-msg"><?php if (timeZoneold($this->date->timeStamp)) echo '本文撰写于<strong>一年前</strong>，如出现图片失效或有任何问题，请在下方留言。博主看到后将及时修正，谢谢！'; else echo '如果遇到问题或者对文章内容存疑，请在下方留言，博主看到后将及时回复，谢谢！' ?></span>
        </div>

小贴士：与原文不同，此方法将会在未满足一年的文章后添加单独的文案，具体效果请参照本文页尾处。

在主题的样式中添加以下属性

span.expired-notice-banner-msg {
    margin-bottom: 20px;
    background: #f7f7f7;
    padding: .5rem;
    border: 1px dashed #e1e1e1;
    line-height: 1.75;
    position: relative;
    margin-top: 30px;
}

span.expired-notice-banner-msg:before {
    content: 'WARNING';
    position: absolute;
    left: .5rem;
    font-size: .8rem;
    top: -.5rem;
    z-index: 1;
    line-height: 1;
    padding: 0 .3rem;
}

span.expired-notice-banner-msg:after {
    content: '';
    position: absolute;
    height: 6.4px;
    background: #f7f7f7;
    left: .5rem;
    top: -1px;
    width: 48px;
    z-index: 0;
}

p.post-fix {
    margin: 25px -20px 0;
    padding: 25px 20px 20px;
    border-top: 1px solid #e0e0e0;
    color: #999;
}

效果

见本文文末。

附录

参考链接

网站添加发布超过一年提示 - JDEAL

本文由柒创作，采用知识共享署名4.0 国际许可协议进行许可。
转载本站文章前请注明出处，文章作者保留所有权限。
最后编辑时间： 2024-01-02 10:53 AM