为 Solo 添加文章内容过期提醒

1. 内容过期提醒代码

(function() {
try {
  var days = parseInt((new Date().getTime() - new Date(document.querySelector('.article time').innerText.replace(/ /g, '').replace(/-/g, '/')).getTime()) / 1000/60/60/24, 10);
  days > 90 &&  document.querySelector('section.item__content').insertAdjacentHTML('afterBegin', ['<blockquote style="border: 1px solid #6a737d;border-left: 5px solid #6a737d;line-height: 36px;">本文最后更新于 <code style="color: #FF5722;vertical-align: middle;">', days, '</code> 天前,其中的信息可能已经不够准确,请您酌情参考!</blockquote>'].join(''));
} catch(e) {}
})();

2. 代码使用说明

由于 Solo 的页面支持 pjax 不刷新加载内容,如果将上述代码放在信息配置的 HTML head页脚 中,在 pjax 加载文章时将不能执行到以上代码,导致没有任何效果。

要想不管是刷新页面还是 pjax 不刷新页面加载文章都能够正常执行以上代码,以便显示文章内容过期提醒信息,需要保证文章开启了签名档,并将上述代码复制到对应的签名档中:

image.png

由于我的文章都使用了 签名档1,并且签名档属于文章内容的一部分,在 pjax 不刷新页面加载内容时会同时加载到上述代码,这样就不会出现没有执行到附加代码到情况。

这样做还有一个优点,就是不需要修改 Solo 的任何源代码,将个性化代码保存在系统配置中更加便于程序更新。

3. 代码使用效果

image.png

image.png

4. 附:Solo 搜索页面及 Casper 主题等页面样式优化 CSS

.details-donate { text-align: right; }
.details-donate td { padding: 10px 10px; }
.details-donate td img { height: 320px; border-radius: 12px; }
.zixi-hide { display:none!important;visibility: hidden!important; }
.header--article { transition: background .3s linear; }
.header--index:before, .header--other:before {  background: url(https://img.hacpai.com/bing/20180311.jpg) no-repeat center center !important; }
.header--index:before, #pjax > div.article > div.item__cover{ -webkit-filter: blur(5px); -moz-filter: blur(5px);-o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }
.article__top .title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 60px; max-width: calc(100% - 260px); }
.pagination__item--active { background: #586069; }
.articles .item__title a { word-break: break-word }
.link-logo { width:128px; height:128px; min-width: 128px; min-height: 128px; }
.article__bottom .fn__flex { margin: auto; width: 100%; }
.articles .item__cover { height: 160px; background-image: url(https://res.zixizixi.cn/izcn.svg); }
.vditor-reset code, code { font-family: mononoki,Consolas,"Liberation Mono",Menlo,Courier,"Microsoft Yahei",monospace !important;}
.vditor-reset table { display: table!important; }
.footer .fn__left { line-height: 20px; }
.footer .fn__right { line-height: 30px; }
pre code { max-height: 80vh !important; }
div.wrapper.other .other__content { text-align: center; }
div.wrapper.other .other__item { width: 26%; min-width: 236px; line-height: 26px; display: inline-block; background: #f4f8fb; border-radius: 5px; padding: 15px 0; }
div.wrapper.other .other__item img { border: 1px solid #ddd; border-radius: 50%; background: #fff; }
@media screen and (max-width: 768px) {
  div.wrapper.other .other__item { width: 40%;  }
  .details-donate td img { height: 200px!important; }
}
::selection { background-color: #4285f4; color: #f6f8fa; }
::-moz-selection { background-color: #4285f4; color: #f6f8fa; }
::-webkit-scrollbar { width: 8px!important; height: 8px!important; }
::-webkit-scrollbar-track-piece { background-color: #eee; -webkit-border-radius: 3px; }
::-webkit-scrollbar-thumb { background-color: #a0a0a0; outline: 0; border: 0; webkit-border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: #4285f4; }
.sub-tabs-main .form textarea { height: 320px; }

li.vcomment__paginations>div>span:not(.vcomment__space) { padding: 3px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; border: 1px solid #CCC; display: inline-block; text-align: center; font-size: 14px; }

div.search { padding: 20px 0; background-color: #f4f8fb; }
div.search .search__articles { width: 1024px; max-width: 80%; margin: 0 auto; }
div.search > div > article { background: #fff; padding: 0 15px 10px 0; margin: 10px auto 20px; border-radius: 5px; box-shadow: 8px 14px 38px rgba(39,44,49,0.06), 1px 3px 8px rgba(39,44,49,0.03); overflow: hidden; }
div.search > div > article> header { border-left: 5px solid #586069; padding: 5px 5px 5px 10px; margin-bottom: 20px; }
div.search > div > article> header > h1 > a { color: #15171a; font-weight: bold; }
div.search > div > article> div.vditor-reset { padding-left: 15px; }
div.search__articles footer { margin: 15px; }
div.search > nav.search__pagination { text-align: center; }
div.search > nav.search__pagination span, div.search > nav.search__pagination a { width: 30px; height: 30px; background: #15171a; border-radius: 50%; display: inline-block; color: #fff; line-height: 30px; font-size: 12px; margin: 0 5px; }
div.search > nav.search__pagination a:hover { opacity: 0.68; text-decoration: none; }
div.search > nav.search__pagination span { background: #586069; }
div.search__header.fn-clear > span.fn-right, body > div.footerWrapper { display: none; }
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1163 引用 • 8916 回帖 • 634 关注
  • 优化

    过早的优化是万恶之源。

    过度优化实则是劣化。

    30 引用 • 169 回帖
7 回帖
请输入回帖内容...
  • hjljy 1

    这个过期提醒很不错啊

  • mufengcoding 1

    可能主题原因,我是 91php 的你方式不行。

    伪前端瞎改实现了

    <script>
    (function() {
      try {
        var days = parseInt((new Date().getTime() - new Date(document.querySelector('article time').innerText.replace(/ /g, '').replace(/-/g, '/')).getTime())/1000/60/60/24);
    console.log(days);
        if (days > 90) {
        console.log(document.querySelector('div.meta'));
          document.querySelector('div.vditor-reset.post__content').insertAdjacentHTML('afterBegin', ['<blockquote style="border: 1px solid #6a737d;border-left: 5px solid #6a737d;line-height: 36px;">本文最后更新于 <code style="color: #FF5722;vertical-align: middle;">', days, '</code> 天前,其中的信息可能已经不够准确,请您酌情参考!</blockquote>'].join(''));
        }
      } catch(e) {
    console.log(e);
    }
    })();
    </script>
    
    1 回复
  • iTanken

    有些皮肤的 HTML 结构和 CSS 类名可能不一样,改成对应的 selector 值应该就可以

  • JssDream

    试一下效果哈huaji

  • 233333

    trollface这个我也偷走了

    1 回复
  • iTanken

    读书人的事情怎么叫偷 trollface

    1 回复
  • 233333

    huaji 学习、借鉴

请输入回帖内容 ...