Hugo Future Imperfect
Future Imperfect is a responsive theme tailored for blogging. The name is no coincidence which is a port of HTML5 UP's theme. Some extra features have also been implemented to assist you.
Check out this site if you are interested in seeing a live example.
Getting Started
Run the following commands in your Hugo site directory:
mkdir themes
cd themes
git clone https://github.com/jpescador/hugo-future-imperfect.git
A folder called hugo-future-imperfect will be created. Navigate to this folder.
exampleSite
There will be a folder in this theme called exampleSite. The structure of the folder will look something this:
exampleSite
├── config.toml
├── content
└── blog
│ ├── creating-a-new-theme.md
│ ├── goisforlovers.md
│ ├── hugoisforlovers.md
│ └── migrate-from-jekyll.md
└── about.md
...
Copy the config file from exampleSite to the root directory of your Hugo site.
The Config File
The file contains comments on the functionality for each param. Please see the file for more information.
Shortcodes
The theme also contains the following shortcodes that I hope you find useful: img-post, img-fit, and url-link.
Image post
img-post: allows the user to add an image which can be placed in the center, to the left, or the right. The commands are shown below:
- Named
{{< img-post path="date" file="filename.jpg" alt="Alt Text" type="left" >}}
- Positional
{{< img-post "title" "filename.jpg" "Alt Text" "left" >}}
Please refer to the img-post shortcode file for more information on the parameters
Multiple Image Post
img-fit: allows user to insert multiple images with the ability to create a gallery if needed. The command is shown below and is positional only:
{{< img-fit
"4u" "pic04.jpg" "Alt text"
"4u" "pic05.jpg" "Alt text"
"4u$" "pic06.jpg" "Alt text"
"date" >}}
Please refer to the img-fist shortcode file for more information on the parameters
URL link
url-link: create a hyperlink and add a target value to the link. _blank will be used by default if a target value is not set. The shortcode is positional only.
{{< url-link "Hugo" "http://gohugo.io/" >}}
Position 0 will be the link text. 1 will be the url and the last position will be value of the target attribute.
View the theme on Hugo's built-in server
Run the following command to view the content of the website:
hugo server
You can now view the website at the following link, localhost:1313
About the Author
Hugo Future Imperfect was ported and it's extra features were implemented by Julio Pescador
Send me a tweet, @julio_pescador, if you like the theme and are using it for your own personal use.
License
This theme is released under the MIT license. Please read the license for more information.