diff options
author | Hauke Stieler <mail@hauke-stieler.de> | 2018-09-07 03:01:04 +0300 |
---|---|---|
committer | Hauke Stieler <mail@hauke-stieler.de> | 2018-09-07 03:01:04 +0300 |
commit | 0b2344c5ad338a9ecc4bd7cbc7b831e550e839ae (patch) | |
tree | dee2c3e2b9c0eca85bba189db6518b32513719f3 /README.md | |
parent | d06ff967da72a229b7117f46c4afccaa9f0360cd (diff) |
Add lots of information to the README.md
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 123 |
1 files changed, 93 insertions, 30 deletions
@@ -1,21 +1,22 @@ # Hamburg (based on the [vienna-theme](https://github.com/keichi/vienna) from [keichi](https://github.com/keichi)) -## Overview +# Overview Hamburg is a simple and clean blog theme for [Hugo](http://gohugo.io/). -Notable features are: - -- Simple and clean design -- Social links (Twitter, Facebook, GitHub, LinkedIn, Instagram, Keybase) -- Support for tags -- Analytics with Google Analytics or Mixpanel -- Responsive design +Notable features I would tell somebody are: + +- Clean and flat design +- Tags +- Menu +- Support for multiple authors +- Multilingual (in every way! Author information, menus, pages, posts, tags) +- Responsive design (mobile friendly) - Font Awesome icons -- Multilingual (WIP) -- Support for multiple authors (WIP) +- Analytics with Google Analytics, Mixpanel or custom tracking page +- Easy to customize -## Installation +# Installation In your hugo site directory, run: @@ -25,19 +26,56 @@ $ cd themes $ git clone https://github.com/hauke96/hugo-theme-hamburg ``` -## Configuration +The theme should now be in `themes/hugo-theme-hamburg/`. + +# Configuration You may specify following options in `config.toml` of your site to make use of -this theme's features. +this theme's features (I've not tested other options so far). ```toml -baseurl = "Your site URL" -languageCode = "en-us" +baseurl = "http://your-site.com" +defaultContentLanguage = "en" +defaultContentLanguageInSubdir = "true" title = "Your site title" -# Copyright notice. This is displayer in the footer. -copyright = "© Copyright notice" +theme = "hugo-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 + +[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" +``` + +### Additional `vienna`-theme params +There're some other params I've not used so far. They probably work, but there's no guarantee: +```toml +[params] # Social accounts. Link to these accounts are displayed in the header and # footer. twitter = "Your Twitter username" @@ -57,28 +95,53 @@ copyright = "© Copyright notice" ga_api_key = "Your Google Analytics tracking id" # Mixpanel API key. mixpanel_api_key = "Your Mixpanel API key" - author = "Your Name" - avatar = "/path/to/avatar" - contact = "Your contact link (ex. mailto:foo@example.com)" - bio = "Your short bio" - # Short subtitle/tagline. This is displayed in the header. - subtitle = "Short subtitle/tagline of your blog" - themecolor = "#hexcolor" # Defines the tab color in Chrome for Android. ``` -You may specify following options in `front matter` of your posts to make use of -this theme's features. +## Params of posts (front matter) +There're some options you can set in the header of a post or page: ```toml -noshowdate = true # This will ensure that the date is not printed +# 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 ``` -## Usage +## Multiple authors +This theme will read the information of an author based on the language code of a page. + +To support multiple authors, create a `data/<lang>/authors/name.toml` file (so e.g. `data/en/authors/hauke96.toml`). This file contains the normal author information: +```toml +name = "Your name" +avatar = "/images/avatar.jpg" +contact = "mailto:mail@foobar.com" +bio = "Something about you" +``` + +To support multiple languages, create multiple directories in the `data` directory. So for German (`languageCode` set to `"de"`) the above example would also have a `data/de/authors/hauke96.toml` file. + +## Tracking +You can use the above configuration with e.g. Google Analytics or use your own JavaScript snippet to do so. + +For a custom JavaScript snippet you have to create a `layouts/partials/tracking.html` file and put the necessary code into this file. The file (is it exists) will be embedded in the header right before the `</head>` tag. + +# Usage +Add this line to your config file (e.g. `config.toml`): +```toml +theme = "hugo-theme-hamburg" +``` +The theme mus therefore be stores under `themes/hugo-theme-hamburg/`. + +### Temporarily Use hugo's `-t hugo-theme-hamnburg` or `--theme=hugo-theme-hamburg` option with hugo commands. Example: ```shell -$ hugo server -t hugo-theme-hamburg -w -D +$ hugo server -t hugo-theme-hamburg -D ``` - |