请问如何在blog文章内实现标题跳转功能

[DiYingisaDer]

您好，请教一个问题 我使用以下两种代码来实现页面的标题跳转，在Issue的预览界面成功进行跳转，可在Gmeek博客文章里却无效，请问该如何解决？

<a href="#A01">A001</a> <span id="A01">A001</span>和 # A01 [A01](#A01)

[DiYingisaDer]

@Meekdai 已在此提交问题

[DiYingisaDer]

正在编辑blog，在线等

[Meekdai]

这是因为在markdown渲染为HTML的时候，github的API会自动添加user-content-，如下链接，所以你需要修改为<a href="#user-content-a0001">A001</a>

https://diyingisader.github.io/zang_diying.github.io/post/Gmeek%20-bo-ke-%20-%20-yu-fa-%E3%80%81-dai-ma-%E3%80%81config-she-zhi-de-jian-dan-hua-jiao-cheng.html#user-content-a0001

[Meekdai]

在issue中也同样适用。

https://github.com/DiYingisaDer/zang_diying.github.io/issues/7#user-content-a0001

[DiYingisaDer]

是通过链接定位的？如何设置对应的跳转代码

[Meekdai]

我给你做了一个例子
https://blog.meekdai.com/post/markdown-ce-shi-ye-mian.html

里面的字体颜色是做了跳转的。代码如下。

<a href="#user-content-字体颜色">字体颜色</a>

<h2 id="字体颜色">字体颜色</h2>

[DiYingisaDer]

感谢！我抽时间试一下 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: Meekdai ***@***.***> 发送时间: Monday, July 1, 2024 9:38:42 PM 收件人: Meekdai/Gmeek ***@***.***> 抄送: Zang.帝樱 ***@***.***>; Author ***@***.***> 主题: Re: [Meekdai/Gmeek] 请问如何在blog文章内实现标题跳转功能 (Issue #127) 我给你做了一个例子 https://blog.meekdai.com/post/markdown-ce-shi-ye-mian.html 里面的字体颜色是做了跳转的。代码如下。 <a href="#user-content-字体颜色">字体颜色</a> <h2 id="字体颜色">字体颜色</h2> ― Reply to this email directly, view it on GitHub<#127 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A57SNDCH37LO6YKR4T5YXALZKFLWFAVCNFSM6AAAAABKFQRHUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMBQGE4DOMJVGI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Meekdai]

看看下面这个页面右侧的TOC功能是不是你想要的？
https://blog.meekdai.com/post/markdown-ce-shi-ye-mian.html

[DiYingisaDer]

@Meekdai 是的，昨天我试了一下吧Html的代码复制修改，可是失败了，您发的这个页面今天也不在右侧显示了，请问如何实现的？请问能否做成和此链接内相似的导航栏？https://www.runoob.com/try/try.php?filename=trycss_navbar_vertical&basepath=0

[Meekdai]

@DiYingisaDer

看上面的图片，这个页面的TOC功能一直都在啊，我做了移动端适配的，当宽度小于1500px会自动添加在文章上方而不是悬浮在右侧，所以你用电脑浏览器查看就可以了。

[DiYingisaDer]

@Meekdai

一个问题：浏览器缩放90%可以正常显示，但在浏览器缩放到100%以上时，目录会回到文章内。

[DiYingisaDer]

部分笔记本用回回选125%的Windows缩放比例。
125%的windows缩放比例，浏览器中只能在90%缩放下才能看到右侧目录
100%的windows缩放比例，可在100缩放下正常显示右侧目录

[Meekdai]

应该是125%之后，屏幕的宽度小于1500px了，我看看稍微适当再改一下，这个TOC是写的一个Gmeek的插件。

[DiYingisaDer]

@Meekdai
我在寻找搭建侧边目录的方法时，发现了一个用CSS搭建的

这个相对简介大方些的源链接

[DiYingisaDer]

@Meekdai 但是无法在Gmeek中使用
请问您做的这个有上传源代码到博客吗？我想试验一下

[DiYingisaDer]

@Meekdai 很抱歉，我复制过的那个没有效果，

[Meekdai]

你尝试在你的issue最后一行添加如下代码

<!-- ##{"script":"<script src='https://blog.meekdai.com/assets/GmeekTOC.js'></script>"}## -->

GmeekTOC.js这个就是一个插件，只要你的issue里面有一些二级三级四级这样的标题，它就自动抓取生成TOC。目前是修改这个宽度到1250px了，应该大部分电脑都可以悬浮在右侧。

另外你喜欢菜鸟教程那种的，你也可以在我这个插件上修改。后续我会详细写一篇如何使用插件的文章，以及如何制作自己的插件。

[DiYingisaDer]

@Meekdai 感谢！