Hexo+Next美化步骤

发表于 更新于 本文字数： 3.9k 阅读时长 ≈ 4 分钟

切换中文

  • hexo/_config.yml中language改为zh-CN,注意主题版本

添加心形箭头

  • 具体步骤如下：
    在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：
    1
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  • 在\themes\next\layout_layout.swig文件末尾添加：
    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/clicklove.js"></script>

文章结束标志

  • 在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：
    1
    2
    3
    4
    5
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
        {% endif %}
    </div>
    接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：
    1
    2
    3
    4
    5
    <div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>
    然后打开主题配置文件（_config.yml),在末尾添加：
    1
    2
    3
    # 文章末尾添加“本文结束”标记,此项在7.5版本验证失效
    passage_end_tag:
      enabled: true

添加字数,阅读时间

  • 安装hexo-symbols-count-time
    1
    $ npm install hexo-symbols-count-time --save
    如果安装完报如下提醒，还需安装eslint
    1
    2
    D:\hexo\blog>npm install hexo-symbols-count-time --save
    npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
  • 安装eslint
    1
    $ npm install eslint --save
    在站点配置文件添加如下配置
    1
    2
    3
    4
    5
    6
    symbols_count_time:
      symbols: true                # 文章字数统计
      time: true                   # 文章阅读时长
      total_symbols: true          # 站点总字数统计
      total_time: true             # 站点总阅读时长
      exclude_codeblock: false     # 排除代码字数统计
    在NexT主题配置文件添加如下配置（NexT主题已支持该插件，有的话无需再添加）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
      item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
      item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
      awl: 4                   # Average Word Length
      wpm: 275                 # Words Per Minute（每分钟阅读词数）
      suffix: mins.

首页只显示预览

  • 修改themes/next-reload/_config.yml中
    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommand.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: false
      length: 150

禁用页底hexo有关的信息

  • 打开主题的配置文件_config.yml
    footer下关闭powered下enable和theme的enable