Viết nội dung

Định dạng Markdown và HTML

Hầu hết nội dung của chúng tôi trên DevSite đều được viết bằng Markdown. Đây là một định dạng viết được thiết kế để đơn giản và dễ đọc đối với con người ở dạng văn bản thuần tuý. DevSite tự động chuyển đổi Markdown sang HTML để hiển thị trên web.

Để tìm hiểu phiên bản Markdown tương đương của Google đối với các phần tử HTML thông thường, hãy sử dụng bảng thông tin tại go/g3mark-cheat. Bạn có thể truy cập vào tài liệu đầy đủ về Markdown của Google (còn gọi là CommonMark) tại đây.

Dưới đây là một số ví dụ:

Trường hợp nên dùng HTML thay vì Markdown

Có một số mục mà chúng tôi không dùng Markdown để viết, bao gồm:

• Bao gồm các tệp: Tất cả các tệp bao gồm phải là tệp HTML và do đó không được bao gồm bất kỳ phần tử nào được viết bằng Markdown. Để biết hướng dẫn về cách tạo tệp include, hãy xem phần Tái sử dụng nội dung trên nhiều trang.

• Bảng: Bảng Markdown có thể khó định dạng và duy trì, vì vậy chúng tôi sử dụng HTML cho bảng, ngay cả trong tệp Markdown.

• Hình ảnh: Việc sử dụng HTML cho hình ảnh giúp bạn linh hoạt hơn về định dạng và vị trí của hình ảnh. Xem hướng dẫn Xuất bản trên DevSite cho Hình ảnh.

• Zippies: Zippies (còn gọi là tiện ích có thể mở rộng trên Devsite) phải ở định dạng HTML và được bao bọc trong thẻ <div>.

Các định dạng nội dung phổ biến

Đường liên kết mở trong thẻ mới

Tuân thủ nguyên tắc về đường liên kết để biết khi nào nên mở đường liên kết trong cùng một thẻ so với thẻ mới. Nếu cần mở một đường liên kết trong thẻ mới, bạn có thể định dạng đường liên kết theo những cách sau:

Markdown

[Accessible content](/style/accessibility){:target="_blank"} 

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

Bảng

Để biết các loại bảng mà Devsite cung cấp và HTML tương ứng, hãy xem hướng dẫn Xuất bản trên DevSite cho Bảng.

Lưu ý:

• Nếu bạn không muốn bảng có đường viền, hãy sử dụng class="columns"

• Nếu bạn cần bảng có khoảng đệm và đường phân chia (như trang này), hãy dùng class="columns extra-padding" và dùng thẻ <hr> trong một hàng riêng giữa các hàng nội dung.

Túi có thể mở rộng

Đối với Workspace, chúng tôi sử dụng lớp arrow-icon để tạo kiểu cho zippy. Sau đây là ví dụ về một zippy (tiện ích có thể mở rộng) cho Workspace:

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

Để sử dụng mẫu này, hãy thay thế các biến sau:

• UNIQUE_ZIPPY_ID: Nhập một mã nhận dạng mô tả và duy nhất để bạn có thể trỏ trực tiếp đến zippy, ví dụ: direct-admin-access.
• ZIPPY_HEADING: Nhập văn bản mà người dùng sẽ thấy trước khi mở rộng thành phần có thể thu gọn.
• YOUR_CONTENT: Nhập nội dung mà người dùng sẽ thấy khi zippy được mở rộng.

Để biết thêm thông tin về tiện ích có thể mở rộng của DevSite, hãy xem hướng dẫn Xuất bản trên DevSite, Tiện ích: Có thể mở rộng.

Bao gồm nội dung được chia sẻ

Để sử dụng lại nội dung trên nhiều trang, bạn có thể sử dụng tính năng bao gồm. Đây là phiên bản DevSite của việc sử dụng đoạn mã trong nhiều bài viết trong Composer.

Để biết hướng dẫn về cách tạo tệp bao gồm và sử dụng tệp bao gồm trong nội dung, hãy xem bài viết Sử dụng lại nội dung trên nhiều trang.

Thêm điểm neo tuỳ chỉnh vào tiêu đề

DevSite tạo một thuộc tính mã nhận dạng HTML cho mọi tiêu đề. Để duy trì tính nhất quán trong trường hợp tiêu đề thay đổi, bạn có thể thêm một mã nhận dạng điểm neo tuỳ chỉnh vào tiêu đề bằng cách thêm {:#your-id} bên cạnh văn bản tiêu đề, ví dụ:

## Apply filters to your search results {:#apply-filters}

Lưu ý: Để tự động tạo mã nhận dạng điểm neo tuỳ chỉnh cho tất cả tiêu đề trong một tệp, hãy nhấn tổ hợp phím Command (\⌘) + H (Ctrl + H trên Windows). Các mã nhận dạng điểm neo tuỳ chỉnh hiện có sẽ không thay đổi.

Để biết thêm thông tin, hãy xem hướng dẫn xuất bản DevSite cho Mã nhận dạng tiêu đề.