Hướng Dẫn & Demo Toàn Bộ Shortcodes Trên Giao Diện LoveIt
“Các shortcodes của LoveIt giúp nâng cao trải nghiệm hiển thị nội dung phong phú mà không cần viết thêm mã HTML phức tạp.”
Giao diện LoveIt cung cấp một bộ công cụ shortcodes đa dạng giúp chúng ta dễ dàng trình bày bài viết chuẩn đẹp, tích hợp sơ đồ, âm nhạc, biểu đồ và các ô ghi chú ấn tượng.
Dưới đây là tài liệu tổng hợp và demo trực quan toàn bộ 16 shortcodes có sẵn trong hệ thống.
1. THẺ GHI CHÚ ADMONITION
Shortcode admonition giúp tạo các hộp thông báo phân loại theo màu sắc và biểu tượng.
Các loại Admonition hỗ trợ:
note, abstract, info, tip, success, question, warning, failure, danger, bug, example, quote.
Cú pháp Markdown:
{{< admonition type="tip" title="Tiêu đề thông báo" open=true >}}
Nội dung bên trong ô thông báo...
{{< /admonition >}}2. SƠ ĐỒ ĐỘNG MERMAID
Sử dụng khối mã ```mermaid cho phép tạo sơ đồ quy trình, luồng dữ liệu hoặc biểu đồ trình tự trực quan.
Cú pháp Markdown:
```mermaid
flowchart LR
Start[Khởi tạo] --> Process[Xử lý dữ liệu]
Process --> Condition{Kiểm tra}
Condition -- Hợp lệ --> Finish[Hoàn thành]
Condition -- Lỗi --> Retry[Thử lại]
Retry -.-> Process
---
## 3. TÙY CHỈNH KIỂU DÁNG CƠ BẢN STYLE
Shortcode `style` giúp chúng ta can thiệp trực tiếp các thuộc tính CSS cho một đoạn văn bản hoặc khối nội dung.
Đoạn văn này được tùy chỉnh màu đỏ nổi bật và chữ in đậm thông qua shortcode style.
### Cú pháp Markdown:
```markdown
{{< style "color: #e74c3c; font-weight: bold;" p >}}
Nội dung tùy chỉnh CSS...
{{< /style >}}4. HIỆU ỨNG GÕ CHỮ TỰ ĐỘNG TYPEIT
Shortcode typeit tạo hiệu ứng gõ phím hoạt hình cho văn bản hoặc đoạn mã nguồn.
Cú pháp Markdown:
{{< typeit >}}
Nội dung hiển thị dạng gõ chữ tự động...
{{< /typeit >}}5. THẺ PHIÊN BẢN VERSION
Shortcode version hiển thị các huy hiệu đánh dấu phiên bản cập nhật kèm màu sắc tương ứng.
- Phiên bản mới:
- Phiên bản thay đổi:
- Phiên bản ngưng hỗ trợ:
Cú pháp Markdown:
{{< version 0.3.0 new >}}
{{< version 0.2.5 changed >}}6. THẺ NHÂN VẬT PERSON
Shortcode person giúp tạo thẻ giới thiệu thông tin cá nhân hoặc tác giả dạng card.
Nguyễn Ngọc TínCú pháp Markdown:
{{< person url="https://github.com/ngoctinn" name="Nguyễn Ngọc Tín" text="Backend Engineer" picture="/images/avatar.jpg" >}}7. LIÊN KẾT TÙY CHỈNH LINK
Shortcode link hỗ trợ tạo liên kết nâng cao kèm thuộc tính hiển thị.
Cú pháp Markdown:
{{< link href="https://github.com/ngoctinn" content="Nội dung hiển thị" title="Tiêu đề liên kết" >}}8. HÌNH ẢNH NÂNG CAO IMAGE
Shortcode image tạo hình ảnh có phản hồi kích thước, tự động làm lightbox xem ảnh phóng to và chú thích bên dưới.
Cú pháp Markdown:
{{< image src="/images/avatar.jpg" alt="Mô tả ảnh" caption="Chú thích" width="150px" >}}9. BIỂU ĐỒ ECHARTS
Shortcode echarts render các biểu đồ thống kê trực quan dạng Bar, Line hoặc Pie bằng cấu trúc dữ liệu JSON.
Cú pháp Markdown:
{{< echarts >}}
{"title":{"text":"Thống kê"},"xAxis":{"data":["Python","Java","TypeScript"]},"yAxis":{},"series":[{"type":"bar","data":[40,30,30]}]}
{{< /echarts >}}10. TRÌNH PHÁT NHẠC MUSIC
Shortcode music nhúng trình phát nhạc trực tuyến MetingJS trên bài viết.
Cú pháp Markdown:
{{< music url="/music/song.mp3" name="Tên bài hát" artist="Ca sĩ" cover="/images/cover.jpg" >}}11. BẢNG TỔNG HỢP DANH SÁCH 16 SHORTCODES
| Tên Shortcode | Chức năng chính | Ví dụ sử dụng tiêu biểu |
|---|---|---|
| admonition | Tạo khung thông báo phân loại | {{< admonition tip "Mẹo" >}}...{{< /admonition >}} |
| mermaid | Vẽ sơ đồ quy trình và trình tự | ```mermaid flowchart LR ... ``` |
| style | Định dạng CSS trực tiếp cho văn bản | {{< style "color: red;" p >}}...{{< /style >}} |
| typeit | Hiệu ứng gõ chữ hoạt hình | {{< typeit >}}Hello World{{< /typeit >}} |
| version | Huy hiệu đánh dấu phiên bản | {{< version 0.3.0 new >}} |
| person | Thẻ giới thiệu tác giả | {{< person name="Ngọc Tín" url="..." >}} |
| link | Liên kết tùy chỉnh | {{< link href="..." content="..." >}} |
| image | Hiển thị ảnh kèm chú thích & lightbox | {{< image src="..." caption="..." >}} |
| echarts | Vẽ biểu đồ thống kê dạng JSON | {{< echarts >}} { ... } {{< /echarts >}} |
| music | Nhúng trình phát nhạc APlayer | {{< music url="..." name="..." >}} |
| gist | Nhúng GitHub Gist snippet | {{< gist username gist_id >}} |
| bilibili | Nhúng video từ Bilibili | {{< bilibili bvid >}} |
| mapbox | Nhúng bản đồ tương tác Mapbox | {{< mapbox lng lat zoom >}} |
| highlight | Tô màu cú pháp mã nguồn | {{< highlight python >}}...{{< /highlight >}} |
| raw | Chèn trực tiếp mã HTML thô | {{< raw >}}<div>HTML</div>{{< /raw >}} |
| script | Thực thi đoạn mã JavaScript nội tuyến | {{< script >}}console.log("OK"){{< /script >}} |
LỜI KẾT
Việc kết hợp linh hoạt các shortcodes sẵn có trên LoveIt giúp chúng ta tạo nên những bài viết kỹ thuật chuyên nghiệp, giàu hình ảnh và tối ưu trải nghiệm đọc cho người dùng.