【小书签】一键为当前页面添加 TOC(页面内快速导航)

功能介绍:

一句话速览:

以小书签的形式快速为所浏览的页面添加 TOC,以便于在复杂内容间进行导航。

截图展示:

需求解读:

有时候我们阅读一篇网页,可能内容非常多,当然作者很细心的,为每一部分都添加了相应的标题,结构是非常清晰的。但是反复上下滚动去寻找自己需要的位置,依然是非常痛苦的。这时候我们就希望页面能够提供一个悬浮在某一侧的快速导览菜单,或者说标题列表,或者说提纲、大纲。专业点儿称这个为 TOC(Table of contents),再翻译回来就是目录……对于当前页面内容的目录。

当然这些奇奇怪怪的名词并不重要,重要的是可能页面本身并没有提供这种功能。所以为什么我们不自己给它添加一个呢?

代码:

复制如下代码,然后在浏览器的书签栏新建一个书签,把复制的代码当做网址粘贴进去。标题就写: TOC 吧。

javascript:(function(){/* page_toc - 0.2021.09.12 */const mainElSelectors=["article","section","main","content","#article",".article","#main",".main","#content",".content","#post",".post","body"],titleSelectors="h1, h2, h3, h4, h5, h6",headerEls=[];let tocIndex=0;for(const a of mainElSelectors)if(document.querySelectorAll(a).length){document.querySelectorAll(a).forEach(e=>{e.querySelectorAll(titleSelectors).forEach(e=>{var t;headerEls.push(e),e.id?e.dataset.headerMark=e.id:(t="toc_index_"+tocIndex++,e.dataset.headerMark=t,e.id=t)})});break}let menuCode='<li class="toc_menu_item_title">Table of contents:</li>';if(headerEls.length){let l=+headerEls[0].tagName.replace(/H/g,""),_=0;headerEls.forEach(e=>{var t=+e.tagName.replace(/H/g,"");_=_+t-l,_=_<0?0:_,l=t;const o=document.createElement("span");o.innerText=e.innerText,menuCode+=`<li class="toc_menu_item toc_header_level_`+_+`"><a href="#`+e.dataset.headerMark+'">'+o.innerHTML+`</a></li>`})}else menuCode+='<li class="toc_menu_item">[Here is empty.]</li>';menuCode+='<li class="toc_menu_item_footer">Power by <a href="https://meta.appinn.net/t/topic/25812" target="_blank">稻米鼠</a></li>';const tocRoot=(()=>{var e=document.querySelector("#toc_menu_root");if(e)return e;const t=document.createElement("div");return t.id="toc_menu_root",t.innerHTML=`<style>#toc_menu_root {position: fixed;left: 0;top: 0;max-width: 360px;height: 100%;z-index: 2147483647;backdrop-filter: blur(8px);}#toc_menu_root.toc_hidden {width: 18px;height: 18px;}#toc_menu_root.toc_hidden > ul#toc_menu_list {display: none;}#toc_menu_root > #toc_toggle_button {position: absolute;width: 36px;height: 36px;left: -18px;top: -18px;background: rgba(233, 33, 33, .6);border-radius: 18px;}#toc_menu_root > ul#toc_menu_list {box-sizing: border-box !important;margin: 0;padding: 24px 18px 18px;height: 100%;overflow: scroll;background: rgba(255, 255, 255, .9);box-shadow: 0 6px 18px rgba(0, 0, 0, .3);}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item,#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_title,#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_footer {list-style: none !important;margin: 0;padding: 0;font-size: 16px;border-left: 3px solid rgba(255, 255, 255, 0);}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_title {font-size: 22px;font-weight: 700;border-bottom: 1px solid #CCCCCF;margin-bottom: 5px;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item:hover {background: #F3F3F3;border-left: 3px solid #AAAAAC;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item > a,#toc_menu_root > ul#toc_menu_list > li.toc_menu_item > a:visited {display: block;padding: 2px .5em;font-size: 16px;font-weight: 400;line-height: 1.6;color: #222226;text-decoration: none;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item > a:hover,#toc_menu_root > ul#toc_menu_list > li.toc_menu_item > a:active {color: #FF88AA;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_0 > a,#toc_menu_root > ul#toc_menu_list > li.toc_header_level_0 > a:visited {font-weight: 700;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_1 {padding-left: 2em;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_2 {padding-left: 3.5em;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_3 {padding-left: 5em;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_4 {padding-left: 6.5em;}#toc_menu_root > ul#toc_menu_list > li.toc_header_level_5 {padding-left: 8em;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_footer {font-size: 14px;color: #99999C;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_footer > a {color: #AAAAAE;text-decoration: none;}#toc_menu_root > ul#toc_menu_list > li.toc_menu_item_footer > a:hover {color: #FF88AA;}</style><div id="toc_toggle_button"></div><ul id="toc_menu_list"></ul>`,document.querySelector("html").appendChild(t),t.querySelector("#toc_toggle_button").addEventListener("click",()=>{document.querySelector("#toc_menu_root").classList.toggle("toc_hidden")}),t})();tocRoot.querySelector("#toc_menu_list").innerHTML=menuCode;})()

使用方法:

基本使用:

在页面加载完成后,点击这个小书签,就会在页面左侧添加 TOC 菜单。点击其中的项目,可以在页面中快速导览。点击左上角的红色按钮,可以切换菜单的显示和隐藏。

菜单更新:

有一些页面的内容是动态变化的,比如滚动到底部又会加载出新的内容。那么新加载的内容并不会显示在菜单之中,这就让情况变得有一些尴尬。

遇到这种情况,你可以再点击一次小书签来更新菜单内容。

移动设备:

为什么使用小书签这种形式,首先我可以不用考虑它的触发时机,这会减少许多的麻烦。而这种小功能,我们日常用到的可能并不是特别多,那么小书签可以让代码并不需要在每一个页面中都进行加载,也能够节省一定的性能。

还有一个巨大的优势,就是在移动端的浏览器(部分主流浏览器)中也可以使用。使用方法是在浏览一个页面时点击地址栏,然后输入这个小书签的名称,比如按照我们上面保存的名称,那么你就输入 TOC,这时候浏览器会提示出对应的书签,点击它即可执行小书签的功能。这对于在移动端无法安装扩展的 Chrome 浏览器是非常友好的

其他问题:

功能测试:

为了方便大家进行测试,我特意在当前页面加入了清晰的标题。

关于更新:

小书签没有办法主动提示大家进行更新,所以你需要经常来这个页面看一看,在小书签的代码中我加入了版本号(更新日期),你可以通过它来判定是否需要进行更新。

来源说明:

这个脚本( 【油猴子】移动页面的阅读模式(Beta) )在开发的过程中遇到了一些问题,所以开发进度处于停滞状态。现在把其中的一些功能独立出来先给大家使用。

收费说明:

此小书签并非免费提供,但可以在短时间内免费试用。

如果你觉得好用,希望长期使用,愿意支持一下小老鼠的开发,那么希望你能够付费购买。

价格:

三元起步,上不封顶。(因为我说一杯咖啡经常有人不知道应该付多少钱,所以换一种比较通俗的说法吧)

付费方式:

请自助扫码付费。

AliPay-240 WePay-240 QQPay-240

3 Likes

不是我抬杠啊,论坛有这个功能的:

Screen-Appinn2021-09-13 11.04.21

当然你针对其他网站,那还是极好的功能。

1 Like