有没有 markdown 生成 HTML 带侧边目录,并且跟随阅读位置标记当前目录位置,这样的一个工具或者样式

2019-03-28 15:10:32 +08:00
 NeoChen
类似于在 typora 里打开大纲目录的阅读效果
20844 次点击
所在节点    Markdown
27 条回复
NeoChen
2019-03-29 09:14:14 +08:00
@icanlynn 生成的目录 ID 编号似乎有问题,除了开始的 h1 h2 可以正常 id=wow1, id=wow1_2 这样,后续的都只有 wow。
搜索了一些资料,改成类似原生的 id,wow_1,wow_2.....这样可以正常使用了
就改了以下部分,对比一下源代码即可
```
var vH1Index = 0;
var vH2Index = 0;
var menuIndex = 0;
$("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
var id = '';
// var name = '';
var tag = $(item).get(0).tagName.toLowerCase();
//不同标题,不同 className,不同字体大小
var className = '';
if (tag == vH1Tag) {
// id = name = ++vH1Index;
// name = id;
vH2Index = 0;
className = 'item_h1';
} else if (tag == vH2Tag) {
// id = vH1Index + '_' + ++vH2Index;
// name = vH1Index + '.' + vH2Index;
className = 'item_h2';
}
//修改 id 生成策略
id = "_" + menuIndex;
menuIndex++;

$(item).attr("id","wow"+id);
$(item).addClass("wow_head");
```
NeoChen
2019-03-29 09:17:03 +08:00
@yumenawei 早些时候就有关注过,功能确实很强大,但是就是太强大了,反而显得繁琐了。就希望简简单单,和 typora 打开大纲栏一样。
Heanes
2019-03-29 09:21:36 +08:00
我自己写了个类似百度百科的目录的插件,不过移动端还没有适配
NeoChen
2019-03-29 09:39:10 +08:00
@tadtung 试了一下,也是超级简单!
只要参考 https://docsify.js.org/#/zh-cn/quickstart?id=%E6%89%8B%E5%8A%A8%E5%88%9D%E5%A7%8B%E5%8C%96
创建一个 index.html,然后把想要展示的 md 文档改名成 README.md ,放在一个目录下,然后上传服务器,直接打开即可。
thonatos
2019-03-29 10:58:47 +08:00
找个 TOC 插件就完事了....
knight3r
2019-06-28 15:14:08 +08:00
@NeoChen 亲这个上传到服务器是可以用 PYTHON 的 http.server 创建的吗?
NeoChen
2019-06-28 21:56:47 +08:00
@knight3r 应该可以

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/549551

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX