hugo theme hamburg

Hamburgo

Hamburgo es un tema de blog simple y limpio para Hugo basado en el tema de Viena de Keichi.

Capturas de pantalla

De oficina

Móvil

Descripción general

Las características notables que le diría a alguien son:

• Diseño consistente
  • Diseño limpio y plano
  • Fácil de personalizar
  • Diseño responsivo (compatible con dispositivos móviles)
  • Iconos impresionantes de fuente
• Navegación
  • Etiquetas
  • Menú
• Soporte para múltiples autores
• Multilingüe (¡en todos los sentidos! Información del autor, menús, páginas, publicaciones, etiquetas)
• Análisis con cualquier servicio basado en JavaScript (Google Analytics, Matomo/Piwik, ...)
• Códigos cortos adicionales

Instalación

En el directorio de su sitio hugo, ejecute:

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

El tema ahora debería estar en themes/hamburg/ .

Configuración

Puede especificar las siguientes opciones en config.toml (o config.yaml / config.json ) de su sitio para utilizar las funciones de este tema:

 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 "

Parámetros adicionales del tema vienna

Hay algunos otros parámetros del tema original de Viena que no he usado hasta ahora. Es posible que la mayoría de ellos ya no funcionen , por lo que no hay garantía:

[ 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 "

Uso

Parámetros de publicaciones (primera materia)

Hay algunas opciones que puedes configurar en el encabezado de una publicación o página:

 # 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 

Códigos cortos

Hay algunos códigos cortos simples para facilitar las cosas.

Enlace a una etiqueta

Crea un enlace simple a una página de etiquetas:

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

Incluir imágenes

Incluye imágenes y las abre en una nueva pestaña cuando se hace clic:

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

Obtener URL a una imagen

Crea un enlace a la imagen dada.

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

Insertar imagen escalada

Escala una imagen al tamaño dado y la incrusta como lo hace el shortcode img .

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

(Esta imagen tiene una escala de 500 píxeles de ancho, la altura se determina automáticamente)

Múltiples autores

Este tema leerá la información de un autor en función del código de idioma de una página.

Para admitir varios autores, cree un archivo data/<lang>/authors/name.toml (por ejemplo, data/en/authors/hauke96.toml ). Este archivo contiene información sobre el autor:

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

Para admitir varios idiomas, cree varios directorios en el directorio data . Entonces, para el alemán como segundo idioma ( languageCode sería de ), el ejemplo anterior también tendría un archivo data/de/authors/hauke96.toml .

Seguimiento

Puede utilizar la configuración anterior, por ejemplo, con Google Analytics o utilizar su propio fragmento de JavaScript para hacerlo.

Para obtener un fragmento de JavaScript personalizado, debe crear un archivo layouts/partials/tracking.html y colocar el código necesario en este archivo. El archivo (si existe) se incrustará en el pie de página junto a los demás mecanismos de seguimiento.

Probé esto con el software de análisis Matomo, que proporciona un fragmento de JavaScript o basado en imágenes que puse en el tracking.html .