提取生成文章的目录树,并且在页面上展示导航 #791

Open
wants to merge 12 commits into
from

Projects

None yet

4 participants

@Martin91

包含多级标题的长文章自动生成目录树:
screen shot 2016-10-30 at 3 41 06 pm
无多级标题的长文章不会生成目录树:
image
使用演示(录屏软件的问题,导致录到的样式是错乱的,实际上样式是正常的):
ruby-china

@huobazi
huobazi commented Oct 30, 2016 edited

👍 wiki 很需要这个功能 直接放到 wiki 的第一屏顶部正好。

@greatghoul

TOC 放的这个位置感觉挺难受的,要不要考虑下 Dropbox Paper 那样的形式?

@Martin91
Martin91 commented Oct 30, 2016 edited

@huobazi 后边可以再考虑,如果这个 PR 合并了,后边再基于这个代码做实现。
@greatghoul 嗯嗯,我自己也觉得不是很好,不过我没用过 Dropbox Paper,是如下一样的吗?这个 Sections Navigator 应该是下拉展开的吧?我可以尝试实现一个类似的。
image

@@ -19,6 +19,7 @@ window.TopicView = Backbone.View.extend
"click a.follow": "follow"
"click a.bookmark": "bookmark"
"click .btn-move-page": "scrollPage"
+ "click .catalogue_item": "scrollPage"
@huacnlee
huacnlee Oct 31, 2016 Member

catalogue_item -> catalogue-item

CSS className 用中横线

@Martin91
Martin91 Nov 1, 2016

好的,这个没有留意,后边改下。

@@ -303,6 +303,26 @@
a.btn-move-page { color: #666; }
}
+#topic-catalogue {
@huacnlee
huacnlee Oct 31, 2016 Member

catalogue 用 catalog 是不是准确一些?

@Martin91
Martin91 Nov 1, 2016

是的,特地查了下,catalog 是美式英语常用表达,catalogue 是非美式的常用表达。

@@ -0,0 +1,20 @@
+# 提取目录功能
+#
+module CatalogueExtraction
@huacnlee
huacnlee Oct 31, 2016 Member

Catalogable

保持 concerns 统一的命名方式

@Martin91
Martin91 Nov 1, 2016

好的,这个也是疏忽了,后边修改。

@@ -0,0 +1,28 @@
+# 从 HTML 片段中提取目录树
+#
+module CatalogueExtractor
@huacnlee
huacnlee Oct 31, 2016 Member

这个东西,应该放到 html::pipeline 的流程里面

@huacnlee
Member

这个事情我一定会合并的,不过 @Martin91 需要先讲转换流程放入 HTML::Pipeline 的流程里面,而不是单独的转换

@huacnlee
Member

不过,还有个事情是,TOC 放在 Topic 里面意义不大,反而是 WIKI 更需要

@huacnlee
Member

貌似可以直接利用 redcarpet 已有的功能:

vmg/redcarpet#255

@Martin91
Martin91 commented Nov 1, 2016 edited

@huacnlee 我觉得是帖子太长的话,有个 TOC 会更方便。

HTML::Pipeline 我有考虑过,只是感觉不是很适合,因为现有的 Pipeline 是在处理输出最终 HTML 的,TOC 的生成没法跟现有的 Pipeline 集成吧。还是说起一个新的 Pipeline,就单独处理 TOC。

原来 Redcarpet 已经有现成的功能了,我原来找了好久没找到(orz....原来搜的时候没加 TOC... 孤陋寡闻了),那我还是先尝试用现有的吧。不重复造轮子。不过这些改动最快也要周末才能接着搞了,工作日一般没时间。

@huacnlee
Member
huacnlee commented Nov 1, 2016

如果要放到帖子里面,可以增加一个 [TOC] 的图标,默认折叠 TOC 内容,点击按钮展开

@Martin91
Martin91 commented Nov 1, 2016

@huacnlee ok,这个跟我想的差不多。

@huacnlee
Member
huacnlee commented Nov 2, 2016 edited

或许可以更简单点,直接用 JS 实现

https://ruby-china.org/topics/17028

 $(document).ready(function(){
      $(".markdown h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
      });
 });
@greatghoul

image
image

dropbox paper 的 toc 在左侧,平常就是一些不影响阅读的线框,鼠标移过时会显示出 toc。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment