forestryio/hugo-theme-novela

Novela, the simplest way to start publishing with Hugo and Forestry.

Hugo Novela

A port of Narative's Gatsby theme Novela

This theme requires Hugo extended > 0.65.0

The easiest way to get started is to import this theme in Forestry CMS in a single click

Install from the command line

If you don't want to use the starter, you can start from scratch and just install this theme from the command line.

Create a new Hugo site and initialize your project as a Hugo module:

hugo new site my-awesome-blog
cd my-awesome-blog
hugo mod init

Edit your config.toml to add the theme settings:

# Novela settings
theme = "github.com/forestryio/hugo-theme-novela"

paginate = 6

[social]
twitter= "https://twitter.com/forestryio"
github= "https://github.com/forestryio/novela-hugo-starter"
linkedin= "https://www.linkedin.com/company/forestry.io"
instagram = "#"
dribbble = "#"
youtube = "#"

[taxonomies]
author = "authors"

Create your first draft post and preview it locally:

hugo new post/my-first-post.md
hugo server -D

You're good to go!

Customization

Logo

Override /themes/novela/layouts/partials/icons/ui/logo.html with your own file at /layouts/partials/icons/ui/logo.html; include your logo in SVG format for desktop and mobile formats.

Novela supports light and dark mode. To have your logo respond in kind, add class="change-fill" to the svg path(s).

Socials

In order for the Socials to be surfaced in Forestry, you should copy the theme's config/_default/social.yaml to your project.

Authors

You should register authors as a taxonomy in your project's `config.yaml``

taxonomies:
  author: authors

Creating authors

Authors must be added in content/authors. Create a folder per author and add an _index.md file in it.

Here's an example of the front matter fields supported by default:

# /content/authors/firstname-lastname/_index.md
---
title: Dennis Brotzky
bio: |
  Written by You. This is where your author bio lives. Share your work, your
  joys and of course, your Twitter handle.
avatar: /images/dennis-brotzky.jpg
featured: true
social:
  - title: unsplash
    url: https://unsplash.com
  - title: github
    url: https://github.com
  - title: github
    url: https://github.com
  - title: github
    url: https://github.com
  - title: github
    url: https://github.com
---

Assigning authors to posts.

Ad the name of the author to the "authors" field:

authors:
  - Dennis Brotzky
  - Thiago Costa

Newsletter CTA

This theme includes a shortcode for a newsletter callout form that you can add to any page. It uses formspree.io as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get get going add your Formspree email to your shortcode like this:

{{< subscribe email="[email protected]" >}}

hugo-theme-novela's Issues

where do i find icons?

I recently added a menu, but the design was ruined as the icon looked out of place, where did you find those icons, i need one for menu. Tried fontawesome but it didn't look flush.

Question: What is the hero section/partial?

Hello!
I am trying to port the theme for personal site, and I am a complete novice when it comes to UI/UX can somebody tell me what is the purpose of hero.html is it meant to represent the authors, or is there a different reasoning behind the 'hero' nomenclature? I have seen it a bunch of time, but there are other files too like authors, bio, etc, hence the confusion.

Sorry if the question is too vague. I am trying to trim out any excess bit of code that a personal blog, like mine, would not require and learn a little bit of web dev on the way. Any documentation you folks can link me to would be really awesome as well.

P.S: Thank you for an amazing theme

Images with space between the name is not loading

When I insert a image in a post with spaces in between the name, it is not loading.
I use forestry to add the post.

authors articleList

Hey! First, love your theme. It's awesome. Thanks for making it.

I'm having trouble getting the author to populate on the main page and also on the author's bio page, the articleList associated with that author doesn't populate. I could be doing something wrong but just wanted to make sure. Currently using Hugo v0.74.3/extended. Using your theme here, if that's helpful.

Warnings on Local Startup

Command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk -d public

Output:

WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/12/19 11:39:53 found no layout file for "HTML" for "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

Can't display single post in hero

I'm trying to have a single post displayed on this half of the hero:

I've figured out how to divide the hero into two halves with flexbox , but I can't seem to be able to get the code for displaying the single, latest post right. Here is what I have:

{{ $articles := slice }}
{{ with first 1 (where site.RegularPages "Type" "post")}}
  {{ $articles = . }}
{{ end }}
{{ return $articles }}

But this just removes the hero entirely and puts Pages (1) in its place.

How do I just display a single post on that half of the hero?

How to customize top left header

How do you customize the top left header? not seeing anywhere where I can change the narative themes wording.

How to change font for headings and body

Hi, how do I change the font of the body and heading?
I want to use playfair(title) + libre baskerville(body)

Make the exampleSite's content more generic

Thanks for this great theme, much appreciated.

It would be even better if you could make the exampleSite not to be an ad for Gatsby. Gatsby is great, but isn't something that feels natural to promote on the Hugo theme site:

https://themes.gohugo.io/theme/hugo-theme-novela/

Some generic content would be better.

Thanks.

Hitting errors when running hugo server

Shot of term:

WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/02/09 22:06:21 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

File directory:

When I run hugo server I get these errors.

Compile and change scss files

Hi, I am trying to compile new CSS file but nothing changes. I am making some changes to the /assets/scss/article.scss but no changes are visible.
Is there any specific way to make css changes? We can add it to the README maybe. Thanks!

Incorrect og:type for blogposts

For blog post there is

<meta property="og:type" content="website">

which should be

<meta property="og:type" content="article">

Webpage favicon setting

Hello, I want to know how to add a custom favicon to my site ?

images are not responsive

If I insert images larger than the page width, rather than resizing responsive to the resolution, it loads the image with its original resolution.

Use Hugo .ReadingTime

It would be more editor- and Forestry-friendly if we automated ReadingTime rather than making editors estimate it here:

I'd be happy to implement this if it makes sense.

Post layout issues on mobile devices

Lately I've noticed that when browsing posts on small-screen mobile devices (e.g. iPhone SE Gen1), the post page layout doesn't seem quite right.

Here are some comparisons to the Gatsby version:

Title's layout is weird:

Contents are a little bit narrow:

And some titles with long words would cause pages slide horizontally:

And thanks for making this theme!

Links are not clickable when they are within the side progress bar

Just wanted to start off by saying thanks for sharing this great theme.

Really awesome!

I think there is a slight issue with the side progress bar. If you have a post with links/anchor tags they don't seem to be clickable?

See screenshots:

If it's outside, it seems to be okay:

Unfortunately, my css is bit weak in this area, not sure if it's a z-index or something?

Thanks

How to install Novela?

Hi, I need an help to install this theme. I have created a new site with Hugo, but I can't install Novela from command line.
Can you help me?

Fix Grid view

The grid layout is not great when you have a short text:

It should look like the original theme:

/cc @regisphilibert @mountainbug95

Katex auto-render extension does not work

Following the demo's Math Typesetting example, the KaTeX error message "ParseError: KaTeX SyntaxError: KaTeX does not work in kirks mode" appears and the raw LaTeX script is displayed in the browser.
This works well when adding DOCTYPE
I think "base of.html" should start with <!DOCTYPE html>

a11y: Toggle between light and dark mode

Origina theme has a button with aria-label

hugo-theme-novela/layouts/partials/header.html

Line 16 in 651173e

<button id="themeColorButton" class="icon-wrapper">

Originally posted by @DirtyF in #12 (comment)

Stackoverflow as social option

Stackoverflow does not work as a social option. Could the theme be updated to support this option?

mobile theme not working properly

When viewing from smartphones (Samsung Galaxy S8+, Galaxy Note 9), the desktop layout shows up instead of the mobile layout.

Images not responsive

#28
Having issues with image "overflowing" from the page contents

Other occurrences

How to add authors?

I have tried several ways to add authors to my page. it's not working. Please can you show me how,
Also, please, how do i show the about page links,
thanks.

Not compatible with quick start guide and Hugo v0.75.1

Observed Outcome

Following the quick start guide results in empty content when navigating to the entry point of the site.

I have included a test post:

This is my config.toml:

baseURL = "https://blog.poxon.dev/"
languageCode = "en-au"
title = "David Poxon's Blog"
theme = "novela"

Expected Outcome

There would be at least one post

Syntax highlighting

I've tried a bunch of stuff that I read in different forums but none seem to work for me. I've included this in my config.yaml file

PygmentsCodeFencesGuessSyntax: true
PygmentsCodeFences: true
pygmentsUseClasses: true

This is what the code in the blog looks like when I try to either use backticks with language or make use of hugu's highlight block.

Add authors from forestry

Is there a way to add an author in forestry so that it respects the folder structure /content/authors/author-name/_index.md ?
If not, what is the purpose to have its front matter configured?

Feature request: Plans for adding a menu?

Any plans for adding menu functionality to this theme?
It would be awesome if this theme had an option to add menu items in line with dark mode and copy buttons.

Thank you for bringing this fantastic theme to Hugo.

Adding custom links in header

I see that the project already has a /about link, which is not linked anywhere directly in the page (or maybe I did not find it?)
Is there an official way to have custom links in the header?

Awesome theme by the way, thank you 😄

Deployment failed - Netlify

Hi, I tried to deploy on Netlify, but I got this log:

12:38:41 AM: Executing user command: hugo --gc --minify
12:38:41 AM: Error: "/opt/build/repo/themes/novela/layouts/partials/func/GetArticleAuthors.html:39:1": parse failed: template: partials/func/GetArticleAuthors.html:39: function "return" not defined
12:38:45 AM: failed during stage 'building site': Build script returned non-zero exit code: 255
12:38:46 AM: Finished processing build request in 19.440587786s

Progress Bar Still Blocking Some Links, Subscribe Button Messed Up and Overriding Query

Found a "solution" for the first one ( #26 ) through Netlify's snippet injection (before or ).

The only issues i have now is the progress bar is still blocking some links ( #15 ), the subscribe button for the newsletter is messed up in mobile ( #7 ) #7 (comment) and if i do override the theme's footer and add a few things to the one you already have will i need to copy your socials as well or will it look for it in mine(and not find it) and use yours?

Also if i were to add a menu, how would i go about it? Preferably an icon menu, for example a profile(for the about page) svg next to the link and dark/light mode switch. I know you said you are following the original theme but am not asking for a change am merely asking for advice and a bit of code if possible on how to implement this on my site.

Kindly Help Me

Kindly Help. Manifest, Meta, Service Worker Register, Add to Homescreen Linking

Hi how are you? I am trying to link my custom manifest, add a few more metas, add push notifications, make the newsletter display on every page automatically and add some scripts like my service worker, and add to home screen script but i am using the version with out layouts. How do i go about it.
Kindly help me.

Create a category list page.

Hi,
Thanks for creating a great theme!
I want to display the category list page, but it doesn't work.
For example,
novela.com/categories/orange/
novela.com/categories/red/

I want to display articles with each category when I access the permalink as above.

Do you plan to introduce category features in the future?
This is a great theme and I don't want to change it if possible.

Cannot override CSS gradient

I'm making a website with Hugo and one of the sections requires a flex-box, this is a simple example of what I'm doing:

<div class="flex-container">   
  <div class="photography">
     <h1>Photography</h1>
  </div>
  <div class="art">
  <h1>3D Art</h1>
</div>
</div>

And the CSS is:

flex-container{
display: flex;
flex-flow: row wrap;
padding-left: 100px;
padding-right: 100px;

}

.photography { 
 background: none !important;
  background: no-repeat url("https://thedivtagguy.com/wp-content/uploads/2020/11/InstagramSize.jpg") !important; 
  min-height: 200px;
  flex-basis: 50%;

}

.photography h1 {
  color:white;

}

.art { 
 
  background:blue;
  min-height: 200px;
  flex-basis: 50%;
}

However, there's this really weird linear gradient which is being applied somewhere in the theme's CSS. I can't seem to be able to override it in any way I know how, is there a way to fix this?

I've uploaded a repo of the entire code here, if that helps.

Missing article:author meta tag

article:author meta tag is missing from the template

R markdown code snippets not rendering correctly

I'm using the theme (lovely work by the way!) to render my markdown documents from R Studio. However, the code chunks aren't rendering like code snippets usually would:

This looks really messy. These are written in .Rmd files, but if I use markdown, the code snippets render correctly:

I would like the code chunks from the Rmd file to render the same way. How can I fix this?

Another Issue

Testing

Running into deployment error

Hi, thank you so much for porting this theme.
However i cant deploy it and i dont know how to fix the issue.
Here's the error netlify is throwing to me.

Error: Error building site: failed to render pages: render of "taxonomy" failed: execute of template failed: template: authors/list.html:4:11: executing "main" at <partial "author/hero.html" .>: error calling partial: execute of template failed: template: partials/author/hero.html:11:15: executing "partials/author/hero.html" at <partial "author/social_links.html" .>: error calling partial: "/opt/build/repo/layouts/partials/author/social_links.html:5:36": execute of template failed: template: partials/author/social_links.html:5:36: executing "partials/author/social_links.html" at <partial $path $&gt;: error calling partial: partial "icons/social/website" not found

The repo is a fork of this one and the only changes i have made are copying the files in exampleSite to root, adding a text svg and a menu.

Kindly help me.

Open Graph picture does not render when pasting link of the homepage in to facebook or email

Open Graph picture does not render when pasting link of the homepage in to facebook or email

Onely a black rectangle as picture

on the other hand it works excelent on article pages

Suggestions of small fixes in CSS Style

Fix: Boxes overlapping

In file layouts/partials/article/hero.html:

<div class="article-hero-image" id="ArticleImage__Hero">
  <img src="{{ . }}">
</div>

According to css file, image will shrink to width: 100% while ratio is keeped.
The ratio of hero images, that come with the theme, is arround 2:1. If user pick an image of ratio, say 1.5:1 or even lower, Image box may overlap with Article Content.

It's ok to fix this by overwritting original 'css' files with user specified ones.
But maybe you guys can fix this in the upstream, so this theme can gain more popularities.

Nice theme, great work btw.

Unreadable About page in dark mode

If you view the About page in dark mode, the font color for the bottom paragraph is too dark to be legible. The font color doesn't change with scrolling either.

https://hugo-novela-forestry.netlify.com/about/

Avatar featured author not rendering

Using Novela for https://dedataverbinders.nl with Hugo extended 0.80, the avatar from the featured authors are sometimes not rendering properly on the homepage nor on the author page.

Have tried changing the underlying .jpg files, trying different sizes but to no avail. Also, I can't figure out why some do work and others don't. Any idea what's going on?

BTW, I have set feature=false for the authors that are not rendering. If you click on the first post, and then click the drop-down authors menu, you'll see three aviators not being rendered properly.

Source code: https://github.com/dataverbinders/website
Static site: https://github.com/dataverbinders/dataverbinders.github.io

Guidelines for changing logo

Is it possible to include specific guidelines for the creation and implementation of the .svg logo?
I'm having a hard time changing it properly: adding "class="change-fill"" doesn't seem working for me.

Thanks in advance to everyone!

Help Wanted: Advice on How To Utilize The Right Area

Hi, how are you?
I am currently using this theme, it's awesome, how ever i can't seem to find a way to add table of contents to the right side of the website.
I have tried left align and aside but it fails.
Can you help me, just point me to the right direction.

Multilingual

How to add multiple language support with this theme ?

broken link due to typo

I know this is neither the ideal place nor the ideal way to report a broken link to this repo, but I could not find a better one.
In the first line below https://themes.gohugo.io/hugo-theme-novela/#install-from-the-command-line it says If you don’t want to use the starter and starter links to htps://github.com/forestryio/novela-hugo-starter which should obviously be https://github.com/forestryio/novela-hugo-starter
I am not sure if it is in your power to fix it, but I hope so.

Large hero image hides text content

Steps to reproduce:
In forestry.io add a new post with hero image with dimensions 944 × 630 pixels (intrinsic: 6016 × 4016 pixels)
Add text with about 300 words

Expected result:
Hero image and text content correctly spaces

Actual result:
Hero image overlaps the text content

posts are not shown on the home page

Rookie question here.

I've added the submodule. The theme is applied but the posts are not coming up on the home page. For example, content/posts/my-first-post.md is not there.

I was using ananke theme before, the posts are there. I'm sure something is missing but couldn't figure out, thanks for your help!

Using: Hugo v0.70.0

Tags Taxonomy Support

Hey there,
just discovered Hugo today and i pretty much like this theme. But I miss support for tag taxonomy, so that I can access a /tags/xxx site and only retrieve the articles that have this tag.
Because I have so far no knowledge, is this easy to add or does this require some deeper Hugo knowledge? At least for me it not seems so straight to copy the authors logic and transform it to tags...