关于Material主题源码的一些小修改（修复Bug？）

一、插件hexo-prism-plugin实现代码高亮导致的行号不显示问题

从官方文档我们可以看到md主题支持的代码高亮方式：

由于我使用的是1.4.0稳定版（时间20180722），所以只能使用 hexo-prism-plugin 插件，具体用法官方文档讲的很详细我就不多说了。

敲黑板，重点重点！！！

我在这里主要说一下1.4.0版的md主题对 hexo-prism-plugin 插件似乎不太兼容。

这是我的 prism 插件配置：

1
2
3
4

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'solarizedlight'
  line_number: true    # default false

再给你们看一下截图：

是不是感觉有什么不对劲？？

相信看到这里大家应该都知道什么回事了，line_number我设置为true表示我开了行号显示，那么问题来了，我们的行号呢？还有那个诡异的竖线是什么鬼？

于是我用chrome的开发者模式调试了一下，发现了一个很眼熟的CSS属性——padding。如图：

这里给没学过编程的同学科普一下padding是什么意思：

先放个W3School的链接压压惊= =：CSS padding 属性

padding定义和用法： padding 简写属性在一个声明中设置所有内边距属性。 例：

1	padding:10px;

类似于这种的意思就是上下左右四个内边距都是 10px。

那么内边距又是什么东西呢？ 看图：

所以内边距的意思就是组件的内容到边框的距离。内边距的改变不会影响整个组件的大小，但是会影响组件内容的显示大小

废话就不多说了….. 我的直觉告诉我就是它的锅，我们现在来把它去掉试试！

Unbelievable! 行号出现了！但是在Chrome的开发者模式改只是临时的，刷新就回到原来的样子了，我们要去主题的源代码修改。

经过一番查找终于找到了相关代码所在的文件hexo根目录/themes/material/source/css/style.min.css

**注意：**是style.min.css这个压缩过的css文件，而不是style.css！！

打开style.min.css，查找padding:1pc或者#post-content pre都OK，然后把padding:1pc;注释掉即可。如图：

二、文章结尾添加版权声明

参考：http://tianma.space/post/1810369046/index.html

现在是版权时代，很多博主都会在文章结尾出写上诸如“转载请保留声明信息”之类的。下面我来说下如何在 Hexo 中添加版权声明。这里我拿 Material 主题作为例子，其他主题可参考后自行修改。

1. 自定义字段：考虑到有些博文可能是不需要版权声明的，比如转载、翻译之类的，所以自定义 post_license 作为开关：

   • 主题配置文件 _config.yml 中添加字段，作为总开关：

     1 2	post_license: enable: true # or false

   • 文章的 Front-matter 中添加字段，作为独立开关：

     1	post_license: true # or false

2. 创建 material/layout/_partial/post_license.ejs:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   <div> <br/> <ul id="post-license" class="post-license"> <li class="post-license-author"> <strong>本文作者：</strong> <a href="<%= config.url %>"><%= theme.author %></a> </li> <li class="post-license-link"> <strong>本文链接：</strong> <a href="<%= page.permalink %>"><%= page.title %></a> </li> <li class="post-license-statement"> <strong>版权声明： </strong> 本文由 <%= config.author %> 原创，采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="license" target="_blank">署名-非商业性使用-相同方式共享（CC BY-NC-SA）4.0 国际许可协议</a> </br>转载请保留以上声明信息！ </li> </ul> </div>

3. 在 material/layout/_partial/post-content.ejs 引入 post_license.ejs:

   1 2 3

   <% if(theme.post_license.enable && page.post_license !== false){%> <%- partial('_partial/post_license') %> <% } %>

4. 在 material/source/css/style.min.css 中添加 版权声明 样式：

   1 2 3 4 5 6 7

   #post-license { margin: 2em 0 0; padding: 0.5em 1em; border-left: 3px solid #ff4081; background-color: #f9f9f9; list-style: none; }

三、Disqus延迟加载

☆☆ 2018-08-11 更新：Material主题1.5.6版本开始disqus_click自带延迟加载 ☆☆

参考：https://blog.itswincer.com/posts/e5d13eb/

先讲下考虑延迟加载的初衷： 好吧，其实是因为在大局域网内没法做到所有用户都能看评论，如果加载不出评论就会有一段时间在下方显示白块，强迫症的我怎么能忍受？？！！于是我就想把评论功能设计成网络好的话就自动显示评论，否则需要手动点击。正好看到网上有，于是就借鉴了。

然后说下原理： 原理嘛，先用 ajax 异步发送一个 get 请求至 Disqus 服务器，接收成功则屏蔽按钮，加载评论；超时则自动断开，并显示加载按钮：

修改文件位置：<Material主题目录>/layout/_widget/comment/disqus_click/main.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<div class="btn_click_load">
    <button class="disqus_click_btn"><%= __('post.comments_load_button') %></button>
</div>
<!--
<script type="text/ls-javascript" id="disqus-lazy-load-script">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//<%= theme.comment.shortname %>.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
 -->


<%
/*
延迟加载 disqus，timeout 可以自己设置时长
*/
%>
<script type="text/javascript" id="disqus-lazy-load-script">
    $.ajax({
    url: 'https://disqus.com/next/config.json',
    timeout: 1000,
    type: 'GET',
    success: function(){
        var d = document;
        var s = d.createElement('script');
        s.src = '//<%= theme.comment.shortname %>.disqus.com/embed.js';
        s.setAttribute('data-timestamp', + new Date());
        (d.head || d.body).appendChild(s);
        $('.disqus_click_btn').css('display', 'none');
    },
    error: function() {
        $('.disqus_click_btn').css('display', 'block');
    }
    });
</script>
<%
/*
由于我超时时长设置得比较短，所以可能翻墙了还是没有自动加载评论，这时就需要手动点击加载了
*/
%>
<script type="text/javascript" id="disqus-click-load">
    $('.btn_click_load').click(() => {  //click to load comments
        (() => { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//<%= theme.comment.shortname %>.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.disqus_click_btn').css('display','none');
    });
</script>

我是把原来的注释掉再加后面的，链接中说超时时间设为300比较短，的确短，我测试了一下，设置为1000就不影响阅读了。

**注意：**改完后记得确认主题配置文件是否启用了disqus_click