blob: 4c89dfd826fd16fdd7802ad2ed3a1612de1039b7 (
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
|
# Chunky poster
A simple, bootstrap 4 based blog theme. The structure and design is based on the [Prisma blog](https://www.prisma.io/blog/).
[Demo](https://hugo-theme-chunky-poster.netlify.com)
# Screenshot
# Features
* Multi-author
* Image processing
* Basic i18n
* Prism
* LazyLoad
* Commento
# Usage
```shell
git clone https://gitlab.com/virtualcursor/chunky-poster.git
```
Check out the configuration at [`exampleSite/config.toml`](exampleSite/config.toml) for configuring your Hugo site.
## Authors
The authors structure is based on this [blog post](https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/).
1. Add the taxonomy ["author"](exampleSite/config.toml#L28).
2. `hugo new authors/john-doe/_index.md`
3. Configure the author metadata `twitter`.
4. Configure the author metadata `images`. First image on the list will be used as the avatar and on the profile page. Images are page resources under the author e.g. `content/authors/john-doe/image.png`.
5. Assign the author to a content:
```yaml
...
authors: ["John Doe"]
...
```
## Content images
The images structure is based on this [blog post](https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/).
Upload the images that will be used on content pages under `content/images` and create the file `content/images/index.md` with the front matter:
```yaml
---
headless: true
---
```
Set the path to the image in a `post` content under the `images` property:
```yaml
...
images: ["/images/image.png"]
...
```
The first image on the list will be used as the "cover" image on a post.
## Prism
Configure [Prism](https://prismjs.com/) under `[params.prismJS]`. Set `enable` to `true` and **disable `codeFences`**. Change the theme under `theme`.
```yaml
...
[params]
...
[params.prismJS]
enable = true
theme = "okaidia"
...
[markup]
[markup.highlight]
codeFences = false
...
```
## Commento
Configure [Commento](https://commento.io/) under `[params.commento]`. Set `enable` to `true` and add the URL at `url`:
```yaml
...
[params]
...
[params.commento]
enable = true
theme = "https://somename.commento.io"
...
```
# Customization
Fork the project and run `yarn watch` during development.
The application javascript file is located at `src/js/app.js`.
For customizing SCSS, the main entrypoint is at `src/scss/style.scss`. Bootstrap variables can be overridden in the `_variables.scss` file. The theme's styles are located at `src/scss/chunky-poster.scss`.
# Credits
* [Victor Hugo](https://github.com/netlify-templates/victor-hugo)
* [hugo-theme-even](https://github.com/olOwOlo/hugo-theme-even)
* [Blank](https://github.com/vimux/blank/)
* [CleanWhite](https://github.com/zhaohuabing/hugo-theme-cleanwhite)
Images from [Unsplash](https://unsplash.com/) and [Freepik](https://www.freepik.com/).
# License
This theme is released under the [MIT license](LICENSE).
|
