Gridea NexT主题优化（中）

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

特别说明

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

主题优化

首页弹出欢迎弹窗

说明：首页弹窗使用的是SweetAlert，你可以把它修改喜欢的弹窗样式。
在 _blocks 文件夹中新建一个文件并重命名为 welcome.ejs 。
在 welcome.ejs 文件中添加下面代码：

<!-- 弹窗公告开始-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function welcome(){
    swal({
        title: "欢迎访问！",
        text: '为确保更好的浏览体验，建议您使用电脑访问本网站。',
        buttons: false,
        closeOnClickOutside: false,
        icon: "/favicon.ico",
        timer: 3000,
    });
}
$(document).ready(()=>{
    welcome()
})
</script>
<!-- 弹窗公告结束-->

中间弹窗内容请按照个人需求填写。
你可以根据个人喜好修改弹窗样式。

打开 index.ejs 文件，在 </body> 上方另起一行并添加下面代码：

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

添加复制提示弹窗

说明：复制弹窗使用的是SweetAlert，你可以把它修改喜欢的弹窗样式。
在 _blocks 文件夹中新建一个文件并重命名为 copy.ejs 。
在 copy.ejs 文件中添加下面代码：

<!-- 复制弹窗提示开始 -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
  window.onload = function(){
    document.body.oncopy = function() {
      swal({
        title: "复制成功！",
        text: "若要转载请务必保留原文链接并注明来源，谢谢合作！",
        icon: "success",
        buttons: false,
        closeOnClickOutside: false,
        timer: 3000,
     });
    };
  }
</script>
<!-- 复制弹窗提示结束 -->

中间弹窗内容请按照个人需求填写。
你可以根据个人喜好修改弹窗样式。

分别打开 archives.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 文件，在 </body> 上方另起一行并添加下面代码：

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

博客添加夜间模式

说明：我们使用遮罩的方式来实现夜间模式。即夜间模式开启时，会在网站中显示一层遮罩。
在 _blocks 文件夹中新建一个文件并重命名为 nightmode.ejs 。
在 nightmode.ejs 文件中添加下面代码：

<!--夜间模式开始-->

<style>
.set-view-mode { /*正常模式下按钮总体样式*/
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 300;
    background: #000000;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    -moz-border-radius: 10px;
    color: #FFFFFF;
    opacity: .8;
    text-align: center;
}
.set-view-mode i { /*正常模式下按钮图标样式*/
    width: 100%;
    height: 100%;
    display: block;
    line-height: 30px;
    font-size: 20px;
    color: #FFFFFF;
}
.cover{ /*正常模式下遮罩样式（应设置为全透明）*/
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0);
    z-index: 99999;
}
.night-mode .set-view-mode { /*夜间模式下按钮总体样式*/
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 300;
    background: #FFFFFF;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    -moz-border-radius: 10px;
    color: #000000;
    opacity: .8;
    text-align: center;
}
.night-mode .set-view-mode i { /*夜间模式下按钮图标样式*/
    width: 100%;
    height: 100%;
    display: block;
    line-height: 30px;
    font-size: 20px;
    color: #000000;
}
.night-mode .cover{ /*夜间模式下遮罩样式（应设置为黑色半透明）*/
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0.3); 
    z-index: 99999;
}
</style>

<div class="cover"></div>
<a class="set-view-mode" href="javascript:void(0)" title="夜间模式">
    <i class="fa fa-moon-o"></i>
</a>

<script>
$(function(){
    btn = $('.set-view-mode');
    if(sessionStorage.mode=="night"){
        $('body').addClass('night-mode');
        btn.find('i').attr('class','fa fa-sun-o');
    }
    $('.set-view-mode').click(function(){
        var next_mode = $('body').hasClass('night-mode') ? 'day':'night';
        if(next_mode!='day'){
            $('body').addClass('night-mode');
            btn.find('i').attr('class','fa fa-sun-o');
            sessionStorage.mode="night";
        }else{
            $('body').removeClass('night-mode');
            btn.find('i').attr('class','fa fa-moon-o');
            sessionStorage.mode="day";
        }
    });
});
</script>

<!--夜间模式结束-->

可以按照注释自行修改样式。
HTML和Java部分不建议修改。

分别打开 archives.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 文件，在 </body> 上方另起一行并添加下面代码：

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

添加顶部加载进度条

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

<!--网站加载进度条开始-->
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
    .pace .pace-progress {
    	background: #006eff; /*进度条颜色*/
    	height: 3px; /*进度条高度*/
    }
    .pace .pace-progress-inner {
     	box-shadow: 0 0 10px #3f3f3f, 0 0 5px #3f3f3f; /*阴影颜色*/
    }
    .pace .pace-activity {
    	border-top-color: #00ffdd;	/*上边框颜色*/
    	border-left-color: #00ffdd;	/*左边框颜色*/
    }
</style>
<!--网站加载进度条结束-->