README.md 3.05 KB
Newer Older
Bridouz's avatar
Bridouz committed
1
2
3
4
5
6
7
8
9
# Huginn

Huginn is a minimalistic and responsive theme for [Hugo static site generator](https://gohugo.io). It was once developed for [Pelican](https://getpelican.com) based on the work of **iKevinY** with his theme [pneumatic](https://github.com/iKevinY/pneumatic).

The theme is mainly tailored for my needs but I will try to make it more stateless in order to be used without any fuss by others.

As of today **Huginn** supports :

  - Responsive design (using *media queries*)
10
  - Lovely light colors (and dark syntax highlights) took from [snow.vim](https://github.com/nightsense/snow)
Bridouz's avatar
Bridouz committed
11
12
13
14
  - Hugo builtin functions such as
    - Table of Content (automatically added if your post contains *headers*)
    - Related Content
    - Rss feeds (tweaked layout to allow full-text rendering)
Bridouz's avatar
Bridouz committed
15
  - Javascript lightbox powered by [baguetteBox.js](https://github.com/feimosi/baguetteBox.js)
Bridouz's avatar
Bridouz committed
16
17
  - A `lightbox` shortcode for simple one-image display
  - A `gallery` partial to display a nice gallery at the end of your post
Bridouz's avatar
Bridouz committed
18
19
20
21
  - Displaying a link and the name of a song you were listening at while writing a post (activated in frontmatter with `song: [title](link)`)    
  - Comments powered by [Isso](https://posativ.org/isso/) for 
now. A parameter in `config.yaml` is used to specify Isso server 
`{{ .Site.Params.isso_server }}`
Bridouz's avatar
Bridouz committed
22

Bridouz's avatar
Bridouz committed
23
24
25
## Lightbox

> This shortcode uses the **Page Bundle** function introduced in Hugo 0.32, make sure to be aware of it when playing with `lightbox`.
Bridouz's avatar
Bridouz committed
26
27
28

The `lightbox` shortcode is pretty simple and looks like this :
```
Bridouz's avatar
Bridouz committed
29
30
31
32
33
34
{{ $img := (.Page.Resources.ByType "image").GetMatch ( printf "images/lightbox/%s*" (.Get "img"))  }}
{{ $align := (.Get "align") }}
{{ .Scratch.Set "image" ($img.Resize "256x q80") }}
{{ $scaled := .Scratch.Get "image" }}  
<a href="{{ $img.RelPermalink }}">
  <img class="thumbnail {{ with $align }}{{ . }}{{ end }}" src="{{ $scaled.Permalink }}">
Bridouz's avatar
Bridouz committed
35
</a>
Bridouz's avatar
Bridouz committed
36

Bridouz's avatar
Bridouz committed
37
38
39
40
```

All you have to do is to make sure that your thumbnail has the same filename that the full one only with the addition of the suffix *-thumb* before the extension.
The shortcode only needs two parameters :
Bridouz's avatar
Bridouz committed
41

Bridouz's avatar
Bridouz committed
42
|  Parameters  |  Description
Bridouz's avatar
Bridouz committed
43
|:------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
Bridouz's avatar
Bridouz committed
44
|  `img=""`    |  Filename to your image. (no `.extension` required)											                                                                      |
Bridouz's avatar
Bridouz committed
45
|  `align=""`  |  If you want to align the image on the left side or the right side of the *content* block.If none is specified the image is automatically centered in the block. |
Bridouz's avatar
Bridouz committed
46

Bridouz's avatar
Bridouz committed
47
48
## Gallery
> **Page-Bundle** required
Bridouz's avatar
Bridouz committed
49

Bridouz's avatar
Bridouz committed
50
The `gallery` partial is even more simple. All you have to do is put your images in `images/gallery` and ... here you are, with images at the end of your post.
Bridouz's avatar
Bridouz committed
51
52
53

```
<div class="gallery">
Bridouz's avatar
Bridouz committed
54
55
56
57
58
59
60
{{ with .Resources.Match "images/gallery/*.*" }}
{{ range . }}
{{ $scaled := .Resize "256x q80" }}
<div class="gallery-item">
<a href="{{ .RelPermalink }}">
<img class="thumbnail" src="{{ $scaled.Permalink }}">
</a>
Bridouz's avatar
Bridouz committed
61
</div>
Bridouz's avatar
Bridouz committed
62
63
64
65
{{ end }}
{{ end }}
</div>

Bridouz's avatar
Bridouz committed
66
```