大家有用word或是雲端文件自動產生文章目錄吧～
它的原理很簡單，就是用階層標示出哪邊是第一層標題，哪邊是第二層標題。
然後用一個列表把所有的標題放在一起，只要點了列表他就會自動跳到相對應的標題。
那就先看怎麼使用吧!
catalog_generator_code說明
<div id="demo"></div>
<script type="text/javascript">
function generate_cat(){
var config ={
'catalog1_name':'catalog1', //catalog1可以改成階層一自訂的class名稱
'catalog2_name':'catalog2', //catalog2可以改成階層二自訂的class名稱
'target_id':'demo', //目錄產生在id='demo'的元素裡，demo可以改
'target_id_width':'200px',//目錄的寬度
'list_style':'none'//列表的形式，"decimal"是數字
};
start_cat(config);
}
</script>
<script src="https://gist.githack.com/joseph50807/f5b0cbb99237aa692d6f8428dc287f37/raw/35df7390816a0b6b1edde21f56e4784c65cb5ed5/catalog_generator.js"></script>
第一個部分div是標記目錄頁要產生的位置，你可以選擇放在文章最上面或是你有自己做一個浮動的框框，都可以。
第二個部分script generate_cat()是讓你可以自訂一些參數，我這邊只有設定兩個階層。
catalog 1_name是標出階層一所要用的class名稱，catalog2_name是標出階層二所要用的class名稱，可以依照你固有的或是你常用的方式幫class命名。
target_id就是你要產生目錄的位置的id，預設是demo就是上面那個div的id
target_id_width是目錄的寬度
list_style是目錄裡面的每一列前面的符號，預設是沒有的，"decimal"是阿拉伯數字，"disc"是實心的點點，"circle"是空心的點點
第三個部分的script就是已經寫好的script，start_cat()這個函式在裡面有定義，generate_cat()也是在裡面觸發的。
catalog_generator使用步驟
1.將上面的碼貼到你的網頁文章裡面
2.將階層一的所有文字加入階層一的class名稱
3.將階層二的所有文字加入階層二的class名稱
optional:如果嫌每次都要貼一次很麻煩，那你可以想辦法把script都貼到head裡面，變成全域的。
catalog_generator簡易除錯
Q:為什麼貼了沒有跑出來？
1.重貼一次，這次注意只要改英文字母和數字，符號都不要動!
2.檢查是不是有兩個同樣的id
3.檢查是不是貼上有亂碼
Q:為什麼列表有多(有少)
1.檢查是不是你要的標題都有正確的class名稱
2.檢查是不是你其他的東西用到一樣的calss名稱了
Q:我的沒有正確的跳轉
1.檢查列表裡面的href是不是跟目標的id相同
2.用id搜尋是不是有相同id
Q:我的還是沒跑出來需要深度檢查
1.f12打開來先檢查console裡面有沒有紅色錯誤
2.直接在console裡面打『generate_cat()』,這時候出現了的話就是在執行序列上有問題，你可以寄信給我。
3.上一步驟出現Uncaught TypeError的話，那也寄信給我吧。
沒有留言:
張貼留言