hugo theme hamburg

Hamburgo

Hamburgo é um tema de blog simples e limpo para Hugo baseado no tema vienense de Keichi.

Capturas de tela

Área de trabalho

Móvel

Visão geral

Recursos notáveis ​​que eu diria a alguém são:

• Design consistente
  • Design limpo e plano
  • Fácil de personalizar
  • Design responsivo (compatível com dispositivos móveis)
  • Ícones impressionantes da fonte
• Navegação
  • Etiquetas
  • Menu
• Suporte para vários autores
• Multilíngue (em todos os sentidos! Informações do autor, menus, páginas, postagens, tags)
• Analytics com qualquer serviço baseado em JavaScript (Google Analytics, Matomo/Piwik, ...)
• Códigos de acesso adicionais

Instalação

No diretório do seu site hugo, execute:

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

O tema agora deve estar em themes/hamburg/ .

Configuração

Você pode especificar as seguintes opções em config.toml (ou config.yaml / config.json ) do seu site para usar os recursos deste 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 adicionais do tema vienna

Existem alguns outros parâmetros do tema original de Viena que não usei até agora. A maioria deles pode não funcionar mais, então não há garantia:

[ 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 postagens (assunto inicial)

Existem algumas opções que você pode definir no cabeçalho de uma postagem ou 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 de acesso

Existem alguns códigos de acesso simples para facilitar as coisas.

Link para uma tag

Cria um link simples para uma página de tags:

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

Incluir imagens

Inclui imagens e as abre em uma nova aba quando clicada:

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

Obtenha URL para uma imagem

Cria um link para a imagem fornecida

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

Incorporar imagem em escala

Dimensiona uma imagem para um determinado tamanho e a incorpora como o shortcode img faz.

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

(Esta imagem é dimensionada para 500 pixels de largura, a altura é determinada automaticamente)

Vários autores

Este tema irá ler as informações de um autor com base no código de idioma de uma página.

Para oferecer suporte a vários autores, crie um arquivo data/<lang>/authors/name.toml (por exemplo, data/en/authors/hauke96.toml ). Este arquivo contém informações sobre o autor:

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

Para oferecer suporte a vários idiomas, crie vários diretórios no diretório data . Portanto, para o alemão como segunda língua ( languageCode seria de ), o exemplo acima também teria um arquivo data/de/authors/hauke96.toml .

Monitorando

Você pode usar a configuração acima, por exemplo, com o Google Analytics ou usar seu próprio snippet JavaScript para fazer isso.

Para um snippet JavaScript personalizado, você deve criar um arquivo layouts/partials/tracking.html e colocar o código necessário neste arquivo. O arquivo (se existir) será incorporado no rodapé próximo aos outros mecanismos de rastreamento.

Testei isso com o software de análise Matomo, que fornece um JavaScript ou recorte baseado em imagem que coloquei em tracking.html .