amperage
v3.0
Stromstärke ist ein Thema für den statischen Site-Generator GoHugo. Dieses Thema bietet die folgenden Funktionen:
Sie können die bereitgestellte exampleSite verwenden, um Ihr neues Projekt zu booten:
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 serveSie können sich hier alle Komponenten dieses Themes ansehen und eine voll funktionsfähige Website mit Amperage hier von mir.
# 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 Um das Standardlogo zu überschreiben, fügen Sie das SVG-Markup zu den layouts/partials/header/logo.html hinzu.
Um Standardstile zu überschreiben, fügen Sie einfach die Datei assets/custom.scss zu Ihrem Projekt hinzu und sie wird automatisch transpiliert, minimiert und angehängt. Standardstile wiegen nur 5 KB (einschließlich Code-Hervorhebung), so dass Ihnen 45 KB zur weiteren Anpassung des Themas zur Verfügung stehen.
Um den domänenübergreifenden Service Worker zu aktivieren, müssen Sie die Datei static/install-sw.html überschreiben:
< 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 > Im Menü können Sie interne und externe Links setzen. Um externe Links zu setzen, können Sie die Datei config.toml verwenden:
[[ 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 = 10Wenn Sie eine Seite Ihrer eigenen Website im Menü anzeigen möchten, müssen Sie der Titelseite dieser Seite Folgendes hinzufügen:
[ languages . es ]
[ menu . main ]
name = " Your title for the menu "
weight = 20Diese Unterscheidung ist wichtig, da der Servicemitarbeiter die internen URLs identifizieren muss, damit er sie eifrig laden kann.
Um Anzeigen zu aktivieren, benötigen Sie einen genehmigten AdSense-Publisher-Code. Sobald Sie eines erhalten, legen Sie es in der config.toml fest:
adsensePublisher = " ca-pub-123456789 " Jetzt können Sie den amp-ad Shortcode verwenden:
{{< amp-adsense
width="320"
height="320"
layout="fixed"
slot="123456789" >}}
Aufgrund der AMP-Anforderungen müssen die Kommentare in einer anderen Domain als der Originaldomäne gehostet werden. Amperage ist bereit, am Ende jedes Beitrags eine URL zum Einbetten von Kommentaren zu erhalten. Dadurch soll eine gewisse Agnostik für das Kommentarsystem erreicht werden.
Denken Sie daran, dass Sie zum Ändern der Größe des Iframes, der das Kommentarfeld enthält, eine Nachricht mit der neuen Höhe an den Amp-Sentinel senden müssen:
window . requestAnimationFrame ( ( ) => {
window . parent . postMessage ( {
sentinel : 'amp' ,
type : 'embed-size' ,
height : msg . data . height
} , '*' ) ;
} ) ; Wenn Sie Ihren eigenen Kommentardienst integrieren möchten, fügt Amperage der Anfrage die Parameter id und url hinzu, damit Sie sie im Iframe verwenden können, falls Sie eine eindeutige ID benötigen. Ein Beispiel für Disqus:
var urlParams = new URLSearchParams ( window . location . search ) ;
var disqus_config = function ( ) {
this . page . url = urlParams . get ( 'url' ) ;
this . page . identifier = urlParams . get ( 'id' ) ;
} ;Was ich persönlich empfehle, ist, ein neues Github Pages-Projekt zu verwenden und es von Ihrer Hauptseite aus zu verweisen. Hier sehen Sie ein voll funktionsfähiges Beispiel mit Disqus.
Wenn Sie eine Funktionsanfrage haben oder einen Fehler gefunden haben, können Sie gerne ein neues Problem eröffnen.
