Hexo+Next+GitHub博客搭建超详细教程--美化篇（2)

一、添加背景音乐

注：本教程是以 NexT 主题的 Gemini 方案为例，修改后不再适用其他方案，若还有修改主题方案的需求请不要按本教程设置。

1. 创建网易云歌单

注册网易云账号并登陆，点击上方我的音乐，创建的歌单右侧新建，输入歌单名等信息，创建成功后打开歌单，地址栏为 https://music.163.com/#/my/m/music/playlist?id=5062858339 ，其中 id 后面的就是歌单号，复制下来后面会用到。之后向歌单中添加音乐博客上也可以同步更新，但是有一定的延时。

当然也可以使用别人的歌单，找到自己喜欢的歌单复制地址中的歌单号即可。

2. 嵌入网页

在主题配置文件中添加

# background music
music:
  enable: true
  Aplayer: true
  iframe: false
  list_id: '5062858339'
  auto_play: false

其中 Aplayer 和 iframe 是添加背景音乐的两种方式，值为 true 表示启用这种方式， liet_id 是网易云的歌单号， auto_play 是是否自动播放。我这里启用Aplayer，并且不自动播放，你可以选择自己喜欢的样式。

在 ./themes/next/layout/_macro/sidebar.swig 中 {if theme.sierbar.b2t} 前面添加以下内容

<!--背景音乐-->
{%if theme.music.enable %}
  <br/>
  {% if theme.music.iframe %}
    <div class="music1" >
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=350 src="//music.163.com/outchain/player?type=0&id={{ theme.music.list_id }}&auto={% if theme.music.auto_play %}1{% else %}0{% endif %}&height=330"></iframe>
    </div>
  {% endif %}
  {% if theme.music.Aplayer %}
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <!-- require MetingJS-->
    <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
    <div class="music2">
      <div class="aplayer"
        data-id="{{ theme.music.list_id }}"
        data-server="netease"
        data-type="playlist"
        data-fixed="false"
        data-autoplay="{{ theme.music.auto_play }}"
        data-list-folded="true"
        data-loop="all"
        data-mutex="true"
        data-order="list"
        data-volume="0.2"
        data-theme="#FADFA3"
        date-preload="auto">
      </div>
    </div>
  {% endif %}
{% endif %}

其中Aplayer的一些参数介绍如下。

选项	默认值	功能描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
autoplay	`false`	自动播放
theme	`#2980b9`	播放器风格色彩设置
order	`list`	列表播放模式： `list`, `random`
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
volume	`0.7`	播放器音量
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
list-folded	`false`	歌词格式类型

在 ./themes/next/source/css/_schemes/Gemini/index.styl 的末尾添加

.music1 {
  width: 260px;
  transform: translate(-7.7%, 0%);
}

.music2 {
  width: 238px;
  transform: translate(-4%, 0%);
}

添加这个的原因是两个音乐标签都比较宽，而侧边栏比较窄，如果按照默认的方式，会改变标签的布局来适应侧边栏的宽度，导致一些按钮位置重叠。这里是强行加宽并向左移动至侧边栏中央。

两种方式的区别：

iframe图片显示的是歌单的封面图，名字显示的是歌单名；可以拖动播放进度条；歌单列表默认开启，收回后侧边栏大小不随之改变。
Aplayer图片是歌曲海报，名字是歌曲名，有歌词；不可以拖动进度条（原本可以，这里由于侧边栏太窄牺牲了进度条，可以看到时间左边的小点就是原来的进度条，但是太小以至于无法使用）；歌单列表默认关闭，打开后侧边栏随之边长，关闭随之变短。

3. 效果展示

注：这里为了展示两种方法都开启了，实际使用过程只需开启一个即可

二、鼠标点击特效

将以下文件放在 ./themes/next/source/js/src 文件夹下。

烟花效果心形文字爆炸

(打开后按 Ctrl+S 可以保存到本地)

其中文字内容可以自定义，博主在网上其他教程的基础上加入了颜色随机变化。

如果某个效果自己不需要也可以不下载

在主题配置文件中添加

# Click effect
click_effect:
  enable: false
  clicklove: false
  fireworks: false
  text: false
  explosion: false

四个效果可以选择其一或者多个开启

在 ./themes/next/layout/_layout.swug 中 </body> 前添加

<!-- 鼠标点击效果 -->
{% if theme.click_effect.enable %}
  <!-- 小红心 -->
  {% if theme.click_effect.clicklove %}
    <script type="text/javascript" src="/js/src/clicklove.js"></script>
  {% endif %}
  <!-- 烟花 -->
  {% if theme.click_effect.fireworks %}
    <script type="text/javascript" src="/js/src/firework.js"></script>
  {% endif %}
  <!-- 文字 -->
  {% if theme.click_effect.text %}
    <script async src="/js/src/text.js"></script>
  {% endif %}
  <!-- 爆炸 -->
  {% if theme.click_effect.explosion %}
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script type="text/javascript" src="/js/src/explosion.js"></script>
  {% endif %}
{% endif %}

三、文章底部优化

1. 添加文章结束标志

在 ./themes/next/layout/_macro 文件夹中新建 passage-end-tag.swig 文件，将以下内容填入

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-heartbeat"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

修改 ./themes/next/layout/_macro/post.swig，查找

1
2
3

{#####################}
{### END POST BODY ###}
{#####################}

在后面添加以下代码：

{# end-tag #}
{% if theme.end_tag.enable and not is_index %}
  <div>
    {% include 'passage-end-tag.swig' %}
  </div>
{% endif %}

在主题配置文件中添加以下内容

1
2
3

# passage_end_tag
end_tag:
  enable: true

效果如下：

2. 添加版权信息

在 ./themes/next/layout/_macro/ 文件夹内新建 my-copyright.swig 文件，将以下内容填入

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-copy" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><!--<span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a>--> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-copy');
    $(".fa-copy").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>
{% endif %}

在 ./themes/next/source/css/_common/post/ 文件夹下新建文件 my-post-copyright.styl ，填入以下内容

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改 ./themes/next/layout/_macro/post.swig，在刚才添加文章结束标志的后面添加以下代码：

{# copyright #}
{% if theme.my_copyright.enable and not is_index %}
  <div>
    {% include 'my-copyright.swig' %}
  </div>
{% endif %}

打开 ./themes/next/source/css/_common/components/post/post.styl ，在最后一行增加代码：

1	@import "my-post-copyright"

在主题配置文件中添加以下内容

1
2
3

# my-copyright
my_copyright:
  enable: true

效果如下：

如果得到的 “原始链接” 像我一样是 http://yoursite.com 开头，那你就要修改站点配置文件中 url 字段为你自己的博客地址。

3. 标签添加图标

在文件 ./themes/next/layout/_macro/post.swig 中，搜索 rel="tag"># ，将 # 换成 <i class="fa fa-tag"></i> 。

效果如下：

参考内容：

hexo的next主题个性化配置教程

Hexo + Next 主题实现全局播放背景音乐