这两天加了一个音乐播放的组件,同时对部分功能进行了优化。
对页面的切换进行了一个转场过度,对博客成列的展示与切换也简单的做了个过度。
使用的是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?参考下图即可。