hugo theme hamburg

Hambourg

Hambourg est un thème de blog simple et épuré pour Hugo basé sur le thème de Vienne de Keichi.

Captures d'écran

Bureau

Mobile

Aperçu

Les fonctionnalités notables que je dirais à quelqu'un sont :

• Conception cohérente
  • Design épuré et plat
  • Facile à personnaliser
  • Conception réactive (adaptée aux appareils mobiles)
  • Icônes géniales de police
• Navigation
  • Balises
  • Menu
• Prise en charge de plusieurs auteurs
• Multilingue (dans tous les sens ! Informations sur l'auteur, menus, pages, articles, tags)
• Analytics avec n'importe quel service basé sur JavaScript-Snipped (Google Analytics, Matomo/Piwik, ...)
• Codes courts supplémentaires

Installation

Dans le répertoire de votre site Hugo, exécutez :

git clone https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg

Le thème devrait maintenant être dans themes/hamburg/ .

Configuration

Vous pouvez spécifier les options suivantes dans config.toml (ou config.yaml / config.json ) de votre site pour utiliser les fonctionnalités de ce thème :

 baseurl = " http://your-site.com "
defaultContentLanguage = " en "
defaultContentLanguageInSubdir = " true "
title = " Your site title "
theme = " hamburg "

[ params ]
    # Short subtitle/tagline. This is displayed in the header.
    themecolor = " #hexcolor " # Defines the tab color in Chrome for Android.
    # To load additional CSS styles
    customCSS = [ ' hamburg.css ' ]
    # Show this very user-friendly and absolutely not annoying GDPR notice at the bottom of the page
    ShowGDPRNotice = true
	subtitle = " The great example site of the hugo-hamburg-theme "
	# Since 0.57.0 there's the concept of "main sections". The files for the section "posts" are in "./content/posts/".
	mainSections = [ " posts " ]

[ languages ]
    [ languages . en ]
        languageCode = " en "
        languageName = " English "
        subtitle = " A simple subtitle "
        # Copyright notice. This is displayer in the footer.
        copyright = " © some license "
        [ languages . en . menu ]
            [[ languages . en . menu . main ]]
                name = " About "
                identifier = " about "
                url = " pages/about "
    [ languages . de ]
        languageCode = " de "
        languageName = " Deutsch "
        subtitle = " Ein einfacher Untertitel "
        copyright = " © eine Lizenz "
        [ languages . de . menu ]
            [[ languages . de . menu . main ]]
                name = " Über "
                identifier = " about "
                url = " pages/about "

Paramètres supplémentaires du thème vienna

Il y a d'autres paramètres du thème original de Vienne que je n'ai pas utilisés jusqu'à présent. La plupart d'entre eux pourraient ne plus fonctionner , il n'y a donc aucune garantie :

[ params ]
    # Social accounts. Link to these accounts are displayed in the header and
    # footer.
    twitter = " Your Twitter username "
    github = " Your GitHub username "
    gitlab = " Your GitLab username "
    linkedin = " Your LinkedIn username "
    googleplus = " Your Google+ user id "
    facebook = " Your Facebook username "
    reddit = " Your Reddit username "
    hackernews = " Your Hacker News username "
    stackoverflow = " Your Stackoverflow user id (number) "
    keybase = " Your keybase.io username "
    instagram = " Your Instagram username "
    # Disqus shortname
    disqus = " Your disqus shortname "
    # Google Analytics API key.
    ga_api_key = " Your Google Analytics tracking id "
    # Mixpanel API key.
    mixpanel_api_key = " Your Mixpanel API key "

Usage

Paramètres des messages (avant-propos)

Vous pouvez définir certaines options dans l'en-tête d'un article ou d'une page :

 # The date will be at the bottom of the page at the "Posted on ..." label
date = " 2018-08-13T15:38:27+02:00 "
title = " Erster Eintrag "
draft = true
author = " hauke "
# The summary will be shown at the start page or other page/post lists
summary = " Dies ist nur ein Testbeitrag um die Website zu testen. "
 # This will ensure that the date is not printed
noshowdate = true 

Codes courts

Il existe quelques shortcodes simples pour faciliter les choses.

Lien vers une balise

Crée un lien simple vers une page de balises :

 I like {{< linkTag veggy-food "yummi vegetarian food" >}}.

Inclure des images

Inclut des images et les ouvre dans un nouvel onglet lorsque vous cliquez dessus :

 {{< img "photo.png" "What a lovely picture" >}}

Obtenir l'URL d'une image

Crée un lien vers l'image donnée

 {{< imgUrl "photo.png" "link text" >}}

Incorporer une image à l'échelle

Redimensionne une image à la taille donnée et l'intègre comme le fait le shortcode img .

 {{< imgUrl "photo.png" "What a lovely picture" "500x" >}}

(Cette image est mise à l'échelle à 500 pixels de largeur, la hauteur est déterminée automatiquement)

Plusieurs auteurs

Ce thème lira les informations d'un auteur en fonction du code de langue d'une page.

Pour prendre en charge plusieurs auteurs, créez un fichier data/<lang>/authors/name.toml (par exemple data/en/authors/hauke96.toml ). Ce fichier contient des informations sur l'auteur :

 name = " Your name "
avatar = " /images/avatar.jpg "
contact = " mailto:[email protected] "
bio = " Something about you "

Pour prendre en charge plusieurs langues, créez plusieurs répertoires dans le répertoire data . Ainsi, pour l'allemand comme deuxième langue ( languageCode serait de ), l'exemple ci-dessus aurait également un fichier data/de/authors/hauke96.toml .

Suivi

Vous pouvez utiliser la configuration ci-dessus avec par exemple Google Analytics ou utiliser votre propre extrait de code JavaScript pour ce faire.

Pour un extrait JavaScript personnalisé, vous devez créer un fichier layouts/partials/tracking.html et mettre le code nécessaire dans ce fichier. Le fichier (s'il existe) sera intégré dans le pied de page à côté des autres mécanismes de suivi.

J'ai testé cela avec le logiciel d'analyse Matomo, qui fournit une capture JavaScript ou basée sur une image que j'ai mise dans le tracking.html .