拼命加载中...

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.ejsindex.ejspost.ejstag.ejstags.ejsfriends.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.ejsindex.ejspost.ejstag.ejstags.ejsfriends.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>
<!--网站加载进度条结束-->
  • 可以按照注释自行修改进度条样式。

分别打开 archives.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 文件,在 </head> 上方另起一行并添加下面代码:

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

系列文章

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


题外话

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

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


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

赞赏



评论说明
1. 您需要先登录/注册后才能提交评论;
2. 评论智能过滤已开启,请勿提交无意义评论;
3. 评论审核已开启,您的评论将在审核后显示,请勿重复提交评论,谢谢配合!