การใช้ Shortcodes ใน Markdown

Shortcodes เป็นรหัสสั้นๆ ที่คุณสามารถฝังตัวในไฟล์ Markdown ของคุณเพื่อสร้างเนื้อหาที่ซับซ้อนได้อย่างง่ายดายโดยไม่ต้องเขียน HTML หรือโค้ดแบบกำหนดเอง

Shortcodes คืออะไร?

Shortcodes เป็นตัวยึดตำแหน่งที่ถูกแทนที่ด้วยเนื้อหาที่ซับซ้อนมากขึ้นเมื่อประมวลผล Markdown พวกเขาเป็นที่นิยมในเครื่องมือสร้างเว็บไซต์คงที่เช่น Hugo และ Jekyll

รูปแบบพื้นฐาน

Hugo Shortcodes

{{< youtube dQw4w9WgXcQ >}}

{{< tweet 1234567890 >}}

{{< figure src="/images/photo.jpg" title="ภาพสวยๆ" >}}

Jekyll Includes

{% include image.html url="/images/photo.jpg" caption="ภาพสวยๆ" %}

{% include alert.html type="info" text="นี่คือข้อความข้อมูล" %}

Shortcodes แบบกำหนดเอง

การสร้าง Shortcode ใน Hugo

<!-- layouts/shortcodes/alert.html -->
<div class="alert alert-{{ .Get "type" }}">
  {{ .Inner }}
</div>

การใช้งาน:

{{< alert type="warning" >}}
คำเตือนสำคัญ!
{{< /alert >}}

Shortcodes หลายบรรทัด

{{< code language="python" >}}
def hello_world():
    print("สวัสดีชาวโลก!")
{{< /code >}}

ตัวอย่างทั่วไป

การฝังวิดีโอ

{{< youtube "dQw4w9WgXcQ" >}}

{{< vimeo 123456789 >}}

แกลเลอรีภาพ

{{< gallery >}}
  {{< figure src="image1.jpg" >}}
  {{< figure src="image2.jpg" >}}
  {{< figure src="image3.jpg" >}}
{{< /gallery >}}

กล่องข้อมูล

{{< note >}}
นี่คือหมายเหตุสำคัญสำหรับผู้อ่าน
{{< /note >}}

{{< warning >}}
โปรดใส่ใจกับประเด็นนี้!
{{< /warning >}}

แนวทางปฏิบัติที่ดีที่สุด

1. ความสอดคล้อง: ใช้หลักการตั้งชื่อที่ชัดเจน
2. เอกสาร: จัดทำเอกสารพารามิเตอร์ที่มีและตัวอย่างการใช้งาน
3. การจัดการข้อผิดพลาด: ให้พารามิเตอร์เริ่มต้นและข้อความแสดงข้อผิดพลาดที่ชัดเจน
4. ประสิทธิภาพ: หลีกเลี่ยงการดำเนินการที่ซับซ้อนใน Shortcodes
5. การเข้าถึง: ตรวจสอบให้แน่ใจว่า HTML ที่สร้างขึ้นสามารถเข้าถึงได้

สรุป

Shortcodes เป็นวิธีที่มีประสิทธิภาพในการขยายฟังก์ชัน Markdown โดยไม่ทำให้โครงสร้างเอกสารซับซ้อน พวกเขาส่งเสริมการใช้ซ้ำ ความสอดคล้อง และความสามารถในการบำรุงรักษาในโครงการเนื้อหา

แหล่งข้อมูลเพิ่มเติม

• คู่มือ Hugo Shortcodes
• Jekyll Includes
• Docusaurus MDX