Guías para formatos y tutoriales
Las guías y tutoriales se presentan en Markdown, con un texto preliminar adicional y formato en código corto.
Ubicación de la documentación
El contenido de amp.dev se extrae de dos repositorios, amp.dev y AMPHTML. Toda la documentación de referencia sobre los componentes se extrae de AMPHTML, ya sea de los componentes integrados o de las extensiones.
Hay otros documentos que se importan hacia amp.dev desde AMPHTML. Los cuales se muestran en este archivo. No actualice estos documentos en el repositorio de amp.dev, ¡sus cambios se sobrescribirán en las siguientes versiones!
Texto preliminar
El texto premiliminar se encuentra en la parte superior de cada guía y tutorial.
Ejemplo:
$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 | Es el título de su documento tal como aparecerá en la Tabla de contenidos. Escriba con mayúscula la primera letra de la primera palabra, excepto en el caso de “AMP” y otros nombres propios. Utilice el símbolo et “&” en lugar de la palabra “y”. |
$order | Define en qué lugar de la Tabla de contenidos aparece su documento. Posiblemente deba editar el “$order” en otros documentos para que aparezca en la posición correcta. |
formats | Hace una lista de las experiencias de AMP para las que su documento es importante. Si su documento era relevante para los sitios web e historias de AMP, pero no para los anuncios o el correo electrónico de AMP, colocaría lo siguiente en su texto preliminar: formatos yaml: - sitios web - historias |
author | ¡Usted es el autor! Utilice su nombre de usuario de GitHub. |
contributors | Sirve para mencionar a todas las personas que hayan contribuido en su documento. Este campo es opcional. |
description | Se utiliza para escribir una descripción breve de la guía o tutorial. Esto ayuda a la optimización de los motores de búsqueda, ¡permitiendo que su trabajo llegue a todas las personas que lo necesitan! |
tutorial | Agregue “tutorial: true” al texto preliminar para que el sitio web agregue el icono del tutorial junto a él. Los tutoriales se encuentran la parte inferior de su sección en la Tabla de contenidos. |
Códigos cortos
Para consultar una lista de códigos cortos y la manera de utilizarlos, vaya a documentation.md en GitHub.
Imágenes
¡amp.dev se desarrolló con AMP! Por lo tanto, nuestras imágenes deben coincidir con los criterios amp-img. El proceso de desarrollo utiliza la siguiente sintaxis para convertir las imágenes al formato adecuado amp-img.
Filtro de secciones
Algunos documentos pueden ser importantes para varios de los formatos de AMP, pero algunos formatos posiblemente requieran descripciones adicionales o información que no sea relevante para los demás. Puede filtrar estas secciones envolviéndolas con el siguiente código corto.
[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]
Sugerencias
Puede agregar sugerencias y textos destacados envolviendo el texto con el siguiente código corto:
[tip type="default"] Default tip [/tip] [tip type="important"] Important [/tip] [tip type="note"] Note [/tip] [tip type="read-on"] Read-on [/tip]
Fragmentos de código
Coloque los fragmentos de código dentro de los conjuntos con tres comillas simples, y especifique el idioma al final del primer conjunto de comillas simples.
```html
// code sample
wzxhzdk:1
wzxhzdk:2
Advertencia: los ejemplos inline están insertados directamente dentro de la página. Esto podría generar conflictos si los componentes ya se utilizan en la página (por ejemplo, `amp-consent`).
### Previsualización del Top-Frame
Use la previsualización del top-frame siempre que necesite especificar elementos del encabezado o definir estilos globales dentro de `
Hello AMP
``` [/example] Hello World
This is the cover page of this story.
First Page
This is the first page of this story.
-