Newpost York Daily
Elizabeth City, NC - 2017-11-03
How this theme evolved geoffm - 2017-11-03

First credit goes to Silke V at codepen.io name “silkine” [http://www.silkevoigts.de/].

Original source code can be found here: https://codepen.io/silkine/pen/jldif

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. 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”.

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:

============================================================
+-----archtypes
|     +-----articles.md # this file is used by hugo when you create a new article - provides front matter
+-----content
|     +-----articles # this is where all user created article markdown postings reside
|     |     +-----_index.md # this file is used by hugo to read front matter and populate general variable - similar to a config file
|     |     +-----newspaper-hugo-subtheme.md # this file - an article posting
+-----layouts
|     +-----articles # layout template specific to single page articles
|     |     +-----single.html # hugo uses this template to produce and single page for a posted article
|     +-----partials # tmeplates used for building all newsletter-hugo-subtheme pages - thanks and credit to codepen.io name "silkine"
|     |     +-----np-cols-ftr.html
|     |     +-----np-cols-hdr.html
|     |     +-----np-ftr.html
|     |     +-----np-hdr.html
|     |     +-----np-morebox.html
|     |     +-----np-nav.html
|     |     +-----np-weather.html
|     +-----section # hugo uses this directory to find "section" specific "list" templates
|     |     +-----articles.html # hugo uses this template to combine postings into a newletter front page
+-----static
|     +-----css # needed newspaper styles - (can be shared with other themes of course)
|     |     +-----np-gen.css # newspaper general styles
|     |     +-----np-nav.css # styles needed for menu navigation
|     +-----js # directory for local javascript code - (can be shared with other themes of course)
|     |     +-----np-nav.js # navigation menu javascript
|     |     +-----np-weather.js # weatherbox javascript - credit and thanks to simpleweatherjs.com
|     +-----img # directory for all images used in article (can be shared with other themes of course)
|     |     +-----np.jpg # used as the background for newpaper-hugo-subtheme
|     |     +-----royal101.jpg # a sample only
============================================================

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.

Installation:

Notes:

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.

geoff.mcnamara@gmail.com