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

功能介绍:

一句话速览:

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

截图展示:

需求解读:

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

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

代码:

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

javascript:/* Page_TOC_0.2021-10-16 */!function(){"use strict";const e=["article","section","main","content","#article",".article","#main",".main","#content",".content","#post",".post","body"],n="h1, h2, h3, h4, h5, h6";let _;const l=()=>{const o=[];let _=0;for(const t of e)if(document.querySelectorAll(t).length){document.querySelectorAll(t).forEach(t=>{t.querySelectorAll(n).forEach(t=>{var e;o.push(t),t.id?t.dataset.headerMark=t.id:(e="toc_index_"+_++,t.dataset.headerMark=e,t.id=e)})});break}let l='<li class="toc_menu_item_title">Table of contents:</li>';if(o.length){let _=+o[0].tagName.replace(/H/g,""),n=0;o.forEach(t=>{var e=+t.tagName.replace(/H/g,"");n=n+e-_,n=n<0?0:n,_=e;const o=document.createElement("span");o.innerText=t.innerText,l+=`<li class="toc_menu_item toc_header_level_`+n+`"><a href="#`+t.dataset.headerMark+'">'+o.innerHTML+`</a></li>`})}else l+='<li class="toc_menu_item">[Here is empty.]</li>';return l+='<li class="toc_menu_item_footer">Power by <a href="https://meta.appinn.net/t/topic/25812" target="_blank">稻米鼠</a></li>',l};(()=>{const t=document.createElement("div");_=t.attachShadow({mode:"open"}),t.id="toc_menu_root",_.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, .1);border-radius: 18px;}#toc_menu_root > #toc_toggle_button:hover {background: rgba(233, 33, 33, .6);}#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_menu_root"><div id="toc_toggle_button"></div><ul id="toc_menu_list"></ul></div>`,document.querySelector("html").appendChild(t);const e=_.querySelector("#toc_menu_root"),o=_.querySelector("#toc_menu_list");o.innerHTML=l(),_.querySelector("#toc_toggle_button").addEventListener("click",()=>{e.classList.toggle("toc_hidden"),e.classList.contains("toc_hidden")?o.innerHTML="":o.innerHTML=l()})})()}();

油猴脚本:

额外有使用油猴脚本的另外一种实现。

特点:

  • 可以自动为所有页面加入 TOC 菜单
  • 默认处于折叠状态,需要时左上角触发点击展开
  • 可以设定全局添加,或者全局默认不添加
  • 即便全局默认不添加,在需要的时候,也可以临时加入 TOC 菜单

脚本地址:

https://r.izyx.xyz/#page_toc (此脚本也是付费的哦

使用方法:

基本使用:

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

菜单更新:

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

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

移动设备:

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

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

其他问题:

功能测试:

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

关于更新:

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

来源说明:

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

收费说明:

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

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

3 个赞

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

Screen-Appinn2021-09-13 11.04.21

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

1 个赞

小小的顶一下,加入了油猴子的实现

就是抬杠了

更改了滚动到标题的方式,避免了一些冲突,带来了一点点新问题(比如本帖,可能导致被顶部标题条挡住一点点)。

单击菜单之外区域菜单自动收回。

1 个赞