Pre-2.0 Enhancements (#94)
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 performance
This commit is contained in:
Bud Parr
GitHub
parent
d5b87cb15e
commit
1f3b6f5598
12
README.md
12
README.md
|
|
@ -10,10 +10,11 @@ Features
|
|||
|
||||
- Responsive
|
||||
- Accessible
|
||||
- Contact form
|
||||
- Contact form
|
||||
- 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
|
||||
- Table of Contents (must declare `toc: true` in post parameter)
|
||||
|
||||
Also includes examples of Hugo Features or Functions:
|
||||
|
||||
|
|
@ -21,6 +22,7 @@ Also includes examples of Hugo Features or Functions:
|
|||
- Taxonomies
|
||||
- Archetypes
|
||||
- Custom shortcode
|
||||
- Related content
|
||||
- Hugo built-in menu
|
||||
- `with`
|
||||
- `HUGO_ENV`
|
||||
|
|
@ -66,6 +68,12 @@ Take a look inside the [`exampleSite`](https://github.com/budparr/gohugo-theme-a
|
|||
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
|
||||
|
||||
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'`
|
||||
|
|
|
|||
|
|
@ -17,7 +17,13 @@
|
|||
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
|
||||
{{ 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" . }}
|
||||
{{ partial "site-favicon.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
{{ 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">
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div>
|
||||
{{- template "_internal/pagination.html" . -}}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,39 @@
|
|||
{{ 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>
|
||||
<aside class="ph3 mt2 mt6-ns">
|
||||
{{ partial "menu-contextual.html" . }}
|
||||
</aside>
|
||||
</div>
|
||||
{{ define "header" }}
|
||||
{{/* We can override any block in the baseof file be defining it in the template */}}
|
||||
{{ partial "page-header.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<aside class="w-30-l mt6-l">
|
||||
{{- partial "menu-contextual.html" . -}}
|
||||
</aside>
|
||||
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,9 @@
|
|||
<p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="mw8 center">
|
||||
{{ $section := .Data.Pages }}
|
||||
<div class="mw8 center">
|
||||
<section class="flex-ns flex-wrap justify-around mt5">
|
||||
{{ range $section }}
|
||||
{{ range .Pages }}
|
||||
<div class="relative w-100 mb4 bg-white">
|
||||
{{ partial "summary.html" . }}
|
||||
</div>
|
||||
|
|
|
|||
18
layouts/page/single.html
Normal file
18
layouts/page/single.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{{ 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 }}
|
||||
|
|
@ -1,24 +1,33 @@
|
|||
{{/* 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>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1 +1,6 @@
|
|||
<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 }}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,9 @@
|
|||
{{ $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}}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
{{ 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">
|
||||
<main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
|
||||
{{ .Content }}
|
||||
</main>
|
||||
{{ $section := .Paginate (where .Data.Pages "Section" .Section) }}
|
||||
<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">
|
||||
{{/*
|
||||
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" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{{ 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 }}
|
||||
|
|
@ -25,3 +25,7 @@
|
|||
.pagination li.active a:visited {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
#TableOfContents ul li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
/* Put your custom styles here and run `npm start` from the "src" directory on */
|
||||
|
||||
#TableOfContents ul li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*! TACHYONS v4.7.0 | http://tachyons.io */
|
||||
/*! TACHYONS v4.9.1 | http://tachyons.io */
|
||||
|
||||
/*
|
||||
*
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
@import 'tachyons/src/_media-queries';
|
||||
|
||||
/* 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 */
|
||||
/* @import 'tachyons/src/_debug'; */
|
||||
|
|
|
|||
6
src/package-lock.json
generated
6
src/package-lock.json
generated
|
|
@ -5336,9 +5336,9 @@
|
|||
}
|
||||
},
|
||||
"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
|
||||
},
|
||||
"tapable": {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"postcss-import": "^9.1.0",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"style-loader": "^0.16.1",
|
||||
"tachyons": "^4.7.0",
|
||||
"tachyons": "^4.9.1",
|
||||
"webpack": "^2.3.3"
|
||||
},
|
||||
"dependencies": {}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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 = {
|
||||
entry: {
|
||||
app: './js/main.js'
|
||||
|
|
@ -8,20 +8,20 @@ module.exports = {
|
|||
module: {
|
||||
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$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader?importLoaders=1!postcss-loader'
|
||||
})
|
||||
}
|
||||
|
|
@ -29,22 +29,27 @@ module.exports = {
|
|||
},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, "./../static/dist"),
|
||||
filename: '[name].bundle.js',
|
||||
path: path.join(__dirname, './../static/dist'),
|
||||
filename: 'js/[name].[chunkhash].js'
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
|
||||
modules: [path.resolve(__dirname, 'src'), 'node_modules']
|
||||
},
|
||||
|
||||
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: {
|
||||
watch: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
3
static/dist/css/app.8e831b6359bad500b66d8214096381de.css
vendored
Normal file
3
static/dist/css/app.8e831b6359bad500b66d8214096381de.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3
static/dist/main.css
vendored
3
static/dist/main.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -6,9 +6,9 @@ license = "MIT"
|
|||
licenselink = "https://github.com/budparr/gohugo-theme-ananke/blob/master/LICENSE.md"
|
||||
description = "A Base theme for building full featured Hugo sites"
|
||||
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]
|
||||
name = "Bud Parr"
|
||||
|
|
|
|||
Loading…
Reference in a new issue