1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
# Hugo Flex
A lightweight Hugo theme leveraging CSS Flexbox.
Verified to work with Hugo versions v0.65–v0.104.
## Features
- Flexbox-based responsive layout
- Full posts in RSS feed
- Themed RSS feed page
- No framework
- No javascript
- 100% speed score on PageSpeed Insight
Optional features:
- Show summaries on homepage
- Schema.org, Open Graph and Twitter Cards metadata
- Utterances comments widget
- Custom CSS and JS may be added [site-wide](#custom-css-and-js), or [dynamically](#dynamically-embedded) with shortcodes
- Built-in shortcodes:
- Netlify contact form
- On-click Soundcloud player
## Example
The [example site](https://de-souza.github.io/hugo-flex/) is based on the [hugoBasicExample](https://github.com/gohugoio/hugoBasicExample) repository. A complete starter template with in-depth explanations is available at [scivision/hugo-flex-example](https://github.com/scivision/hugo-flex-example).
## Installation
1. [Install Hugo](https://gohugo.io/getting-started/installing/).
2. [Create a Hugo site](https://gohugo.io/getting-started/quick-start/).
3. Open a command prompt at the root of the site and download the theme:
```bash
git init
git submodule add https://github.com/de-souza/hugo-flex.git themes/hugo-flex
```
4. Add the theme to the site configuration:
```bash
echo 'theme: hugo-flex' >> config.yaml
```
## Updating
Open a command prompt at the root of the site and update the theme:
```bash
git submodule update --remote --rebase
```
## Configuration
The default theme configuration may be modified and copied to the site configuration:
```yaml
params:
color: teal # Any color in CSS syntax
width: 42rem # Any length in CSS syntax
footer: >- # HTML spaces ( ) are needed before HTML elements
Except where otherwise noted, content on this site is licensed under a  
<a href="http://creativecommons.org/licenses/by/4.0/" rel="license">Creative
Commons Attribution 4.0 International License</a>.
rss: To subscribe to this RSS feed, copy its address and paste it into your
favorite feed reader.
summaries: false # Set to true to show summaries of posts on homepage
divider: \a0 # Set to false to remove divider below posts on homepage
schema: false # Set to true to add Schema.org metadata
opengraph: false # Set to true to add Open Graph metadata
twittercards: false # Set to true to add Twitter Cards metadata
utterances:
repo: # Set to Utterances repo URL to add Utterances comments
issueterm: pathname
theme: github-light
netlify:
honeypot: false # Set to true to add honeypot field in contact form
recaptcha: false # Set to true to add recaptcha challenge in contact form
# css: # Uncomment to add custom CSS from the assets directory
# - css/foo.css
# - bar.css
# js: # Uncomment to add custom JS from the assets directory
# - js/foo.js
# - bar.js
menu:
nav:
- name: About
url: about/
weight: 1
- name: Posts
url: post/
weight: 2
- name: Tags
url: tags/
weight: 3
- name: Categories
url: categories/
weight: 4
- name: RSS
url: index.xml
weight: 5
```
## Built-In Shortcodes
### Netlify Contact Form
A contact form working with the Netlify form handling service may be inserted with the shortcode:
```
{{< contact >}}
```
A custom success page URL may be given as a parameter:
```
{{< contact "/success" >}}
```
### Soundcloud Player
A Soundcloud Player may be inserted with the shortcode:
```
{{< soundcloud 123456789 >}}
```
The parameter is a track ID that can be extracted from the "embed" sharing menu on the track page.
## Custom CSS and JS
### Site-Wide
Custom CSS and JS can be added to all the site pages at once. To do so, their filenames can be added to the site configuration:
```yaml
params:
css:
- css/foo.css
- bar.css
js:
- js/foo.js
- bar.js
```
The paths are relative to the project working directory. In this example, the file paths would be `assets/css/foo.css`, `assets/bar.css`, `assets/js/foo.js`, `assets/bar.js`.
### Dynamically Embedded
To embed CSS and JS resources on specific pages of the site, they must be added to the `.Scratch` variable from a shortcode template. As a result, they will be loaded in pages where the shortcode is used. For instance, a shortcode template could contain:
```html
{{ resources.Get "myscript.js" | fingerprint | .Page.Scratch.SetInMap "js" "myscript" }}
```
This would load script myscript.js on every page where the shortcode is used.
As an example, this is the template for the built-in Soundcloud shortcode:
```html
{{ resources.Get "css/soundcloud.css" | minify | fingerprint | .Page.Scratch.SetInMap "css" "soundcloud" }}
{{ resources.Get "js/soundcloud.js" | minify | fingerprint | .Page.Scratch.SetInMap "js" "soundcloud" }}
<div class="Soundcloud" data-id="{{ .Get 0 }}"></div>
```
## License
This theme is licensed under the [Apache License 2.0](https://github.com/de-souza/hugo-flex/blob/master/LICENSE).
|
