Descarga amperage - Descarga del código fuente amperage

Amperage es un tema para el generador de sitios estáticos GoHugo. Este tema proporciona las siguientes características:

Genera páginas AMP nativas.
PWA válida lista para usar.
Datos estructurados automáticos.
Trabajador de servicios para almacenamiento en caché de activos, captación previa de enlaces y navegación sin conexión.
Hecho pensando en el SEO.
Soporte multilenguaje y i18n.
Resaltado de código en el tiempo de compilación.
Súper rápido y liviano.
Estilos minimalistas y fácilmente reemplazables.
Códigos cortos de AMP básicos y ganchos de renderizado de rebajas para facilitar su uso.
Menú de encabezado, tabla de contenido y publicaciones relacionadas.
Utiliza fuentes seguras para la web de forma predeterminada.
Recorte automático de imágenes y generación de srcset.
Botones para compartir en redes sociales y etiquetas de tarjetas OGP/Twitter.
Google Analytics personalizable con gtag.
Código abreviado de Adsense configurable.
Agnóstico del sistema de comentarios (ejemplo de Disqus).

❯ Instalación

Puede utilizar el exampleSite proporcionado para iniciar su nuevo proyecto:

git clone https://github.com/asurbernardo/amperage.git

mkdir -p new-site/themes/amperage

mv amperage/exampleSite/ * new-site
mv amperage/ * new-site/themes/amperage

cd new-site

hugo serve

❯ fregadero de la cocina

Puede consultar todos los componentes de este tema aquí y un sitio web completamente funcional que utiliza Amperage aquí.

❯ Configuración

 # Default language if you have a multi-language setup
DefaultContentLanguage = " en "

baseURL = " https://example.com "
theme = " amperage "
pygmentsUseClasses = true

# Number of posts shown per page
paginate = 10

# Language sections
[ languages ]
    [ languages . en ]
        contentDir = " content "
        languageName = " English "
        languageCode = " en "
        title = " Amperage theme ⚡ "
        description = " This is an example page for the Amperage theme! "
        weight = 1
    [ languages . es ]
        contentDir = " content/spanish "
        languageName = " Español "
        languageCode = " es "
        title = " Tema Amperage ⚡ "
        description = " Esta es una página de ejemplo para el tema Amperage! "
        weight = 2

# Menu elements
[[ menu . main ]]
    identifier = " hugo "
    name = " Hugo "
    url = " https://gohugo.io "
    weight = 10
[[ menu . main ]]
    identifier = " github "
    name = " GitHub "
    url = " https://github.com/asurbernardo/amperage "
    weight = 10

# Enable only tags taxonomy
[ taxonomies ]
    tag = " tags "

[ params ]
    copyright = " Amperage " # Name shown on footer copyright
    themeColor = " #333 " # Theme color displayed on mobile browsers

    # Default AMP components for the whole site
    ampElements = [ " amp-analytics " , " amp-social-share " , " amp-install-serviceworker " , " amp-iframe " ]

    # Google Analytics code
    googleAnalytics = " UA-128498798-1 "

    # Adsense publisher code
    adsensePublisher = " ca-pub-123456789 "

    # Comments Iframe URL
    commentsEmbedUrl = " https://comments.example.com "

    # Social sites for metatags
    facebookSite = " example "
    twitterSite = " @example "

    # Structured data elements
    socialProfiles = [ " https://twitter.com/example " , " https://www.linkedin.com/in/example/ " , " https://github.com/example " ]

    alternatePageName = " Amperage example "
    organizationLogo = " /logo.png "
    organizationName = " Asur "

    publisherName = " amperage "
    publisherLogo = " /logo-amp-article.png "
    publisherLogoWidth = 600
    publisherLogoHeight = 60

# Generate json to use as search index
[ outputs ]
    home = [ " HTML " , " RSS " , " SearchIndex " ]

[ outputFormats ]
    [ outputFormats . SearchIndex ]
        mediaType = " application/json "
        baseName = " search "
        isPlainText = true
        notAlternative = true

# Enable unsafe mode to be able to use HTML on markdown
[ markup ]
    [ markup . goldmark ]
        [ markup . goldmark . renderer ]
            unsafe = true

❯ Personalizar logotipo

Para anular el logotipo predeterminado, agregue el marcado svg en los layouts/partials/header/logo.html .

❯ Personalizar estilos

Para anular los estilos predeterminados, simplemente agregue el archivo assets/custom.scss a su proyecto y se transpilará, minimizará y agregará automáticamente. Los estilos predeterminados solo pesan 5 KB (incluido el resaltado de código), lo que le deja con 45 KB para personalizar aún más el tema.

❯ Habilitar la instalación del trabajador de servicio entre dominios

Para habilitar el trabajador de servicio entre dominios, debe anular el archivo static/install-sw.html :

 < amp-install-serviceworker
  src =" https://your-site.com/sw.js "
  data-iframe-src =" https://your-site.com/install-sw.html "
  layout =" nodisplay " >
</ amp-install-serviceworker >

❯ Enlaces al menú

En el menú puede configurar enlaces internos y externos. Para configurar enlaces externos, puede utilizar el archivo config.toml :

[[ menu . main ]]
    identifier = " hugo "
    name = " Hugo "
    url = " https://gohugo.io "
    weight = 10
[[ menu . main ]]
    identifier = " github "
    name = " GitHub "
    url = " https://github.com/asurbernardo/amperage "
    weight = 10

Si desea mostrar una página de su propio sitio en el menú, debe agregar al inicio de esa página:

[ languages . es ]
    [ menu . main ]
        name = " Your title for the menu "
        weight = 20

Esta distinción es importante porque el trabajador del servicio necesita identificar las URL internas para poder cargarlas con entusiasmo.

❯ Mostrar anuncios

Para habilitar anuncios es necesario tener un código de editor de Adsense aprobado. Una vez que obtenga uno, configúrelo en config.toml :

 adsensePublisher = " ca-pub-123456789 "

Ahora puedes usar el código corto amp-ad :

 {{< amp-adsense
    width="320"
    height="320"
    layout="fixed"
    slot="123456789" >}}

❯ Comentarios

Debido a los requisitos de AMP, los comentarios deben alojarse en un dominio diferente al original. Amperage está listo para recibir una URL para insertar comentarios al final de cada publicación. Esto es para lograr un grado de agnosticidad para el sistema de comentarios.

Recuerde que para cambiar el tamaño del iframe que contiene el cuadro de comentarios debe enviar un mensaje al amp centinela con la nueva altura:

 window . requestAnimationFrame ( ( ) => {
    window . parent . postMessage ( {
    sentinel : 'amp' ,
    type : 'embed-size' ,
    height : msg . data . height
    } , '*' ) ;
} ) ;

Si desea integrar su propio servicio de comentarios, Amperage agregará los parámetros id y url a la solicitud para que pueda usarlos en el iframe, en caso de que necesite una identificación única. Un ejemplo para Disqus:

 var urlParams = new URLSearchParams ( window . location . search ) ;

var disqus_config = function ( ) {
    this . page . url = urlParams . get ( 'url' ) ;
    this . page . identifier = urlParams . get ( 'id' ) ;
} ;

Lo que recomiendo personalmente es utilizar un nuevo proyecto de Github Pages y referirlo desde su sitio principal. Aquí puedes ver un ejemplo completamente funcional usando Disqus.