GitHub es muy popular Los desarrolladores que agregan gist a las páginas web se han vuelto muy populares, los gist se agregan en AMP HTML mediante el uso del componente amp-gist.
Scripts requeridos: Importación del componente amp-gist en el encabezado.
HTML
<script async custom-element="amp-gist" src= "https://cdn.ampproject.org/v0/amp-gist-0.1.js"> </script>
Atributos:
- data-gistid: ID de la esencia que se va a incrustar en la página.
- altura: La altura de la esencia.
- archivo de datos: muestra solo un archivo de la esencia.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-gist</title>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-gist/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the amp-gist component -->
<script async custom-element="amp-gist"
src="https://cdn.ampproject.org/v0/amp-gist-0.1.js">
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
amp-gist {
margin: 1rem;
}
</style>
</head>
<body>
<!-- Embed an entire gist. -->
<amp-gist data-gistid=
"b9bb35bc68df68259af94430f012425f"
layout="fixed-height" height="241">
</amp-gist>
<!-- Embed one file out of a gist
using the `data-file` attribute.
The `data-file` attribute is optional. -->
<amp-gist data-gistid=
"a19e811dcd7df10c4da0931641538497"
data-file="hi.c" layout="fixed-height"
height="197">
</amp-gist>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA