前端提取标题生成 TOC，支持帖子以及 Wiki 页面 #791

Martin91 · 2016-10-30T07:49:09Z

电脑端帖子效果

手机端帖子效果点击 TOC 后效果

电脑端 Wiki 页划过 TOC 后效果

手机端 Wiki 页点击 TOC 后效果

iPad 端 Wiki 页点击 TOC 后效果

huobazi · 2016-10-30T08:28:03Z

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

greatghoul · 2016-10-30T12:20:13Z

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

Martin91 · 2016-10-30T16:38:35Z

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

huacnlee · 2016-10-31T02:09:18Z

app/assets/javascripts/topics.coffee

@@ -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"


catalogue_item -> catalogue-item

CSS className 用中横线

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

huacnlee · 2016-10-31T02:10:24Z

app/assets/stylesheets/front.scss

@@ -303,6 +303,26 @@
  a.btn-move-page { color: #666; }
 }

+#topic-catalogue {


catalogue 用 catalog 是不是准确一些？

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

huacnlee · 2016-10-31T02:10:57Z

app/models/concerns/catalogue_extraction.rb

@@ -0,0 +1,20 @@
+# 提取目录功能
+#
+module CatalogueExtraction


Catalogable

保持 concerns 统一的命名方式

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

huacnlee · 2016-10-31T02:13:20Z

lib/catalogue_extractor.rb

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


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

huacnlee · 2016-10-31T02:15:01Z

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

huacnlee · 2016-10-31T02:19:13Z

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

huacnlee · 2016-10-31T02:36:49Z

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

vmg/redcarpet#255

Martin91 · 2016-11-01T01:25:00Z

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

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

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

huacnlee · 2016-11-01T01:57:48Z

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

Martin91 · 2016-11-01T01:59:25Z

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

huacnlee · 2016-11-02T09:38:19Z

或许可以更简单点，直接用 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 · 2016-11-22T09:08:57Z

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

lihuazhang · 2017-02-18T11:35:33Z

https://ruby-china.org/topics/32333 现在很多帖子都靠截图来给大纲了。。看来这个功能其实还挺重要的。

NeverMin · 2017-02-28T04:52:13Z

这个功能很赞:

鼓励发表有深度有营养的文章
帮助读者定位感兴趣的章节
(帖子和wiki都需要)与 markdown 理念一致: 专注写作

这是我的看法, 谢谢

huacnlee · 2017-02-28T06:26:18Z

@Martin91 继续哦

Martin91 · 2017-02-28T06:34:37Z

不好意思，这段时间一忙就没跟进，这周内搞定，我觉得 Jason 的方案很适合，我到时候实现下！ Jason Lee <notifications@github.com>于2017年2月28日周二下午2:26写道：

…

@Martin91 <https://github.com/Martin91> 继续哦 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#791 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACxCpMOu4kSxOItj-Wy9GgvGhtN2xcz-ks5rg74OgaJpZM4KkUFI> .

codecov · 2017-03-04T18:05:32Z

Codecov Report

Merging #791 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #791   +/-   ##
=======================================
  Coverage   98.53%   98.53%           
=======================================
  Files         142      142           
  Lines        6228     6228           
=======================================
  Hits         6137     6137           
  Misses         91       91

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2759c8e...eb9e195. Read the comment docs.

Martin91 · 2017-03-04T18:16:25Z

@huobazi @greatghoul @huacnlee @lihuazhang @NeverMin 我重写了 PR，纯前端的方式解决了问题，可以直接看 PR 里的 comment，麻烦大家提供意见。

NeverMin · 2017-03-05T01:33:31Z

Hi @Martin91, 感谢, 纯前端的解决方案很好, 所以我毫不犹豫就直接手动合并到产线上. 除此之外, 可能在正式合并时需要统一在双引号和单引号 @huacnlee .

https://zammad.org.cn/wiki/zammad-documentation

Martin91 · 2017-03-05T04:28:24Z

@NeverMin 感谢支持，我刚刚更新了代码，对细节样式进行了调整，可以参考截图。

NeverMin · 2017-03-05T05:02:40Z

@Martin91
Nice job. 是否考虑将 TOC 改为 Contents / 目錄 / 目录 (参考 wikipedia), 如:
<a href="#toc" title="TOC" id='toc-link'>[<%= t('contents') %> +]</a>

Martin91 · 2017-03-05T06:41:02Z

@NeverMin ?

NeverMin · 2017-03-05T06:53:55Z

@Martin91 Perfect 👍

huacnlee · 2017-03-06T02:02:24Z

还得最后整理一下，我刚合并了一个将 Page 剥离出去的 PR，然后冲突了。

Wiki 有关的内容剥离到 ruby-china/homeland-wiki 了

Martin91 · 2017-03-06T02:09:32Z

好的，我回头处理一下 Jason Lee <notifications@github.com>于2017年3月6日周一上午10:02写道：

…

还得最后整理一下，我刚合并了一个将 Page 剥离出去的 PR，然后冲突了。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#791 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACxCpHiYa7nl9ZKw5D78FBuqgQIOtvmaks5ri2k0gaJpZM4KkUFI> .

huacnlee · 2017-03-06T02:16:26Z

@Martin91 不用了，我先 Revert 那边的 PR 了，那个还有部分没完成

Martin91 · 2017-03-06T02:25:04Z

行的，非常感谢 Jason Lee <notifications@github.com>于2017年3月6日周一上午10:16写道：

…

@Martin91 <https://github.com/Martin91> 不用了，我先 Revert 那边的 PR 了，那个还有部分没完成 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#791 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACxCpNlWUiyUoZmeo2K4fnbiHsnMYvF0ks5ri2x-gaJpZM4KkUFI> .

huacnlee · 2017-03-06T02:49:49Z

@Martin91 我调整了一下实现，你可以看看我修改的内容

Martin288 · 2017-03-06T03:10:49Z

@huacnlee 现在那个回复里边有问题，每个回复都有了个目录按钮？

Martin288 · 2017-03-06T03:18:37Z

@huacnlee 还有个问题就是，现在的目录下拉菜单按钮那里，鼠标得移到三角标才能点击下拉，放在“目录”两个字上却不行，小小的体验细节。

huacnlee · 2017-03-06T03:37:40Z

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

没有你说的问题 @Martin288

Martin288 · 2017-03-06T03:40:55Z

@huacnlee 是的，另外的这篇有，估计是特殊场景，你看看
https://ruby-china.org/topics/32451

NeverMin · 2017-03-06T03:47:30Z

@huacnlee <https://github.com/huacnlee> 对于 https://ruby-china.org/topics/19436 我另外发了你一张图片, Firefox 上正常, 移动版本和 Chrome 有问题. 2017-03-06 11:40 GMT+08:00 洪泽钦 <notifications@github.com>:

…

@huacnlee <https://github.com/huacnlee> 是的，另外的这篇有，估计是特殊场景，你看看 https://ruby-china.org/topics/32451 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#791 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACqveCMP9sHJptmwc5yCtAUVLLfASopyks5ri4BJgaJpZM4KkUFI> .

huacnlee · 2017-03-06T03:50:16Z

@Martin288 @NeverMin 已修复

NeverMin · 2017-03-06T07:56:57Z

Hi All, 我看到 ruby-china 有更新, 包括移动端都 div 也有调整. Nice job.

…

-Never 2017-03-06 11:50 GMT+08:00 Jason Lee <notifications@github.com>:

@Martin288 <https://github.com/Martin288> @NeverMin <https://github.com/NeverMin> 已修复 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#791 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACqveBE2b2mpB4LNSK80xQvwTK51U1omks5ri4J6gaJpZM4KkUFI> .

huacnlee requested changes Oct 31, 2016

View reviewed changes

Martin91 added 5 commits March 5, 2017 01:50

insert the toc placeholder before article content

840ec47

toc panel style design

5f247af

enable too module work with extracting headers

07336c4

refactor to extract the toc partial

5ce7bd9

enable toc on wiki pages

08cc10d

Martin91 force-pushed the generate-topic-catalogue branch from 8a5ee24 to 08cc10d Compare March 4, 2017 18:05

Martin91 changed the title ~~提取生成文章的目录树，并且在页面上展示导航~~ 前端提取标题生成 TOC，支持帖子以及 Wiki 页面 Mar 4, 2017

Martin91 added 2 commits March 5, 2017 12:10

optimize the ui and clear unnecessary console.log

65f9224

use font awesome icon instead of text

1c7bbdd

use translations for contents instead of TOC

eb9e195

huacnlee approved these changes Mar 6, 2017

View reviewed changes

huacnlee merged commit 4eae629 into ruby-china:master Mar 6, 2017

huacnlee added a commit that referenced this pull request Mar 6, 2017

调整 Toc 的实现细节 #791

738c0e9

huacnlee added a commit that referenced this pull request Mar 6, 2017

Hide toc-container by default #791

c8f0794

huacnlee added a commit that referenced this pull request Mar 6, 2017

Toc feature No Rails template now, just only JavaScript #791

3e76190

前端提取标题生成 TOC，支持帖子以及 Wiki 页面 #791

前端提取标题生成 TOC，支持帖子以及 Wiki 页面 #791

Conversation

Martin91 commented Oct 30, 2016 • edited Loading

电脑端帖子效果

手机端帖子效果点击 TOC 后效果

电脑端 Wiki 页划过 TOC 后效果

手机端 Wiki 页点击 TOC 后效果

iPad 端 Wiki 页点击 TOC 后效果

huobazi commented Oct 30, 2016 • edited Loading

greatghoul commented Oct 30, 2016

Martin91 commented Oct 30, 2016 • edited Loading

huacnlee Oct 31, 2016

Choose a reason for hiding this comment

Martin91 Nov 1, 2016

Choose a reason for hiding this comment

huacnlee Oct 31, 2016

Choose a reason for hiding this comment

Martin91 Nov 1, 2016

Choose a reason for hiding this comment

huacnlee Oct 31, 2016

Choose a reason for hiding this comment

Martin91 Nov 1, 2016

Choose a reason for hiding this comment

huacnlee Oct 31, 2016

Choose a reason for hiding this comment

huacnlee commented Oct 31, 2016

huacnlee commented Oct 31, 2016

huacnlee commented Oct 31, 2016

Martin91 commented Nov 1, 2016 • edited Loading

huacnlee commented Nov 1, 2016

Martin91 commented Nov 1, 2016

huacnlee commented Nov 2, 2016 • edited Loading

greatghoul commented Nov 22, 2016

lihuazhang commented Feb 18, 2017

NeverMin commented Feb 28, 2017

huacnlee commented Feb 28, 2017

Martin91 commented Feb 28, 2017 via email

codecov bot commented Mar 4, 2017 • edited Loading

Codecov Report

Martin91 commented Mar 4, 2017

NeverMin commented Mar 5, 2017

Martin91 commented Mar 5, 2017

NeverMin commented Mar 5, 2017 • edited Loading

Martin91 commented Mar 5, 2017

NeverMin commented Mar 5, 2017

huacnlee commented Mar 6, 2017 • edited Loading

Martin91 commented Mar 6, 2017 via email

huacnlee commented Mar 6, 2017

Martin91 commented Mar 6, 2017 via email

huacnlee commented Mar 6, 2017

Martin288 commented Mar 6, 2017

Martin288 commented Mar 6, 2017 • edited Loading

huacnlee commented Mar 6, 2017

Martin288 commented Mar 6, 2017

NeverMin commented Mar 6, 2017 via email

huacnlee commented Mar 6, 2017

NeverMin commented Mar 6, 2017 via email

Martin91 commented Oct 30, 2016 •

edited

Loading

huobazi commented Oct 30, 2016 •

edited

Loading

Martin91 commented Oct 30, 2016 •

edited

Loading

Martin91 commented Nov 1, 2016 •

edited

Loading

huacnlee commented Nov 2, 2016 •

edited

Loading

codecov bot commented Mar 4, 2017 •

edited

Loading

NeverMin commented Mar 5, 2017 •

edited

Loading

huacnlee commented Mar 6, 2017 •

edited

Loading

Martin288 commented Mar 6, 2017 •

edited

Loading