工具教程

Hexo 搭建详细教程(美化篇)

cnguu · 9月30日 · 2018年 ·

插件总览

名称简介
fancybox 3图片预览
FastClick消除点击延迟
jquery-lazyload图片懒加载
pace页面加载样式
canvas-nest动态背景
hexo-neat静态资源压缩

博文标签图标

文件 themes/next/layout/_macro/post.swig

<a href="{{ url_for(tag.path) }}" rel="tag">
    <i class="fa fa-fw fa-asterisk"></i>
    {{ tag.name }}
</a>

图片预览

下载

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

修改主题配置文件

fancybox: true

修改 fancybox 配置 fancybox/source/jquery.fancybox.pack.js

buttons : [
    'slideShow',
    'fullScreen',
    'thumbs',
    'close'
],

animationDuration : 300,

lang : 'zh-CN',
i18n : {
    'zh-CN' : {
        CLOSE : '关闭',
        NEXT : '下一张',
        PREV : '上一张',
        ERROR : '加载失败!<br/> 请稍后再试!',
        PLAY_START : '开始幻灯片',
        PLAY_STOP : '暂停幻灯片',
        FULL_SCREEN : '全屏',
        THUMBS : '缩略图',
        DOWNLOAD : '下载',
        SHARE : '分享',
        ZOOM : '缩放'
        }
    }
}

消除点击延迟

下载

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-fastclick source/lib/fastclick

修改主题配置文件

fastclick: true

图片懒加载

下载

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

修改主题配置文件

lazyload: true

页面加载样式

下载

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改主题配置文件

pace: true
pace_theme: pace-theme-bounce

修改颜色 themes/next/source/lib/pace/pace-theme-bounce.min.css,搜索 .pace .pace-activity

background: #39c5bb;

动态背景

下载

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改主题配置文件

canvas_nest: true

静态资源压缩

下载

$ npm install hexo-neat --save

修改站点配置文件

# 静态资源压缩
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'

自带 label 的使用

修改主题配置文件

# Label tag.
# {% label default@文字 %}
# {% label primary@文字 %}
# {% label success@文字 %}
# {% label info@文字 %}
# {% label warning@文字 %}
# {% label danger@文字 %}
label: true

动态彩色码字

修改主题配置文件

footer:
  custom_text: <span id="cnguu"></span>

# 动态彩色码字
coding: true

在目录 themes/next/source/js/src 下新建文件 coding.min.js

var cnguu=function(t){var e="",r=["在不知道该选哪一边时,就选自己应该做的那一边。","风执行"].map(function(t){return t+""}),n=2,l=1,i=5,g=75,a=["rgb(110,64,170)","rgb(150,61,179)","rgb(191,60,175)","rgb(228,65,157)","rgb(254,75,131)","rgb(255,94,99)","rgb(255,120,71)","rgb(251,150,51)","rgb(226,183,47)","rgb(198,214,60)","rgb(175,240,91)","rgb(127,246,88)","rgb(82,246,103)","rgb(48,239,130)","rgb(29,223,163)","rgb(26,199,194)","rgb(35,171,216)","rgb(54,140,225)","rgb(76,110,219)","rgb(96,84,200)"],o={text:"",prefixP:-i,skillI:0,skillP:0,direction:"forward",delay:n,step:l};!function d(){var b=r[o.skillI];o.step?o.step--:(o.step=l,o.prefixP<e.length?(o.prefixP>=0&&(o.text+=e[o.prefixP]),o.prefixP++):"forward"===o.direction?o.skillP<b.length?(o.text+=b[o.skillP],o.skillP++):o.delay?o.delay--:(o.direction="backward",o.delay=n):o.skillP>0?(o.text=o.text.slice(0,-1),o.skillP--):(o.skillI=(o.skillI+1)%r.length,o.direction="forward")),t.textContent=o.text,t.appendChild(function(t){for(var e=document.createDocumentFragment(),r=0;t>r;r++){var n=document.createElement("span");n.textContent=String.fromCharCode(94*Math.random()+33),n.style.color=a[Math.floor(Math.random()*a.length)],e.appendChild(n)}return e}(o.prefixP<e.length?Math.min(i,i+o.prefixP):Math.min(i,b.length-o.skillP))),setTimeout(d,g)}()};cnguu(document.getElementById("cnguu"));

修改文件 themes/next/layout/_layout.swig,在 </body> 前添加:

{% include '_third-party/coding.swig' %}

在目录 themes/next/layout/_third-party 下新建文件 coding.swig

{% if theme.coding %}
  <script src="{{ url_for(theme.js) }}/src/coding.min.js?v={{ version }}"></script>
{% endif %}

手动加载评论

前提是已经开启评论,以来必力为例子

修改文件themes/next/layout/_partials/comments.swig

{% elseif theme.livere_uid %}
  <div class="comments" id="comments">
    <div style="text-align:center;">
      <button class="btn" id="load-livere" onclick="livere.load();">加载评论</button>
    </div>
    <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
  </div>

修改文件 themes/next/layout/_third-party/comments/livere.swig

{% if not (theme.disqus.enable and theme.disqus.shortname) %}
  {% if page.comments and theme.livere_uid %}
    <script type="text/javascript">
      let livere = {
        load: function livere() {
          window.livereOptions = {
            refer: '{{ page.path }}'
          };
          (function(d, s) {
            var j, e = d.getElementsByTagName(s)[0];
            if (typeof LivereTower === 'function') { return; }
            j = d.createElement(s);
            j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
            j.async = true;
            e.parentNode.insertBefore(j, e);
          })(document, 'script');
          $('#load-livere').remove();
        }
      }
    </script>
  {% endif %}
{% endif %}

添加置顶功能

安装 hexo-generator-index-pin-top

$ npm install hexo-generator-index-pin-top --save

添加标志,修改文件 themes/next/layout/_macro/post.swig

<div class="post-meta">
  <!-- 开始 -->
  {% if post.top %}
    <i class="fa fa-thumb-tack" style="color: #39c5bb"></i>
    <font style="color: #39c5bb">置顶</font>
    <span class="post-meta-divider">|</span>
  {% endif %}
  <!-- 结束 -->
  <span class="post-time">

在需要置顶的博文 Front-matter 中加上 top: true 即可

代码块高级美化

page 暂时无法使用

添加文件 themes/next/source/css/_custom/codeblock.styl

.highlight, pre {
  margin: 38px 0 0 0;
}

.highlight-wrap[data-rel] {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 10px 30px 0px rgba(0,0,0,0.4);
  margin: 35px 0;
  ::-webkit-scrollbar {
    height: 10px;
  }
  
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }
  &::before {
    color: white;
    content: attr(data-rel);
    height: 38px;
    line-height: 38px;
    background: #21252b;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    padding: 0px 80px;
    text-indent: 15px;
    float: left;
  }
  &::after {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    top: 0;
    left: 20px;
    margin-top: 13px;
    -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    z-index: 3;
  }
}

修改 themes/next/source/css/_custom/custom.styl

// 添加代码块样式
@import "codeblock";

添加文件 themes/next/scripts/codeblock.js

var attributes = [
  'autocomplete="off"',
  'autocorrect="off"',
  'autocapitalize="off"',
  'spellcheck="false"',
  'contenteditable="true"'
]

var attributesStr = attributes.join(' ')

hexo.extend.filter.register('after_post_render', function (data) {
  while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) {
    data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function () {
      var language = RegExp.$1 || 'plain'
      var lastMatch = RegExp.lastMatch
      lastMatch = lastMatch.replace(/<figure class="highlight /, '<figure class="iseeu highlight /')
      return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase() + '">' + lastMatch + '</div>'
    })
  }
  return data
})
0 条回应