博客园如何加目录

转自:https://www.cnblogs.com/ning-wang/p/7656847.html

【1】文章头部加目录

1.1 效果展示

  

1.2 代码

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $(‘#cnblogs_post_body‘);
    var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;

    if(h2_list.length>0)
    {
        var content = ‘<a name="_labelTop"></a>‘;
        content += ‘<div id="navCategory" style="color:#152e97;">‘;
        content += ‘<p style="font-size:18px;"><b>目录</b></p>‘;
        content += ‘<ul>‘;
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = ‘<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = ‘‘;
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll(‘h2‘).first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
                $(h3_list[j]).before(li3_anchor);
                li3_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘;
            }

            var li2_content = ‘‘;
            if(li3_content.length > 0)
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ul>‘ + li3_content + ‘</ul></li>‘;
            else
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘;
            content += li2_content;
        }
        content += ‘</ul>‘;
        content += ‘</div><p>&nbsp;</p>‘;
        content += ‘<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>‘;
        if($(‘#cnblogs_post_body‘).length != 0 )
        {
            $($(‘#cnblogs_post_body‘)[0]).prepend(content);
        }
    }
}

GenerateContentList();
</script>

【1】部分转自:https://www.cnblogs.com/xuehaoyue/p/6650533.html

【2】文章右侧加目录

先给大家看一下最终的实现效果,如果你觉的还可以,那么请继续阅读。

在此首先要感谢marvinasxinyu,我这次目录的实现基本是结合了他们二人的成果,在此特别致谢。下面是他们相关博客的链接。

【分享】博客美化(6)为你的博文自动添加目录

如何给你的为知笔记添加一个漂亮的导航目录

0x02 实现过程

基本原理在上面两位大神的博客里已经进行了详细的介绍,这里我就不再累述。
这里着重说一下我所更改的地方,在marvin的基础上,参考asxinyu的实现,去掉了标题自动编号,因为我还是喜欢自己来对标题进行编号。
更改目录为打开博客后自动展开(原来是默认关闭的)。

2.1 下载相关文件

2.2 文件说明

bootstrap.min.js 侧边栏

marvin.nav.js 目录自定义文件,可以通过修改该文件配置来自定义自己的目录。

2.3 文件使用

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)自定义标题

想不想要好看的文章标题呢?下面将介绍如何来自定义文章标题。

2.4 CSS样式

博客设置 -> 页面定制CSS代码
粘贴如下代码即可实现

<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 h1 {
    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 h2 {
    color: #6FA833;
    border-left: 13px solid #6FA833;
    padding: 5px;
    background-color: #f5f5f5;
}
</style>

我的CSS样式(只弄了h2和h3)

<style type="text/css">
    #cnblogs_post_body
    {
        color: black;
        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 17px;
    }
   /*标题2*/
#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;
    font-size: 20px;
}
/*标题3*/
#cnblogs_post_body h3 {
    color: #009ACD;
    border-left: 13px solid #009ACD;
    padding: 5px;
    background-color: #f5f5f5;
   font-size: 18px;
}
</style>

原文地址:https://www.cnblogs.com/gered/p/11766289.html

时间: 2024-10-22 07:37:04

博客园如何加目录的相关文章

Python - 爬取博客园某一目录下的随笔 - 保存为docx

1 #coding:utf-8 2 import requests 3 from bs4 import BeautifulSoup 4 import MySQLdb 5 6 7 def get_html(url): 8 ''' 9 获取页面HTML源码,并返回 10 ''' 11 html = requests.get(url) 12 content = html.text.encode('utf-8') 13 return content 14 15 def get_blog_html_lis

博客园自动生成目录及页面美化

一.自动生成目录 1.在博客园后台管理页面选择"设置" 2.生成三级目录 2.1.操作步骤 找到页脚HTML代码,复制自动生成目录的js代码,保存即可 代码如下: 2.2.效果: 3.生成一级目录 3.1.操作步骤: 找到页脚HTML代码,复制生成目录的代码,保存即可,代码如下: 回到顶部 二.引入自定义控件 1.侧边栏时间控件 1.1.操作步骤 找到侧边栏公告,复制时间控件代码,保存即可 代码如下: 复制代码 复制代码 1.2.效果 2.界面美化 2.1.选择皮肤:ThinkInsi

博客园如何设置目录生成&amp;设置目录&amp;设置标题背景色&amp;修改标题背景色

阅读目录 前提 设置目录生成&设置/修改标题背景色 设置目录 前提 注意: 请先申请开通JS接口!! 今天帮朋友设置后台代码,发现怎么都没有效果,看了下忽略了JS接口: 因为插入的代码大多有JS功能,不申请开通JS功能自然无法支持JS效果. 网上看了很多博客也都没提及这点,感觉是个坑,So,需要的朋友可以留意下. 对了.在编辑页面是显示不出目录效果的,只有你设置好目录发布文章后,发布的文章才会有目录效果哦~ 设置目录生成&设置/修改标题背景色 <script language=&qu

如何在博客园上使用markdown

目录1 [Toc] 1. 打开markdown编辑器 在你的博客园首页面选择新随笔,在编辑页面左上角有设置默认编辑器,点击选择markdown即可.这时你已经可以编辑了,但你会注意到,编辑页面是没有预览按钮的,当然你也可以滑到最底部选择保存为草稿,然后就可以查看了.如果你觉得很麻烦(确实麻烦),就可以寻找新的编辑工具或博客客户端. 2. 寻找编辑工具 博客园有推荐专门的博客客户端给我们,如windows Live Writer和Open Live Writer.但不幸的是这两者都不支持markd

博客园加上博客精灵

以前玩wordpress就喜欢这个博客精灵,现在给我博客园也加个这个,萌萌哒! 下面是教程 1. 准备好两个文件(右键另存) spig.js spig.png 2. 然后添加代码 CSS代码 .spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;} #message{color :#191919;border: 1px solid #c4c4c4;

自定义博客园主题样式

自定义博客园主题样式 基础实现 之前有记录自己自定义目录以及相关样式功能,感兴趣的可以看下 博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色 在此基础上再加点捣鼓内容,实现主题样式透明化.增加侧边“分享”模块.标题级别显示设置 具体代码中会进行注释,可进行相应参考 内容比较粗略,将就看喽~ 透明化 效果 具体实现 ****************************************** 页面定制CSS代码 ************************

9013博客园申请教程及基本操作

1.注册博客园账号 1.1百度搜索博客园,认准官网 1.2点击右上角注册 1.3填写个人信息点击注册 注意登录名称和显示昵称后期都可以改,且不会产生影响 登录名称和密码为以后登录的凭据,务必记住 1.4输入邮箱验证码并点击下一步 1.5输入手机验证码并点击下一步 1.6点击登录 登录用户名是1.3填写个人信息注册的登录名称和密码 1.7补充 到此就完成博客园账号的注册,但是并未开通博客,只能看别人的博客,开通博客参考2开通个人博客 以后登录直接百度搜索博客园,点击右上角登录,输入账号密码就可以了

博客园样式目录加代码美化

页面定制 CSS 代码 使用博客园自带的SimpleMemory主题 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} h1 {font-size: 1.8em;} h2 {font-size: 1.5em;} h3 {font-size: 1.3em;} #header h2 { font-w

使用JavaScript代码为博客园个人博客页面自动添置目录

当我们在博客中写的东西比较多,或者文章层次比较明显,有很多层次结构,这时如果没有目录导航,将特别难以阅读.博客园有着非常个性化的个人定制功能,可以通过添加js代码实现这个功能,由于对jquery不熟,因此采用原生js来做的.考虑到一般使用二级目录就够了,因此代码只实现到二级目录.也可以很方便的更改代码,实现更多级别. 另外,当页面滚动到后面时,再返回目录区域也很累,因此在右下加添加了一个返回目录的按钮,随着页面往下滚动,按钮出现并固定. 以下贴上代码: //函数实现在父节点的最前面插入新的节点