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

经验 暂无评论

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

起因

无意中看到 @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;
}

效果

附录

参考链接

如果遇到问题或者对文章内容存疑,请在下方留言,博主看到后将及时回复,谢谢!
回复
回答11+40=