ใน Markdown วิธีที่ดีที่สุดในการเชื่อมโยงไปยังส่วนของหน้าคือ #some_id คืออะไร


127

ฉันกำลังพยายามหาวิธีอ้างอิงส่วนอื่นของเพจด้วย Markdown ฉันจะทำให้มันใช้งานได้ถ้าฉันเพิ่มไฟล์

<div id="mylink" /> 

และสำหรับลิงค์ทำ:

[My link](#mylink)

แต่ฉันเดาว่ามีวิธีอื่นในการสร้างลิงก์ในหน้าใน Markdown ที่ไม่เกี่ยวข้องกับdivแท็กตรง

ความคิดใด ๆ ?


ฉันทำแบบที่คุณเคยทำมาตลอด
Joe Martinez

1
<div/>อาจทำให้ฟอร์แมตเตอร์ในส่วนที่เหลือของหน้าไม่พอใจ ใช้<a id="ident"/>. ดูคำตอบของฉัน
Steve Powell


ลองใช้ MultiMarkdown แทน มันมี[anchor][]ไวยากรณ์เพื่อทำสิ่งนี้ github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

คำตอบ:


166

ดูคำตอบนี้

โดยสรุปให้สร้างปลายทางด้วย

<a name="sometext"></a>

แทรกที่ใดก็ได้ในมาร์กอัปมาร์กดาวน์ของคุณ (ตัวอย่างเช่นในส่วนหัว:

## heading<a name="headin"></a>

และเชื่อมโยงโดยใช้ลิงก์ markdown:

[This is the link text](#headin)

หรือ

[some text](#sometext)

อย่าใช้<div>- สิ่งนี้จะทำให้เค้าโครงของเรนเดอร์หลาย ๆ คนสับสน

(ฉันเปลี่ยนid=เป็นname=ด้านบนดูคำตอบนี้สำหรับคำอธิบายที่น่าเบื่อ)


7
+1 ขอบคุณ เป็นเรื่องน่าเศร้าที่ไม่ได้ทำสิ่งนี้โดยอัตโนมัติ IMHO เปียกมาก
Marc-André Lafortune

มันน่าเกลียดเมื่อคุณต้องอ่านในโปรแกรมแก้ไขข้อความ แต่มันใช้งานได้ ไม่แน่ใจว่าเหตุใดจึงไม่ใช่คำตอบที่ยอมรับ
kayleeFrye_onDeck

การกำหนดจุดยึดแบบเก่า<a name="..." />นั้นล้าสมัย แต่สอดคล้องกับข้อกำหนด HTML ในภายหลัง หาก<div>อาจแสดงผลเป็นบล็อกที่รบกวน (บางทีถ้าด้วยเหตุผลที่ไม่เปิดเผย CSS ให้ขนาด) บางที<span>(องค์ประกอบแบบอินไลน์) อาจทำเคล็ดลับ?
Javier

25

ฉันเดาว่าสิ่งนี้ขึ้นอยู่กับสิ่งที่คุณใช้สร้าง html จาก markdown ของคุณ ฉันสังเกตเห็นว่า jekyll (ใช้โดยหน้า gihub.io ตามค่าเริ่มต้น) จะเพิ่มแอตทริบิวต์ id = "" ให้กับส่วนหัวใน html ที่สร้างขึ้นโดยอัตโนมัติ

ตัวอย่างเช่นหากคุณมาร์กดาวน์คือ

My header
---------

html ที่ได้จะมีลักษณะดังนี้:

<h2 id="my-header">My header</h2>

คุณจึงสามารถเชื่อมโยงได้ง่ายๆโดย [My link](#my-header)


นี่คือคำตอบที่ดีและสะอาดที่สุด Markdown เจ๋งมาก มันช่วยในการเขียนบล็อกอย่างรวดเร็ว ^ _ ^
Ashok MA

16

ด้วยMarkdown เวอร์ชัน PHPคุณยังสามารถเชื่อมโยงส่วนหัวกับตัวระบุแฟรกเมนต์ภายในเพจโดยใช้ไวยากรณ์ดังต่อไปนี้ตามที่ระบุไว้ที่นี่

Header 1            {#header1}
========

## Header 2 ##      {#header2}

แล้ว

[Link back to header 1](#header1)
[Link back to header 2](#header2)

น่าเสียดายที่ขณะนี้ไวยากรณ์นี้รองรับเฉพาะส่วนหัวเท่านั้น แต่อย่างน้อยก็อาจมีประโยชน์สำหรับการสร้างสารบัญ


3

จุดยึดปลายทางสำหรับลิงก์ในหน้า HTML อาจเป็นองค์ประกอบใดก็ได้ที่มีidแอตทริบิวต์ ดูลิงค์บนไซต์ W3C นี่คือคำพูดจากส่วนที่เกี่ยวข้อง:

จุดยึดปลายทางในเอกสาร HTML อาจถูกระบุโดยองค์ประกอบ A (ตั้งชื่อด้วยแอตทริบิวต์ name) หรือโดยองค์ประกอบอื่น ๆ (การตั้งชื่อด้วยแอตทริบิวต์ id)

Markdown ถือว่า HTML เป็น HTML (ดูInline HTML ) ดังนั้นคุณสามารถสร้างตัวระบุส่วนของคุณจากองค์ประกอบใดก็ได้ที่คุณต้องการ ตัวอย่างเช่นหากคุณต้องการเชื่อมโยงไปยังย่อหน้าเพียงแค่ตัดย่อหน้าในแท็กย่อหน้าแล้วใส่ id:

<p id="mylink">Lorem ipsum dolor sit amet...</p>

จากนั้นใช้ Markdown มาตรฐานของคุณ[My link](#mylink)เพื่อสร้างลิงก์ไปยังจุดยึดชิ้นส่วน วิธีนี้จะช่วยให้ HTML ของคุณสะอาดเนื่องจากไม่จำเป็นต้องมีมาร์กอัปเพิ่มเติม


จากประสบการณ์ของฉันโดยใช้<p>แท็กใน Markdown สามารถตัด CSS ของย่อหน้าปกติได้ ฉันจะบอกว่าใช้ด้วยความระมัดระวังฉันยังใหม่กับ Markdown แต่ก็มีนิสัยแปลก ๆ
2rs2ts

@ user691859 ฉันไม่แน่ใจว่าคุณหมายถึงอะไรโดย "การใช้<p>แท็กใน Markdown สามารถตัด CSS ของย่อหน้าปกติได้" Markdown รวมย่อหน้าใน<p>แท็กและละเว้นสิ่งที่มี<p>แท็กอยู่แล้ว ฉันไม่เห็นว่าสิ่งนี้จะส่งผลต่อ CSS อย่างไร ...
Mike

พฤติกรรมนี้ไม่แน่นอนสำหรับฉัน ใน tumblr การใช้ <p> สามารถ (ไม่เสมอไป) ตัดพฤติกรรมทั้งหมดนอกเหนือจากพฤติกรรมเฉพาะที่ฉันระบุ ฉันไม่รู้ว่าทำไม. <div> มักจะเหมือนกัน
2rs2ts

3

สำหรับทุกคนที่ใช้ Visual Studio Team Foundation Server (TFS) 2015 มันไม่ชอบการฝังตัว<a>หรือ<div>องค์ประกอบอย่างน้อยที่สุดในส่วนหัว นอกจากนี้ยังไม่ชอบอีโมจิในส่วนหัวด้วย:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

แปลเป็น:

<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>

ดังนั้นลิงก์ควรใช้สิ่งนั้นid(ซึ่งแบ่งส่วนขยายนี้และส่วนขยายการแสดงตัวอย่างอื่น ๆ ใน Visual Studio) หรือลบอิโมจิ:

Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration

โดยที่เวอร์ชันหลังทำงานได้ทั้งแบบออนไลน์ใน TFS และในการแสดงตัวอย่างมาร์กดาวน์ของ Visual Studio

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.