blinkfox / hexo-theme-matery

A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问:http://blinkfox.com
https://blinkfox.github.io/
Apache License 2.0
5.23k stars 1.25k forks source link

文章内锚点无法跳转,只能跳一级标题五级标题六级标题,且不支持中文 #748

Closed limitlm closed 2 years ago

limitlm commented 2 years ago

image 如图markdown文章使用 [文章内部锚点](#二级标题) 文章内部锚点 无法跳转文章内部锚点 猜测的原因是因为id对应不上 html里面h1,h5,h6的id就是对应markdown文章内一级标题五级标题六级标题的文本 测试:文章有个六级标题,名字是test 使用 [跳转到test](#test) 结果确实能够成功跳转 而html内h2,h3,h4的id自动生成为“toc-heading-序号”,与markdown中文对应不上导致无法跳转 另一个问题是markdown内使用 [跳转到顶部](#顶部) 在生成的html中会被替换成 [跳转到顶部](#%E9%A1%B6%E9%83%A8) 导致不支持中文锚点跳转 这个情况在next主题上没有出现过 所以应该是matery主题出现了bug

limitlm commented 2 years ago

image 原因是这个,toc目录为了支持中文跳转,特地写了函数为每个h2,h3,h4标题创建英文id 所有开启toc目录就不能使用文章内部锚点跳转 想使用文章内部锚点跳转就得关闭toc功能 有没有两者兼容的方法呢

appotry commented 2 years ago

butterfly 主题支持中文锚点没问题,可以参考butterfly主题

appotry commented 2 years ago

看着已经可以支持中文,需要修改一下

https://github.com/tscanlin/tocbot/pull/84

Fixed Issue: [#81](https://github.com/tscanlin/tocbot/issues/81) [#82](https://github.com/tscanlin/tocbot/issues/82)

In the tocbot/src/js/scroll-smooth/index.js

var tgt = document.querySelector('[id="' + target.split('#').join('') + '"]')

When heading is nonASCII, a.herf will be encoded, but id attribute will be not encoded, it leads to not finding the tgt element by id.

For example, WMI读取硬件信息 will encoded to WMI%E8%AF%BB%E5%8F%96%E7%A1%AC%E4%BB%B6%E4%BF%A1%E6%81%AF, but its id attribute is still WMI读取硬件信息, so document.querySelector('[id="WMI%E8%AF%BB%E5%8F%96%E7%A1%AC%E4%BB%B6%E4%BF%A1%E6%81%AF"]') can't find element, should be document.querySelector('[id="WMI读取硬件信息"]').

After I add a decoding, it works on nonASCII heading.

// DecodeURI for nonASCII hashes, they was encoded, but id was not encoded, it lead to not finding the tgt element by id.
var tgt = document.querySelector('[id="' + decodeURI(target).split('#').join('') + '"]')
appotry commented 2 years ago

https://github.com/blinkfox/hexo-theme-matery/pull/779

已经提交修复, 测试可用 自定制修改

limitlm commented 2 years ago

原来只要删掉那个生成id的函数就能解决,属实没想到