Cú pháp Markdown và Frontmatter

Mỗi bài viết được tạo từ một file Markdown (.md) với hai phần chính: Frontmatter (khối metadata ở đầu file) và Nội dung (viết bằng cú pháp Markdown).

YAML Frontmatter

Đây là trái tim của mỗi bài viết, nơi bạn định nghĩa các thông tin quan trọng cho SEO và hiển thị. Frontmatter là một khối YAML nằm ở đầu file, được bao quanh bởi ---.

Các Thuộc tính

Thuộc tính	Bắt buộc	Kiểu dữ liệu	Ý nghĩa	Ví dụ
`title`	Có	`string`	Tiêu đề chính của bài viết. Được dùng cho thẻ `<title>` và `<h1>`.	`title: "Đầu tư Định lượng là gì?"`
`position`	Có	`number`	Thứ tự của bài viết trong chương. Hệ thống dựa vào đây để sắp xếp.	`position: 1`
`description`	Không	`string`	Mô tả ngắn (dưới 160 ký tự) cho SEO, hiển thị trong kết quả tìm kiếm.	`description: "Tìm hiểu về nguyên tắc cốt lõi..."`
`slug`	Không	`string`	Tùy chỉnh "slug" cho URL. Nếu bỏ trống, slug sẽ tự tạo từ tên file.	`slug: "intro-to-quant"`
`keywords`	Không	`string` / `array`	Danh sách các từ khóa SEO. Có thể là một chuỗi hoặc một mảng các chuỗi.	`keywords: "đầu tư, quant, tài chính"`

Template Mẫu

Bạn có thể sao chép và sử dụng mẫu dưới đây cho các bài viết mới.

yaml

---
title: "Tiêu đề Bài viết của bạn"
description: "Một mô tả ngắn gọn, hấp dẫn cho bài viết (tốt cho SEO)."
position: 1
slug: "ten-url-tuy-chinh"
keywords: "tu khoa 1, tu khoa 2, another keyword"
---

Nội dung bài viết của bạn bắt đầu ở đây...

Cú pháp Markdown

Chúng tôi hỗ trợ đầy đủ các cú pháp Markdown tiêu chuẩn (headings, lists, bold, italic, blockquotes, tables,...) và một số tính năng mở rộng.

Nút Bấm (Buttons)

Để tạo một nút bấm nổi bật, hãy sử dụng thẻ <a> với class cta-primary hoặc cta-secondary.

Ví dụ:

html

<a href="https://colab.research.google.com/" target="_blank" class="cta-primary">Mở trên Google Colab</a>
<a href="/books/quan-invest/chapter-02" class="cta-secondary">Xem Chương 2</a>

Tường Đăng nhập (Login Wall)

Để ẩn một phần nội dung và yêu cầu người dùng đăng nhập để xem, hãy chèn comment sau vào vị trí bạn muốn đặt tường chặn:

html

<!-- LOGIN_WALL -->

Ví dụ:

markdown

Đây là phần giới thiệu ai cũng có thể xem.

<!-- LOGIN_WALL -->

Đây là nội dung chuyên sâu chỉ dành cho thành viên đã đăng nhập.

Hệ thống sẽ tự động hiển thị một lời kêu gọi đăng nhập tại vị trí này đối với những người dùng chưa xác thực.

Toán học (Math Expressions)

Website hỗ trợ hiển thị công thức toán học thông qua thư viện KaTeX.

Inline Math (Công thức trong dòng): Bao quanh công thức bằng $.
Display Math (Công thức đứng độc lập): Bao quanh công thức bằng $$.

Ví dụ:

markdown

Công thức khối lượng - năng lượng:  $E = mc^2$ 

 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

Khối Mã (Code Block) & Copy

Website sử dụng PrismJS để highlight mã nguồn và tự động thêm nút "Copy". Các ngôn ngữ được hỗ trợ: python, javascript, typescript, bash, sql, json, markdown.

Ví dụ:

markdown

```python
import pandas as pd
df = pd.read_csv("data.csv")
```

Thẻ Thông Báo (Admonition)

Để tạo các thẻ thông báo nổi bật, hãy sử dụng thẻ <div> với thuộc tính data-component="admonition".

data-type: Loại thông báo (Hỗ trợ: note, tip, info, warning, danger, success).
data-title: Tiêu đề của thông báo.

Ví dụ:

html

<div data-component="admonition" data-type="warning" data-title="Lưu ý quan trọng">
Đây là nội dung lưu ý cảnh báo cho người dùng.
</div>

Banner Nổi Bật (Featured Collection Banner)

Sử dụng để chèn một banner quảng cáo hoặc bộ sưu tập nổi bật vào giữa bài viết hoặc tài liệu.

Ví dụ:

html

<div
  data-component="featured-collection-banner"
  data-background-featuredImage="https://images.unsplash.com/photo-xxx"
  data-title="Khai giảng khoá học Python"
  data-description="Từ tay mơ đến thành thạo Python cho phân tích dữ liệu..."
  data-button-text="Tìm hiểu thêm"
  data-button-link="/lp-khoa-hoc"
></div>

Thẻ Xem trước Mã (Code Preview Card)

Thành phần này được sử dụng chủ yếu trong phần Tài liệu (Docs) để hiển thị mô tả hàm, input/output và mã nguồn đầy đủ. Thuộc tính data-inputs, data-outputs, data-settings nhận giá trị là chuỗi JSON.

Ví dụ:

html

<div 
  data-component="code-preview-card"
  data-title="Hàm tính toán XYZ"
  data-filename="utils.py"
  data-description="Hàm này dùng để xử lý..."
  data-inputs='[{"name": "param_1", "type": "string", "description": "Tham số đầu vào"}]'
  data-outputs='[{"name": "result", "type": "object", "description": "Kết quả trả về"}]'
  data-settings='[{"name": "timeout", "value": "10s", "description": "Thời gian chờ tối đa"}]'
  data-full-code="def calculate_xyz(param_1):\n    return True"
  data-language="python"
></div>

Thành phần Thống Kê & Biểu Đồ (Dành cho Blog)

Hai thành phần đặc biệt dành riêng cho các bài viết trên Blog để hiển thị dữ liệu thống kê tự động.

Thẻ thống kê:

html

<div data-component="stats-cards"></div>

Biểu đồ lượt tải xuống:

html

<div data-component="downloads-chart"></div>

Hình Ảnh & Media

Video Nhúng: Bọc thẻ iframe trong div với class="video-responsive" để video hiển thị tốt trên mọi thiết bị.

html

<div class="video-responsive">
  <iframe src="https://www.youtube.com/embed/6kP2TTtEY9Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
</div>

Audio Player: Sử dụng thẻ <audio> của HTML để nhúng file âm thanh.

html

<audio controls src="/audio/sample-podcast-episode.mp3">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

Thành Phần Tương Tác (Accordion)

Sử dụng thẻ <details> và <summary> của HTML để tạo các mục có thể thu gọn (FAQ). Lưu ý: Nội dung bên trong <details> nên được bọc trong thẻ <div>.

html

<details>
  <summary>Đây là tiêu đề của mục. Bấm vào để mở/đóng.</summary>
  <div>
  Nội dung chi tiết nằm ở đây.
  </div>
</details>

<details open>
  <summary>Mục này được mặc định mở.</summary>
  <div>Nội dung...</div>
</details>

Sơ Đồ Mermaid

Nhúng sơ đồ trực tiếp bằng khối mã mermaid.

markdown

```mermaid
graph TD
    A[Bắt đầu] --> B{Có ý tưởng?};
    B -- Có --> C[Soạn thảo];
    C --> D[Xuất bản];
```

Dàn Dựng Dòng Thời Gian (Timeline)

Timeline Dọc (Có Đánh Số):

html

<div class="relative border-l-2 border-primary/30 ml-3 my-6 pl-6 space-y-6">
  <div class="relative">
    <div class="absolute -left-[35px] bg-primary text-primary-foreground rounded-full w-7 h-7 flex items-center justify-center font-bold shadow-sm ring-4 ring-background">1</div>
    <h4 class="text-base font-black tracking-tight text-primary mt-0 mb-1">Giai đoạn 1: Khởi tạo thông tin</h4>
    <p class="mb-1 text-sm"><strong>Hành động:</strong> Doanh nghiệp hoàn thiện, ban hành tài liệu báo cáo tài chính.</p>
    <p class="mb-0 text-sm"><strong>Mốc tham chiếu:</strong> Ngày ký tên, đóng dấu trên văn bản.</p>
  </div>
  <div class="relative">
    <div class="absolute -left-[35px] bg-primary text-primary-foreground rounded-full w-7 h-7 flex items-center justify-center font-bold shadow-sm ring-4 ring-background">2</div>
    <h4 class="text-base font-black tracking-tight text-primary mt-0 mb-1">Giai đoạn 2: Công bố chính thức</h4>
    <p class="mb-1 text-sm"><strong>Hành động:</strong> Tài liệu được đăng tải công khai lên các phương tiện theo quy định pháp luật.</p>
    <p class="mb-0 text-sm"><strong>Mốc tham chiếu:</strong> Dấu thời gian (timestamp) báo cáo tải lên hệ thống.</p>
  </div>
  <div class="relative">
    <div class="absolute -left-[35px] bg-primary text-primary-foreground rounded-full w-7 h-7 flex items-center justify-center font-bold shadow-sm ring-4 ring-background">3</div>
    <h4 class="text-base font-black tracking-tight text-primary mt-0 mb-1">Giai đoạn 3: Thu thập và lan truyền</h4>
    <p class="mb-1 text-sm"><strong>Hành động:</strong> Báo chí, truyền thông và nền tảng tài chính đăng tải bài viết.</p>
    <p class="mb-0 text-sm"><strong>Mốc tham chiếu:</strong> Thời gian xuất bản bài viết (thường có độ trễ).</p>
  </div>
  <div class="relative">
    <div class="absolute -left-[35px] bg-primary text-primary-foreground rounded-full w-7 h-7 flex items-center justify-center font-bold shadow-sm ring-4 ring-background">4</div>
    <h4 class="text-base font-black tracking-tight text-primary mt-0 mb-1">Giai đoạn 4: Chuẩn hóa dữ liệu</h4>
    <p class="mb-1 text-sm"><strong>Hành động:</strong> Số liệu gốc được bóc tách, tính toán vào cơ sở dữ liệu.</p>
    <p class="mb-0 text-sm"><strong>Mốc tham chiếu:</strong> Thời gian cập nhật mới nhất hiển thị trên biểu đồ.</p>
  </div>
</div>

Timeline Dọc (Tiêu chuẩn):

html

<div class="timeline-vertical">
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-time">2024</div>
      <h4>Giai đoạn 1</h4>
      <p>Mô tả giai đoạn...</p>
    </div>
  </div>
</div>

Timeline Ngang:

html

<div class="timeline-horizontal">
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-time">Q1 2024</div>
    <div class="timeline-label">Lên ý tưởng</div>
  </div>
</div>

Form Đăng Ký Bản Tin

Sử dụng thẻ tùy chỉnh để nhúng form đăng ký nhận bản tin.

html

Hướng dẫn Soạn thảo & Quản trị Nội dung

Mục lục

Cú pháp Markdown và Frontmatter