学习
实践
活动
专区
工具
TVP
写文章
专栏首页小白安全小白博客 迷你音乐播放器及实现全站pjax无刷新加载

小白博客 迷你音乐播放器及实现全站pjax无刷新加载

演示截图:

请点击此处输入图片描述

请点击此处输入图片描述

使用教程,下载播放器文件,直接上传压缩包至你的网站根目录,然后解压到根目录。

然后在你的网站程序模板文件或者html中的</body>前面加上下面的代码:

<?php require '/MINET/music.php'; music::Minetxmusic('1997318085','open','www.baidu.com');?>

第一个参数为你网易云音乐的歌单ID,第二个open是开启ssl 如果你的网站没有ssl那么请填写cloesd

音乐播放器下载链接:https://pan.baidu.com/s/1pM8opAj 密码:ma6y 一行代码即可搞定播放器,不过要实现点击其他页面音乐不暂停 的话可以使用一下方法:

整合pjax的准备工作;

    检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入

1.新浪CDN提速:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

 1.7.0版本以上的才有pushState的封装。 开始整合Pjax;      1.下载pjax.js :链接: https://pan.baidu.com/s/1miZi2nQ 密码: v1im      2.在你喜欢的位置(最好body代码结束前)引入pjax.js;

<script type="text/javascript" src="/assets/js/pjax.js"></script> 

使用pjax;

    编辑模版footer.php在</body>标记结束前插入:

<script>
    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>

写好代码后,将容器contentleft付给一个ID,比如在body内的一个div,如:

<body>
      <div id="contentleft">
            网站内容部分...
      </div>
</body>

搞定

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.xbbai.site/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • handsome主题下载:一款十分华丽且功能强大的Typecho主题

    在复杂中,保持简洁。 如你所见,这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡,然后呈现在你的面前。 为了更好地创作,为了更好记录生活。 ...

    梦溪
  • DIASPORA – 简约素色响应式单栏 WORDPRESS 博客主题

    神无月
  • 6个功能强大的开源免费WordPress主题合集

    大家对WordPress免费主题都非常感兴趣,但是一般收费的WordPress主题功能才多,其实有很多开源的免费WordPress主题都很不错,对于很多新建站的...

    帝旭科技
  • 个人主题建站首选微博秀模板,仿新浪微博官网

    很久之前就想弄这个仿微博的模板了,但是时间一直不允许,这不抽空弄出来了,主题简单明了,后台设置简单,无需复杂操作,比起以往的CMS主题要简单的多,太适合做个人博...

    雾海梦曦
  • NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条

    前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些...

    Y5neKO
  • 非常适合个人搭建博客—WordPress开源免费主题汇总

    WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的,而且价格还不便宜,这导致了不少的新手朋友们很为难。而有时...

    聚优云惠
  • 数款二次元wordpress主题,你值得拥有!

    这大概是博主通过搜索引擎找的现在还可以用的,咱们中国人做的WordPress动漫主题了。 不多说直接进入主题。

    可定
  • 开源应用中心|五分钟教你搭建一个基于Laravel开发博客的应用

    laravel_blog是一款精美的博客程序,采用laravel框架搭建,适配pc和移动端,可能是世界上最漂亮的博客之一。

    Ducan
  • 什么年代还在用传统 Pjax? —— 自定义 Pjax 提升页面加载速度

    Hexo 属于静态博客,很多同学给自己的博客加上 Pjax 是为了音乐播放器等功能不中断。

    OhhhCKY
  • WebMaster 123 - 如何选择适合你的博客主题

    本篇,作为 WebMaster 系列咕咕咕了两三个月以后的第一篇,先超前一下,我们今天谈谈如何选择适合你的博客主题。

    惶心
  • pjax使用小结

    上周看到一篇文章在分析简书 我的主页 页面 3 个 tab 页切换的 bug,起先以为是寻常的样式 bug 而已没怎么在意,后来在文章中看到 pjax 这个术语...

    Lansonli
  • 开源应用中心|十分钟教你搭建一个基于Laravel开发博客的应用

    1. 背景 laravel_blog是一款精美的博客程序,采用laravel框架搭建,适配pc和移动端,可能是世界上最漂亮的博客之一。 2. laravel_...

    腾讯云DNSPod团队
  • 免费开源的WordPress主题模板 - Puock

    WordPress Theme - Puock 一款基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式。

    Breeze.
  • Giselle 主题帮助文档 & FAQ

    主题设置基于Inspire,任何关于本主题的建议和问题反馈请在本篇文章留言讨论,我会统一收集,如果我们想法相符 + 有能力实现 + 不影响主题美观的情况下,新功...

    w候人兮猗
  • Joe主题再续前缘版 - 本站同款

    前言 因为Joe主题作者不再更新,我便基于原主题 7.3.7 最新版开发了再续前缘版,秉承着原版作者大神免费开源的伟大初衷(在这里吐槽一下...密...),再续...

    囍楽云
  • hexo-theme-yun 制作笔记

    还在用 WordPress 的时候,总是喜新厌旧,经常换主题。且装了一堆插件,速度慢还容易崩。 而迁移到 Hexo 之后(小水管服务器太慢,拿去挂 MC 了。根...

    云游君
  • 几种方法实现ajax请求内容时使用浏览器后退和前进功能

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云

扫码关注腾讯云开发者

领取腾讯云代金券