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
|
# Capsule
A CSS-only Hugo theme using the [Bulma CSS
framework](https://github.com/jgthms/bulma) and [Font-Awesome
icons](https://github.com/FortAwesome/Font-Awesome).
# Install
From the base of your website, run:
```
git submodule add https://github.com/sudorook/capsule themes/capsule
```
You can then either build Hugo on the command line and pass the `-t capsule`
flag, or you can add `theme = "capsule"` to your config.toml file.
**Note: Any additional documentation will be added to the [Capsule
Demo](https://sudorook.gitlab.io/capsule-demo) site, not here.**
## Notes:
### 1. Syntax highlighting (via pygments)
For code blocks, pick the highlighter style in config.toml by setting:
```
pygmentsstyle = "<style>"
```
For dark highlighter themes, you should rebuild capsule CSS with
`build/extra/syntax.sass`. Uncomment it from the capsule.sass file and run
`npm run build`.
Without that file, the background color will default to Bulma's light
background-color, and light colored elements meant to be displayed against dark
backgrounds from dark themes will be hard to read.
### 2. Unused classes in Bulma
Capsule is set to only compile the classes it needs. To enable more Bulma
classes, uncomment the relevant sass files in `build/bulma/bulma.sass`.
### 3. Enable automatic generation of nav menus
In your config.toml files, set:
```
SectionPagesMenu = "main"
```
With this set, capsule with automatically generate a navigation menu in the
navbar based on all the sections (the directories inside the content/
directory) present in your site.
### 4. Add git metadata to your pages
If you host your site on a public git vc server, you can set capsule to build a
"Last edited on ..." note to each page that uses git metadata to display the
date of the last commit and add a link to its blob on your public repo.
In your config.toml file, set:
```
enableGitInfo = true
[params]
repo = "https://github.com/<user>/<repo>
```
The `repo` variable should point to the url of your repo for your website. The
above example uses GitHub, but GitLab and any other site that follows the
format of `<siteurl>/<user>/<repo>/commit/<hash>` will work, too.
### 5. Add custom javascript or CSS to a page
In the toml header, add:
```
css = """
<style>
...
</style>
"""
js = """
<script>
...
</script>
"""
```
Any CSS or JS specified here will add to the site \<head\> when Hugo renders
the page.
### 6. Enable table of contents
To generate a table of contents for a specific page, add to the toml header:
```
toc = true
```
The table of contents will contain all the header items defined in the
markdown. The nesting levels for each match the header weight (h1, h2, etc.).
# Build
To (re)build the CSS, you need to have npm and installed. Clone the
capsule repository and once in it run:
```bash
npm install
```
and then build by:
```bash
npm run build
```
You can enable/disable sass components by editing build/sass/capsule.sass
before building. To use your own customized version of capsule, a) fork this
repository and set the Git submodule to use it, or b) make a symlink to your
custom build in the Hugo themes/ directory, assuming your build system allows
this.
|
