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>

• 可以按照注释说明自行修改滚动条颜色、样式。

分别打开 archives.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 文件，在 </head> 上方另起一行并添加下面代码（否则滚动条不会生效）：

<%- include('./_blocks/scrollbar') %>

系列文章

Gridea NexT主题优化（中）
Gridea NexT主题优化（下）

题外话

本文章内容完全由博主原创，博主已亲自为大家踩坑。请尊重他人劳动成果，转载时注明原文出处。如果这篇文章对你有帮助，还请打赏支持一下！十分感谢😘！

话说，这世上不会真的有白嫖怪吧？！ 😱