给hexo博客添加一个音乐播放器

看到一个js写的web音乐播放器
源码和使用教程如下
http://niices.coding.me/A-Music-Player–Music-hub/
实际使用时需要到js文件修改一下资源路径

直接使用的话,会在点击url跳转时重新加载播放器,听着听着就重新播放了,体验非常不好,前端知识基本都忘光了,只能笨拙进行如下修改,适用于部署在vps上的博客。

  • 按上面的使用说明在适当的路径加入音乐播放器的css和js文件
  • 在所使用的主题下的source文件夹中新建一个start.html文件,输入以下内容:

    1
    2
    3
    4
    5
    <link href="js/music-hub.css" rel="stylesheet">
    <script src="js/music-hub.js" type="text/javascript"></script>
    <iframe frameBorder=0 height="100%" width="100%" src="index.html">
    </iframe>
    <div id="music_hub_content"></div>
  • 还需要修改主题下/layout/_partical的header.ejs文件
    把其中的

    1
    2
    3
    4
    <div class="header-div">
    <h1><a href="<%- config.root %>"><%= config.title %></a></h1>
    <h2><a href="<%- config.root %>"><% if (config.subtitle){ %><%= config.subtitle %><% } %></a></h2>
    </div>

    修改为

    1
    2
    3
    4
    <div class="header-div">
    <h1><a href="<%- config.root %>index.html"><%= config.title %></a></h1>
    <h2><a href="<%- config.root %>index.html"><% if (config.subtitle){ %><%= config.subtitle %><% } %></a></h2>
    </div>

以及

1
2
3
4
5
<div id="main-nav" class="alignleft">
<% for (var i in theme.menu){ %>
<a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
<% } %>
</div>

改为

1
2
3
4
5
6
7
8
9
10
11
<div id="main-nav" class="alignleft">
<% var j = 0; %>
<% for (var i in theme.menu){ %>
<% if(j==0){ %>
<% j++; %>
<a href="<%- theme.menu[i] %>index.html"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
<% continue; %>
<% } %>
<a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
<% } %>
</div>

以上做的是,需要跳转至首页时指定跳转到/index.html

  • 到vps上配置nginx,修改默认页面为start.html
  • 本地执行hexo clean && hexo g && hexo d,完工
    注意,此时只有访问vps上的博客才有音乐播放器,github托管的则没有

如果hexo只托管在github中,也有解决办法,就是麻烦一点,不能一劳永逸,如下:
上面的start.html文件中iframe的src设置为’include.html’
每次执行hexo d前,到本地的public文件夹下,将index.html改名为include.html,将start.html改名为index.html,发布既可
顺带一提,这样做的话,vps上的就不用修改默认页面了,而且vps和github上博客都有音乐播放器

本文标题:给hexo博客添加一个音乐播放器

文章作者:Sephilex

发布时间:2016年09月10日 - 20:09

最后更新:2019年12月13日 - 21:12

原始链接:https://sephilex.com/2016/09/10/给hexo博客添加一个音乐播放器/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!