博客園爲文章添加目錄

因爲顯示效果並不理想，現已棄用，新的博客是基於LessIsMore模板定製而來。

0x01 效果展現

先給你們看一下最終的實現效果，若是你覺的還能夠，那麼請繼續閱讀。

在此首先要感謝marvin和asxinyu，我此次目錄的實現基本是結合了他們二人的成果，在此特別緻謝。下面是他們相關博客的連接。

【分享】博客美化(6)爲你的博文自動添加目錄

如何給你的爲知筆記添加一個漂亮的導航目錄

0x02 實現過程

基本原理在上面兩位大神的博客裏已經進行了詳細的介紹，這裏我就再也不累述。
這裏着重說一下我所更改的地方，在marvin的基礎上，參考asxinyu的實現，去掉了標題自動編號，由於我仍是喜歡本身來對標題進行編號。
更改目錄爲打開博客後自動展開（原來是默認關閉的）。

2.1 下載相關文件

• bootstrap.min.js

• marvin.nav.css

• marvin.nav.js

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）自定義標題

想不想要好看的文章標題呢？下面將介紹如何來自定義文章標題。

博客設置 -> 頁面定製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>

0x03 參考連接

http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html

http://www.cnblogs.com/marvin/p/ExtendWizNoteAutoNnavigation.html#autoid-5-2-0

2017-10-12 16:39:15 星期四