6.5 KiB
Hello Friend NG
General informations
This theme was highly inspired by the hello-friend and hermit. A lot of kudos for theier great work.
Table of Contents
- Features
- How to start
- How to configure
- More
- Social Icons
- Known issues
- How to edit the theme
- Changelog
- Sponsoring
- Licence
Features
- Theming: dark/light mode, depending on your preferences (dark is default, but you can change it)
- Great reading experience thanks to Inter UI font, made by Rasmus Andersson
- Nice code highlighting thanks to PrismJS
- An easy way to modify the theme with Hugo tooling
- Fully responsive
- Support for social icons
- Support for sharing buttons
How to start
You can download the theme manually by going to https://github.com/rhazdon/hugo-theme-hello-friend-ng.git and pasting it to themes/hello-friend-ng
in your root directory.
You can also clone it directly to your Hugo folder:
$ git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
$ git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
How to configure
The theme doesn't require any advanced configuration. Just copy the following config file.
To see all possible configurations, check the docs.
Note: There are more options to configure. Take a look into the config.toml
in exampleSite
.
baseurl = "localhost"
title = "My Blog"
languageCode = "en-us"
theme = "hello-friend-ng"
paginate = 10
[params]
dateform = "Jan 2, 2006"
dateformShort = "Jan 2"
dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04"
# Subtitle for home
homeSubtitle = "A simple and beautiful blog"
# Set disableReadOtherPosts to true in order to hide the links to other posts.
disableReadOtherPosts = false
# Enable sharing buttons, if you linke
enableSharingButtons = true
# Metadata mostly used in document's head
description = "My new homepage or blog"
keywords = "homepage, blog"
images = [""]
# Default theme "light" or "dark"
defaultTheme = "dark"
[taxonomies]
category = "blog"
tag = "tags"
series = "series"
[languages]
[languages.en]
title = "Hello Friend NG"
subtitle = "A simple theme for Hugo"
keywords = ""
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
readOtherPosts = "Read other posts"
[languages.en.params.logo]
logoText = "hello friend ng"
logoHomeLink = "/"
# or
#
# path = "/img/your-example-logo.svg"
# alt = "Your example logo alt text"
# And you can even create generic menu
[[menu.main]]
identifier = "blog"
name = "Blog"
url = "/posts"
More things
Built-in shortcodes
Of course you are able to use all default shortcodes from hugo (https://gohugo.io/content-management/shortcodes/).
image
Properties:
src
(required)alt
(optional)position
(optional, default:left
, options: [left
,center
,right
])style
Example:
{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
Code highlighting
Supported languages: Take a look here
By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this:
``` html // your code here ```
Favicon
Check the docs.
Social Icons:
Take a look into this list
If you need another one, just open an issue or create a pull request with your wished icon. :)
Known issues
There is a bug in Hugo that sometimes causes the main page not to render correctly. The reason is an empty taxonomy part. Related issue tickets: !14 !59.
Either you comment it out completely or you write the following in
[taxonomies]
tag = "tags"
category = "categories"
How to edit the theme
Just edit it. You don't need any node stuff. ;)
Sponsoring
If you like my work and if you think this project is worth to support it, just
Licence
Copyright © 2019-2020 Djordje Atlialp
The theme is released under the MIT License. Check the original theme license for additional licensing information.