Hexo博客主题从Jacman切换到NexT.Mist

序言

难得一个周末,经过五天的工作之后,本来是打算周六周日在睡觉中度过,因为最近工作确实挺累,倒不是工作有多繁忙,而是路途遥远,每天上下班路上花费三个小时,特别是早高峰挤地铁,那真是个体力活啊,每天都是七号线静安寺转二号线,换乘之前,并不能太深入地铁车厢内部,否则到了换乘站你可能根本就挤不下车去了。

最近博客流量有渐增趋势,可能是之前未被百度收录,而近期被百度收录的缘故吧,可见我天朝还是百度的天下,哎,万恶的墙啊(Great Firewall of China)!流量渐增,访客自然增加,所以也会有猎头加我微信,我也在考虑要不要把我的个人信息撤掉,貌似泄露的有点多了。同时也会有一些人因为博客的内容加我,请教谈不上,可能是一些同学在做相同的事情的过程中遇到了一些问题,而我可能刚好做过这方面的事情而已,希望有事的同学或朋友直接电联我即可,因为这是我认为最节约我们双方时间的沟通方式,确实没有太多时间去和你在微信上慢慢切磋。

貌似也有段时间没有发文了,主要是希望以后可以进一步提高博文质量,尽量发表一些互联网上还不存在或者没有解决方案类的文章,这样不至于人云亦云,还可以给别人提供比较多的参考价值,至于互联网上已经泛滥成灾的一些信息,以后在博文中尽量不再予以提供,不做重复发明轮子的工作。

扯远了,本来是打算睡觉度周末来着,但是博客的Jacman主题越看越觉得不顺眼,始终觉得有一种too youngtoo simplesometimes naive的感觉。而我素来想要一个简洁的主题,终于发现NexT.Mist主题足够优雅、足够简洁、是我喜爱的风格,于是果断手贱,开始折腾起来,还好在有以前折腾的基础之上,再次折腾就比较简单了,好多东西已经驾熟就轻了,本着能省力就省力的原则,很快更改完毕,主要还有一些细节在调整中。

说一点最近有待提高的地方就是对时间的把控,每天都有大把的时间花费在了各种软文之中,越来越觉得实在是一种浪费。自从微信火了之后,相信大家越来越觉得时间不够用了,到处都是软文,到处都是鸡汤,到处都是某人生活中的苦难,我不是说苦难不好,也不是说你的苦难不应该公之于众,而是在这个社会,苦难太多,我们不能靠着每天去消费苦难而存活,你有时间把你的苦难公之于众供大家消费,倒不如去干点活来的实在,这就是我的观点,也是我本人行动的格言,所以在这个大家即将毕业的季节,同学们旅游的旅游,回家的回家,玩的玩,泡妞的泡妞,憋在宿舍整天打游戏的也大有人在,而我还是整天苦逼哈哈,一天不拉的跑去公司上班,赶着来回三个多小时的地铁,每天挤得像狗一样累的半死,不为别的,只因为我知道,我不努力没人替我努力,而且还有那么好的媳妇在等着我去给她幸福呢。

所以我还是那句话,人生的竞赛没有公平可言,但是只要起步了,就只顾风雨兼程。在不忘记享受沿途风景的时候,大家也要记得赶路哦。

最后把我本次更改主题参考的文章放在末尾,有需要的自行点击,不谢。

NexT.Mist主题相关

本次更改主题主要参考如下内容

  • NexT官方指南
  • 在博文标题下面添加文章热度方法参考这里
  • 在站点概览中添加友链参考这里
  • 设置社交链接,参考这里
  • 需要添加音乐播放器High一下小玩意参考这里
  • 有关Hexo更详细的配置参考这里
  • Hexo更改默认Google字体库,参考这里
  • 利用Git解决Hexo博客多PC间同步问题,参考这里
  • 关于多说评论框的美化以及评论用户的操作系统和浏览器型号,参考这里
  • 使用多说给博客添加最近访客功能,参考这里
  • 给博客创建留言页面,参考这里
  • 开启打赏功能,参考这里
  • 多说评论显示UA,即用户操作系统和浏览器版本参考这里
  • Favicon设置后没有生效?将你的favicon放置到站点source目录下,如我的站点D:\hexo\themes\next\source\favicon.ico,并在D:\hexo\themes\next\_config.yml中启用favicon: /favicon.ico即可
  • 如何添加非默认菜单的Menu icon呢?例如我的菜单中加入了简历和友链,但是并不知道这两者对应的图标是什么,很简单,点击Awesome Icons 去挑选你自己喜爱的图标即可,然后去掉图标名称前面的icon-,只利用后面的名字即可,例如我的配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu_icons:
    enable: true
    # Icon Mapping.
    home: home
    about: user
    categories: th
    tags: tags
    archives: archive
    commonweal: heartbeat
    links: link
    resume: book
  • 修改侧边栏头像下面的字体及颜色参考这里,修改的文件具体位置是在D:\hexo\themes\next\source\css\_common\components\sidebar\sidebar-author.styl中的font-size,将其调大即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .site-description {
    margin-top: 5px;
    font-size: 16px;
    color: $site-author-name-color;
    /*
    font-size: $site-description-font-size;
    color: $site-description-color;
    */
    }
  • 修改代码块中字体大小,主题默认的代码块字体偏小,找到D:\hexo\themes\next\source\css\_common\components\highlight\highlight.styl,修改font-size属性即可

    1
    2
    3
    4
    5
    6
    7
    8
    $code-block
    background: highlight-background
    margin: 20px 0
    padding: 15px
    overflow: auto
    font-size 15px
    color: highlight-foreground
    line-height: $line-height-code-block
  • 为博客添加搜索框,进入swiftype,点击自己的Engine->Install Search->Search Field后的edit,选择Element ID,填#st-search-input之后选Save,继续跳转后点Activate Swiftype按钮即可完成swiftype的所有配置了。拷贝你的EngineInstall Search中得到的代码如下

    1
    2
    3
    4
    5
    6
    (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
    (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
    e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
    })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
    _st('install','这里是KEY','2.0.0');

    然后在Next.Mist主题下的_config.xml中启用即可如下:swiftype_key: 这里是KEY

  • 把侧边栏头像变成圆形,并且鼠标停留在上面发生旋转效果,参考这里,具体修改文件的位置是D:\hexo\themes\next\source\css\_common\components\sidebar\sidebar-author.styl中的内容如下

    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
    .site-author-image {
    display: block;
    margin: 0 auto;
    max-width: 96px;
    height: auto;
    border: 2px solid #333;
    padding: 2px;
    /* start*/
    border-radius: 50%
    webkit-transition: 1.4s all;
    moz-transition: 1.4s all;
    ms-transition: 1.4s all;
    transition: 1.4s all;
    /* end */
    }
    /* start */
    .site-author-image:hover {
    background-color: #55DAE1;
    webkit-transform: rotate(360deg) scale(1.1);
    moz-transform: rotate(360deg) scale(1.1);
    ms-transform: rotate(360deg) scale(1.1);
    transform: rotate(360deg) scale(1.1);
    }
    /* end */
  • 添加右上角Fork me on GitHub,将如下代码添加到D:\hexo\themes\next\layout\_layout.swig底部的body标签之内即可,注意修改href为你自己的链接

    1
    2
    3
    4
    5
    <a href="https://github.com/shijiebei2009">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
    alt="Fork me on GitHub"
    data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
    </a>
  • mathjax数学公式后面有竖线的问题(在chrome中显示有竖线,在猎豹、Firefox中显示正常)
    这个问题已经发了Issue,可以参考官方提供的解决方案。首先,编辑next的主题配置文件_config.yml,在里面找到mathjax的部分,替换为以下内容:

    1
    2
    3
    mathjax:
    enable: true
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

    打开\themes\next\layout\_scripts\third-party\mathjax.swig,将其内容替换为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    {% if theme.mathjax.enable %}
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
    });
    </script>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for (i=0; i < all.length; i += 1) {
    all[i].SourceElement().parentNode.className += ' has-jax';
    }
    });
    </script>
    <script type="text/javascript" src="{{ theme.mathjax.cdn }}"></script>
    {% endif %}

    之后清理,重新发布即可去除数学公式后面的竖线。

  • 为Next主题添加版权信息
    对于Hexo Next主题而言先找到/themes/next/layout/_macro/post.swig,再找到其中的打赏部分代码,如下所示

    1
    2
    3
    4
    5
    <div>
    {% if ! is_index %}
    {% include 'reward.swig' %}
    {% endif %}
    </div>

    然后直接在其上面添加如下代码段:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div align="center">
    {% if not is_index %}
    <div class="copyright">
    <p><span>
    <b>本文地址:</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>转载请注明出处,谢谢!</b>
    </span></p>
    </div>
    {% endif %}
    </div>
  • 为Next博客添加广告位
    如果你的博客访问量比较大的话,添加一个广告位也未尝不可,若有收入则可以用来抵扣域名续费或者服务器的费用,首先找到D:/hexo/themes/next/layout/_macro下的post.swig文件,在该文件中找到你认为合适放广告的位置添加如下代码

    1
    2
    3
    4
    5
    6
    <!-- 添加广告位 -->
    <div>
    {% if ! is_index %}
    {% include 'advertisement.swig' %}
    {% endif %}
    </div>

    该段代码会引入存有广告代码的文件,新建advertisement.swig文件,将你的广告代码置于其中即可。

  • 为Next博客添加访客统计
    使用不蒜子网页计数器,统计代码非常简单,参考这里

  • 为Next博客添加Font Awesome图标
    不知道你有没有注意到我的网站底部的那个小人和眼睛呢?其实这是Font Awesome图标,只需要结合不蒜子网页计数器即可实现,非常简单,直接贴出代码,这段代码在D:/hexo/themes/next/layout/_partials/footer.swig中,只需要将你需要的部分添加到你的模板对应文件中即可,如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="theme-info">
    {{ __('footer.theme') }} -
    <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
    </a>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span id="busuanzi_container_site_pv">
    <i class="fa fa-user" aria-hidden="true"></i>
    <span id="busuanzi_value_site_pv"></span>
    </span>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span id="busuanzi_container_site_uv">
    <i class="fa fa-eye" aria-hidden="true"></i>
    <span id="busuanzi_value_site_uv"></span>
    </span>
    </div>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  • 修改首页、归档页、分类页、Tag页显示文章数量
    默认地首页归档页仅显示10篇文章,然后要不断向后翻页,用起来非常不爽,经本人测试,设置数量在20篇比较合适,这个可以由hexo的D:/hexo/_config.yml来控制,修改如下

    1
    2
    per_page: 20
    pagination_dir: page
  • 修改文章底部的前一篇、下一篇为两端对齐
    在Next主题的5.0.0版本中,下一篇默认为靠右对齐,看起来非常丑陋,因为前一篇已经设置为靠右对齐了,对称地,这时候,下一篇应该设置为靠左对齐才对。修改D:/hexo/themes/next/source/css/_common/components/post/post-nav.styl文件,拉到末尾,设置如下:

    1
    2
    .post-nav-next { text-align: left; }
    .post-nav-prev { text-align: right; }

    这样看起来就非常对称啦。

坚持原创技术分享,您的支持将鼓励我继续创作!