文档章节

OSChina博客自动生成目录功能

爱你不行不行的
 爱你不行不行的
发布于 2016/05/22 21:22
字数 513
阅读 64
收藏 1

一、写在前面的话

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

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

1、自动生成目录原理

public static List<String> Anchor = new ArrayList<String>(){{
    add("h1");
    add("h2");
    add("h3");
    add("h4");
    add("h5");
    add("h6");
}};
  • 检测文章中的H标签,添加锚点
public String htmlAnchor(String html) {
    Document doc = Jsoup.parseBodyFragment(html);
    Elements anchors = doc.select("*");
    int i = 0;
    for(Element anchor : anchors){
        String tagName = anchor.tagName().toLowerCase();
        if(Anchor.contains(tagName) && anchor.hasText()) {
            i++;
            anchor.before("<span id='OSC_"+tagName+"_"+String.valueOf(i)+"'></span>");
        }
    }
    return doc.body().html();
}
  • 根据锚点,生成对应的目录
public String htmlContent(String html) {
    StringBuffer content = new StringBuffer();
    Document doc = Jsoup.parseBodyFragment(html);
    Elements anchors = doc.select("*");
    int i = 0;
    for(Element anchor : anchors) {
        String tagName = anchor.tagName().toLowerCase();
        if(Anchor.contains(tagName) && anchor.hasText()) {
            i++;
            content.append("<li class='osc_"+tagName+"'><a href='#OSC_"+tagName+"_"+String.valueOf(i)+"'>"+anchor.text()+"</a></li>");
        }
    }
    return content.toString();
}

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

 

(1)、可视化编辑器
 

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

(2)、MarkDown编辑器

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

### 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解析的)。

© 著作权归作者所有

共有 人打赏支持
爱你不行不行的
粉丝 1
博文 4
码字总数 1571
作品 0
深圳
程序员

暂无文章

day92-20180918-英语流利阅读-待学习

健身最大的敌人不是懒惰,而是逞强 Daniel 2018-09-19 1.今日导读 还记得 2008 年北京奥运会运动员刘翔的退赛风波吗?那天几乎所有中国人都将视线聚焦在了鸟巢体育馆 110 米栏的项目上,迫不...

飞鱼说编程
9分钟前
1
0
70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
3
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
53
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部