awesome-toc - 為網頁生成目錄的小工具

jopen 8年前發布 | 15K 次閱讀 前端技術 awesome-toc

awesome-toc

awesome-toc是一個為網頁生成目錄的小工具，也支持回到頂部的功能。

用法

<script type="text/javascript" src="/path/to/awesome-toc.min.js"></script>
<script type="text/javascript">
    $.awesome_toc({        
      autoDetectHeadings: true,
      enableToTopButton: true,
      title: "INDEX",
      css: {
          fontSize: "14px",
          largeFontSize: "18px",
      },
    });
</script>

依賴

jQuery。

在jquery 1.11和jquery 2.0中測試通過。

配置項

屬性 類型 說明
css.fontSize string 目錄項字體大小，"90%"、"16px"
css.largeFontSize string 標題字體大小
css.fontColor string 基本的字體顏色，"#999"、"red"
css.activeFontColor string 標題和當前active的目錄項的字體顏色
css.lineHeight string 目錄項的行高
css.backgroundColor string 目錄的背景顏色
css.zIndex int 目錄的z-index
title string 標題
windowMinWidth int 單位px。當窗口寬度低于此值時，不顯示目錄
sideBarId string 目錄的id，最好帶隨機字符，以防和網頁中id沖突/混淆
sideBarWidth string 目錄的寬度
sideBarPrefix string 目錄中生成的元素的class的前綴，
最好帶隨機字符，以防和網頁中id沖突/混淆
headingList array of string 識別哪些h*標簽
enableToTopButton bool 是否顯示“返回頂部”的按鈕
enableToc bool 是否生成目錄
overlay bool 是否以遮蓋方式顯示目錄
autoDetectHeadings bool 是否自動探測使用哪些h*標簽生成目錄
contentId string 若不為空，則根據這個id對應的元素的內容生成目錄
contentClass string 若不為空，則根據這個class對應
的第一個元素的內容生成目錄
displayNow bool 是否立即顯示目錄
topOffset int 單位px。有些網頁的菜單是固定在頂部的，
占有一定空間，該屬性值和菜單的高度應該一致。
如果設置的合理，點擊目錄項時，
頁面滾動后，標題不會被覆蓋
itemPrefix string 每個菜單項目的前綴，例如"- "

小書簽

首先開啟本地的服務：

$ cd awesome-toc
$ python -m SimpleHTTPServer

在瀏覽器中創建書簽，url使用下面的內容：

javascript:(function(){var a=function(a){var b=document.createElement("script");b.setAttribute("src",a+"?time="+Date.parse(new Date)),document.body.appendChild(b)};a("http://127.0.0.1:8000/build/loader.min.js")})();

示例：

其他

界面設計上參考了hexo-theme-next。

License

MIT


項目地址： https://github.com/someus/awesome-toc

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！