npm 包 jquery.tocify 使用教程

阅读时长 5 分钟读完

在前端开发中,我们常常需要实现类似于文章目录的功能来帮助用户快速定位到所需内容。而 jquery.tocify 是一个可轻松实现这一功能的 npm 包。

安装

使用 npm 进行安装:

初始化

在页面引入 jqueryjquery.tocify 后,可以通过以下代码进行初始化:

其中,#toc 是要渲染目录的 DOM 元素的 ID,selectors 是指定哪些标签将被用于生成目录,theme 是指定目录的样式主题,extendPage 控制目录是否会超出页面边界而自动滚动,highlightOffset 可以添加高亮偏移量。

示例

下面是一个完整示例代码:

-- -------------------- ---- -------
--------- -----
------
------
  -------------------- ------------
  ----- ---------------- --------------------------------------------------------------------------------------
  ------- -----------------------------------------------------
  ------- -----------------------------------------------------------------------------------------
-------
------
  ---- ------------------
    ---- ------------
      ---- -----------------
        ----------------- ---------
        ---------------
        -----------
        ----- --- ---------
        -------------- ------- --------------------------
        ------------
        -------------------
        --------------------------------------- -
  ------------------
    ---------- ---- --- ----
    ------ ------------
    ----------- ------
    ---------------- --
  ---
----------------
        -----------
        --------------------
        ----------------------- --------
------------
------------
  -------------------------- ------------------
  -------- ---------------- -----------------------------------------------------------------------------------------
  ---------- --------------------------------------------------------------
  ---------- --------------------------------------------------------------------------------------------------
-------------
------------
  ------- ---------------------
    ------- ---------------
      ------- --------------------
        ----------------------- ---------------
        ---------------------------
        -----------------------
        ----------- --- ---------------
        -------------------------- ------- --------------------------------------
        ------------------------
        -------------------------------
        --------------------------------------------------- -
  ------------------
    ---------- ---- --- ----
    ------ ------------
    ----------- ------
    ---------------- --
  ---
----------------------------
        -----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈