今天晚上闲得无聊打算改一下博客园的版面,将本来在右边的索引评论榜单等都移动到了左侧,并且扩大了有效页面,提高了页面的利用率。
有意思的是我发现了一位大佬的博客https://www.cnblogs.com/shwee/p/9084535.html
关于添加背景音乐的一个插件说明。
我试着跟着学习了一些,也添加上了这样一个音乐播放器,但原博主有些地方没有说明白,我对其进行一些补充。
页面定制CSS代码:
/* 定制公告栏音乐插件的样式 */ .aplayer { font-family: Arial,Helvetica,sans-serif; /*音乐插件字体*/ margin: 0px; /*音乐插件与公告栏左边的边距,0px就是直接抵到公告栏左边的边上*/ box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); border-radius: 2px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; }
博客侧边栏公告(支持HTML代码)(支持JS代码):
对于上面的代码也就是我们需要根据自己需要修改的代码了。
{ title: '音乐1', author: 'Valentin', url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf', pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png' },
对于这样一个对象我们能很快明白
title是音乐名,author是作者名,url是所在的链接地址,pic是音乐封面的链接地址,那么这些链接地址在哪里找到呢?
首先我们需要将音乐与图片上传到博客园,音乐要上传到文件区域,而博客园上传文件格式后缀不支持mp3上传,所以就要把歌曲的后缀名改成了博客园后台支持得文件后缀名,原作者改了个pdf,但好像现在pdf也不支持了,可以改成ppt,当然可以改成其他后缀名,这个问题不大,只要是歌曲文件,内部编码不变,这个文件的源地址给播放器,播放器插件读到这个文件就能解码播放。
而想要得到源地址在文件中右击Download选择复制链接地址,将得到的地址替换原来的url。
而想要得到图片先将图片上传到相册上,在相册中右击图像,复制图形地址将得到的地址替换pic原地址即可。
当然,可以吧歌曲上传其他地方或者使用在线的歌曲链接,不过这样官方把歌曲链接改了,就播放不了了,所以还是建议把歌曲文件和封面照片上传博客园上,然后把链接丢给插件就行了。