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
|
# Fuji
A minimal Hugo theme inspired by Hexo theme [Murasaki](https://github.com/printempw/hexo-theme-murasaki/), with responsive grid system and markdown style, powered by GitHub Primer CSS.
## Live demos
[GitHub Pages Demo](https://amzrk2.cc/hugo-theme-fuji-demo/) | [My Blog](https://blog.amzrk2.cc/)
## Todo
- [x] Custom pagination
- [x] Archive page
- [x] Analytics
- [x] SEO optimization
- [x] Better mobile devices support
- [ ] Multilingual
## Installation
Inside the folder of your Hugo site run:
```bash
$ git submodule add https://github.com/amzrk2/hugo-theme-fuji.git themes/fuji
```
For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
## Getting started
Copy the ```config.toml``` in the ```exampleSite```to the root of your Hugo site. Change strings as you like.
Run Hugo's built-in local server:
```bash
$ hugo server
```
If you want to generate your site, just run ```hugo``` or ```hugo --minify```.
## Advance configration
### In-post license
You can set variables below in post's front matter to disable it:
```toml
noLicense = true # Do not show license in this post
```
### APlayer
APlayer support both global left-bottom-fixed or in-post, you can set these variables in site's ```config.toml``` or in post's front matter:
```toml
playerName = "..." # Audio title or name
playerArtist = "..." # Audio artist
playerURL = "..." # Audio URL, support aac, mp3, wav and ogg
playerCover = "..." # Audio cover
```
### Lazyload images
Lazyload images in posts, for example in ```[SITEROOT]/content/post/test.md```:
```go-html-template
{{< lazyimg "This is alt text" "/img/sample.png" >}}
{{< lazyimg-row "This is alt text" "/img/sample.png" >}}
{{< lazyimg-col "This is alt text" "/img/sample.png" >}}
```
```lazyimg``` will show a 16x9 placeholder before image is loaded, so ```lazyimg-row``` will show a 32x9 placeholder and ```lazyimg-col``` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's ```config.toml```.
Note that if you use the origin markdown syntax to add images such as ``````, it will not become a lazy image.
### Custom CSS (need extended version of Hugo)
You can create ```[SITEROOT]/assets/sass/custom.sass``` to cover sass variables of the theme. Just copy the variable which you need into it, check available variables below:
```sass
// colors
$color-primary: #8AA2D3; // apply to titles and icons
$color-primary-dark: #3B469B; // apply to links:hover and pagination:current
$color-secondary: #8F82BC; // apply to titles:hover, normal links, tags, pagination and sidebars
$color-mute: #9EA1A3; // apply to sub-title and post metadata
$color-spliter: #E5E2E4; // apply to divider and button background
// font size list
$font-size-logo: 2.5em; // Logo Only
$font-size-l1: 1.75em; // Primer CSS H1
$font-size-l2: 1.5em; // Primer CSS H2
$font-size-l3: 1.25em; // Primer CSS H3
$font-size-l4: 1em; // Primer CSS H4 & Normal Text
// divider css
$spliter: 1px solid $color-spliter;
// fixed-width container variables
$container-width: 900px;
// large screen / desktop (900 + (16 * 2)) <= container + gutters
$width-lg: 932px;
// font stacks
$body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
// monospace font stack
$mono-font: "Cascadia Code", "SF Mono", "Fira Code", "Consolas", $body-font;
// the base text size
$body-font-size: $font-size-l4;
```
### Markdown render hook
You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks).
You can use ```[SITEROOT]/layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab:
```html
<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
```
## Update the theme
Inside the folder of your Hugo site run:
```bash
$ git submodule update --remote --merge
```
## Contributing
Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/issues) to let me know.
## License
The theme is released under the ```GNU General Public License v3.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE).
## Annotations
Thanks to developers for creating Hugo, Primer CSS, Font Awesome, APlayer and Lazysizes with the awesome community around these project.
|
