Announcing a new project: newspaper-hugo-subtheme
I had a coworker who had a non-profit business blog that wanted to offer a newsletter to her clients. So I got interested in finding an HTML format that gave an old traditional newspaper style and Silke offered a solution that provided a strong simple css base. Currently (2017) I find the hugo cms system to be the easiest most portable static web building application freely available. The challenge was to create a full newsletter style theme as a subtheme within an existing theme structure. So I mocked up a ported version of Silke’s newspaper css into a hugo “section”.
An example of this subtheme can be seen here: [newspaper-hugo-subtheme]
This project is a drop in offering to any existing hugo themed structure which will produce a newsletter format in an “article(s)” hugo section. A user only needs to change the title, city, and state varbiable that are stored as front matter in the ./content/articles/_index.md file. Hugo uses this file natively to discover section (in this case “articles”) specific data. All posts to the newsletter subtheme should be created in this ./content/articles/ directory as markdown files. Running hugo new articles/mynewarticle.md will create a new file with the default front matter pulled from ./archtypes/articles.md.
This project becomes a drop in addition to any hugo theme to add a newspaper type subtheme section.
It might be useful to examine the directoy file structure for this project:
I have used the hugo “casper” theme (https://github.com/vjeantet/hugo-theme-casper.git) as my standard for some time now so the menu format is in this project is similar to (but not as good as) the casper theme navigation menu. Note also that the menu system used here is the standard hugo menu.main method for generating menu entries. These entries come from either your config.toml file and/or markdown files that have this included in the front matter
menu = "main"
All the section pages will include the Title (Newspaper) from ./content/articles/_index.md becuase it also includes the above menu = “main” line.
- build out a standard hugo site with any theme you prefer.
- from the base hugo working directory for that site extract these project files
cd newspaper-hugo-theme/ rsync -av --exclude=".*" --exclude="README.md" --exclude="LICENSE" ./* /your/hugo/website-base-dir/
- edit the ./content/articles/_index.md file to change the general variables used in this subtheme
- Several google fonts are called in ./layouts/partial/np-hdr.html - this requires internet access
- Different headline styles and subheadline styles can be used for each listed article
- examples of these can be seen in the example posts
- these are set in front matter variables for each post - see this article front matter with hl = 3 and subhl = 2
- there are six headline styles and 6 subheadline styles - see ./static/css/np-gen.css for more info on these styles.
- the image variable in the article front matter is used on single article pages and the style is less than ideal.
Lots of improvements can be made to this and I encourage you to make and changes you want. Only request is that you retain the credits contained within. Please let me know of any suggestions or improvements.