Gridea NexT主题优化（上）

《NexT》是Hexo的一个主题，深受广大用户喜爱。非常感谢@hsxyhao大佬将NexT主题成功移植到了Gridea平台，给大家带来诸多便利。网上有许多有关hexo-theme-next的美化和自定义配置的文章，遗憾的是，由于文件架构不同，那些配置并不完全适用于Gridea NexT主题。鉴于此，我写了一些对于Gridea NexT主题优化的文章。如果这篇文章对你有帮助，还请打赏支持一下！拜托了🙏！

特别说明

在阅读本文章前，您需要有一个按照《NexT主题使用文档》配置的网站/博客。
本文章仅针对Gridea平台的NexT主题，并不适用于其他平台。
本文章与Gridea创始人和NexT主题团队以及@hsxyhao大佬无关，是由本菜鸡博主 ~~（对，我就是个菜鸡）~~ 亲自尝试后总结，请各位大佬勿喷！
本文章中对NexT主题优化后的显示效果预览均以本网站为准（主题优化内容均已在本网站实现）。
本文章中的优化内容均为可选，如果您对显示效果不满意，可以选择不优化其中任意一项，对其他项无影响！
除特别说明外，本文章内需要改动的文件均在 Gridea主题目录 > NexT > templates 目录下。

主题优化

文章底部标签样式优化

修改 _blocks 文件夹内的 post-footer.ejs 文件。
将文件中的

<a href="<%= post.tags[i].link %>"># <%= post.tags[i].name %></a>

修改为

<a href="<%= post.tags[i].link %>"><i class="fa fa-tag"></i> <%= post.tags[i].name %></a>

文章结尾添加标记

打开 post.ejs 文件，在 <% if (site.customConfig.enableReward) { %> 上方另起一行并添加下面代码：

<div>
<br/> 
  <div style="text-align:center;color: #999;font-size:14px;">---------- 本文到此结束 <i class="fa fa-paw"></i> 感谢您的阅读 ----------</div>
<br/>
</div>

备注：
可以将 #999 修改成自己喜欢的颜色。
可以修改 14px 来设置文字大小。
可以将 fa fa-paw 替换为其他的font awesome图标。
代码中的两个 <br/> 作用是换行，防止结构过于紧密。
可以自行修改文字内容。

网站页脚样式优化

修改 _block 文件夹内的 footer.ejs 文件。
将文件中的

<center id="runTimeBox">
  已运行:<span id="run_time"></span>
</center>
<span id="busuanzi_container_site_pv">浏览数:<span id="busuanzi_value_site_pv"></span> 次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">访客数:<span id="busuanzi_value_site_uv"></span> 人</span>

修改为

<center id="runTimeBox">
  网站已安全运行： <span id="run_time"></span>
</center>
<i class="fa fa-eye"></i><span id="busuanzi_container_site_pv">总访问量： <span id="busuanzi_value_site_pv"></span> 次</span>
<span class="post-meta-divider">|</span>
<i class="fa fa-users"></i><span id="busuanzi_container_site_uv">总访客数： <span id="busuanzi_value_site_uv"></span> 人</span>

可以自行修改文字内容。

页脚时间精确化

修改 _block 文件夹内的 footer.ejs 文件。
将文件中的

<script>
  BirthDay = new Date('<%= site.customConfig.startTime %>');
  if (BirthDay.getTime()) {
    function runTime() {
      str = "";
      today = new Date();
      timeold = today.getTime() - BirthDay.getTime();
      msPerDay = 24 * 60 * 60 * 1000;
      e_daysold = timeold / msPerDay;
      daysold = Math.floor(e_daysold);
      str += daysold + "天";
      return str;
    }
    setInterval(function () {
      $("#run_time").html(runTime());
    }, 1000);
  } else {
    document.querySelector('.footer').removeChild(document.querySelector('#runTimeBox'));
  }
</script>

修改为

<script>
  BirthDay = new Date('<%= site.customConfig.startTime %>');
  if (BirthDay.getTime()) {
    function runTime() {
      str = "";
      today = new Date();
      timeold = today.getTime() - BirthDay.getTime();
      sectimeold = timeold / 1000
      secondsold = Math.floor(sectimeold);
      msPerDay = 24 * 60 * 60 * 1000
      msPerYear = 365 * 24 * 60 * 60 * 1000
      e_daysold = timeold / msPerDay % 365
      e_yearsold = timeold / msPerYear
      daysold = Math.floor(e_daysold);
      yearsold = Math.floor(e_yearsold);
      str = yearsold + " 年 ";
      str += daysold + " 天 ";
      str += today.getHours() + " 时 ";
      str += today.getMinutes() + " 分 ";
      str += today.getSeconds() + " 秒";
      return str;
    }
    setInterval(function () {
      $("#run_time").html(runTime());
    }, 1000);
  } else {
    document.querySelector('.footer').removeChild(document.querySelector('#runTimeBox'));
  }
</script>

备注：修改后的代码会把365天计算成1年。时间会带有时分秒。

网站滚动条优化

在 _blocks 文件夹中新建一个文件并重命名为 scollbar.ejs 。
在 scollbar.ejs 文件中添加下面代码：

<style type="text/css">
::-webkit-scrollbar-thumb { /*滚动条滑块*/
    background-color: #1E90FF; /*滑块颜色*/
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent); /*滑块样式*/
    border-radius: 5px; /*设置圆角*/
}
::-webkit-scrollbar-track { /*滚动条滑槽*/
    background-color: #FFFACD; /*滑槽颜色*/
    border-radius: 5px; /*设置圆角*/
}
::-webkit-scrollbar { /*滚动条大小*/
    width: 8px; /*竖向滚动条的宽度*/
    height: 8px; /*横向滚动条的高度*/
}
</style>