社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103

全站通知:

浮动目录实现思路

阅读

    

2024-05-09更新

    

最新编辑:Lu_23333

阅读:

  

更新日期:2024-05-09

  

最新编辑:Lu_23333

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
Lu_23333
逗比的马老师

左侧浮动目录,响应式设计。较窄屏幕时显示为目录按钮,鼠标悬浮出现目录。

代码位于模板 {{TOC}}。TOC模板是纯CSS方案。如果附加JS,将可以跟随内容滚动目录,高亮当前项。(主要由ChatGPT编写)

此外,可以仅使用MediaWiki:HoverToc.js,它会附加样式和动态高亮。

目前的模板使用ResourceLoader加载JS,以提供目录滚动。

标题1

TOC模板的设计初衷是提供一个纯CSS的浮动目录方案,以最小的代价和修改实现功能。

页面内容


页面内容


页面内容

标题a

页面内容


页面内容


页面内容

标题2

标题b

页面内容


页面内容


页面内容

标题c

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

标题3

页面内容

页面内容

页面内容

页面内容


页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

标题4

页面内容



页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容 页面内容

页面内容

页面内容

页面内容

页面内容 页面内容

页面内容

页面内容

页面内容

页面内容