hexo博客搭建过程(二)

作者: 九命丿相柳 | 来源:发表于2017-07-23 18:23 被阅读0次

Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源
hexo博客搭建过程(二)
Hexo博客搭建全攻略(六):博文图片处理
在Coding上搭建Hexo博客
Mac上搭建基于GitHub的Hexo博客
hexo博客搭建过程
Ubuntu 18.04 LTS 配置 Hexo
Hexo+github搭建个人博客－博客发布篇
HEXO搭建个人博客基础——建站发布
使用Hexo搭建博客（二），搭建博客的过程

开启字数统计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 %}
  <div class="post-wordcount">
    {% if theme.post_wordcount.wordcount %}
      <span class="post-meta-item-icon">
        <i class="fa fa-file-word-o"></i>
      </span>
      {% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text">{{ __('post.wordcount') }}</span>
      {% endif %}
      <span title="{{ __('post.wordcount') }}">
        {{ wordcount(post.content) }}
      </span>
      <span class="post-meta-item-text">字</span>
    {% endif %}
    {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
      <span class="post-meta-divider">|</span>
    {% endif %}
    {% if theme.post_wordcount.min2read %}
      <span class="post-meta-item-icon">
        <i class="fa fa-clock-o"></i>
      </span>
      {% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text">{{ __('post.min2read') }}</span>
      {% endif %}
      <span title="{{ __('post.min2read') }}">
        {{ min2read(post.content) }}
      </span>
      <span class="post-meta-item-text">分钟</span>
    {% endif %}
  </div>
{% endif %}

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

新建`article-end-tag.swig`文件

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

<div>
  {% if not is_index %}
    <blockquote class="blockquote-center">本文完，如果您觉得本博客对您有帮助，请持续关注，谢谢！</blockquote>
  {% endif %}
</div>

修改`post.swig`文件

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

<div>
  {% if not is_index %}
    {% include 'article-end-tag.swig' %}
  {% endif %}
</div>

在主题配置文件中添加字段

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

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 %}
  <script type="text/javascript" src="/js/src/love.min.js"></script>
{% 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('<i class="menu-item-icon fa fa-fw fa-pause"></i><br>暂停');
    } else {
      player.pause();
      $(this).html('<i class="menu-item-icon fa fa-fw fa-play-circle"></i><br>播放');
    }
  });
})

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

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

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

{% if theme.menu.backgroundmusic %}
  <script type="text/javascript" src="/js/src/backgroundmusic.js"></script>
  <audio id="background-audio" hidden="hidden" loop="loop">
  {% for music_url in theme.special_effects.backgroundmusic %}
    <source src="{{ music_url }}" type="audio/mpeg">
  {% endfor %}
  </audio>
{% 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 %}
  <script type="text/javascript">    
    var playerHtml = '\
      <div class="demo-slider" id="player">\
      <link rel="stylesheet" type="text/css" media="all" href="/js/src/player/initaudioplayer.css">\
      <div id="amazingaudioplayer-8" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">\
      <ul class="amazingaudioplayer-audios" style="display:none;">\
    '
    
    {% for item in theme.special_effects.backgroundmusic %}
      playerHtml += '\
        <li data-title="{{ item.title }}" data-image="{{ item.image }}">\
          <div class="amazingaudioplayer-source" data-src="{{ item.src }}" data-type="audio/mpeg"></div>\
        </li>\
      '
    {% endfor %}
    playerHtml += '\
      </ul>\
      </div>\
      </div>\
    '
  </script>
  <script type="text/javascript" src="/js/src/player/dialog-plus.js"></script>
  <script type="text/javascript" src="/js/src/player/jquery.js"></script>
  <script type="text/javascript" src="/js/src/player/amazingaudioplayer.js"></script>
  <script type="text/javascript" src="/js/src/player/initplayer.js"></script>
{% 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 = $('<h6><i class="fa fa-chevron-up"></i><span class="collapse-label">收起</span></h6>');
      $(this).prepend(collapse_item);
      var table = $(this).find('table');
      var div = $('<div></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 %}
  <script type="text/javascript">var line_limit = {{ theme.special_effects.collapse_code }}</script>
  <script type="text/javascript" src="/js/src/collapse-code.js"></script>
{% 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+GitHub 搭建个人博客（二）：更改博客主题、上传源
Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源代码本文简单介绍Hexo+GitHub 搭建博客...
hexo博客搭建过程(二)
开启字数统计hexo-wordcount hexo-wordcount 安装hexo-wordcount插件修改...
Hexo博客搭建全攻略(六):博文图片处理
Hexo博客搭建全攻略系列文章: Hexo博客搭建全攻略(一):基于Hexo+Github环境搭建 Hexo博客搭...
在Coding上搭建Hexo博客
title: 在Coding上搭建Hexo博客 tags: hexo 参考文章使用hexo搭建博客Pacman主...
Mac上搭建基于GitHub的Hexo博客
01 Mac上搭建基于GitHub的Hexo博客 HexoMac上搭建基于GitHub的Hexo博客 hexo插件...
hexo博客搭建过程
最近搞了一个线上文档，参考了vuejs.orgvue中文网站的风格，才知道他们用hexo搭建的，之前我用Jekyl...
Ubuntu 18.04 LTS 配置 Hexo
GitHub Pages + Hexo 搭建博客可参考 GitHub Pages + Hexo 搭建博客 1. 环...
Hexo+github搭建个人博客－博客发布篇
通过 Hexo+github搭建个人博客－环境搭建篇以及 Hexo+github搭建个人博客－博客初始化篇 ...
HEXO搭建个人博客基础——建站发布
HEXO搭建个人博客基础——建站发布一、 HEXO 使用环境基础 HEXO博客搭建环境必须包括 NodeJS 与...
使用Hexo搭建博客（二），搭建博客的过程
一、使用Hexo搭建博客的构架看了第一篇一点想法后，如果你有兴趣利用Hexo搭建自己的博客，那么这一篇可能对你有...

hexo博客搭建过程(二)

开启字数统计hexo-wordcount

安装hexo-wordcount插件

修改<span class="inline-span purple">主题配置文件</span>

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

新建`article-end-tag.swig`文件

修改`post.swig`文件

在<span class="inline-span purple">主题配置文件</span>中添加字段

设置点击出现心心效果

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

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

开启代码隐藏功能

相关文章

Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源