blob: 874a365e296a9bc07e79d25cee0fe0bf09acd637 (
plain)
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
# Strange Case - Bootstrap Clone of Hyde for Hugo
Strange Case was built for people who like the original Jekyll theme [Hyde](https://github.com/poole/hyde) and its [port to Hugo](https://github.com/spf13/hyde) but prefer to use [Bootstrap](http://getbootstrap.com).
The theme was built from an empty Bootstrap 3 template with the goal of easy modification for end users. The code is as simple as possible - clearly formatted HTML and a single stylesheet. It's a two column responsive design and currently includes version 3.3.7 of Bootstrap.
Pull requests are welcome.
## Contents
- [Installation](#installation)
- [Customization](#customization)
- [Sidebar](#sidebar)
- [Color Schemes](#color-schemes)
- [Analytics](#analytics)
- [Example Config](#example-config)
- [Author](#author)
- [Inspired By](#inspired-by)
- [License](#license)
## Installation
Installing **Strange Case** is easy. Simple clone this repo to `themes/` in your Hugo folder.
~$ cd your-hugo-folder/themes/
~$ git clone https://github.com/ExchangeRate-API/strange-case.git
Next, open the `config.toml` file in the base of the Hugo folder and ensure the theme is set to `strange-case`.
theme = "strange-case"
## Customization
There are various options you can easily set from your `config.toml` file.
This text will appear after the Title of your site in your `<title>` meta tag, and after the Title in the sidebar:
description = "A Hugo Theme built with Bootstrap"
### Sidebar
This text will appear in a free paragraph below the Title & Description and above the menu links. Set it to "" if you don't want it.
sidebarFreeText = "A optional paragraph of free text. Set to blank in config.toml to clear..."
You can include clickable icons (e.g. for social networks )by including `"menu=icons"` items in your `config.toml`. Example:
[[menu.icons]]
name = "GitHub"
post = "<img src=\"/images/github.png\""
url = "https://github.com"
You can optionally use the `post` var to include HTML after the `name` in the resulting links.
You can include useful menu links by including `"menu=main"` items in your `config.toml`. Example:
[[menu.main]]
name = "Hugo"
post = "<span class='glyphicon glyphicon-fire'></span>"
url = "http://gohugo.io"
You can optionally use the `post` var to include HTML after the `name` in the resulting links.
You can use the `"contact_email"` field in `[params]` to set a mailto: link the in the sidebar. Leave blank if you don't want it.
### Color Schemes
In keeping with our attempt to replicate the original Hyde in Bootstrap we've included some colour scheme options. These are not the same as in the original, but we used palettes from the same [Base16](https://github.com/chriskempson/base16) project.
The themes are:
- Dark Brown (`colorScheme="scheme-darkbrown"`)
- Light Brown (`colorScheme="scheme-lightbrown"`)
- Green (`colorScheme="scheme-green"`)
- Orange (`colorScheme="scheme-orange"`)
- Slate (`colorScheme="scheme-slate"`)
And then a bonus theme that isn't from Base16:
- Gulf Racing (`colorScheme="scheme-gulfracing"`)
Using a theme is as simple as changing the `colorScheme` param in your `config.toml`. Example:
baseurl = "/blog"
title = "Strange Case Hugo Theme"
theme = "strange-case"
[params]
colorScheme = "scheme-darkbrown"
DateFormat = "2 Jan 2006"
description = "A Hugo Theme built with Bootstrap"
sidebarFreeText = "A optional paragraph of free text. Set to blank in config.toml to clear..."
#### Creating Your Own Color Scheme
To create your own custom color scheme simply scroll to the end of the `strange-case.css` stylesheet in the `your-hugo-dir/themes/strange-case/static` folder and edit the template we've left there.
We'll happily accept pull requests for quality color schemes.
### Analytics
This theme supports Hugo's native GA integration & a Piwik integration.
For Google Analytics, simply set your UA number in your `config.toml` file. Example:
baseurl = "/blog"
title = "Strange Case Hugo Theme"
theme = "strange-case"
googleAnalytics = "UA-123-456"
For Piwik, set the following two `params` as below:
baseurl = "/blog"
title = "Strange Case Hugo Theme"
theme = "strange-case"
[params]
colorScheme = "scheme-darkbrown"
piwikSiteID = "1234"
piwikURL = "www.your-site.com"
## Example Config
Here is a full example `config.toml`:
baseurl = "http://www.your-blog.com"
title = "Your Blog Title"
author = "You"
copyright = "Your Copyright"
canonifyurls = true
paginate = 5
googleAnalytics = ""
theme = "strange-case"
[params]
colorScheme = "scheme-darkbrown"
DateFormat = "2 Jan 2006"
description = "A blog about content"
sidebarFreeText = "A optional paragraph of free text. Set to blank in config.toml to clear..."
piwikSiteID = ""
piwikURL = ""
[[menu.main]]
name = "Hugo"
post = "<span class='glyphicon glyphicon-fire'></span>"
url = "http://gohugo.io"
[[menu.main]]
name = "Bootstrap"
post = "<span class='glyphicon glyphicon-ok'></span>"
url = "http://getbootstrap.com"
## Author
**ExchangeRate-API.com**
- <https://github.com/ExchangeRate-API/>
- <https://www.exchangerate-api.com>
#### Strange Case Uses Bootstrap
**Bootstrap**
- <http://getbootstrap.com>
## Inspired By
**Mark Otto** - creator of the Hyde Jekyll theme
- <https://github.com/mdo>
- <https://twitter.com/mdo>
**Steve Francia** - porter of the original Hyde theme to Hugo
- <https://github.com/spf13>
- <https://twitter.com/spf13>
## Licensing
This theme is released under the [MIT License](LICENSE.md).
|
