码迷,mamicode.com
首页 > 其他好文 > 详细

【博客写作】写博客的好处,附博客园文章添加阅读目录的方法总结

时间:2018-02-07 00:39:50      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:建立   function   最大   html   java   简单的   category   top   list   

工程师为什么要写Blog

好处一:产生学习动机,有方向性地筛选资讯

人的脑袋跟时间有限,过多庞杂的资讯就等于无用的资讯,跟白噪音一样会被你的脑袋自然过滤掉。  

好处二: 检视自己既有知识,将 input 的新资讯与既有的知识建立连结

持续检视自我,才能发现不足之处,进行改善。才能发现自我成长的亮点,保持持之以恒的动能。所以,你需要给自己创造持续检视自我的机会。你的定期写文规划与行动,就是最好的事件点。  

好处三: 透过写文,刻意强化刺激知识转化,进行内化知识过程

因此这个步骤很重要,把「别人提供的资讯,转成自己的知识」。两者界接的桥梁是整理资讯的功夫,催化剂则是外显的过程。而最简单的外显,就是写 blog 文章。  

好处四:取得回馈,突破盲点

好处五:受益的总是自己

你在哪边跌倒过,别人往往就会在那边跌倒。从自己 blog 受益最大的,永远是自己。可以为未来的自己节省时间,可以为自己持续进化提升动力,可以为自己重新点燃火种、保持动能。  

原文链接:我为什么鼓励工程师写Blog

 

 


 

文章添加阅读目录的方法总结

申请开通js权限

管理 => 设置 =>申请JS权限,注明用途,等待审核通过,一般一个小时之内会完成审核

技术分享图片

技术分享图片

技术分享图片

添加HTML(JS)到页脚

 技术分享图片

点击保存,然后按照规定的格式设置二级标题,三级标题即可自动生成阅读目录

JS脚本

 1 <script language="javascript" type="text/javascript">
 2 // 生成目录索引列表
 3 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 4 // modified by: zzq
 5 function GenerateContentList()
 6 {
 7     var mainContent = $(‘#cnblogs_post_body‘);
 8     var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 9 
10     if(mainContent.length < 1)
11         return;
12 
13     if(h2_list.length>0)
14     {
15         var content = ‘<a name="_labelTop"></a>‘;
16         content += ‘<div id="navCategory" style="color:#D87093;">‘;
17         content += ‘<p style="font-size:16px;color:#CD853F;"><b>阅读目录</b></p>‘;
18         content += ‘<ol>‘;
19         for(var i=0; i<h2_list.length; i++)
20         {
21             var go_to_top = ‘<div style="text-align: right;"><a href="#_labelTop" style="color:#AFEEEE">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;
22             $(h2_list[i]).after(go_to_top);
23 
24             var h3_list = $(h2_list[i]).nextAll("h3");
25             var li3_content = ‘‘;
26             for(var j=0; j<h3_list.length; j++)
27             {
28                 var tmp = $(h3_list[j]).prevAll(‘h2‘).first();
29                 if(!tmp.is(h2_list[i]))
30                     break;
31                 var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
32                 $(h3_list[j]).before(li3_anchor);
33                 li3_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘;
34             }
35 
36             var li2_content = ‘‘;
37             if(li3_content.length > 0)
38                 li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ol>‘ + li3_content + ‘</ol></li>‘;
39             else
40                 li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘;
41             content += li2_content;
42         }
43         content += ‘</ol>‘;
44         content += ‘</div><p>&nbsp;</p>‘;
45         content += ‘<hr />‘;
46         if($(‘#cnblogs_post_body‘).length != 0 )
47         {
48             $($(‘#cnblogs_post_body‘)[0]).prepend(content);
49         }
50     }
51 }
52 
53 GenerateContentList();
54 </script>

可定制内容

第18行和第43行是捉对定义目录列表有序无序的内容参数,第38行也有类似的参数,可以自行定义

ol //无序
ul //有序

代码中的color属性都可以自行进行定义,

可以参考:HTML 颜色名

CSS属性是就近原则的,所以完全可以自己进行定制

【博客写作】写博客的好处,附博客园文章添加阅读目录的方法总结

标签:建立   function   最大   html   java   简单的   category   top   list   

原文地址:https://www.cnblogs.com/Detector/p/8424557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!