2.0 Enhancements - Improve template structure - Fixed issue where flexbox was configured improperly and the side column expanded with longer content. - No longer assume that posts are called "post" - Simplify tag handling - Improve related posts handling - Support native Table of contents (if declared in params) - Add DISQUS commenting (if disqusShortname added to config) - Uses Hugo's Related content feature - Add asset hashing to Webpack for performancetags/2.1
- Responsive | - Responsive | ||||
- Accessible | - Accessible | ||||
- Contact form | |||||
- Contact form | |||||
- Custom Robots.txt (changes values based on environment) | - Custom Robots.txt (changes values based on environment) | ||||
- Internal templates for meta data and google analytics | |||||
- Internal templates for meta data, google analytics, and DISQUS comments | |||||
- RSS Discovery | - RSS Discovery | ||||
- Table of Contents (must declare `toc: true` in post parameter) | |||||
Also includes examples of Hugo Features or Functions: | Also includes examples of Hugo Features or Functions: | ||||
- Taxonomies | - Taxonomies | ||||
- Archetypes | - Archetypes | ||||
- Custom shortcode | - Custom shortcode | ||||
- Related content | |||||
- Hugo built-in menu | - Hugo built-in menu | ||||
- `with` | - `with` | ||||
- `HUGO_ENV` | - `HUGO_ENV` | ||||
You may need to delete the line: `themesDir = "../.."` | You may need to delete the line: `themesDir = "../.."` | ||||
### Add comments | |||||
To enable DISQUS comments, add `disqusShortname = YOURSHORTNAME` to your config file. | |||||
### Change the hero background | ### Change the hero background | ||||
For any page or post you can add a featured image by including the local path in front matter (see content in the ExampleSite folder for examples): `featured_image: '/images/gohugo-default-sample-hero-image.jpg'` | For any page or post you can add a featured image by including the local path in front matter (see content in the ExampleSite folder for examples): `featured_image: '/images/gohugo-default-sample-hero-image.jpg'` |
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> | <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> | ||||
{{ end }} | {{ end }} | ||||
<link href='{{ "dist/main.css" | absURL }}' rel='stylesheet' type="text/css" /> | |||||
{{ $css_path := $.Param "dev.css_path" | default "themes/gohugo-theme-ananke/static/dist/css" }} | |||||
{{ with $css_path }} | |||||
{{ range readDir . }} | |||||
<link href='/dist/css/{{ .Name }}' rel='stylesheet' type="text/css" data-turbolinks-track="reload" /> | |||||
{{ end }} | |||||
{{ end }} | |||||
{{ block "favicon" . }} | {{ block "favicon" . }} | ||||
{{ partial "site-favicon.html" . }} | {{ partial "site-favicon.html" . }} | ||||
{{ end }} | {{ end }} |
{{ define "main" }} | {{ define "main" }} | ||||
<article class="cf pa3 pa4-m pa4-l"> | |||||
<div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray"> | |||||
{{ .Content }} | |||||
</div> | |||||
</article> | |||||
<div class="mw8 center"> | |||||
{{ $paginator := .Paginate (where .Data.Pages "Section" .Section) }} | |||||
<article class="pa3 pa4-ns nested-copy-line-height nested-img"> | |||||
<main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"> | |||||
{{- .Content -}} | |||||
</main> | |||||
<section class="flex-ns flex-wrap justify-around mt5"> | <section class="flex-ns flex-wrap justify-around mt5"> | ||||
{{ range $paginator.Pages }} | |||||
<div class="relative w-100 mb4 bg-white"> | |||||
{{ partial "summary.html" . }} | |||||
{{ range .Paginator.Pages }} | |||||
<div class="relative w-100 w-30-l mb4 bg-white"> | |||||
{{- partial "summary.html" . -}} | |||||
</div> | </div> | ||||
{{ end }} | {{ end }} | ||||
</section> | </section> | ||||
{{ template "_internal/pagination.html" . }} | |||||
</div> | |||||
{{- template "_internal/pagination.html" . -}} | |||||
</article> | |||||
{{ end }} | {{ end }} |
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} | |||||
{{ define "header" }} | |||||
{{/* We can override any block in the baseof file be defining it in the template */}} | |||||
{{ partial "page-header.html" . }} | |||||
{{ end }} | |||||
{{ define "main" }} | {{ define "main" }} | ||||
<div class="flex-l mt2 mw8 center"> | |||||
<article class="center cf pv5 ph3 ph4-ns mw7"> | |||||
<header> | |||||
<p class="f6 b helvetica tracked"> | |||||
{{ humanize .Section | upper }} | |||||
</p> | |||||
<h1 class="f1"> | |||||
{{ .Title }} | |||||
</h1> | |||||
</header> | |||||
<div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray"> | |||||
{{ .Content }} | |||||
<article class="flex-l flex-wrap justify-between mw8 center"> | |||||
<header class="mt4 w-100"> | |||||
<p class="f6 b helvetica tracked"> | |||||
{{/* | |||||
CurrentSection allows us to use the section title instead of inferring from the folder. | |||||
https://gohugo.io/variables/page/#section-variables-and-methods | |||||
*/}} | |||||
{{with .CurrentSection.Title }}{{. | upper }}{{end}} | |||||
</p> | |||||
<h1 class="f1 athelas mb1"> | |||||
{{- .Title -}} | |||||
</h1> | |||||
{{/* Hugo uses Go's date formatting is set by example. Here are two formats */}} | |||||
<time class="f6 mv4 dib tracked" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> | |||||
{{- .Date.Format "January 2, 2006" -}} | |||||
</time> | |||||
</header> | |||||
<main class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l"> | |||||
{{- .Content -}} | |||||
{{- partial "tags.html" . -}} | |||||
<div class="mt6"> | |||||
{{ template "_internal/disqus.html" . }} | |||||
</div> | </div> | ||||
</article> | |||||
<aside class="ph3 mt2 mt6-ns"> | |||||
{{ partial "menu-contextual.html" . }} | |||||
</main> | |||||
<aside class="w-30-l mt6-l"> | |||||
{{- partial "menu-contextual.html" . -}} | |||||
</aside> | </aside> | ||||
</div> | |||||
</article> | |||||
{{ end }} | {{ end }} |
<p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p> | <p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p> | ||||
</div> | </div> | ||||
</article> | </article> | ||||
<div class="mw8 center"> | |||||
{{ $section := .Data.Pages }} | |||||
<div class="mw8 center"> | |||||
<section class="flex-ns flex-wrap justify-around mt5"> | <section class="flex-ns flex-wrap justify-around mt5"> | ||||
{{ range $section }} | |||||
{{ range .Pages }} | |||||
<div class="relative w-100 mb4 bg-white"> | <div class="relative w-100 mb4 bg-white"> | ||||
{{ partial "summary.html" . }} | {{ partial "summary.html" . }} | ||||
</div> | </div> |
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} | |||||
{{ define "main" }} | |||||
<div class="flex-l mt2 mw8 center"> | |||||
<article class="center cf pv5 ph3 ph4-ns mw7"> | |||||
<header> | |||||
<p class="f6 b helvetica tracked"> | |||||
{{ humanize .Section | upper }} | |||||
</p> | |||||
<h1 class="f1"> | |||||
{{ .Title }} | |||||
</h1> | |||||
</header> | |||||
<div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray"> | |||||
{{ .Content }} | |||||
</div> | |||||
</article> | |||||
</div> | |||||
{{ end }} |
{{/* Get the current page's URL so we can compare it to the list below */}} | |||||
{{ $currentPageUrl := .URL }} | |||||
{{/* Get a list of this section's other pages. "RegularPages" excludes the list page */}} | |||||
{{ $currentSection := (where .Site.RegularPages "Section" .Section) }} | |||||
{{/* Get the number of entries of $currentSection and subtract 1 */}} | |||||
{{ $i := sub ($currentSection | len) 1 }} | |||||
{{/* So we can only show this menu if there are one or more other entries */}} | |||||
{{ if ge $i 1 }} | |||||
<div class="bg-light-gray pa3"> | |||||
<ul> | |||||
<li class="list b mb3">{{/* Return the section name, make it readable (humanize) and if there are 2 or more entries, make the section name plural (pluralize). */}} | |||||
{{ $i }} More {{ if ge $i 2 }}{{ .Section | humanize | pluralize }}{{ else }}{{ .Section | humanize }}{{end}} | |||||
</li> | |||||
{{ range $currentSection }} | |||||
<li class="list f5 w-100 hover-bg-white nl1"> | |||||
{{/* If the URL returned is the same as the current URL dim it so we know that that's the page we're on. NOTE: Should probably use a more accessible way of displaying this. */}} | |||||
<a href="{{ .URL }}" class="link ph2 pv2 db black{{ if eq $currentPageUrl .URL }} o-50{{end}}"> | |||||
{{ .Title }} | |||||
{{/* | |||||
Use Hugo's native Table of contents feature. You must set `toc: true` in your parameters for this to show. | |||||
https://gohugo.io/content-management/toc/ | |||||
*/}} | |||||
{{- if .Params.toc -}} | |||||
<div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links"> | |||||
<p class="f5 b mb3">What's in this {{ humanize .Type }}</p> | |||||
{{ .TableOfContents }} | |||||
</div> | |||||
{{- end -}} | |||||
{{/* | |||||
Use Hugo's native related content feature to pull in content that may have similar parameters, like tags. etc. | |||||
https://gohugo.io/content-management/related/ | |||||
*/}} | |||||
{{ $related := .Site.RegularPages.Related . | first 15 }} | |||||
{{ with $related }} | |||||
<div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links"> | |||||
<p class="f5 b mb3">Related</p> | |||||
<ul class="pa0 list"> | |||||
{{ range . }} | |||||
<li class="mb2"> | |||||
<a href="{{ .RelPermalink }}"> | |||||
{{- .Title -}} | |||||
</a> | </a> | ||||
</li> | </li> | ||||
{{ end }} | |||||
{{ end }} | |||||
</ul> | </ul> | ||||
</div> | |||||
</div> | |||||
{{ end }} | {{ end }} |
<script src="{{ "dist/app.bundle.js" | absURL }}" async></script> | |||||
{{ $css_path := $.Param "dev.js_path" | default "themes/gohugo-theme-ananke/static/dist/js" }} | |||||
{{ with $css_path }} | |||||
{{ range readDir . }} | |||||
<link href='/dist/js/{{ .Name }}' rel='stylesheet' type="text/css" data-turbolinks-track="reload" /> | |||||
{{ end }} | |||||
{{ end }} |
{{ $currentPageUrl := .URL }} | |||||
{{ if .Params.tags }} | |||||
{{ $name := index .Params.tags 0 }} | |||||
{{ $name := $name | urlize }} | |||||
{{ $tags := index .Site.Taxonomies.tags $name }} | |||||
{{ $i := $tags | len }} | |||||
{{ if ge $i 2 }} | |||||
<div class="mt5 f6 gray nested-lh-copy bg-light-gray ph3 pv2 measure-wide-l"> | |||||
<ul class="list dib ml0 pl0"> | |||||
<li class="black dib mb2 mr2"> | |||||
Related: | |||||
</li> | |||||
{{ range $tags.Pages }} | |||||
{{ if ne .URL $currentPageUrl }} | |||||
<li class="mb2 mr3"> | |||||
<a href="{{ .URL }}" class="link mid-gray dim"> | |||||
{{ .LinkTitle }} | |||||
</a> | |||||
</li> | |||||
{{ end }} | |||||
{{end}} | |||||
</ul> | |||||
</div> | |||||
<ul class="pa0"> | |||||
{{ range .Params.tags }} | |||||
<li class="list"> | |||||
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif"> | |||||
{{- . -}} | |||||
</a> | |||||
</li> | |||||
{{ end }} | {{ end }} | ||||
{{end}} | |||||
</ul> |
{{ define "main" }} | {{ define "main" }} | ||||
{{/* | |||||
This template is the same as the default and is here to demonstrate that if you have a content directory called "post" you can create a layouts directory, just for that section. | |||||
*/}} | |||||
<article class="pa3 pa4-ns nested-copy-line-height nested-img"> | <article class="pa3 pa4-ns nested-copy-line-height nested-img"> | ||||
<main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"> | <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"> | ||||
{{ .Content }} | {{ .Content }} | ||||
</main> | </main> | ||||
{{ $section := .Paginate (where .Data.Pages "Section" .Section) }} | |||||
<section class="flex-ns flex-wrap justify-around mt5"> | <section class="flex-ns flex-wrap justify-around mt5"> | ||||
{{ range $section.Pages }} | |||||
{{ range .Paginator.Pages }} | |||||
<div class="relative w-100 w-30-l mb4 bg-white"> | <div class="relative w-100 w-30-l mb4 bg-white"> | ||||
{{/* | |||||
Note we can use `.Render` here for items just in this section, instead of a partial to pull in items for the list page. https://gohugo.io/functions/render/ | |||||
*/}} | |||||
{{ .Render "summary" }} | {{ .Render "summary" }} | ||||
</div> | </div> | ||||
{{ end }} | {{ end }} |
{{ define "header" }} | |||||
{{/* We can override any block in the baseof file be defining it in the template */}} | |||||
{{ partial "page-header.html" . }} | |||||
{{ end }} | |||||
{{ define "main" }} | |||||
<div class="flex-l mt2 mw8 center"> | |||||
<article class="center cf pv5 ph3 ph4-ns mw7"> | |||||
<p class="f6 b helvetica tracked"> | |||||
{{/* Humanize removes hyphens and capitalizes the first word */}} | |||||
{{ humanize .Section | upper }} | |||||
</p> | |||||
<h1 class="f1 athelas"> | |||||
{{ .Title }} | |||||
</h1> | |||||
{{/* TODO: Add Hugo author */}} | |||||
{{/* Hugo uses Go's date formatting is set by example. Here are two formats */}} | |||||
<time class="f6 mv4 dib tracked" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> | |||||
{{ .Date.Format "January 2, 2006" }} | |||||
</time> | |||||
<section class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray"> | |||||
{{ .Content }} | |||||
</section> | |||||
{{ partial "tags.html" . }} | |||||
</article> | |||||
<div class="ph3 mt2 mt6-ns"> | |||||
{{ partial "menu-contextual.html" . }} | |||||
</div> | |||||
</div> | |||||
{{ end }} |
.pagination li.active a:visited { | .pagination li.active a:visited { | ||||
background-color: #ddd; | background-color: #ddd; | ||||
} | } | ||||
#TableOfContents ul li { | |||||
margin-bottom: 1em; | |||||
} |
/* Put your custom styles here and run `npm start` from the "src" directory on */ | /* Put your custom styles here and run `npm start` from the "src" directory on */ | ||||
#TableOfContents ul li { | |||||
margin-bottom: 1em; | |||||
} |
/*! TACHYONS v4.7.0 | http://tachyons.io */ | |||||
/*! TACHYONS v4.9.1 | http://tachyons.io */ | |||||
/* | /* | ||||
* | * | ||||
@import 'tachyons/src/_media-queries'; | @import 'tachyons/src/_media-queries'; | ||||
/* Debugging */ | /* Debugging */ | ||||
/*@import 'tachyons/src/_debug-children'; | |||||
@import 'tachyons/src/_debug-grid';*/ | |||||
/* @import 'tachyons/src/_debug-children'; | |||||
@import 'tachyons/src/_debug-grid'; */ | |||||
/* Uncomment out the line below to help debug layout issues */ | /* Uncomment out the line below to help debug layout issues */ | ||||
/* @import 'tachyons/src/_debug'; */ | /* @import 'tachyons/src/_debug'; */ |
} | } | ||||
}, | }, | ||||
"tachyons": { | "tachyons": { | ||||
"version": "4.9.0", | |||||
"resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.0.tgz", | |||||
"integrity": "sha512-bq40Dxl0Q9LFcFsoU4BmTlR4Y9Ta/9AClAhmKhBBdXN0isup9dXtYmFIJGYHz2EOVOf/gO/FONEH0BDa/iNYkg==", | |||||
"version": "4.9.1", | |||||
"resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.1.tgz", | |||||
"integrity": "sha512-trJFXhzDZeHRcd9Bqn6ub3e0VqGWKMsGdP7RJoT+8Ihoak41o1qCwqcFx8hsFlfFWa6a4jsb464TNXnTt+MPnw==", | |||||
"dev": true | "dev": true | ||||
}, | }, | ||||
"tapable": { | "tapable": { |
"postcss-import": "^9.1.0", | "postcss-import": "^9.1.0", | ||||
"postcss-loader": "^1.3.3", | "postcss-loader": "^1.3.3", | ||||
"style-loader": "^0.16.1", | "style-loader": "^0.16.1", | ||||
"tachyons": "^4.7.0", | |||||
"tachyons": "^4.9.1", | |||||
"webpack": "^2.3.3" | "webpack": "^2.3.3" | ||||
}, | }, | ||||
"dependencies": {} | "dependencies": {} |
var path = require("path"); | |||||
var ExtractTextPlugin = require("extract-text-webpack-plugin"); | |||||
var webpack = require("webpack"); | |||||
var path = require('path'); | |||||
var ExtractTextPlugin = require('extract-text-webpack-plugin'); | |||||
var webpack = require('webpack'); | |||||
module.exports = { | module.exports = { | ||||
entry: { | entry: { | ||||
app: './js/main.js' | app: './js/main.js' | ||||
module: { | module: { | ||||
rules: [ | rules: [ | ||||
{ | { | ||||
test: /\.js$/, | |||||
exclude: /node_modules/, | |||||
use: { | |||||
loader: 'babel-loader', | |||||
options: { | |||||
presets: ['env'] | |||||
// plugins: [require('babel-plugin-transform-object-rest-spread')] | |||||
} | |||||
} | |||||
}, | |||||
test: /\.js$/, | |||||
exclude: /node_modules/, | |||||
use: { | |||||
loader: 'babel-loader', | |||||
options: { | |||||
presets: ['env'] | |||||
// plugins: [require('babel-plugin-transform-object-rest-spread')] | |||||
} | |||||
} | |||||
}, | |||||
{ | { | ||||
test: /\.css$/, | test: /\.css$/, | ||||
use: ExtractTextPlugin.extract({ | use: ExtractTextPlugin.extract({ | ||||
fallback: "style-loader", | |||||
fallback: 'style-loader', | |||||
use: 'css-loader?importLoaders=1!postcss-loader' | use: 'css-loader?importLoaders=1!postcss-loader' | ||||
}) | }) | ||||
} | } | ||||
}, | }, | ||||
output: { | output: { | ||||
path: path.join(__dirname, "./../static/dist"), | |||||
filename: '[name].bundle.js', | |||||
path: path.join(__dirname, './../static/dist'), | |||||
filename: 'js/[name].[chunkhash].js' | |||||
}, | }, | ||||
resolve: { | resolve: { | ||||
modules: [path.resolve(__dirname, 'src'), 'node_modules'], | |||||
modules: [path.resolve(__dirname, 'src'), 'node_modules'] | |||||
}, | }, | ||||
plugins: [ | plugins: [ | ||||
new ExtractTextPlugin("main.css"), | |||||
new webpack.ProvidePlugin({ | |||||
$: "jquery", | |||||
jQuery: "jquery" | |||||
}) | |||||
new ExtractTextPlugin({ | |||||
filename: getPath => { | |||||
return getPath('css/[name].[contenthash].css'); | |||||
}, | |||||
allChunks: true | |||||
}) | |||||
// new webpack.ProvidePlugin({ | |||||
// $: "jquery", | |||||
// jQuery: "jquery" | |||||
// }) | |||||
], | ], | ||||
watchOptions: { | watchOptions: { | ||||
watch: true | watch: true | ||||
} | } | ||||
} | |||||
}; |
licenselink = "https://github.com/budparr/gohugo-theme-ananke/blob/master/LICENSE.md" | licenselink = "https://github.com/budparr/gohugo-theme-ananke/blob/master/LICENSE.md" | ||||
description = "A Base theme for building full featured Hugo sites" | description = "A Base theme for building full featured Hugo sites" | ||||
homepage = "https://github.com/budparr/gohugo-theme-ananke" | homepage = "https://github.com/budparr/gohugo-theme-ananke" | ||||
tags = ["website", "starter", "responsive"] | |||||
features = ["posts", "shortcodes"] | |||||
min_version = 0.25 | |||||
tags = ["website", "starter", "responsive", "Disqus", "blog", "Tachyons"] | |||||
features = ["posts", "shortcodes", "related content", "comments"] | |||||
min_version = 0.30.2 | |||||
[author] | [author] | ||||
name = "Bud Parr" | name = "Bud Parr" |