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.
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.
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 file contains comments on the functionality for each param. Please see the file for more information.
The theme also contains the following shortcodes that I hope you find useful: img-post, img-fit, and url-link.
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
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: 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.
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
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.
This theme is released under the MIT license. Please read the license for more information.