为博客添加目录的配置总结

转载自:http://www.cnblogs.com/jiangz/p/3734968.html

最近在博客园上看到了用html/javascript实现添加目录的方法(http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655),想按照作者的方法进行一下配置,发现不行。经过一番学习,现在总算是配置好了,在我的chrome 34下可以看到目录(如下图所示)。我把我配置过程中做的修改按顺序记录在这里,供大家参考。

一、申请js权限

根据管理页面的说明,如果是通过js修改公告栏的话,需要向博客园申请。没有申请成功之前,会看到如下这么一条提示,申请成功后该提示自动消失。邮件正文简单说一下博客的地址和请求开通就行。

二、对javascript代码增加标识

原博客正文中给出的代码,最开始少了<script type="text/javascript">,结尾少了</script>。直接把原博客正文代码复制到博客园设置界面中的话,代码原文直接出现博客中。

三、修改新增目录的class和id名

原博客的目录的class和id都是sideBar,这个命名恰好和我用的模板中的命名冲突,导致修改结果出现问题。于是我把js和css中和sideBar相关的三个地方重命名为uprightsideBar。

四、css中增加二级标题缩进

完成了1,2,3之后,我发现我的博客二级标题没有缩进,于是在css代码中增加了对dd的设置代码

#sideBarContents dd{
margin-left:20px;
}

五、参考材料

[1]http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655

[2]http://www.cnblogs.com/houkai/p/3394402.html

时间: 2024-11-05 06:06:24

为博客添加目录的配置总结的相关文章

为博客添加目录

主要参考来源:http://www.cnblogs.com/xuehaoyue/p/6650533.html#_labelTop 在文章左边角添加目录导航 1. 申请开通js权限 默认是不支持,需要打开博客园后台,进入“设置”标签页,点击“申请开通js权限”,并注明用途 如果想加快申请速度,也可以再向官方发个邮件(邮箱是[email protected]),邮件也需要注明用途,快的话1小时就能搞定了 2. 添加css代码到“页面定制CSS代码” /*生成博客目录的CSS*/ #uprightsi

hexo next主题为博客添加分享功能

title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 --- 今天心血来潮,决定给博客添加分享功能,百度上首先是找到了使用shareSDK的分享功能,最后在实践的过程中发现它添加时步骤比较多,添加完成后效果比较丑(就是一个长条的浅蓝色按钮),而且点击后想要退出分享比较麻烦(它的取消按钮实在太难找了,它在页面最下方的位置,呈现浅灰色,这个设计太反人类了

杨泽业:给你的wordpress博客添加SMTP邮件服务,评论以后邮件通知

当你的博客有人评论的时候,就会收到邮件通知,那是非常好的体验,有人评论了自己第一时间知晓.特别是,有人在你的博客留言,需要有人解答问题的时候,这个人是迫切的需要及时通知的,有的评论自动邮件通知的话,那么就轻松了. 要实现评论邮件通知,还是不难的.下面,我就说说,使用腾讯的免费企业邮箱配置SMTP邮件服务.(没有企业邮箱的请查看我上一个文章<用你自己的域名免费的开通腾讯企业邮箱图文教程>) 先在模板函数 (functions.php)文件底部添加下面代码即可,邮箱的帐号密码改成自己的帐号密码.

Hexo博客添加在线联系功能

title: Hexo博客添加在线联系功能 date: 2018-08-29 21:03:11 tags: - 博客 - git - hexo - 博客优化 categories: 搭建博客 --- Hexo博客添加在线联系功能 Hexo博客如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务,当有用户在网页上给你留言后会通过邮件或者微信通知你,可以及时的解答用户的疑问. 最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示: 配置方法如下: 首先到DaoVoice上注册

博客园目录导航 持续更新中~~

目录 博客园目录导航 python语言学习 python基础入门 python函数 python模块 python面向对象 网络编程 并发编程 Mysql数据库 初识数据库 mysql数据库安装 mysql支持数据类型 SQL语句 mysql约束 单表多表查 SQL注入风险 web前端 HTML CSS JavaScript Vue jQuery Bootstrap Django框架 Flask框架 算法 爬虫 人工智能 博客园装饰 博客园目录导航 python语言学习 python基础入门 计

博客园美化博客随笔目录

博客园美化博客随笔目录 基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进 一.js代码 <!--目录--> <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition

给博客添加Flash时钟

依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的.不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示. 想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了.稍稍问了一下度姑娘,还真找到了解决方案,总结如下: 1.添加object标签 既然说支持

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

团队Alpha博客链接目录

团队Alpha博客链接目录 人月神教-α阶段冲刺报告(1/12) 人月神教-α阶段冲刺报告(2/12) 人月神教-α阶段冲刺报告(3/12) 人月神教-α阶段冲刺报告(4/12) 人月神教-α阶段冲刺报告(5/12) 人月神教-α阶段冲刺报告(6/12) 人月神教-α阶段冲刺报告(7/12) 人月神教-α阶段冲刺报告(8/12) 人月神教-α阶段冲刺报告(9/12) 人月神教-α阶段冲刺报告(10/12) 人月神教-α阶段冲刺报告(11/12) 人月神教-α阶段冲刺报告(12/12) 团队git