fooleap/fooleap.github.io

new blog

fooleap.github.io's Issues

生成reference跳转，逻辑上似乎有一个小问题

背景

参考您的博客：JavaScript 实现参考资料功能 以及您的main.js#L358-L381进行移植。

问题

我发现在使用上必须遵守一个规矩，那就是参考文献在正文中出现的顺序必须与在markdown中声明的顺序相同，比如

在markdown正文中：

...
苹果[[3]][3]
...
香蕉[[2]][2]
...

在markdown链接列表中：

## 参考资料
[1]: ...
[2]: 香蕉
[3]: 苹果

在网页上显示为：

参考资料
1. ^xxxx
2. ^苹果
3. ^香蕉

此时如果点第二个苹果，那么会跳转到苹果[3]，即正文中的编号与参考资料中的编号不一致。原因是正文中的参考资料编号是 人为指定 的，而参考资料列表的编号是<li>标签 自动生成 的。

解决方法

在生成结束后增加如下代码即可，参考这里(ps：可惜是 jQuery 的)

var sort_by_id = function(a, b) {
    return a.id.split('-')[1].localeCompare(b.id.split('-')[1])
}
list = $('#refs > li').sort(sort_by_id);
for (var i = 0; i < list.length; i++) {
    list[i].parentNode.appendChild(list[i]);
}

目录展示插件在移植的时候遇到的bug

bug描述

在移植您的目录插件到我自己的博客的时候，发现虽然可以实现正常的目录跳转，但是鼠标点击某一标题，active属性总是设置为上一个标题，导致显示不正常。
同样的代码，在您的博客上却是正常的，调试时发现您博客的subTitles[i].offsetTop总是比pos多了32。当去掉您博客的.page-main的margin: 32px auto; 时，即可复现该bug。

解决办法

https://github.com/fooleap/fooleap.github.io/blob/master/assets/js/main.js
344行的sections[i] < pos应该改为sections[i] <= pos
同时建议将

var sectionIds = [];
var sections = [];

放到 function tocScroll()内部，否则其size会无限增长。