Sử dụng Shortcodes trong Markdown

Shortcodes là các mã ngắn mà bạn có thể nhúng vào tệp Markdown của mình để tạo nội dung phức tạp một cách dễ dàng mà không cần viết HTML hoặc mã tùy chỉnh.

Shortcodes là gì?

Shortcodes là các placeholder được thay thế bằng nội dung phức tạp hơn khi xử lý Markdown. Chúng phổ biến trong các trình tạo trang web tĩnh như Hugo và Jekyll.

Định dạng Cơ bản

Hugo Shortcodes

{{< youtube dQw4w9WgXcQ >}}

{{< tweet 1234567890 >}}

{{< figure src="/images/photo.jpg" title="Ảnh đẹp" >}}

Jekyll Includes

{% include image.html url="/images/photo.jpg" caption="Ảnh đẹp" %}

{% include alert.html type="info" text="Đây là thông báo thông tin" %}

Shortcodes Tùy chỉnh

Tạo Shortcode trong Hugo

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

Sử dụng:

{{< alert type="warning" >}}
Cảnh báo quan trọng!
{{< /alert >}}

Shortcodes Nhiều dòng

{{< code language="python" >}}
def hello_world():
    print("Xin chào thế giới!")
{{< /code >}}

Ví dụ Phổ biến

Nhúng Video

{{< youtube "dQw4w9WgXcQ" >}}

{{< vimeo 123456789 >}}

Thư viện Ảnh

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

Hộp Thông tin

{{< note >}}
Đây là ghi chú quan trọng cho người đọc.
{{< /note >}}

{{< warning >}}
Xin vui lòng chú ý điểm này!
{{< /warning >}}

Thực hành Tốt nhất

1. Tính Nhất quán: Sử dụng quy ước đặt tên rõ ràng
2. Tài liệu: Ghi lại các tham số có sẵn và ví dụ sử dụng
3. Xử lý Lỗi: Cung cấp tham số mặc định và thông báo lỗi rõ ràng
4. Hiệu suất: Tránh các hoạt động phức tạp trong Shortcodes
5. Khả năng Tiếp cận: Đảm bảo HTML được tạo ra có thể truy cập

Kết luận

Shortcodes là cách mạnh mẽ để mở rộng chức năng Markdown mà không làm phức tạp cấu trúc tài liệu. Chúng thúc đẩy khả năng tái sử dụng, tính nhất quán và khả năng bảo trì trong các dự án nội dung.

Tài nguyên Bổ sung

• Hướng dẫn Hugo Shortcodes
• Jekyll Includes
• Docusaurus MDX