蒋振飞的博客 - 博客园为文章添加目录   
正在加载蒋振飞的博客...
V3.0
蒋振飞的博客

博客园为文章添加目录

发布时间: 2019年05月09日 发布人: 蒋振飞 热度: 88 ℃ 评论数: 0

一、前言

近期,我准备将本网站上的文章内容备份在博客园中,发现其默认没有文章标题瞄点。当文章内容比较多时,下翻查阅很麻烦,所以我想为每篇文章添加一个目录功能,方便快速定位文章内容。下面这个样式是从网上拿过来的,用起来很方便,也节省了自己去编写的时间。

二、效果预览

先看下最终实现效果啦,觉得还行就往下阅读。

20190509.png

三、实现过程

1.申请JS权限

        博客设置 -> 博客侧边栏公告,我的已经申请了JS权限,所以显示(支持JS代码),没有申请前,这里有一个超链接申请JS权限,点击后等待1天左右,管理员机会批准你的申请。

2.添加JS引用

        在博客设置 -> 博客侧边栏公告内粘贴如下代码,注意要下载后上传到自己的博客园上,还有注意替换链接中的博客名,否则我的JS文件一旦修改,你也就遭殃了。

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

3.自定义标题

<style type="text/css">
#cnblogs_post_body
    {
        color: black;
        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 17px;
    }
   /*标题1*/
#cnblogs_post_body h2 {
    color: #fff;
    padding-left: 15px;
    background-color: #6FA833 !important;
    text-shadow: 2px 2px 3px #222222;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    margin-bottom: 5px;
}
/*标题2*/
#cnblogs_post_body h3 {
    color: #6FA833;
    border-left: 13px solid #6FA833;
    padding: 5px;
    background-color: #f5f5f5;
}
#blogTitle h3 {
    left: 40px;
}
#sideCatalog li.h2Offset{
   text-indent: -40px!important;
}
#sideCatalog li.h3Offset {
  text-indent: -25px!important;
  padding-left: 55px!important;
}
</style>

打赏 蒋振飞

取消

感谢您的支持,我会继续努力的!

扫码支持
一分也是爱     一块不嫌多

点击 支付宝 或 微信 打赏蒋振飞

打开支付宝扫一扫,即可进行扫码打赏哦

评论列表

  1. 复制自动添加版权信息 137 ℃
  2. 页面预加载loading动画 258 ℃