【博客寫作】寫博客的好處，附博客園文章添加閱讀目錄的方法總結
阿新 • • 發佈：2018-02-07
html 自我成長 tps 原則 鼓勵 fun targe info .com
工程師為什麽要寫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> </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屬性是就近原則的，所以完全可以自己進行定制
【博客寫作】寫博客的好處，附博客園文章添加閱讀目錄的方法總結