关于全局 BGM

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

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

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

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

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

好, 全文完。

But…

真的就是这么简单吗?

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

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

默认页面

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

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

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

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

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

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

例如我用的就是 JPages²

关于搜索引擎收录

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

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

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

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

架构弊端

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

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

Enjoy It!

参考文献