You must use these config files as a basis for your site, since they take care of the necessary variable declarations, which you may edit according to your needs.
Define yourself through the following config variables in params under the author table as shown:
author = "<name of the author>"
description = "Short description of the site"
motto = "author's motto or short description"
#Leaving the avatar variable unset displays svg avatars
avatar = "<absolute path to avatar>"
After that, fill up the social variables at the end of the config file. This theme suports the following social sites: (The examples are given)
github = "username"
email = "firstname.lastname@example.org"
twitter = "username"
facebook = "username"
youtube = "username"
medium = "username"
linkedin = "username"
stackoverflow = "number/username"
codepen = "username"
reddit = "username"
These variables have to be in the [social] table of config.toml or its equivalent for YAML or JSON.
github = "UtkarshVerma"
Once this is done, write up the “About Me” section of your website in Markdown as directed here:Error and About Pages.
Toggling the views
As stated earlier, this theme has two views, Cards view and Posts view. To define your desired view, modify the contentType variable in params in the config file as follows:
contentType = "cards" #Enables the cards view.
contentType = "posts" #Enables the posts view.
One clear distinction between both the view is that Card view doesn’t support posts, instead it redirects to the specified link, while Post view does.
You may test them out yourselves by visiting my sites(stated above) which use them.
Also, post/card creation is done differently for both the views. It is as follows:
hugo new cards/example.md #Card creation
hugo new posts/example.md #Post creation
After this, just open your MarkDown card/post and provide the parameters for the card/post.
To enable setting images as background, you’ll have to disable random colour background first by setting colorBG in background table to false.
Also, enabling image background feature requires the modification of bgList array. If you prefer a single image background, then simply give a single value to the array. For example:
bgList = ["/images/bg1.jpeg"]
Providing multiple images to the bgList array enables the random background feature of Dream Plus, which cycles the background within the given array every time the site is reloaded.
You may also blur the background to a certain extent through the bgBlur variable.
All the background-configuring variables are to be placed inside the backround table under params
The covers for each post-card or card are processed by Dream Plus using Hugo Image Processing for faster website loading times. The lookup paths for the cover file are as stated below:
- Cards: In the bundle. For example, /content/cards/<card>/cover.<any-extension>
- Posts: In the images folder inside the bundle. For example, /content/posts/<post>/images/cover.<any-extension>
Specifying the cover image through the frontmatter has now been deprecated. Card covers can now be defined through the frontmatter through cover key. However image processing won’t be applicable on such covers. Also, frontmatter covers are prioritized over image resources, therefore, to make the image resource covers render, you’ll have to remove the cover key from the frontmatter first.
You may also modify the image processing process through coverArgs variable in [params.features]. The arguments passed must be for the .Resize function since that’s what Dream Plus utilizes. For example,
coverArgs = "400x300 q50" #Specify resolution and quality of output image
You may configure your website based on the client device by using the isMobile JS variable. It is true when the client device is a mobile and vice versa.
Error and About pages
This theme supports total customization of about and error pages. These pages may be customized through the about.md and 404.md files. Once finished customizing, copy them in the /content directory of your Hugo site.
You may also set a custom favicon for your website through the favicon config variable under params. For example,
favicon = "/images/defaultFav.ico"
Shorte.st website script
The Shorte.st website script has been implemented in this theme. To use it, you’ll have to configure it through the shortest table under params.
enabled = true #Enable shorte.st
apiToken = "" #The API Token you received from shorte.st
domains = [""] #The domains you want to define
Some other configurations
If you’d like to control the amount of posts/cards a page has, then you may do so using the paginate config variable.
paginate = 4 #Defaults to 10
Also, the tags, when enabled, won’t all be displayed on the header and sidebar by default. Only the top 8 tags(article-count-wise) are displayed there to avoid congestion. However it can be overriden using tagLimit variable of [params.tag] table.
enabled = true
tagLimit = 10 #Top 10 tags will be displayed
tagLimit = 0 #Display all tags
There are some other minor configurations as well. You may set them up by referring to the comments inside the config file.
The documentation for this repository is currently under work and is added to this repository’s wiki.
Wiki contributions are most welcome. Feel free to ask me about this theme’s features for that.
After finishing the configurations, you’re good to go. So, test your website using:
For testing the example site, you’ll have to explicitly specify the config file to Hugo. This is done as follows:
#For posts view demo
hugo server --config posts.toml
#For cards view demo
hugo server --config cards.toml
Found something interesting to add to this theme or rather a :beetle:bug? Let me know about it through the issue tracker. Pull requests are also welcome.
For more detailed instructions on how to contribute, refer to CONTRIBUTING.md