amperage Télécharger - amperage Code source télécharger

Ampérage est un thème pour le générateur de sites statiques GoHugo. Ce thème offre les fonctionnalités suivantes :

Génère des pages AMP natives.
PWA valide prête à l'emploi.
Données structurées automatiques.
Service Worker pour la mise en cache des actifs, la prélecture des liens et la navigation hors ligne.
Conçu en pensant au référencement.
Prise en charge multilingue et i18n.
Mise en évidence du code au moment de la construction.
Super rapide et léger.
Styles minimaux et facilement remplaçables.
Codes courts AMP de base et crochets de rendu markdown pour une utilisation facile.
Menu d'en-tête, table des matières et articles associés.
Utilise des polices Web sécurisées par défaut.
Recadrage automatique des images et génération de srcset.
Boutons de partage social et balises de carte OGP/Twitter.
Google Analytics personnalisable avec gtag.
Shortcode Adsense configurable.
Indépendant du système de commentaires (exemple Disqus).

❯Installation

Vous pouvez utiliser le exampleSite fourni pour démarrer votre nouveau projet :

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

❯ Évier de cuisine

Vous pouvez consulter tous les composants de ce thème ici et un site Web entièrement fonctionnel utilisant Amperage ici par votre serviteur.

❯ Configuration

 # 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

❯ Personnaliser le logo

Pour remplacer le logo par défaut, ajoutez le balisage svg sur le fichier partial layouts/partials/header/logo.html .

❯ Personnaliser les styles

Pour remplacer les styles par défaut, ajoutez simplement le fichier assets/custom.scss à votre projet et il sera transpilé, minifié et ajouté automatiquement. Les styles par défaut ne pèsent que 5 Ko (y compris la mise en évidence du code), ce qui vous laisse 45 Ko pour personnaliser davantage le thème.

❯ Activer l'installation d'un service worker inter-domaines

Pour activer le service Worker inter-domaines, vous devez remplacer le fichier 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 >

❯ Liens vers les menus

Dans le menu, vous pouvez définir des liens internes et externes. Pour définir des liens externes, vous pouvez utiliser le fichier 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 vous souhaitez afficher une page de votre propre site dans le menu, vous devez ajouter au frontmatter de cette page :

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

Cette distinction est importante car le service worker doit identifier les URL internes afin de pouvoir les charger avec impatience.

❯ Afficher des annonces

Pour activer les annonces, vous devez disposer d'un code d'éditeur Adsense approuvé. Une fois que vous en avez un, définissez-le dans le config.toml :

 adsensePublisher = " ca-pub-123456789 "

Vous pouvez maintenant utiliser le shortcode amp-ad :

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

❯ Commentaires

En raison des exigences AMP, les commentaires doivent être hébergés dans un domaine différent de l'original. Ampérage est prêt à recevoir une URL pour intégrer des commentaires à la fin de chaque publication. Il s’agit d’atteindre un certain degré d’agnosticité à l’égard du système de commentaires.

N'oubliez pas que pour redimensionner l'iframe contenant la zone de commentaire, vous devez envoyer un message à l'amp sentinel avec la nouvelle hauteur :

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

Si vous souhaitez intégrer votre propre service de commentaires, Amperage ajoutera les paramètres id et url à la requête afin que vous puissiez les utiliser sur l'iframe, au cas où vous auriez besoin d'un identifiant unique. Un exemple pour Disqus :

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

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

Ce que je recommande personnellement, c'est d'utiliser un nouveau projet Github Pages et de le référencer depuis votre site principal. Ici vous pouvez voir un exemple entièrement fonctionnel utilisant Disqus.