拼命加载中...

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.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 文件,在 </head> 上方另起一行并添加下面代码(否则滚动条不会生效):

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

系列文章

Gridea NexT主题优化(中)
Gridea NexT主题优化(下)


题外话

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

话说,这世上不会真的有白嫖怪吧?! 😱


---------- 本文到此结束 感谢您的阅读 ----------

赞赏



评论说明
1. 您需要先登录/注册后才能提交评论;
2. 请使用 简体中文 发表评论;
3. 若表情无法加载,请刷新页面重试;
4. 评论智能过滤已开启,请勿提交无意义评论;
5. 评论审核已开启,您的评论将在审核后显示,请勿重复提交评论,谢谢配合!