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.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.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.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 文件，在 </body> 上方另起一行并添加下面代码：

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

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

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

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

支持的插件：

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

如何在 archives.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 中选择需要修改的文件？