MarkDown页内跳转
上一篇博文里跟大家一起啃了啃 Markdown 的语法,其实已经可以满足写博文的基本需求了。Markdown 的本意是想让博主们专注内容的撰写而不是排版,但是如果硬要想做出更漂亮的排版,就需要偷偷学习一些黑魔法👊🎩。
有时候一篇博文太长,我们会想建立一个目录,让小伙伴们能在宏观上把握全文的同时又可以自由的进行页内跳转,立即穿越到自己感兴趣的段子。今天就来聊一聊构建一个支持页内跳转的目录都有些什么奇技淫巧😏。
方法一:Markdown 和 HTML 混编
废话不多说直接看代码:
1 | * [主标题1](#1) |
主标题1
文本内容。。。副标题1.1
文本内容。。。次级副标题1.1.1
文本内容。。。副标题1.2
这是为了演示id也可以设置成*英文*字母 效果:主标题1
副标题1.1
次级副标题1.1.1
副标题1.2
主标题1
文本内容。。。
副标题1.1
文本内容。。。
次级副标题1.1.1
文本内容。。。
副标题1.2
这是为了演示id也可以设置成英文字母
方法二:Markdown 和 HTML 混编,利用 HTML 元素创建 “锚”
其实第一种方法里已经有 “锚” 的概念了。看如下代码:
1 | * [主标题1](#1) |
主标题1
文本内容。。。
副标题1.1
文本内容。。。
次级副标题1.1.1
文本内容。。。
副标题1.2
这是为了演示id也可以设置成英文字母
注意:”锚” 可以是 p 元素也可以是 a 元素也可以是 span 元素等等,”锚” 的下面建议空一行再写其他内容。因为效果和前面那个例子完全一样所以这里就不演示了。
方法三:Markdown 原生支持的页内跳转?
看代码:
1 | * [Cat and dog](#cat-and-dog) |
Cat and dog
一只单身狗和一只高冷猫的故事。。。
Cat
有一天高冷猫遇见了单身狗。。。
A little cat
高冷猫生的很小巧但是脾气不是很好。。。
Dog
可是,单身狗喜欢上了高冷猫。。。
Theo 知道自己作文水平有限😂,客观先别急着笑,看下这段代码的效果:
Cat and dog
Cat
A little cat
Dog
Cat and dog
一只单身狗和一只高冷猫的故事。。。
Cat
有一天高冷猫遇见了单身狗。。。
A little cat
高冷猫生的很小巧但是脾气不是很好。。。
Dog
从此以后,单身狗喜欢上了高冷猫。。。
注意:Theo 编辑 Markdown 文本时使用的是 Sublime Text 3,测试页面显示效果时用的是一个叫 OmniMarkupPreviewer 的插件。在进行本地测试的时候 Theo 发现,如果单纯的用 OmniMarkupPreviewer 预览,这种写法的页内跳转是没有效果的。但是如果搭建本地 Jekyll 服务器,再用网页浏览器打开,跳转是有效的。另外,在 Github 上直接用这种 Markdown 语法书写,也是可以正常跳转的。
因此结论就是你在浏览这段 Demo 时应该可以正常页内跳转,但是如果你书写并本地测试时发现无法正常跳转也不要感到稀奇,关于这个问题的解释可以引用知乎上的一个回答:
Markdown是没有一个所谓的规范的(作者都不支持这么做),所以某些特性需要写作工具自己支持才可以。所以有可能A的markdown到B上就无法正确显示了。
OK,这些构造支持页内跳转目录的黑魔法你都学会了吗,快去活动活动手指,写一篇附带目录的长篇博文吧 O(∩_∩)O 哈哈~
著作权声明
博客内的文章如无特殊声明均为 Theo 原创,转载请保留原文链接,谢谢。