hexo博客搭建过程(二)

开启字数统计hexo-wordcount

hexo-wordcount

安装hexo-wordcount插件

npm install hexo-wordcount --save

修改主题配置文件

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

修改yoursite/themes/next/layout/_macro/post.swig文件(重点在13行和30行)

{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
  
{% if theme.post_wordcount.wordcount %} {% if theme.post_wordcount.item_text %} {% endif %} {{ wordcount(post.content) }} {% endif %} {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %} {% endif %} {% if theme.post_wordcount.min2read %} {% if theme.post_wordcount.item_text %} {% endif %} {{ min2read(post.content) }} {% endif %}
{% endif %}

文章末尾统一添加“本文结束”标记

新建article-end-tag.swig文件

在路径yoursite/themes/next/layout/_macro中添加article-end-tag.swig文件,其内容为:

{% if not is_index %}
本文完,如果您觉得本博客对您有帮助,请持续关注,谢谢!
{% endif %}

修改post.swig文件

yoursite/themes/next/layout/_macro/post.swig中,在post-body之后添加如下代码:

{% if not is_index %} {% include 'article-end-tag.swig' %} {% endif %}

主题配置文件中添加字段

主题配置文件中添加以下字段开启此功能:

article_end_tag:
  enable: true

完成以上设置之后,在每篇文章之后都会添加“本文结束”标记。

设置点击出现心心效果

love.js

把js文件love.js放在yoursite/themes/next/source/js/src下,更新yoursite/themes/next/layout/_layout.swig文件,在末尾添加以下代码(如果存在就不必添加了):

{% include '_custom/special_effects.swig' %}

yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码:

{% if theme.special_effects.love %}
  
{% endif %}

最后在主题配置文件任意位置添加如下代码即可:

special_effects:
  love: true

添加背景音乐(方法1,已经弃用)

yoursite/themes/next/source/js/src下新建backgroundmusic.js文件,内容如下:

$(function() {
  var player = $('#background-audio')[0];
  $('.site-nav .menu .menu-item.menu-item-backgroundmusic a').click(function() {
    if (player.paused) {
      player.play();
      $(this).html('
暂停'); } else { player.pause(); $(this).html('
播放'); } }); })

更新yoursite/themes/next/layout/_layout.swig文件,在末尾添加以下代码(如果存在就不必添加了):

{% include '_custom/special_effects.swig' %}

yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码:

{% if theme.menu.backgroundmusic %}
  
  
{% endif %}

修改主题配置文件(部分其他内容省略)

menu:
  backgroundmusic: javascript:;
menu_icons:
  backgroundmusic: play-circle

最后在主题配置文件任意位置添加如下代码即可:

special_effects:
  backgroundmusic: 
    - mp3地址1(本地和互联网资源都行)
    - mp3地址2(本地和互联网资源都行)

添加背景音乐(方法2,有点复杂)

首先先给出依赖吧,这里主要用到了两个模块:

artDialog 用来进行弹出窗口

Amazing Audio Player 音乐播放器

yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码:

{% if theme.menu.backgroundmusic %}
  
  
  
  
  
{% endif %}

最后在主题配置文件任意位置添加如下代码即可:(其中title是音乐名称,image是音乐海报地址,src是音乐地址)

special_effects:
  backgroundmusic: 
    - title: 华胥一梦
      image: /js/src/player/music/华胥一梦.jpg
      src: /js/src/player/music/阿鲲-华胥一梦.mp3
    - title: 天下第一
      image: /js/src/player/music/天下第一.jpg
      src: /js/src/player/music/麦振鸿,罗坚 - 天下第一.mp3
    - title: 雪见—仙凡之旅
      image: /js/src/player/music/雪见—仙凡之旅.png
      src: /js/src/player/music/麦振鸿 - 雪见—仙凡之旅.mp3

大家可以研究下initplayer.js文件,详细的实现过程就不叙述了。
播放器通过上面的音乐图标可以唤出。

开启代码隐藏功能

yoursite/themes/next/source/js/src下新建collapse-code.js文件,内容如下:

$(function() {
  var index = 0;
  $('figure').each(function() {
    var children = $(this).find('table tbody tr td.code div');
    if (children.length > line_limit) {
      index++;
      var collapse_item = $('
收起
'); $(this).prepend(collapse_item); var table = $(this).find('table'); var div = $('
'); table.remove(); div.append(table); $(this).append(div); $(this).find('h6').click(function() { if (div.is(':hidden')) { collapse_item.find('i').removeClass('close'); collapse_item.find('span.collapse-label').html('收起'); } else { collapse_item.find('i').addClass('close'); collapse_item.find('span.collapse-label').html('展开'); } var slide_time = children.length * 20; if (slide_time < 200) slide_time = 200; else if (slide_time > 2000) slide_time = 2000; div.slideToggle(); }); } }); })

更新yoursite/themes/next/layout/_layout.swig文件,在末尾添加以下代码(如果存在就不必添加了):

{% include '_custom/special_effects.swig' %}

yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码:

{% if theme.special_effects.collapse_code !== undefined %}
  
  
{% endif %}

接下来还需要修改yoursite/themes/next/source/css/_custom/custom.styl文件

figure>h6 {
  margin: 0;
  padding: 8px!important;
  cursor: pointer;
}
figure>h6>i {
  margin-left: 30px;
  margin-right: 10px;
  transition: all 0.4s ease;
}
figure>h6>i.close {
  transform: rotate(180deg);
  color: #b63b4d;
}

修改主题配置文件,在任意位置下添加下列代码,数字表示超过多少行开启折叠功能。

special_effects:
  collapse_code: 10

你可能感兴趣的:(hexo博客搭建过程(二))