音乐播放组件

  这两天加了一个音乐播放的组件，同时对部分功能进行了优化。

页面切换过度

  对页面的切换进行了一个转场过度，对博客成列的展示与切换也简单的做了个过度。

  使用的是vue的transition标签，当里面内容改变的时候，会通过name指定的样式进行过度。(列表使用的标签是transition-group)

// html:<transition name="nav_list" mode="out-in">
      <router-view/>
</transition>
// scss:.nav_list-enter-active,.nav_list-leave-active{
  transition: .3s -0.1s ease-in-out;
}
.nav_list-enter,.nav_list-leave-to{
  margin-top: 50%;
  // opacity: .5;
  // margin-left: 100px;
}

友链评论信息保存

  同一个人在不同的时间点进行评论时，一般来说昵称、邮箱都是不会改变的，方便下次的回复。在之前，每次都要重新填写，显得非常的繁琐，所以这次对于每一次提交，都将基础信息记入了cookie，设置了保存的时间为-1即永久有效。这样下次评论的时候，自动读取cookie，如果各个基础属性存在，那么就自动填充，否则不填充（可能用户会有定期清空cookie的习惯，比如我(ˉ▽ˉ；)...

音乐播放组件添加

  使用了github上的MetingJS组件添加了音乐播放器的功能，其利用了aplayer进行了一个改进，通过metingjs，可以便捷的加载国内的主流音乐源：QQ音乐、网易音乐、酷狗、虾米、百度。不但可以读取单首音乐源，还可以智能获取列表进行播放。非常推荐的一个组件！

  如何使用？对于metingjs，目前似乎只提供了script引入的方式操作，鉴于jsdeliver在国内的稳定性实在是不想吐槽，所以将几个需要的js、css文件下载了下来，但是肯定还是要走cdn的，突然想到博客园的仓库可以上传js和css文件并且读取，也就是一个免费可靠的cdn源！于是便将文件上传到了博客园上，然后引入。

    <!-- require APlayer -->
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/dreamcenter/APlayer.min.css">
    <script src="https://blog-static.cnblogs.com/files/dreamcenter/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://blog-static.cnblogs.com/files/dreamcenter/Meting.min.js"></script>

  然后需要的地方，加上下面内容即可：

<meting-js
  class="music_player"
  server="tencent"
  id="7356701986"
  type="playlist"
  fixed="true"
  mini="true"
  lrc-type="1"
  :autoplay="autoPlay"
  mutex="true"
  list-folded="true">
</meting-js>

  各属性可以参考metingJS的github查看，我这里只对部分进行阐述。

  server是指目标解析的服务方，有netease, tencent, kugou, xiami, baidu五个选项，对应的服务方英文名字一眼可知。

  type代表了播放的类型，有song, playlist, album, search, artist五个选择，我这里是播放的qq音乐的列表功能。id指向的是对应type的id号，可以在浏览器看到其id号。

  以上三个是必填项。只要以上三个填写正确，基本就可以正确的播放目标了！

  如何找到id？参考下图即可。