download amperage - download do código-fonte amperage

Amperage é um tema para o gerador de sites estáticos GoHugo. Este tema oferece os seguintes recursos:

Gera páginas AMP nativas.
PWA válido pronto para uso.
Dados estruturados automáticos.
Service Worker para cache de ativos, pré-busca de links e navegação offline.
Feito com SEO em mente.
Suporte multilíngue e i18n.
Destaque de código no tempo de construção.
Super rápido e leve.
Estilos mínimos e facilmente substituíveis.
Códigos de acesso AMP básicos e ganchos de renderização de markdown para facilidade de uso.
Menu de cabeçalho, índice e postagens relacionadas.
Usa fontes seguras para web por padrão.
Corte automático de imagens e geração de srcset.
Botões de compartilhamento social e tags de cartão OGP/Twitter.
Google Analytics personalizável com gtag.
Código de acesso configurável do Adsense.
Sistema de comentários agnóstico (exemplo Disqus).

❯ Instalação

Você pode usar o exampleSite fornecido para inicializar seu novo projeto:

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

❯ Pia de cozinha

Você pode conferir todos os componentes deste tema aqui e um site totalmente funcional usando Amperage aqui.

❯ Configuração

 # 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

❯ Personalize o logotipo

Para substituir o logotipo padrão, adicione a marcação svg em parcial layouts/partials/header/logo.html .

❯ Personalize estilos

Para substituir os estilos padrão, basta adicionar o arquivo assets/custom.scss ao seu projeto e ele será transpilado, minificado e anexado automaticamente. Os estilos padrão pesam apenas 5 KB (incluindo destaque de código), o que deixa você com 45 KB para personalizar ainda mais o tema.

❯ Habilitar instalação de service workers entre domínios

Para ativar o service worker entre domínios, você precisa substituir o arquivo 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 >

❯ Links do menu

No menu você pode definir links internos e externos. Para definir links externos você pode usar o arquivo 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

Se você deseja exibir uma página do seu próprio site no menu, você precisa adicionar ao frontmatter dessa página:

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

Essa distinção é importante porque o service worker precisa identificar as URLs internas para que possa carregá-las antecipadamente.

❯ Exibir anúncios

Para ativar anúncios, você precisa ter um código de editor do Adsense aprovado. Depois de obter um, configure-o no config.toml :

 adsensePublisher = " ca-pub-123456789 "

Agora você pode usar o shortcode amp-ad :

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

❯ Comentários

Devido aos requisitos de AMP, os comentários precisam ser hospedados em um domínio diferente do original. Amperage está pronto para receber uma URL para incorporar comentários no final de cada postagem. Isso é para atingir um grau de agnosticismo para o sistema de comentários.

Lembre-se que para redimensionar o iframe que contém a caixa de comentários você precisa enviar uma mensagem ao amp sentinela com a nova altura:

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

Se você deseja integrar seu próprio serviço de comentários, o Amperage adicionará os parâmetros id e url à solicitação para que você possa utilizá-los no iframe, caso precise de um id único. Um exemplo 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' ) ;
} ;

O que eu pessoalmente recomendo é usar um novo projeto Github Pages e consultá-lo em seu site principal. Aqui você pode ver um exemplo totalmente funcional usando Disqus.