configure hexo

摘要:本文主要记录了搭建 Hexo 站点的一些修改和配置,用以作为备份和参考。博客主题基于 hexo-theme-light ,修改过程均在 www.luckycoding.com 站点体现。保持简洁美观,增加实用功能是整个配置过程的原则和初衷。

1. 添加 Fork me on Github

新建文件 layout/_widget/forkme.ejs 内容如下:

<a href="https://github.com/zitherpeng"><img width="149" height="149" style="position: absolute; top: 0; right: 0; border: 0;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>

在文件 layout/layout.ejs 第2行中添加

<%- partial('_widget/forkme') %>

更多样式:https://github.blog/2008-12-19-github-ribbons/

20190314更新


右上角换上了章鱼猫,基于 svg ,GitHub地址: https://github.com/tholman/github-corners

新建文件 layout/_widget/github_corner.ejs 内容如下:

<a href="https://github.com/zitherpeng" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#258fb8; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

注意修改 layout/layout.ejs 文件引用,更多样式参考:http://tholman.com/github-corners/

2. 更换 googleapis 相关的链接

light 主题中有一些链接被墙了,如果在国内访问而没有翻墙的话加载起来会很慢。
在文件 layout/_partial/after_footer.ejs 中找到:

ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

// 替换为
lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js

// 或者
<script src="<%- config.root %>js/jquery.min.js"></script> 
// 需先翻墙将 jquery.min.js 文件下载下来放到 /themes/light/source/js/ 目录下

在文件 source/css/_base/variable.styl 中找到下面这一行并将其注释掉:

@import url("fonts.useso.com/css?family=Lato:400,400italic")

3. 使用百度分享

light 主题默认使用的是 AddThis 分享,为了避免墙内访问加载分享部件慢。可以选择使用百度分享,将 themes/light/layout/_partial/post/share.ejs 中的内容替换为:

<% if(theme.baidu_share){ %>
  <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<% } %>

在主题根目录 _config.yml 添加如下内容控制分享部件开关:

# 百度分享
baidu_share: true

更多样式: http://share.baidu.com/ 上自行获取。
百度分享默认不支持https,如需支持参考:https://github.com/hrwhisper/baiduShare

4.修改标题栏图标

修改标题栏图标非常简单,在 themes/light/layout/_partial/head.ejs 中找到:

<link href="<%- config.root %>img/favicon.png" rel="icon">

<!--替换为-->
<link href="<%- config.root %>img/favicon.ico" rel="icon" type="image/x-ico">

在 light/source 中新建目录 img/ 将你喜欢的标题栏图标放入,命名为 favicon.ico 即可。
阿里巴巴矢量图标库:https://www.iconfont.cn/

5. 添加返回顶部按钮

新建文件 /themes/light/layout/_partial/totop.ejs,添加如下代码:

<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/img/scrollup.png"/></a>
</div>

新建文件 /themes/light/source/js/totop.js,添加如下代码:

// 如果对显示位置和回滚速度不太满意,可以修改代码中的 upperLimit 和 scrollSpeed 参数

(function($) { 
    // When to show the scroll link
    // higher number = scroll link appears further down the page   
    var upperLimit = 150;

    // Our scroll link element
    var scrollElem = $('#totop');

    // Scroll to top speed
    var scrollSpeed = 500;

    // Show and hide the scroll to top link based on scroll position   
    scrollElem.hide();
    $(window).scroll(function () {            
        var scrollTop = $(document).scrollTop();       
        if ( scrollTop > upperLimit ) {
            $(scrollElem).stop().fadeTo(300, 1); // fade back in           
        }else{       
            $(scrollElem).stop().fadeTo(300, 0); // fade out
        }
    });
    // Scroll to top animation on click
    $(scrollElem).click(function(){
        $('html, body').animate({scrollTop:0}, scrollSpeed); return false;
    });
})(jQuery);

添加引用,修改 /themes/light/layout/_partial/after_footer.ejs,在末尾添加以下代码:

<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>

添加按钮图片,复制下图到 /themes/light/source/img 目录下,文件名为 scrollup.png 即可

6. 自定义代码块高亮和格式

hexo 已实现代码高亮,代码封装在 hexo-util 插件中,自带行号显示,如需自定义代码高亮,推荐使用 https://highlightjs.org/

highlightjs 是一个github上的开源代码高亮插件,支持大多数的语言,能自动识别语言,还可以随意切换不同的代码块样式。可在线加载 cdn 安装使用,也可以下载代码样式包在本地引用:

这里下载到本地安装使用,https://highlightjs.org/download/ 页面选择需要高亮的语言,下载压缩包解压:

将 highlight.pack.js 文件复制到 themes/light/source/js 目录下,style 目录下的 css 文件复制到 themes/light/source/css 目录下 (本站选用的是 androidstudio.css)。

在 themes/light/layout/_partial/head.ejs 文件,在末尾添加:

<link rel="stylesheet" href="<%- config.root %>css/androidstudio.css" media="screen" type="text/css">
<script src="<%- config.root %>js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

因为 CSS 权重原因,当权重一样时,会采用“层叠原则” 后定义的会被应用,防止其他 css 文件覆盖 highlightjs 的样式。
在 themes/light/source/css/_partial/article.styl 文件中找到:

code
  background #eee
  color #666
  padding 0 5px
  margin 0 2px
  font-size 0.9em
  border 1px solid color-border
  border-radius 3px

pre
  background #eee
  border 1px solid color-border
  margin-top 15px
  overflow auto
  padding 7px 15px 
  border-radius 2px
  code
    background none
    padding 0
    margin 0
    border none
    border-radius 0

// 使用 /* ... */ 注释上面的片段,或者修改为自己想要的样式即可。我改为了:

code
  font-size 0.9em

pre
  border 1px solid color-border
  margin-top 15px
  overflow auto
  border-radius 2px
  code
    margin 0
    border none
    border-radius 0

最后,在根目录 _config.yml 文件中找到:

# 将默认 highlight 禁用即可
highlight:
  enable: false

如需增加行号显示,参考 https://blog.csdn.net/melordljm/article/details/51991389

7. 背景图片和标题渐变效果

先记录背景图片,比较简单,将背景图片文件放入 light/source/img 目录中,在文件 light/source/css/_base/layout.styl 中 background color-background 后添加:

body
  background color-background
  background-image: url(/img/bg.jpg);
  background-attachment: fixed;   // scroll 随页面滚动(默认)
  background-position: 100% 100%;

  // Tips:添加到 background 属性之后,根据 CSS 层叠原则,假设图片加载失败或慢,则显示默认 background 颜色

标题渐变效果可通过自定义 css 实现,在 themes/light/source/css 目录中新建文件 mydefine.css 加入如下内容:

.site-title {
    color: #e2e2e2;
    font-family: Monaco, Menlo, Consolas, Courier New, monospace,sans-serif;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
    text-shadow: #258fb8 1px 1px 0, #258fb8 -1px 1px 0, #258fb8 1px -1px 0, #258fb8 -1px -1px 0;
}
#header a:hover{
    text-shadow: rgba(51, 51, 51, 0.7) 10px 10px 10px;
    transition: text-shadow 1s ease;
    -webkit-transition: text-shadow 1s ease;
    -moz-transition: text-shadow 1s ease;
    -o-transition: text-shadow 1s ease;
    -ms-transition: text-shadow 1s ease;
}

在文件 light/layout/_partial/head.ejs 中引入自定义的 css 文件:

<link rel="stylesheet" href="<%- config.root %>css/mydefine.css" media="screen" type="text/css">

在文件 light/source/css/_partial/header.styl 中删除或注释第5行:

#header
  text-shadow 0 0 1px #fff
  margin 50px auto
  a
    // color #999   // 注释或删除该行防止自定义的颜色被覆盖
    &:hover

最后在文件 light/layout/_partial/header.ejs 找到:

<h1><a href="<%- config.root %>"><%= config.title %></a></h1>

// 给标题 a 标签加上自定义的样式即可
<h1><a class="site-title" href="<%- config.root %>"><%= config.title %></a></h1>

8. 使用 Disqus 评论并添加加载评论按钮

了解了很多博客评论系统,基于稳定性和良好的后台管理原因,最终决定选用 Disqus,虽然墙内访客不能直接访问,却也有很多变通的办法,Light 主题自带 Disqus 评论,为了对博客网站的可控度更高,自己添加也非常简单。

Disqus 的注册流程这里不再赘述,网上搜索很多 Blog 说得很详细,注意选择 Universal Code(通用代码) ,主要介绍一下我在本站的做法以及使用加载评论按钮来避免拖慢墙内用户访问文章的速度。

在 light/layout/_widget 新建 disqus_comment.ejs 文件复制你从 Disqus 网站上复制的通用代码,以下是我对通用代码做了一些功能的改装,增加了加载按钮及鼠标移入移出显示提示文字。

<div style="text-align:center;">
    <button class="disbtn" id="load-disqus" onclick="disqus.load();" onmouseover="showtips();" onmouseout="hidetips();">说点什么</button></ br>
    <p id="distips">Tips:本站使用 Disqus 评论系统,国内访客请翻墙后点击加载哦。</p>
</div>
<div id="disqus_thread"></div>
<script>

    var disqus = {
        load: function disqus() {   //   对应 disqus.load() 方法

            /**
            *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
            *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

            var disqus_config = function () {
                this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
                this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
               // 注意将 PAGE_URL 和 PAGE_IDENTIFIER 替换为 Disqus 该网站管理 settings/general/ 页上的 Website URL 和 Shortname  
            };

            (function () { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://luckycoding.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
            })();

            $('#load-disqus').remove();  // 点击加载按钮后移除按钮
            $('#distips').remove();     // 点击加载后移除 Tips
        }     
    }
    // showtips hidetips 提供显示和隐藏 Tips 的功能
    function showtips(){
        var tips = document.getElementById("distips");
        tips.style.display="block";
    }
    function hidetips(){
        var tips = document.getElementById("distips");
        tips.style.display="none";
    }

</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
        Disqus.</a></noscript>

再给加载按钮和提示文本加入一些自定义样式,在 light/source/css/mydefine.css 追加:

 .disbtn {
    display: inline-block;
    padding: 0 20px;
    font-size: 14px;
    color: #1ba1e2;
    background: #fff;
    border: 2px solid #1ba1e2;
    text-decoration: none;
    border-radius: 0;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    line-height: 2;
    margin-bottom: 10px;
}

.disbtn:hover {
    border-color: #fff;
    color: #fff;
    background: #1ba1e2;
    margin-bottom: 10px;
}

#distips {
    font-size: 0.9em;
    margin-top: 10px;
    display: none;
}

该文件引用在本文 7. 背景图片和标题渐变效果 中新建和引用。

最后将 Disqus 评论放在分享之后,在 light/layout/_partial/article.ejs 中:

<!-- 找到  -->
<%- partial('post/category') %>
<%- partial('post/tag') %>
<%- partial('post/share') %>
<!-- 追加 -->
<%- partial('_widget/disqus_comment') %>

关于 Disqus 更多解决方案可参考 https://www.jianshu.com/p/9cc4cc8628c9

Tips:本站使用 Disqus 评论,被墙访客请科学上网后点击加载。