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
182
183
|
# Minimal Bootstrap Hugo Theme
[](https://app.netlify.com/sites/minimal-bootstrap-hugo-theme/deploys)
A minimal hugo theme made with bootstrap that focuses on content readability.
## Table of contents
- [Demo](#demo)
- [Minimum Hugo version](#minimum-hugo-version)
- [Installation](#installation)
- [Updating](#updating)
- [Run example site](#run-example-site)
- [Configuration](#configuration)
- [Favicons](#favicons)
- [Override](#override)
- [Homepage example](#homepage-example)
- [Configure cookie consent](#configure-cookie-consent)
- [Syntax highlighting](#syntax-highlighting)
- [Shortcodes](#shortcodes)
- [`blockquote`](#blockquote)
- [`imgAbs`](#imgabs)
- [`imgRel`](#imgrel)
- [`imgProc`](#imgproc)
- [`mastodon`](#mastodon)
- [`fileRel`](#fileRel)
- [Getting help](#getting-help)
## Demo
https://minimal-bootstrap-hugo-theme.netlify.com/
## Minimum Hugo version
Hugo version `0.60.1` or higher is required. View the [Hugo releases](https://github.com/gohugoio/hugo/releases) and download the binary for your OS.
## Installation
From the root of your site:
```
git submodule add https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme.git themes/minimal-bootstrap-hugo-theme
```
## Updating
From the root of your site:
```
git submodule update --remote --merge
```
## Run example site
From the root of `themes/minimal-bootstrap-hugo-theme/exampleSite`:
```
hugo server --themesDir ../..
```
## Configuration
Copy the `config.toml` from the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite), then edit as desired.
## Favicons
Upload your image to [RealFaviconGenerator](https://realfavicongenerator.net/) then copy-paste the generated favicon files under `static`.
## Override
### Homepage example
As an example, let's say you didn't like the default homepage, and wanted to design one of your own. To do this, you would:
1. Copy file `YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/index.html`
1. Paste that file to `YOUR_SITE/layouts/index.html`
1. Edit `index.html` as desired
### Configure cookie consent
You can change the position, layout, color palette, "Learn more" link, compliance type, and custom text of the cookie consent popup. To do this, you would:
1. Copy file `YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/partials/cookie-consent.html`
1. Paste that file to `YOUR_SITE/layouts/partials/cookie-consent.html`
1. Complete the [cookie consent wizard](https://cookieconsent.insites.com/download/)
1. Paste the generated code from the wizard into `cookie-consent.html`
## Syntax highlighting
Hugo has built-in syntax highlighting, provided by Chroma. It is currently enabled in the `config.toml` file from the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite).
Checkout the [Chroma style gallery](https://xyproto.github.io/splash/docs/all.html) and choose the style you like.
## Shortcodes
### `blockquote`
This will format your blockquotes nicely. To use it, put the quote within the shortcode. The `author` argument is optional.
```
{{< blockquote author="Laura Ingalls" >}}
I am beginning to learn that it is the sweet, **simple** things of life which are the real ones after all.
{{< /blockquote >}}
```
### `imgAbs`
This will insert an image into your content by absolute path. To use it, pass the `pathURL` of your image.
These arguments are optional: `alt`, `class`, `style`.
```
{{< imgAbs
pathURL="img/some-img.png"
alt="Some description"
class="some-class"
style="some-style" >}}
```
### `imgRel`
This will insert an image into your content by relative path. To use it, pass the `pathURL` of your image.
These arguments are optional: `alt`, `class`, `style`.
```
{{< imgRel
pathURL="img/some-img.png"
alt="Some description"
class="some-class"
style="some-style" >}}
```
### `imgProc`
This will process an image from a [page bundle](https://gohugo.io/content-management/page-bundles/), then provide a link to the original image. To use it, pass the image name, command, and command options.
The `command` argument will be one of: `Resize`, `Fit`, `Fill`. For a deeper dive see the [hugo docs for image processing](https://gohugo.io/content-management/image-processing/).
These arguments are optional: `alt`, `class`, `style`.
The below example resizes an image to 800px width, while keeping the aspect ratio.
```
{{< imgProc
img="some-img.png"
command="Resize"
options="800x"
alt="Some description"
class="some-class"
style="some-style" >}}
```
### `mastodon`
This will embed a toot in an `iframe`.
These arguments are optional: `width`, `height`.
```
{{% mastodon
status="https://mastodon.social/@kevingimbel/100700713283716694"
width="1000" height="500" %}}
```
### `fileRel`
This will insert a link to a file by relative path into your content.
To use it, pass the `pathURL` of your file.
The arguments `class` and `style` are optional.
```
{{< fileRel
pathURL="files/file.pdf"
name="filename"
class="someclass"
style="somestyle" >}},
```
## Getting help
If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132).
|
