hugo theme hamburg

Hamburg

Hamburg adalah tema blog sederhana dan bersih untuk Hugo berdasarkan tema vienna dari keichi.

Tangkapan layar

Desktop

Seluler

Ringkasan

Fitur penting yang ingin saya sampaikan kepada seseorang adalah:

• Desain yang konsisten
  • Desain bersih dan datar
  • Mudah untuk disesuaikan
  • Desain responsif (ramah seluler)
  • Ikon Font yang Luar Biasa
• Navigasi
  • Tag
  • Menu
• Dukungan untuk banyak penulis
• Multibahasa (dalam segala hal! Informasi penulis, menu, halaman, postingan, tag)
• Analytics dengan layanan berbasis JavaScript-Snipped (Google Analytics, Matomo/Piwik, ...)
• Kode pendek tambahan

Instalasi

Di direktori situs Hugo Anda, jalankan:

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

Tema sekarang seharusnya ada di themes/hamburg/ .

Konfigurasi

Anda dapat menentukan opsi berikut di config.toml (atau config.yaml / config.json ) di situs Anda untuk memanfaatkan fitur tema ini:

 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 "

Parameter tema- vienna tambahan

Ada beberapa parameter lain dari tema vienna asli yang belum saya gunakan sejauh ini. Kebanyakan darinya mungkin tidak berfungsi lagi, jadi tidak ada jaminan:

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

Penggunaan

Param postingan (materi depan)

Ada beberapa opsi yang dapat Anda atur di header postingan atau halaman:

 # 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 

Kode pendek

Ada beberapa kode pendek sederhana untuk mempermudah.

Tautan ke tag

Membuat tautan sederhana ke halaman tag:

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

Sertakan gambar

Menyertakan gambar dan membukanya di tab baru saat diklik:

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

Dapatkan URL ke suatu gambar

Membuat tautan ke gambar yang diberikan

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

Sematkan gambar berskala

Menskalakan gambar ke ukuran tertentu dan menyematkannya seperti yang dilakukan kode pendek img .

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

(Gambar ini diperbesar hingga lebar 500 piksel, tingginya ditentukan secara otomatis)

Banyak penulis

Tema ini akan membaca informasi seorang penulis berdasarkan kode bahasa suatu halaman.

Untuk mendukung banyak penulis, buat file data/<lang>/authors/name.toml (misalnya data/en/authors/hauke96.toml ). File ini berisi informasi tentang penulis:

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

Untuk mendukung banyak bahasa, buat beberapa direktori di direktori data . Jadi untuk bahasa Jerman sebagai bahasa kedua ( languageCode adalah de ) contoh di atas juga memiliki file data/de/authors/hauke96.toml .

Pelacakan

Anda dapat menggunakan konfigurasi di atas dengan misalnya Google Analytics atau menggunakan cuplikan JavaScript Anda sendiri untuk melakukannya.

Untuk cuplikan JavaScript khusus, Anda harus membuat file layouts/partials/tracking.html dan memasukkan kode yang diperlukan ke dalam file ini. File (jika ada) akan dimasukkan ke dalam footer di sebelah mekanisme pelacakan lainnya.

Saya mengujinya dengan perangkat lunak analitik Matomo, yang menyediakan potongan berbasis JavaScript atau gambar yang saya masukkan ke tracking.html .