243 lines
7.3 KiB
Markdown
243 lines
7.3 KiB
Markdown
# BlogAMore
|
|
|
|
**Blogging and more**, ein einfaches Theme für Hugo, mit dem einfach Blogging-Webseiten erstellt werden können und noch weitere Webseiten mit dargestellt werden.
|
|
|
|
Dieses Theme wurde für meine eigene Webseite entworfen und dort verwendet.
|
|
|
|
## Features
|
|
|
|
- Responsive design
|
|
- Seitenleiste
|
|
|
|
## Installation
|
|
|
|
In deinen Projektverzeichnis nachfolgenden Befehl ausführen:
|
|
|
|
```bash
|
|
git clone https://gitea.marcodn.de/mdn/blogamore.git themes/blogamore
|
|
```
|
|
|
|
Wenn Sie keine größeren Änderungen planen, aber das Thema verfolgen und aktualisieren möchten, können Sie es als git
|
|
Submodul mit dem folgenden Befehl hinzufügen:
|
|
|
|
```bash
|
|
git submodule add https://gitea.marcodn.de/mdn/blogamore.git themes/blogamore
|
|
```
|
|
|
|
Als nächstes öffnen Sie `config.toml` in der Basis der Hugo-Site und stellen sicher, dass die Theme-Option auf `BlogAMore` gesetzt ist:
|
|
|
|
```bash
|
|
theme = "BlogAMore"
|
|
```
|
|
|
|
## Konfiguration
|
|
|
|
### config.toml Beispiel
|
|
|
|
```toml
|
|
baseURL = '/'
|
|
languageCode = 'de-DE'
|
|
title = 'Blogging and more'
|
|
paginate = 12
|
|
theme = "BlogAMore"
|
|
|
|
[author]
|
|
name = 'Max Mustsermann'
|
|
email = 'email@example.com'
|
|
homepage = 'http://example.com'
|
|
# Beschreibung das Webseitenbesitzers, für die Seitenleiste
|
|
avatar = "/img/author.jpg"
|
|
description = "Eine Beschreibung des Autors, als kurze Zusammenfassung"
|
|
# Name der Datendatei mit einer Auflistung von Link, Aufbau der Datei ist im Shortcode Link zu finden
|
|
linkdata = "links"
|
|
|
|
[author.social]
|
|
# Links zur erreichbarkeit des Autors (Email ist leider 2 mal anzugeben)
|
|
Email = "email@example.com"
|
|
Phone = "+49 (0) 1234 56789"
|
|
VoIP = "main_kontakt@main_voip_anbieter.de"
|
|
Github = "username"
|
|
Twitter = "username"
|
|
LinkedIn = "username"
|
|
matrix = "@mdn:synapse.marcodn.de"
|
|
RSS = "/blog/index.xml"
|
|
|
|
[taxonomies]
|
|
tag = "tags"
|
|
category = "categories"
|
|
skill = "skills"
|
|
# Weitere Kategorien die benötigt werden
|
|
mood = "moods"
|
|
|
|
# Wenn dies aktiviert wird, muss eine eigenen CSS-Datei bereitegestellt werden, diese kann via "Params.custom_css" eingebunden werden
|
|
# Informationen zum erstellen der Datei findet man unter: https://gohugo.io/content-management/syntax-highlighting/
|
|
[markup]
|
|
[markup.highlight]
|
|
noClasses = false
|
|
|
|
[permalinks]
|
|
# Blog immer über Jahreszahl gruppieren
|
|
blog = "/blog/:year/:slug"
|
|
|
|
[Params]
|
|
# Beschreibung der Seite selbst
|
|
description = "Die Beschreibung der Seite"
|
|
# Der Link für Impressum und Datenschutz (Wenn nicht angegeben, werden sie ausgeblendet)
|
|
imprint = "/about/imprint/"
|
|
privacy = "/about/privacy/"
|
|
|
|
# Dateiname der den aktuellen Commit-Hash entält, sowie die Basis-url des Repo, damit im Footer der aktuelle Hash angezeigt wird, die Datei muss dann am besten über das Published-Script erzeugt werden
|
|
gitHashFile = "commit_id.txt"
|
|
gitRepoUrl = "http://example.com"
|
|
|
|
# Zusätzliche CSS und JS-Dateien
|
|
custom_css = []
|
|
custom_js = []
|
|
|
|
[Params.Blog]
|
|
# Definition der Taxonomie an der Seitenleiste dargestellt werden sollen
|
|
tags = "tags"
|
|
categories = "categories"
|
|
|
|
[Params.KnowHow]
|
|
skills = "skills"
|
|
|
|
[menu]
|
|
# Definition des Hauptmenüs (Die Icons sind via Pre definiert, hierbei wird [FeatherIcons](https://feathericons.com) verwendet)
|
|
[[menu.main]]
|
|
name = "Posts"
|
|
pre = "pen-tool"
|
|
url = "/posts/"
|
|
weight = 100
|
|
[[menu.main]]
|
|
name = "Blog"
|
|
pre = "pen-tool"
|
|
url = "/blog/"
|
|
weight = 200
|
|
[[menu.main]]
|
|
name = "Tags"
|
|
pre = "tag"
|
|
url = "/tags/"
|
|
weight = 300
|
|
```
|
|
|
|
**Kopieren Sie die Beispielkonfiguration nicht in der vorliegenden Form**. Verwenden Sie nur die Parameter, die Sie benötigen.
|
|
|
|
Für weitere Informationen über alle verfügbaren Standardkonfigurationseinstellungen lesen Sie bitte [Alle Hugo-Konfigurationseinstellungen](https://gohugo.io/getting-started/configuration/#all-configuration-settings).
|
|
|
|
### Dateiaufbau
|
|
|
|
> cooming soon...
|
|
|
|
Zum erstellen der Index-Seite für die Jahresarchive, geben Sie bitte folgenden Befehl an:
|
|
|
|
```bash
|
|
hugo new --kind archive blog/2022/_index.md
|
|
```
|
|
|
|
Hierbei ist bitte der Hauptordner, sowie der Jahresordner an die entsprechenden anzupassen.
|
|
|
|
### Beispiele für die Hauptseite
|
|
|
|
> cooming soon...
|
|
|
|
### Beispiel für eigenen Feeds über Datenbestände
|
|
|
|
> cooming soon...
|
|
|
|
Für eine Produkt-Seite braucht ich noch zusätzlich einen Feed er aktuell vorhandenen Downloads. Hierfür hab ich eine zusätzliche Datei mit dem nachfolgenden Befehlt erzeugt:
|
|
|
|
```bash
|
|
hugo new --kind feed produkte/meinProdukt_feed.md
|
|
```
|
|
|
|
Hierdurch wird ein zusätzlicher unterordner "feed" erzeugt, in dem dann nur die index.xml liegt. Über den Parameter _dataname_ wird dann noch definiert aus welcher Datei im Daten-Verzeichnis die Informationen für den Feed kommen. Hierfür ist folgender Aufbau notwendig:
|
|
|
|
```json
|
|
[
|
|
{
|
|
"title": "<der titel>",
|
|
"filename": "<der dateiname, relativ zum Ordner der Seite>",
|
|
"comment": "<der Kommentar hierzu>",
|
|
"published": "<Datum der Freigabe>"
|
|
}
|
|
}
|
|
```
|
|
|
|
> Damit dies nun auch richtig funktioniert, muss der Webserver auch so eingestellt sein, dass er index.xml-Dateien automatisch ausliefert, sonst muss immer explizit auf die index.xml-Datei referenziert werden.
|
|
> Damit die Seite nicht in der Standard-Auflistung auftaucht, wird in der Vorlage der Parameter _hide_ auf _true_ gesetzt.
|
|
|
|
Das gleiche Format wird vom Shortcode "download" bzw. "download-feed" verwendet. Mit diesem kann in einer Seite eine Download-Auflistung erzeugt werden. Als Parameter wird nur _data_ erwartet, welches den Dateinamen aus dem Datenverzeichnis beinhaltet. Siehe auch _dataname_ in den Parametern der Feed-Datei.
|
|
|
|
### Beispiel für einen Blogeintrag
|
|
|
|
```yaml
|
|
---
|
|
title: "Beispiel Eintrag"
|
|
date: 2019-11-07T19:28:01+01:00
|
|
publishDate: 2019-11-10
|
|
lastmod: 2019-12-06
|
|
draft: true
|
|
featured: true
|
|
author: "mdn"
|
|
slug: "first" # Definition des Dateinamens
|
|
tags: [ "tag1" ]
|
|
categories: [ "cat1" ]
|
|
---
|
|
|
|
hier die Zusammenfassung
|
|
|
|
<!--more-->
|
|
|
|
Und hier der weitere Artikel
|
|
```
|
|
|
|
Hierfür kann auch die Vorlage für [Blog](https://gitea.marcodn.de/mdn/blogamore/src/branch/main/archetypes/blog.md) verwendet werden.
|
|
|
|
### Beispiel für eine Beschreibung zur Taxonomy
|
|
|
|
Zum erstellen der Datei mit der ein Term in der Taxonomy beschrieben werden kann, wird folgender Befehl verwendet (Taxonomy und Term müssen entsprechend angepasst werden):
|
|
|
|
```bash
|
|
hugo new tags/tag1/_index.md
|
|
```
|
|
|
|
In der Datei kann nun die Beschreibung und der Titel angepasst werden. Sollte man eigene Taxonomies verwenden, wird geraten eine eigene Vorlage zu definieren. Diese ist unter archetypes zu definieren, der Name ist die Pluralform mit ".md" am Ende und es sollte folgenden Inhalt haben:
|
|
|
|
```toml
|
|
---
|
|
title: {{ $term := path.Base .File.Dir }}"{{ replace $term "-" " " | title }}"
|
|
description: "Dies ist eine Beschreibung für {{ $term | title }}"
|
|
date: {{ now.Format "2006-01-02" }}
|
|
---
|
|
```
|
|
|
|
## Shortcodes
|
|
|
|
### Download
|
|
|
|
> comming soon...
|
|
|
|
### download-feed
|
|
|
|
> comming soon...
|
|
|
|
### bootstrap-table
|
|
|
|
> comming soon...
|
|
|
|
### table
|
|
|
|
> comming soon...
|
|
|
|
### link
|
|
|
|
> cooming soon...
|
|
|
|
## Weiteres
|
|
|
|
Haben Sie einen Fehler gefunden oder eine Idee für ein neues Feature? Schicken Sie mir bitte eine Mail an ... Oder erstellen Sie direkt einen [Pull Request](https://gitea.marcodn.de/mdn/blogamore/pulls)
|
|
|
|
## Lizenz
|
|
|
|
Diese Thema ist unter der [LGPLv3 Lizenz](https://gitea.marcodn.de/mdn/blogamore/src/branch/main/LICENSE) freigegeben.
|