关于Material主题源码的一些小修改(修复Bug?)

Author Avatar
Reborn 7月 22, 2018
  • 在其它设备中阅读本文章

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

官方文档我们可以看到md主题支持的代码高亮方式:
document-md+code

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

敲黑板,重点重点!!!

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

这是我的 prism 插件配置:

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

再给你们看一下截图:
bug-MD+pris

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

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

于是我用chrome的开发者模式调试了一下,发现了一个很眼熟的CSS属性——padding。如图:
md-css-contentpre-padding

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

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

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

padding:10px;

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

那么内边距又是什么东西呢?
看图:
explain-padding
所以内边距的意思就是组件的内容边框距离。内边距的改变不会影响整个组件的大小,但是会影响组件内容的显示大小

废话就不多说了…..
我的直觉告诉我就是它的锅,我们现在来把它去掉试试!
md-css-contentpre-nopadding

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

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

注意:style.min.css这个压缩过的css文件,而不是style.css!!

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


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

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

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

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

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

        post_license:
        enable: true # or false
      
    • 文章的 Front-matter 中添加字段,作为独立开关:

        post_license: true # or false
      
  2. 创建 material/layout/_partial/post_license.ejs:

     <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:

     <% if(theme.post_license.enable && page.post_license !== false){%>
        <%- partial('_partial/post_license') %>
     <% } %>
    
  4. 在 material/source/css/style.min.css 中添加 版权声明 样式:

     #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

<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