Thinh Nguyen's site
← Back to blog

Technical notes

Mẫu Cấu Trúc Viết Blog (Ví dụ Cuda Programming 00)

• 5 min read • By Tên Bạn

Bài viết này giải thích và cung cấp mẫu cấu trúc Markdown để bạn có thể tận dụng tối đa các tính năng của theme hiện tại (như Table of Contents, Code Block với nút Copy, hiển thị Tags).

#cuda #hướng dẫn #mẫu

Bài viết này được tạo ra nhằm mục đích giúp bạn hiểu cách hoạt động của theme blog đang sử dụng. Theme mà bạn đang dùng có tích hợp sẵn một số chức năng rất hay, tự động hiển thị dựa trên cấu trúc file Markdown của bạn.

Dưới đây là một số thành phần cơ bản và quan trọng nhất.

1. Front Matter (Phần Meta Data)

Phần trên cùng của bài viết này, nằm giữa cặp ba dấu gạch ngang (---), được gọi là Front Matter. Theme của bạn sử dụng các trường sau:

  • title: Tên bài viết sẽ được hiển thị to đầu bài (H1).
  • date: Ngày viết bài (sẽ được tự động định dạng).
  • author: Tên tác giả (Hiển thị “By [Tên]”).
  • description: Sapo hoặc tóm tắt ngắn gọn. Nó sẽ xuất hiện ngay dưới tiêu đề và trong thẻ meta SEO.
  • tags: Danh sách các thẻ. Sẽ được hiển thị dưới dạng badge #cuda, #hướng dẫn ở ngay đầu bài viết và dưới cùng của bài.

2. Table of Contents (Mục lục tự động)

Theme của bạn có tính năng hiển thị Mục lục bên thanh sidebar (bên phải nếu trên màn hình lớn) và có khả năng Scroll Spy (tự động highlight tiêu đề bạn đang đọc).

Để tính năng này hoạt động, bạn chỉ cần dùng các Heading 2 (##) và Heading 3 (###) theo chuẩn Markdown. Hệ thống Hugo sẽ tự động sinh HTML của Table of Contents.

Heading cấp 3 (Ví dụ)

Đây là một heading cấp 3 để bạn kiểm tra xem thanh mục lục bên phải có lùi đầu dòng hay không.

3. Code Block (Với nút Copy tự động)

Bạn có thể viết những đoạn code vào bài. Theme của bạn đã được lập trình sẵn bằng JavaScript để chèn một nút “Copy” ở góc phải mỗiblock code. Khi hover chuột vào code block, nút Copy sẽ hiện lên.

Ví dụ về một đoạn mã C/C++ dùng trong lập trình CUDA:

#include <stdio.h>

__global__ void helloCUDA() {
    printf("Hello from GPU thread %d\n", threadIdx.x);
}

int main() {
    // Gọi kernel với 1 block, 10 threads
    helloCUDA<<<1, 10>>>();
    
    // Đợi GPU hoàn thành công việc
    cudaDeviceSynchronize();
    return 0;
}

4. Typography cơ bản (Prose)

Vì theme có tích hợp plugin typography của Tailwind CSS (class .prose), bạn có thể sử dụng các văn bản in đậm, in nghiêng, danh sách,… một cách bình thường như mọi trình biên tập Markdown.

  • Đây là chữ in đậm.
  • Đây là chữ in nghiêng.
  • Link chèn trong bài: Google Analytics.

Đây là một blockquote (Thẻ trích dẫn lời nói hoặc lưu ý). Nó sẽ có format riềng biệt dựa vào class .prose.

5. Thanh hiển thị tiến độ đọc (Reading Progress Bar)

Bạn thử cuộn chuột lên xuống (scroll) bài viết này trên trang web. Hãy nhìn lên cạnh trên cùng của màn hình/trình duyệt, theme của bạn có làm một hiệu ứng thanh màu chạy ngang để hiển thị tiến độ đọc bài viết.

Khi bài viết càng dài, thanh này chạy càng chậm.

6. Hiệu ứng làm mờ khi xuất hiện (Reveal Animation)

Nội dung bài viết được bọc trong class .reveal, nên khi bạn vừa tải trang xong, nó sẽ có hiệu ứng mờ dần (fade-in) đi lên nhẹ một chút.

Tóm tắt lại: Cứ copy nguyên khối Front Matter ở đầu file này sang các file Markdown mới, điền nội dung vào và chú ý luôn dùng ## hoặc ### để chia các đoạn. Mục lục bên phải và các hiệu ứng nhỏ sẽ làm nốt phần việc còn lại!

7. Cách chèn Hình Ảnh vào bài viết

Trong Hugo, bạn không bắt buộc phải dùng CDN. Bạn có thể dùng cả ảnh tải lên trực tiếp lưu trong host, lẫn ảnh từ CDN/link ngoài. Dưới đây là 3 cách thông dụng nhất:

Cách 1: Dùng thư mục static (Phổ biến nhất)

Mọi file nằm trong thư mục static/ của dự án sẽ được copy thẳng ra thư mục gốc website khi build. Phù hợp cho những tấm ảnh dùng đi dùng lại hoặc để dùng chung.

  1. Bạn tạo một thư mục mới: static/images/ trong dự án.
  2. Bạn copy ảnh vào thư mục đó, ví dụ static/images/demo.png.
  3. Bạn gọi ảnh vào bài viết bằng đường dẫn bắt đầu với dấu gạch chéo /:
<!-- Ảnh nằm ở static/images/demo.png -->
![Mô tả hình ảnh](/images/demo.png)

Nếu bạn có sẵn link ảnh trên Imgur, Github, S3,… bạn cứ gắn thẳng link đó vào là được.

![Logo hãng NVIDIA từ CDN](https://upload.wikimedia.org/wikipedia/commons/2/21/Nvidia_logo.svg)

Mẹo: Gõ thử cú pháp của cách 2 này ra ngoài code block (bỏ dấu ```), bạn sẽ thấy logo NVIDIA hiện lên luôn ở đoạn này!

Cách 3: Hugo Page Bundles (Cách nâng cao, gọn gàng nhất)

Rất thích hợp khi 1 bài viết cần đi kèm chục tấm hình riêng tư chỉ dành cho bài viết đó:

  1. Tham khảo theo bài này, thay vì tạo file cuda_programming_00.md, bạn tạo một thư mục tên là cuda_programming_00/ ở trong content/blog/.
  2. Bên trong thư mục vừa tạo, bạn tạo file index.md để viết nội dung (như file hiện tại).
  3. Sau đó, cứ quăng mọi hình ảnh cần thiết vào cùng thư mục cuda_programming_00/ đó.
  4. Cách nhúng vào bài sẽ là gọi trực tiếp tên ảnh không có /:
<!-- Ảnh và bài viết (index.md) nằm chung cùng một thư mục -->
![Mô tả ảnh](hinh-minh-hoa-1.jpg)

8. Hỗ trợ hiển thị Công thức Toán học (KaTeX)

Theme của bạn đã được mình tích hợp module hiển thị Toán học siêu mượt (KaTeX). Tuy nhiên, để web ưu tiên tốc độ tải trang, toán học KHÔNG TỰ ĐỘNG BẬT trên mọi bài.

Nếu một bài viết cần gõ công thức Toán, bạn phải thêm dòng math: true vào thư mục Front Matter ở đầu bài (xem file mẫu này để hiểu).

Sau đó, bạn gõ Markdown như sau:

Sử dụng 1 ký hiệu $ cho toán trong dòng: Giá trị cực đại là $x_{max} = \frac{-b}{2a}$.

Sử dụng 2 ký hiệu $$ cho toán độc lập nguyên dòng: $$ f(x) = \int_{-\infty}^\infty \hat f(\xi),e^{2 \pi i \xi x} ,d\xi $$

Tags

#cuda #hướng dẫn #mẫu