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
201
202
203
204
205
206
207
208
209
210
|
# Simplicity
Very simple, clean and readable (I think so) Hugo theme.
#### Responsive design
It works on mobile, tablet and desktop.
#### Responsive images
It generates several image sizes during the build process and displays the best one for given device/resolution.
#### Lazy loading images
This theme uses [LazyLoad](https://github.com/verlok/lazyload) to speed up your web application by loading images as they enter the viewport.
#### Clean typography
It should be a pleasure to read your blog, right?
#### Additional shortcodes
Shortcodes for Google Adsense, images, Speaker Deck, Video, Vimeo, Youtube.
#### Google Adsense
You can use the shortcode to insert Adsense Ad wherever you want.
#### Google Analytics
Just add a Google Analytics code to turn it on.
#### Lightbox
Image shortcode allows to turn on [baguetteBox.js](https://feimosi.github.io/baguetteBox.js/) for given image.
#### Syntax highlighting.
Built-in Chroma Native color theme.
#### Auto-hide/show header
This theme uses [headroom.js](http://wicky.nillia.ms/headroom.js/) script.
#### Page scroll indicator
Displays progress bar on the top of the page when user scrolls the page.
#### Disqus
Just add a Disqus shortname to enable comments.
#### Categories
A separate page with a list of all categories and list of posts for a selected category.
#### Tags
A separate page with a list of all categories and list of posts for a selected tag.
#### RSS
Custom RSS template without an e-mail address.
#### Sitemap
Custom sitemap template to prevent rendering content from media directory.
#### Social icons
Add information about your social profile in the config file to display it on the homepage. Supported services: email, Facebook, Github, Google+, LinkedIn, Messenger, Spotify, Stackoverflow, Telegram, Twitter.
#### Gravatar support
Just add your Gravatar email to the config file to display your avatar on the home page.
#### and more
- OpenGraph support
- Schema Structured Data
- Twitter card
- Display license in footer
- No JS frameworks, no CSS frameworks, no jQuery
# Demo
You can preview this theme on my blogs - [eshlox.net](https://eshlox.net) or [eshlox.pl](https://eshlox.pl).
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Getting Started](#getting-started)
- [exampleSite](#examplesite)
- [config.toml](#configtoml)
- [favicons](#favicons)
- [Shortcodes](#shortcodes)
- [figure](#figure)
- [Development](#development)
- [Browsers support](#browsers-support)
- [License](#license)
## Getting Started
Run the following commands in your Hugo site directory to download the theme:
```
mkdir themes
cd themes
git clone https://github.com/eshlox/simplicity.git
```
### exampleSite
Look inside `exampleSite` directory to find out how to configure your site.
That's how the structure looks like:
```
exampleSite/
├── config.toml
├── content
│ ├── _index.md
│ ├── categories
│ │ └── _index.md
│ ├── media
│ │ ├── _index.md
│ │ ├── image-1.jpg
│ │ └── video.mp4
│ ├── photos.md
│ ├── posts
│ │ ├── 2014
│ │ │ ├── creating-a-new-theme.md
│ │ │ ├── goisforlovers.md
│ │ │ ├── hugoisforlovers.md
│ │ │ └── migrate-from-jekyll.md
│ │ ├── 2016
│ │ │ └── lorem-ipsum.md
│ │ ├── 2017
│ │ │ ├── images.md
│ │ │ └── typography.md
│ │ └── _index.md
│ ├── projects.md
│ └── tags
│ └── _index.md
└── resources
└── _gen
└── images
└── media
├── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_320x0_resize_q75_box.jpg
├── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_480x0_resize_q75_box.jpg
└── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_768x0_resize_q75_box.jpg
```
Every `_index.md` file contains a title, language and slug.
### config.toml
Copy `config.toml` from `exampleSite` to the root directory of your Hugo site and modify it according to your needs.
### favicons
This theme contains default favicon with `S` letter. If you want to change it, create a directory `assets/src/images` inside the root of your Hugo site and put your favicon files there. They should have names: `favicon.ico` and `apple-touch-icon.png`.
## Shortcodes
This theme includes additional shortcodes.
### Adsense
Add Adsense configuration and use `{{< adsense >}}` in your post to display an ad.
### Image
All images should be stored in `content/images` directory. Each subdirectory should contain `_index.md` file with this content:
```
---
title: Media Folder
---
```
Insert responsive image with title:
`{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}`
Full page width image:
`{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" full="true">}}`
Lightbox:
`{{< image src="media/image-1.jpg" lightbox="true" >}}`
Rounded corners:
`{{< image src="media/image-1.jpg" round="50" >}}`
Insert image without resizing (the same image for all devices/resolutions).
`{{< image src="media/image-1.jpg" resize="false" >}}`
### Speaker Deck
`{{< speakerdeck 50021f75cf1db900020005e7 >}}`
### Video
`{{< video src="media/video.mp4" >}}`
### Responsive Vimeo
`{{< vimeo 265143954 >}}`
### Responsive Youtube
`{{< vimeo 265143954 >}}`
## Development
1. Install dependencies.
```cd assets && yarn install```
2. Run development server.
```hugo server --source=exampleSite --themesDir=../..```
## Browsers support
Dekstop:
- Firefox (latest)
- Chrome (latest)
- Safari (latest)
Mobile:
- Firefox (latest)
- Chrome (latest)
- Safari (latest)
It probably works in other browsers but it hasn't been tested yet.
## Licence
This theme is released under the MIT license. Please read the [license](https://github.com/eshlox/simplicity/blob/master/LICENSE) for more information.
|
