Fiction

Template for Hugo. Browse through a live demo. This theme has been adapted from the MIT-licensed Fiction Bootstrap template from Theme Fisher.

Fiction was made by Themefisher and converted to Hugo by CloudCannon, a Jamstack platform for the whole team.

Features

Pre-built pages
Pre-styled components
Contact form
Blog with pagination and category pages
Configurable navigation and footer
Multiple hero options - single image, image slider and video
Optimised for editing in CloudCannon
Configurable search engine optimisation
Search using Pagefind

Setup

Get a workflow going to see your site's output (with CloudCannon or Hugo locally).

Develop

Fiction was built with Hugo version 0.96.0, but should support newer versions as well.

Prerequisites

Hugo install. brew install hugo
Go install. brew install go

Quickstart

In the terminal at the root dir, run: npm i
Start site and bookshop: npm run dev OR site alone: npm run start

By default bookshop live browser will be at : http://localhost:30775/
By default the site will be at : http://localhost:1313/

Editing

Fiction is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Company details

Reused around the site to save multiple editing locations.
Set in the Data / Company section.

Nav/footer details

Reused around the site to save multiple editing locations.
Set in the Data section with respective names

Map

To use the google maps functionality within the site you will need to add your api key to Data / Company under the google_maps_api_key variable.

To see more about getting an api key see the documentation.

Hero component

There are three different hero components that are designed to be used at the top of the index page. They can be changed in the index page using CloudCannon live editing or locally.

Image hero

This component uses a single image behind some heading text

Slider hero

This component uses any number of images behind some heading text

Video hero

This component uses a video behind some heading text

Editor-friendly templates