page's ToC (Table of Content) for docsify.
License: MIT License
𝑰 ❤️ Full Stack 𝑫𝒆𝒗𝒆𝒍𝒐𝒑𝒎𝒆𝒏𝒕!
✍️ 𝑰 𝒍𝒐𝒗𝒆 𝒔𝒉𝒂𝒓𝒊𝒏𝒈 any 𝒕𝒆𝒄𝒉 𝒔𝒕𝒂𝒄𝒌, 𝒚𝒐𝒖 𝒄𝒂𝒏 𝒄𝒉𝒆𝒄𝒌 𝒎𝒚 https://blog.jiapan.tw/ 𝒄𝒐𝒍𝒍𝒆𝒄𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝒎𝒐𝒓𝒆 𝒅𝒆𝒕𝒂𝒊𝒍𝒔.
document.querySelector(`#main ${window.$docsify.toc.target}`)If config like this:
{
tocMaxLevel: 6,
target: 'h1, h2, h3, h4, h5, h6'
}The selector#main h1, h2, h3, h4, h5, h6 will get h2-h5 of whole document and h1 in #main
Therefore, the following code seems more reasonable
const mainElement = document.querySelector('#main')
headings = mainElement.querySelectorAll(window.$docsify.toc.target)Adding <!-- {docsify-ignore-all} --> to a header doesn't work.
Adding the name of the header to the ignoreHeaders list doesn't work.
Also your links to the files in the readme point to 1.3.1 rather than 1.3.2 (neither version honours ignoreHeaders).
Hopefully I'm just doing it wrong, would be glad to hear how to fix this.
_coverpage.md里边的内容也显示了！
可以加个设置进行屏蔽么？默认下划线开头的，或者加一个配置项。
In my document's <head> I am loading a stylesheet with my custom tweaks to the ToC script's CSS. However, my changes are overridden by the script's own embedded CSS as it is imported using the suggested <script src="https://unpkg.com/docsify-plugin-toc"></script> at the end of my document.
How do I override the CSS provided with the script?
手机等窄屏界面下，本章目录虽然会折叠，但点击后会直接触发对应位置的条目，而非展开后再次互动
I am sorry to inform you that
Removing css loaded from js in the latest release v1.3.1
If you are loading .js without specifying a version number like this //unpkg.com/docsify-plugin-toc
Please according to the latest version of README to adjust your code.
页面刷新后定位不准，点击无法跳转，点其他标题再点回来变正常
I get this error in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
Please check the console here:
https://help.atrocore.com/#/
docsify-plugin-toc/src/main.css
Line 78 in 1f67750
docsify-plugin-toc/src/main.css
Line 57 in 1f67750
docsify-plugin-toc/src/main.css
Line 68 in 1f67750
如下图所示，文档标题过多的时候，层级展开就太长了，如果可以设置默认折叠那就要好很多
问题：
我一开始按照正常步骤添加插件，虽然TOC标题在网页中显示了，但是点击对应的多级标题无法跳转。
解决方法如下：
查看在自己的index.html中是否有以下红框中的代码
这一代码是我之前遇到docsify不能正常增加滚动条而添加的
但是这一部分代码与这个TOC插件相冲突，将红框中的代码去掉即可正常跳转，并且还是有进度条的哦~
When using firefox, the TOCs load properly for the first document that is being browsed, however, if documents are switched the TOCs do not update.
This issue was noticed on FF 84.0.2, however this issue was not seen on older versions of FF (tested with 78.6.1esr)
当点击右侧的目录好后，左侧的目录选中样式就会消失，这样的话就不知道当前是看到 那篇文章了。
I want this TOC to contain every heading including the H1.
But if I prefix target: 'h1, h2, h3... H1 headings still do not show.
Without this, the new TOC shows all the h2+ headings, but misses the h1s.
for a page with the layout
# Section A
## subA1
## subA2
# Section B
## subB1
## subB2
The toc shows as
subA1
subA2
subB1
subB2
With no indication that there is a major separator between them
code：
<script>
window.$docsify = {
name: '言念君子温其如玉',
repo: 'https://github.com/fatpo', //开启github图标
loadSidebar: true,
homepage: 'README.md',
showLevel: false,
toc: {
tocMaxLevel: 6,
target: 'h1, h2, h3, h4, h5, h6'
},
copyCode: {
buttonText : 'Copy to clipboard',
errorText : 'Error',
successText: 'Copied'
},
scrollToTop: {
auto: true,
text: 'Top',
right: 15,
bottom: 15,
offset: 300
},
search: {
paths: 'auto',
placeholder: '搜索',
noData: '找不到结果',
depth: 3,
},
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="https://unpkg.com/[email protected]/dist/docsify-plugin-toc.min.js"></script><!
By adding some tag like <!-- {docsify-toc-ignore} --> or <!-- {docsify-toc-ignore-all} --> to ignore a specific header or ignore all headers on a specific page like docsify sidebar custome config.
https://docsify.js.org/#/more-pages?id=ignoring-subheaders
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.