拼命加载中...

Gridea NexT主题优化(下)

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


特别说明

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


主题优化

文章详情页标题前显示封面

说明:灵感来自于知乎。
打开 post.ejs 文件,在 <%- include('./_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat,date: post.date, stats: post.stats, isTop: post.isTop, browse: site.customConfig.visitor }) %> 上方另起一行并添加下面代码:

<div class="post-body">
  <% let cdn = site.customConfig.cdn + '/post-images', imgPrefix = post.feature.split('post-images')[1], imgUrl = imgPrefix ? cdn + imgPrefix : post.feature;  %>
  <% if (post.feature) { %>
    <img src="<%= imgUrl %>" />
  <% } %>
</div>

文章末尾添加分享按钮

说明:文章末尾分享按钮使用的是Share.js。
_blocks 文件夹中新建一个文件并重命名为 share.ejs
share.ejs 文件中添加下面代码:

<!-- 引入依赖 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
<!-- 只要一个div的class是social-share即可,内容会自动初始化 -->
<div class="social-share" style="text-align:center;font-size:14px;" data-sites="facebook,twitter,linkedin,google,wechat,qq,qzone,weibo">分享到:</div>
  • 可以按照需求自行修改。
  • 由于Share.js中的腾讯微博、豆瓣分享链接失效,已将其删除。
  • 可以自行调整按钮顺序

打开 _blocks 文件夹中的 post-footer.ejs 文件,在 <div class="nav">上方另起一行并添加下面代码:

<br/><%- include('./share') %>

备注: <br/> 的作用是换行,防止结构过于紧密。


添加Gitter聊天窗

说明:在添加此项前,请确保您已经成功创建Gitter聊天室。
_blocks 文件夹中新建一个文件并重命名为 chat.ejs
chat.ejs 文件中添加下面代码(默认会将聊天室显示在网站右下角):

<!--Gitter公共聊天室-->
<script data-name="gitter">
  ((window.gitter = {}).chat = {}).options = {
    room: 'website-pages-github-io/chatroom'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

注意: 请务必将代码中的 website-pages-github-io/chatroom 修改成自己的聊天室路径!

如果需要将聊天室显示在左下角,请在上面代码的 <script data-name="gitter"> 上方另起一行并添加下面代码:

<style>
.gitter-open-chat-button {
  right: auto !important;
  left: 10px !important;
}
</style>

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

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

添加浏览进度条

_blocks 文件夹中新建一个文件并重命名为 progress.ejs
progress.ejs 文件中添加下面代码:

<!--浏览进度条开始-->

<style>
    .read_progress {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #eee;
    }
    .read_progress_inner {
        content: '';
        position: absolute;
        left: 0;
        height: 100%;
        background-color: #00D3B2;
    }
</style>

<div class="read_progress">
    <div class="read_progress_inner" id="read_progress_inner"></div>
</div>

<script>
document.addEventListener('scroll', function(e) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 已经读过被卷起来的文档部分
    var scrollHeight = document.documentElement.scrollHeight // 文档总高度
    var clientHeight = document.documentElement.clientHeight // 窗口可视高度
    document.getElementById('read_progress_inner').style.width = +(scrollTop/(scrollHeight-clientHeight)).toFixed(2)*100 + '%'
})
</script>

<!--浏览进度条结束-->
  • 可以自行修改进度条样式
  • 不建议修改HTML和Java部分代码

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

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

添加第三方插件或其他代码

_blocks 文件夹中新建一个文件并重命名为 abc.ejs 。(自己起名字吧,我只是做个示例。)
abc.ejs 文件中添加插件代码(通常可以在该插件的网站上获取代码)。
分别打开 archives.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 文件(根据插件需求,一些插件仅需要打开部分文件),在 </body> (有时候可能是 </head> ,需要看插件说明)上方另起一行并添加下面代码:

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

支持的插件:

  • 第三方聊天/客服插件(如Tidio、DaoVoice、Crisp、Tawk.to等)。
  • 第三方评论系统(如LiveRe等)。务必要关闭Gridea平台和NexT主题中自带的评论(Gridea平台原生支持Gitalk、Disquz,NexT主题还支持Valine),否则会出现错误。
  • 第三方统计系统(如友盟+、51LA等)。Gridea NexT主题已原生支持谷歌分析和百度统计,这两个不用另外添加。
  • 一些其他第三方插件(这里不再一一列举了)。

如何在 archives.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 中选择需要修改的文件?

  • 这6个文件分别代表了网站的6种页面(文件名和页面url是对应的):文章归档页、网站首页、文章详情页、标签详情页、标签云页面、友链页面。你想要在哪个页面启用插件,就修改哪个文件。

系列文章

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


题外话

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

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


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

赞赏



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