关于全局BGM

博客不挂个BGM总觉得缺少了什么

就是右下角那个播放器啦。切换页面的时候不会跟随刷新真是太酷了。

关于这个的实现, 首先肯定需要加载一个播放控件, 并且要求在切换页面的时候不刷新这个播放器

实现方法很多, 比如iframe引用主页面, 或者AJAX with hash来记录播放进度, 或者Server端记录播放进度然后每次切换到对应时间。

对于Jekyll来说无法直接操作Server端因此可以选择前两种, iframe的调用极其简单, 所以直接将主页面放到iframe里面然后额外放一个播放器即可。

好, 全文完。

But…

真的就是这么简单吗?

理论上确实可行, 但是实际操作会有很多问题。首先对于Jekyll的架构来说有这么几点:

  1. 默认页面必须是index.html
  2. Pagination插件必须在index.html中才能生效
  3. iframe引用的页面内容不会被搜索引擎收录

默认页面

Apache的话可以修改默认页面, 但是Jekyll似乎没有修改默认页面为其他文件的方法1

也就是说, 必须要有一个文件名为index.html的文件, 因此当用户直接输入hostname的时候最先访问的文件必然是index.html

Pagination

既然默认页面无法修改, 那么我们把主页内容全部放到content.html, 然后用index.html引用就可以了

但是, 这时候Pagination报错说无法在index.html中初始化Pagination

同样Jekyll也没有提供Pagination目标页面的设置, 只能设置初始化之后的分页路径。

根据上方两个问题, 只能舍弃Jekyll自带的Pagination插件, 可以使用一些JQuery分页插件来实现效果。

例如我用的就是JPages2

关于搜索引擎收录

一般搜索引擎不推荐在页面中放置大量的iframe

iframe里面的内容无法被parent页面获取到, 因此被动抓取的时候可能只能获得一个空页面

实现方法也很简单, 多数搜索引擎会提供主动提交的功能, 将对应的提交代码放到每一个子页面就行, iframe切换的时候就会自动提交给搜索引擎

Google的话直接进就可以搜索到, 不用做任何处理

架构弊端

实际上很容易看出问题所在, 必须要通过index.html才能加载BGM, 如果你是直接访问post的话, 点击这里就可以到主页看到全局BGM了

不过这无所谓, 本来直接访问post的人应该也没有精力注意post内容以外的部分o( ̄▽ ̄)o

Enjoy It!

参考文献