博客自动生成目录功能--Jsoup分析H1标签

一、写在前面的话

这篇文章主要介绍博客自动生成目录的功能，以及怎么来生成漂亮的目录。

为什么要有目录呢？一篇很长的文章，有了目录后就可以定位到想看的位置。这是非常方便的！

1、自动生成目录原理

1 public static List<String> Anchor = new ArrayList<String>(){{
2     add("h1");
3     add("h2");
4     add("h3");
5     add("h4");
6     add("h5");
7     add("h6");
8 }};

• 检测文章中的H标签，添加锚点

01 public String htmlAnchor(String html) {
02     Document doc = Jsoup.parseBodyFragment(html);
03     Elements anchors = doc.select("*");
04     int i = 0;
05     for(Element anchor : anchors){
06         String tagName = anchor.tagName().toLowerCase();
07         if(Anchor.contains(tagName) && anchor.hasText()) {
08             i++;
09             anchor.before("<span id='OSC_"+tagName+"_"+String.valueOf(i)+"'></span>");
10         }
11     }
12     return doc.body().html();
13 }

• 根据锚点，生成对应的目录

01 public String htmlContent(String html) {
02     StringBuffer content = new StringBuffer();
03     Document doc = Jsoup.parseBodyFragment(html);
04     Elements anchors = doc.select("*");
05     int i = 0;
06     for(Element anchor : anchors) {
07         String tagName = anchor.tagName().toLowerCase();
08         if(Anchor.contains(tagName) && anchor.hasText()) {
09             i++;
10             content.append("<li class='osc_"+tagName+"'><a href='#OSC_"+tagName+"_"+String.valueOf(i)+"'>"+anchor.text()+"</a></li>");
11         }
12     }
13     return content.toString();
14 }

2、写OSChina博客的时候怎么自动生成呢？

 

（1）、可视化编辑器

设置每一段落的小标题，如上图标题1、标题2、标题3...，也可以在html代码中使用h1、h2、h3...标签

（2）、MarkDown编辑器

markdown编辑器，只要在标题的前面添加“#”，标题(h1~h6)可使用相应个数的#来生成，如下

1 ### this is a level-3 header ###

将生成 h3 标签

更多markdown语法 http://www.oschina.net/question/100267_75314

最后发表的时候别忘了把自动生成目录勾选为 是

3、怎么使生成的目录比较好看？

h1生成的目录是顶级目录，依次是h2、h3...

不同级别的标题使用不同的h标签，对应的markdown编辑器就是“#”号的个数，可视化编辑器就是“标题1”、“标题2”选项...

二、最后的话

返回到这篇博客的前面，目录是不是挺好看的呢

注：目前可视化编辑器和markdown编辑器只能生成到h5标签，h6无效, markdown预览的时候只到h3(预览由js解析，最终显示是由java解析的)。

 

转自:http://my.oschina.net/zino/blog/125689