AMP

Hướng dẫn & thực hành định dạng

Các hướng dẫn và thực hành được gửi trong Markdown, với một front matter bổ sung và định dạng mã ngắn.

Địa chỉ tài liệu

Nội dung trên amp.dev được kéo từ hai kho lưu trữ, amp.devAMPHTML. Mọi tài liệu tham khảo trong các thành phần đều được kéo từ AMPHTML, từ các thành phần tích hợp hoặc mở rộng.

Có một vài loại tài liệu khác được nhập vào amp.dev từ AMPHTML. Chúng được liệt kê trong tập tin này. Không cập nhật các tài liệu này trong kho lưu trữ amp.dev – các thay đổi của bạn sẽ bị ghi đè trên các lần dựng sau đó!

Front matter

Front matter được hiển thị ở đầu mỗi bài hướng dẫn và thực hành.

Ví dụ:

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title Tiêu đề của tài liệu của bạn như được hiển thị trong phần mục lục. Viết hoa chữ đầu tiên của từ đầu tiên, ngoại trừ “AMP” và các danh từ riêng khác. Sử dụng ký tự & thay cho từ and (và).
$order Quy định vị trí của tài liệu của bạn trong phần mục lục. Bạn có thể cần sửa $order trong các tài liệu khác để đảm bảo nó được hiển thị ở đúng vị trí.
formats Liệt kê các trải nghiệm AMP liên quan đến tài liệu của bạn. Nếu tài liệu của bạn liên quan đến các website AMP và câu chuyện AMP, nhưng không phải là quảng cáo AMP hoặc email AMP, front matter của bạn sẽ trông như thế này: yaml formats: - websites - stories
author Tác giả là bạn! Sử dụng tên người dùng GitHub của bạn.
contributors Liệt kê bất cứ ai đã đóng góp vào tài liệu của bạn. Trường này không bắt buộc.
description Viết một mô tả ngắn về bài hướng dẫn hoặc thực hành của bạn. Việc này sẽ giúp tối ưu công cụ tìm kiếm, và đưa bài viết của bạn đến với những người cần nó!
tutorial Thêm tutorial: true vào front matter cho website để thêm biểu tượng thực hành vào cạnh nó. Các bài thực hành được đặt ở cuối phần của chúng trong mục lục.

Mã ngắn

Để xem danh sách các mã ngắn và ứng dụng của chúng, hãy đọc documentation.md trên GitHub.

Ảnh

amp.dev được xây dựng với AMP! Do đó, các ảnh của chúng tôi phải phù hợp với tiêu chí amp-img. Quy trình xây dựng sử dụng cú pháp sau để chuyển đổi ảnh sang định dạng amp-img chuẩn.

Image of basic amp script tutorial starter app

Lọc các phần

Một số tài liệu có thể liên quan cho nhiều định dạng AMP, nhưng một số định dạng có thể cần được giải thích thêm hoặc chứa những thông tin không liên quan đến các định dạng khác. Bạn có thể lọc các phần này bằng cách gói chúng trong mã ngắn sau.

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
[/filter]

[filter formats="stories"]
This is visible for [stories](?format=stories).
[/filter]

Mẹo

Bạn có thể thêm mẹo và chú ý bằng cách gói văn bản trong mã ngắn sau:

[tip type="default"]
Default tip
[/tip]

[tip type="important"]
Important
[/tip]

[tip type="note"]
Note
[/tip]

[tip type="read-on"]
Read-on
[/tip]

Trích đoạn code

Đặt trích đoạn code trong nhóm 3 dấu huyền (backtick), quy định ngôn ngữ ở cuối nhóm dấu huyền đầu tiên.

```html
  // code sample

wzxhzdk:1



wzxhzdk:2



Cảnh báo: ví dụ inline được nhúng trực tiếp vào trang. Điều này có thể gây xung đột nếu các thành phần đã được sử dụng trên trang này rồi (ví dụ `amp-consent`).

### Xem trước Top-Frame

Sử dụng xem trước top-frame mỗi khi bạn cần quy định các yếu tố đầu mục hoặc quy định phong cách toàn cục trong `
    
    
      

Hello AMP

``` [/example]
Nó trông như thế này: [example preview="top-frame" playground="true"] wzxhzdk:3
Mở đoạn mã này trong sân thực hành
### Câu chuyện AMP Sử dụng `preview="top-frame"` cùng với `orientation="portrait"` để xem trước các Câu chuyện AMP.
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
Nó trông như thế này: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
Mở đoạn mã này trong sân thực hành
### URL tuyệt đối cho Email AMP Lưu ý cách chúng tôi sử dụng để quy định URL điểm cuối tuyệt đối nếu code được nhúng trong một email AMP.
```html
``` [/example]
Nó trông như thế này: [example preview="top-frame" playground="true"] wzxhzdk:5
Mở đoạn mã này trong sân thực hành
### Thoát khuôn mẫu mustache Đây là một ví dụ `top-frame` sử dụng một điểm cuối từ xa. Khuôn mẫu mustache cần được thoát trong các ví dụ sử dụng :
```html ``` [/example]
Nó trông như thế này: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
Mở đoạn mã này trong sân thực hành
## Liên kết Bạn có thể liên kết đến các trang khác với cú pháp liên kết markdown tiêu chuẩn: wzxhzdk:7 Khi liên kết đến một trang khác trên amp.dev, tham chiếu sẽ là một đường dẫn tập tin tương đối đến tập tin mục tiêu. ### Anchor Liên kết đến các phần cụ thể trong một tài liệu sử dụng các anchor: wzxhzdk:8 Vui lòng tạo mục tiêu anchor bằng `