0%

Hexo+Next美化步骤

切换中文

  • 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