文档章节

OSChina博客自动生成目录功能

爱你不行不行的
 爱你不行不行的
发布于 2016/05/22 21:22
字数 513
阅读 55
收藏 1
点赞 2
评论 0

一、写在前面的话

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

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

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
深圳
程序员

暂无文章

告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 为方便需要,所有的shell脚本放到 /usr/local/sbin/ 目录下 切换到 /usr/local/sbin/ 目录下,创建告警系统脚本 #!/bin/bash#Written by aming.# 是否发送邮件的开关(1表...

Zhouliang6
7分钟前
1
0
不要再问我跨域的问题了

原文链接:web.jobbole.com 【RTC实时互联网大会 限时免费 马上报名】www.bagevent.com 写下这篇文章后我想,要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”,形成一系列内...

阿K1225
9分钟前
0
0
Tomcat配置虚拟路径

<?xml version="1.0" encoding="UTF-8"?> <Context docBase="/data/dispute_https/headPortrait/" path="/headPortrait" reloadable="true"/> <!-- 该文件名为headPortrait.xml,放在${tomca......

Helios51
11分钟前
0
0
开源PaaS Rainbond 3.6.1 Released

本次3.6.1版本更新,重点修复了3.6.0版本部分情况下会出现的BUG,同时改进了内部市场、参数验证、历史消息等功能,详细更新记录如下—— 3.6.1 功能改进 云帮初次使用跳转至注册页面 消息添加...

好雨云帮
11分钟前
0
0
Unsupported major.minor version 52.0

执行代码的jdk版本 低于 编译的jdk版本 其中52.0 对应的就是 jdk1.8版本。

@林文龙
11分钟前
0
0
聊聊spring cloud的AbstractLoadBalancingClient

序 本文主要研究一下spring cloud的AbstractLoadBalancingClient AbstractLoadBalancingClient spring-cloud-netflix-ribbon-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/netfli......

go4it
12分钟前
0
0
博客改版通知

先上博客地址 --> http://metaphors.name 最近将博客从 Jekyll 迁到了 Hexo,所以简书、开源中国、博客园、CSDN文章中的的部分图片丢了,原文链接也不可用了,不过没关系,原文链接都会转到博...

Metaphors
13分钟前
0
0
vue基础知识练习

一、Hello World <div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 --> </div><script src="js/vue.js"></script><script>var vm=new Vue({......

一个yuanbeth
16分钟前
0
0
spring @Transactional注解参数详解

原文:事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean implements TestService {} 当类中某些方法不需...

binhu
19分钟前
0
0
CORS 跨域实践

本文首发于个人微信公众号《andyqian》,期待你的关注~ 前言 系统通常都是由单体应用逐渐演化而来,演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时,随之而来的也有不...

andyqian
26分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部