本文于2020/4/19日 AM:2:12发布,由于wordpress未知bug导致2020/4/1 00:00-2020/4/23 00:00无法在首页显示!

# 闲话

Sakura自带一款Aplayer播放器,使用后体验并不好,本站之前有用插件版Qplayer,但是这个玩意儿4年前就弃坑了。最近我开了个新坑洛璃塔塔(www.lolitata.cn),专门写ACG相关文章, 使用了Typecho的Littlehands主题,为什么没使用WP和Sakura?1.香港服务器配置不如主服务器,鉴于没备案所以用不了主服务器,wp跑过主站镜像,经常炸机,配置不高意味着虽然同样的WAF,但是抗CC量降低的很严重,所以考虑使用typecho,Sakura的主题在typecho用不习惯,而且为了换个口味我喜欢的双栏主题,Akina系看了600多天了,就选择了此(Handsome?那东西烂大街了兄弟,还是付费的,可玩性较低,这个主题日后也会被我改的不成样子吧(逃 )

# 正文

项目地址:https://github.com/moeshin/QPlayer/ 这是一个以Qplayer基础修改的播放器,暂没找到比他还新的Qplayer播放器

效果演示:

图为展开全部功能,高度宽度会按展开的功能和音乐列表自动调整。

把他的所有文件下载到/wp-content/themes/Sakura

新建个文件夹,可以叫qplayer,然后把script.js放进去,至于CSS,建议直接复制粘贴放入主题的Style.css

重点来了!!!

打开header.php,在<head></head>之间插入

<!--Qplayer-->
<!--Code start->
		<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdnjs.loli.net/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
		<script src="/wp-content/themes/Sakura/qplayer/script.js"></script>
		<script>
			(function (q) {
				/* 目前只支持网易云音乐的这几种类型
				 * type:
				 *     list - 歌单,默认
				 *     dj   - 电台
				 */
				q.type = 'list'; // 类型
				q.id = 4937355642; //类型所对应的id
				q.isAuto = false; //是否自动播放,默认false
				q.isRandom = true; //是否随机播放,默认true
				q.isRotate = true; //封面是否旋转,默认true
			})(QPlayer);
		</script>
<!-- Code end-->
<!--Qplayer end-->

这里用的是作者的CDN,建议自己下载后本地调用或自己CDN调用,帮作者省流量,加快自己站点性能。

第二个重点来了!!!

打开footer.php,找到<!-- #page Pjax container-->,在它下面修改,<footer>之上,不要写到<footer>标签里面,因为播放器会乱在页脚,也不要写到<!-- #page Pjax container-->上面,因为那样会没有pjax(如果你开了的话)

	<!--Qplayer-->
	<!--Code Start-->
		 <body>
		<div id="QPlayer">
			<div class="body">
				<div class="player">
					<span class="cover">
						<img src="https://p4.music.126.net/7VJn16zrictuj5kdfW1qHA==/3264450024433083.jpg?param=106x106">
					</span>
					<div class="ctrl">
						<div class="title">
							<strong>name</strong><span> - </span><span class="artist">artist</span>
						</div>
						<div class="progress">
							<div class="already" style="width:0%;">
								<div class="btn"></div>
							</div>
						</div>
						<div class="contr">
							<div class="timer left">00:00</div>
							<div class="center">
								<div class="last icon"></div>
								<div class="play icon"></div>
								<div class="next icon"></div>
							</div>
							<div class="right">
								<div class="list-btn icon"></div>
								<div class="lyric-btn icon"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="pop-btn">
					<div class="icon"></div>
				</div>
			</div>
			<div class="more">
				<ol class="list"></ol>
				<div class="lyric"><ol></ol></div>
			</div>
			<audio></audio>
		</div>
		<!--Code End-->
	    <!--Qplayer End-->

完成!芜湖~

理论上这个播放器支持任何HTML页面。

我会对wp的qplayer插件进行更新,尽情期待。

顺带为新站引个流:洛璃塔塔,还在建设之中,欢迎投稿,已经支持黑幕特效。

用法:<span class="heimu" title="你知道的太多了">你想说的话</span>

比如:

你钉钉响了

努力学习ing