Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First commit for the newspaper-hugo-subtheme project
- Loading branch information
0 parents
commit bd7667e
Showing
29 changed files
with
1,232 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| *.sh | ||
| *.tar | ||
| config.toml | ||
| themes/* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| # Newpaper Hugo Subtheme | ||
| ### newspaper-hugo-subtheme | ||
|
|
||
| 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 | ||
| 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". | ||
|
|
||
| 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. | ||
|
|
||
| <!--more--> | ||
|
|
||
| It might be useful to examine the directoy file structure for this project: | ||
|
|
||
| <pre> | ||
| ============================================================ | ||
| +-----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 | ||
| ============================================================ | ||
| </pre> | ||
|
|
||
| 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: | ||
|
|
||
| * build out a standard hugo site with any theme you prefer. | ||
| * from the base hugo working directory for that site extract these project files | ||
| * edit the ./content/articles/_index.md file to change the general variables used in this subtheme | ||
|
|
||
| ### Notes: | ||
|
|
||
| * Several google fonts are called in ./layouts/partial/np-hdr.html - this requires internet access | ||
| * Several javascripts are called in ./layouts/partial/np-ftr.html or ./layouts/partial/np-weather.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. | ||
|
|
||
| geoff.mcnamara@gmail.com | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| title: "{{ replace .TranslationBaseName "-" " " | title }}" | ||
| date: {{ .Date }} | ||
| draft: true | ||
| --- | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| +++ | ||
| date = "2014-07-11T10:54:24+02:00" | ||
| title = "" | ||
| subtitle = "" | ||
| author = "" | ||
| hl = 2 | ||
| subhl = 3 | ||
| draft = false | ||
| slug = "" | ||
| tags = [] | ||
| image = "" | ||
| comments = false # set false to hide Disqus | ||
| share = false # set false to hide share buttons | ||
|
|
||
| +++ | ||
|
|
||
| Content goes here | ||
|
|
||
| <!--more--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| +++ | ||
| ## this file is used to hold general variable values for the newspaper-hugo-subtheme | ||
| Title = "Newspaper" | ||
| nptitle = "Newpost York Daily" | ||
| city="Elizabeth City" | ||
| state="NC" | ||
| menu = "main" | ||
|
|
||
| +++ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| +++ | ||
| image = "" | ||
| share = false | ||
| tags = [] | ||
| slug = "" | ||
| title = "Lorem Ipsum" | ||
| draft = false | ||
| author = "Cicero circa 45 BC" | ||
| date = "2017-10-27" | ||
| comments = false | ||
| hl = 1 | ||
| subhl = 1 | ||
|
|
||
| +++ | ||
|
|
||
|
|
||
| Lorem Ipsum | ||
| "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." | ||
| "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." | ||
|
|
||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus tortor nec urna dapibus, ac sagittis mauris varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pretium sit amet nulla at consectetur. Curabitur vestibulum non odio dignissim posuere. Aliquam at maximus augue, at posuere mi. Quisque rhoncus ultricies pulvinar. Suspendisse viverra arcu lacus, ut ornare elit pharetra sit amet. | ||
|
|
||
| Suspendisse a enim sit amet massa efficitur malesuada. Fusce pellentesque enim ut tempor euismod. Mauris ullamcorper eget magna ut commodo. Quisque nisl neque, vulputate ac hendrerit quis, volutpat sit amet ante. Nulla facilisis, nulla sit amet finibus feugiat, dui arcu maximus lorem, sit amet tincidunt risus neque nec magna. Morbi eleifend commodo lorem eget ornare. Fusce pulvinar ante eget dui pellentesque, id viverra orci volutpat. | ||
|
|
||
| Phasellus vel nulla dictum, sagittis neque ultricies, auctor augue. Phasellus at dolor et neque aliquet bibendum tincidunt quis dolor. Aliquam tincidunt erat convallis maximus suscipit. Nam quis fermentum nisl. In hac habitasse platea dictumst. Nam commodo, erat pellentesque blandit ornare, velit magna convallis dolor, id sagittis eros massa et metus. Suspendisse mollis maximus metus ut ornare. Donec sapien orci, euismod quis eleifend sit amet, ornare nec dolor. Nulla fermentum, lectus vitae fermentum bibendum, mi purus sagittis arcu, eu porttitor mauris metus in purus. Quisque vel metus eu dolor molestie semper a ac lacus. | ||
|
|
||
| Maecenas quis fermentum neque. Nulla viverra felis eget nisl consectetur egestas. Duis at augue ut nulla tempus convallis at ultrices felis. Aenean ullamcorper nunc tincidunt lorem ornare, id feugiat ante hendrerit. Vestibulum accumsan risus at justo ullamcorper pharetra. Proin maximus nec erat in pellentesque. Integer dignissim ipsum massa, sed varius orci dignissim aliquet. Aliquam metus risus, commodo id luctus vel, cursus at purus. Etiam consectetur at metus sed sagittis. | ||
|
|
||
| Nulla convallis risus purus, eu sollicitudin felis consequat sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi tristique pulvinar pharetra. Morbi ligula libero, volutpat vitae sapien in, ultricies interdum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed scelerisque, nisl ac pharetra pretium, erat dui pretium nibh, eu dignissim enim turpis efficitur turpis. Vivamus massa eros, gravida eu ipsum faucibus, tincidunt ultricies mauris. Mauris id lobortis turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin facilisis nec nunc in vestibulum. Nunc finibus ligula risus, a tristique dui tincidunt nec. Pellentesque a velit nec lectus faucibus luctus. Integer sagittis eros odio, nec ullamcorper orci tempor vel. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| +++ | ||
| image = "" | ||
| share = false | ||
| tags = [] | ||
| slug = "" | ||
| title = "Persiciatis unde omnis" | ||
| draft = false | ||
| author = "Cicero circa 45 BC" | ||
| date = "2017-10-26" | ||
| comments = false | ||
| hl = 2 | ||
| subhl = 2 | ||
|
|
||
| +++ | ||
|
|
||
|
|
||
| Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere | ||
|
|
||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | ||
|
|
||
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
|
|
||
| Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | ||
|
|
||
| Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. | ||
|
|
||
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. | ||
|
|
||
| At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. | ||
|
|
||
| Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| +++ | ||
| image = "" | ||
| share = false | ||
| tags = [] | ||
| slug = "" | ||
| title = "More fun with Latin" | ||
| draft = false | ||
| author = "Wizard" | ||
| date = "2017-10-25" | ||
| comments = false | ||
| hl = 3 | ||
| subhl = 3 | ||
|
|
||
| +++ | ||
|
|
||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | ||
|
|
||
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
|
|
||
| Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | ||
|
|
||
| Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. | ||
|
|
||
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. | ||
|
|
||
| At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. | ||
|
|
||
| Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | ||
|
|
Oops, something went wrong.