Henry's Blog

Fantastic features of Hexo&Next

建站之路约 4 分钟
#Hexo#Blog

生命不息，折腾不止。站点建成之后，怎能不优化一番，让其更加好看酷炫呢！

将一些好玩的博客优化内容及方法整理如下：

ToDoList:

  • 显示文章摘要
  • 增加阅读统计
  • 底部访问人数
  • 音乐播放（悬浮H5播放器+Aplayer）
  • 站点地图
  • 相册
  • Valine评论
  • 留言板

Done:

显示文章摘要

首页文章只显示摘要，即出现阅读全文的样式。

设置摘要

增加阅读统计

最终效果：

阅读次数

方法：

1.注册https://leancloud.cn账号，获取AppID and AppKey.

2.在主题配置文件\next\_config.yml中修改leancloud配置

leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>

底部访问人数

最终效果：

访问人数

方法：

直接在配置文件\next\_config.yml中开启不蒜子插件就可以了，不需要注册，非常方便。

注册使用百度统计的话，可以在后台看网站访问量，但是在页面底部是不会显示的。

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

添加背景音乐

本打算直接用网易云和虾米音乐的外链的，但是按照一些教程配置之后，效果非常不好！一通搜索之后，选定两个播放器作为音乐插件来使用。

悬浮播放器Qplayer（全局）

效果非常赞，看博客左侧的小插件就知道咯~

全称是：jQuery悬浮HTML5音乐播放器插件QPlayer

播放器的配置方法可参考：http://saili.science/2017/04/02/github-for-win/#h5palyer

多首歌曲的配置方法：

文件：~/hexo/themes/next/_config.yml
audio:
  enable: true
  sources: [
  { title: '爱是昂贵的',
    artist: '声音玩具',
    mp3: 'http://m2.music.126.net/66i9ySu3BLIQ8_fwK9yvVQ==/7963762720382833.mp3',
    cover: 'http://img.xiami.net/images/album/img29/3029/16250159661472438031.jpg' 
  },
  { title: '爱是昂贵的2',
    artist: '声音玩具2',
    mp3: 'http://m2.music.126.net/66i9ySu3BLIQ8_fwK9yvVQ==/7963762720382833.mp3',
    cover: 'http://img.xiami.net/images/album/img29/3029/16250159661472438031.jpg' 
  },
  ]

外链转换或MP3下载可使用 HHT 和 170mv , 下载后可以将mp3上传至腾讯云cos，然后作为外链使用，无非耗一点流量。

Aplayer（页面）

Aplayer是一个通用的音乐播放器，hexo已有对应的插件，下载使用即可。

第一步安装：

npm install --save hexo-tag-aplayer

第二步在blog的Markdown直接插入：

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

例子：
{% aplayer "人生马拉松" "陈奕迅" "https://picsforblog-1256749273.cos.ap-shanghai.myqcloud.com/music%2F%E4%BA%BA%E7%94%9F%E9%A9%AC%E6%8B%89%E6%9D%BE.mp3" "https://picsforblog-1256749273.cos.ap-shanghai.myqcloud.com/music%2F%E4%BA%BA%E7%94%9F%E9%A9%AC%E6%8B%89%E6%9D%BE%E4%B8%93%E8%BE%91%E5%B0%81%E9%9D%A2.jpg" %}

另外，Aplayer衍生出的MeingJS 不需要外链，可以直接支持QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放 。具体使用方法可参看说明文档。现搬运如下：

在 Hexo 配置文件 _config.yml 中设置：

aplayer:
  meting: true

接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了：

<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关 {% meting %} 的选项列表如下:

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置