依然是给博客添加一个音乐播放器

之前写过一篇给hexo博客添加一个《给hexo博客添加一个音乐播放器》,通过iframe包含原来的页面,实现页面更新而音乐不间断,但有个缺陷,后面会讲到。最近换回next主题,重新配置了一下,再来捋一捋音乐播放器。

创建一个新的index文件

需要用一个新的页面来包含hexo生成页面,引入音乐播放器的css和js文件,增加一个iframe标签包含进hexo原来的index.html,目的是让页面跳转的事件冒泡到iframe为止,页面更新的是iframe的内容,浏览器不会进行跳转。为了命名不冲突,需要先将新建的文件命名为index以外的名称,如果start.html,此外,引入的文件名称为include.html,发布时会改的。

1
2
3
4
<link href="css/music-hub.css" rel="stylesheet">
<script src="js/src/music-hub.js" type="text/javascript"></script>
<iframe frameBorder=0 height="100%" width="100%" src="include.html"></iframe>
<div id="music_hub_content"></div>

修改layout

经过上面一改,直接发布到github是有问题的,因为发布时会把start.html改成index.html,原来index.html改为了include.html,这回导致所有首页跳转都会加载一个index页面。之前已经说了,修改后的页面,事件冒泡只到iframe,也就是这个新加载的index页面是在原来的index页面的iframe中,不断进行首页跳转,就会不断嵌套,这显然是愚蠢的修改。
修改后,按照预期,我们希望跳转到首页的文件不该是index.html,而是include.html,如果是自己的服务器就可以修改配置文件,但github上只认index,所以只能把所有首页跳转的超链接改一下。

首先是标题,next主题在 /Users/lu/Desktop/sephilex.github.io/themes/hexo-theme-next/layout/_partials/header.swig 下修改,其它的主题也差不多,修改a标签的href属性,在根路径后添加include.html。这样点击网站标题时就跳装到include.html上而不是index.html。

1
2
3
4
5
6
<div class="custom-logo-site-title">
<a href="{{ config.root }}include.html" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">{{ config.title }}</span>
<span class="logo-line-after"><i></i></span>
</a>

接着还是在这个文件下,改菜单栏里首页超链接。

1
2
3
4
5
6
7
8
<li class="menu-item menu-item-{{ itemName }}">
<a href="{{ url_for(path) }}" rel="section">
{% if theme.menu_icons.enable %}
<i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"></i> <br />
{% endif %}
{{ __('menu.' + name) }}
</a>
</li>

找到以上代码片段,虽然不是很懂它的语法,但可以看出,它是通过for循环生成a标签的,那么修改一下首页a标签的href即可,连蒙带猜写出以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<li class="menu-item menu-item-{{ itemName }}">
{% if path == '/' %}
<a href="{{ url_for(path) }}include.html" rel="section">
{% if theme.menu_icons.enable %}
<i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"></i> <br />
{% endif %}
{{ __('menu.' + name) }}
</a>
{% else %}
<a href="{{ url_for(path) }}" rel="section">
{% if theme.menu_icons.enable %}
<i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"></i> <br />
{% endif %}
{{ __('menu.' + name) }}
</a>
{% endif %}
</li>

这样就完成了

去掉多余的滚动条

看看 myblog.sephilex.com 就知道怎么回事了,需要去掉浏览器的滚动条,在start.html中加入样式

1
2
3
4
5
<style type="text/css">
::-webkit-scrollbar {
display: none;
}
</style>

以后每次发布就把public总的start.html和index.html改一下名字即可,可以写个脚本到hexo的文件下,一次过执行hexo clean, hexo g, hexo d以及改名操作。

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

文章作者:Sephilex

发布时间:2017年02月23日 - 19:02

最后更新:2020年03月16日 - 08:03

原始链接:https://sephilex.com/2017/02/23/依然是给博客添加一个音乐播放器/

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

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