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

DiYingisaDer commented 5 months ago

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

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

DiYingisaDer commented 5 months ago

@Meekdai 已在此提交问题

DiYingisaDer commented 5 months ago

正在编辑blog，在线等

Meekdai commented 5 months ago

这是因为在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 commented 5 months ago

在issue中也同样适用。

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

DiYingisaDer commented 5 months ago

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

Meekdai commented 5 months ago

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

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

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

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

DiYingisaDer commented 5 months ago

感谢！我抽时间试一下

获取 Outlook for iOShttps://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

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

字体颜色

― Reply to this email directly, view it on GitHubhttps://github.com/Meekdai/Gmeek/issues/127#issuecomment-2200187152, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A57SNDCH37LO6YKR4T5YXALZKFLWFAVCNFSM6AAAAABKFQRHUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMBQGE4DOMJVGI. You are receiving this because you authored the thread.Message ID: @.***>

Meekdai commented 5 months ago

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

DiYingisaDer commented 5 months ago

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

Meekdai commented 5 months ago

@DiYingisaDer

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

DiYingisaDer commented 5 months ago

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

DiYingisaDer commented 5 months ago

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

Meekdai commented 5 months ago

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

DiYingisaDer commented 5 months ago

@Meekdai 我在寻找搭建侧边目录的方法时，发现了一个用CSS搭建的这个相对简介大方些的源链接

DiYingisaDer commented 5 months ago

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

DiYingisaDer commented 5 months ago

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

Meekdai commented 5 months ago

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

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

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

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

DiYingisaDer commented 5 months ago

@Meekdai 感谢！

Meekdai / Gmeek

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

字体颜色