blob: 7ea9dabf5b918994756ed4be806a1a096583acd7 (
plain) (
blame)
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
|
# Fuji
简单的 Hugo 主题，支持夜间模式，Markdown 样式来自 GitHub Primer。
   
[English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md)
## 目录
- [💻 在线 Demo](#在线-demo)
- [❗ 注意事项](#注意事项)
- [🐣 开始使用](#开始使用)
- [🆕 更新主题](#更新主题)
- [⚙️ 自定义设置](#自定义设置)
- [🎨 站点图标](#站点图标)
- [❌ 关闭特定文章的 License 和评论](#关闭特定文章的-license-和评论)
- [🎵 文章音乐](#文章音乐)
- [📷 图片放大的设置和 lazyload](#图片放大的设置和-lazyload)
- [⚓ Markdown 钩子](#markdown-钩子)
- [📨 评论区](#评论区)
- [⏱️ 通过 CDN 加载主 CSS 和 JS](#通过-cdn-加载主-css-和-js)
- [🔧 其他高级修改](#其他高级修改)
- [👓 批判一番和贡献代码](#批判一番和贡献代码)
- [📝 License](#license)
- [🤝 Annotations](#annotations)
## 💻 在线 Demo
[**在线 Demo (英文)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [我的博客 (中文)](https://blog.amzrk2.cc/)
## ❗ 注意事项
记得给文章添加 [简介分隔线](https://gohugo.io/content-management/summaries/#manual-summary-splitting) `<!--more-->`，以让文章列表的文章预览部分样式正确。
## 🐣 开始使用
添加主题：
```bash
$ git submodule add https://github.com/amzrk2/hugo-theme-fuji.git themes/fuji
```
其他的可以看[官方指南](https://gohugo.io/overview/installing/)。
然后把 `exampleSite` 复制出来，并修改 `config.toml` 即可。
## 🆕 更新主题
```bash
$ git submodule update --remote --merge
```
## ⚙️ 自定义设置
### 🎨 站点图标
使用 `[SITEROOT]/layouts/partials/favicon.html` 来覆盖主题自带的图标。
可以在 [realfavicongenerator.net](https://realfavicongenerator.net/) 快速创建自己的图标。
### ❌ 关闭 License、评论区和目录
在 front matter 里加上这些:
```toml
noLicense = true # 憋显示 License
noComments = true # 憋显示评论区
noToc = true # 憋显示目录
```
你也可以全局关闭这些内容的显示，在 `config.toml` 把下面这些设置为 false 或注释掉：
```toml
showLicense = false
showToc = false
```
### 🎵 文章音乐
支持给文章单独添加 APlayer，在 front matter 里加上这些:
```toml
playerName = "..." # 标题
playerArtist = "..." # 作者
playerURL = "..." # URL
playerCover = "..." # 封面
```
### 📷 图片放大的设置和 lazyload
可放大，非 lazyload：
```markdown
```
可放大，lazyload：
```html
{{< img-lazy "Alt text" "test/example.png" >}}
{{< img-lazy "row" "Alt text" "test/example.png" >}}
{{< img-lazy "col" "Alt text" "test/example.png" >}}
```
不可放大，非 lazyload，可选外链：
```html
{{< img-nz "Alt text" "test/example.png" ["https://example.com"] >}}
```
不可放大，lazyload，可选外链：
```html
{{< img-nz-lazy "Alt text" "test/example.png" ["https://example.com"] >}}
{{< img-nz-lazy "row" "Alt text" "test/example.png" ["https://example.com"] >}}
{{< img-nz-lazy "col" "Alt text" "test/example.png" ["https://example.com"] >}}
```
`img-lazy` 提供 16:9 的占位 svg，`img-lazy-row` 提供 32:9 的占位 svg，`img-lazy-col` 提供 8:9 的占位 svg。你也可以在 `config.toml` 里面自定义想要的占位图片和比例。
### ⚓ Markdown 钩子
具体内容看 [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks)，用于配置 Markdown 解释器。
比如你可以用 `[SITEROOT]/layouts/_default/_markup/render-link.html` 来修改文章里的链接是否在新页面打开：
```html
<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
```
### 📨 评论区
主题支持三种评论系统，Disqus、utterances 和 DisqusJS (给大陆用户的)。
对于 Disqus 默认情况下使用 `{{ .Permalink }}` 作为 `url`，使用 `{{ .File.ContentBaseName }}` 作为 `identifier`。
使用 `[SITEROOT]/layouts/partials/comment-*.html` 来覆盖 `themes/fuji/layouts/partials/comment-*.html`。可在此文件内自定义指定的 url 和 identifier，或者为 DisqusJS 设置多个 api key 抑或是添加更多设置。注意如果使用 DisqusJS，将 `config.toml` 内的 `disqusJSApi` 解除注释来加载 CSS。
可以参考 Demo 的设置作为使用 DisqusJS、并且自定义设置和多个 api key 的例子，记得最后部署时候修改为自己的设置和 key 哦：
- [`config.toml`]()
- [`comment-disqusjs.html`]()
### ⏱️ 通过 CDN 加载主 CSS 和 JS
如果你不需要自行修改 CSS 和 JS，可以将 `config.toml` 内的 `mainAssetsCDN = true` 解除注释。`fuji.min.css` 和 `fuji.min.js` 将会从 jsDelivr 加载。
### 🔧 其他高级修改
见[批判一番和贡献代码](#批判一番和贡献代码)。
## 👓 批判一番和贡献代码
为了保证 `master` 分支干净，所有开发都是在 `dev` 分支进行的，记得对着 `dev` 分支批判。
[Issue](https://github.com/amzrk2/hugo-theme-fuji/issues)。主题本身只在 Firefox 上完整测试过，因此要是遇到了什么问题也可以随便批判。
进入主题目录，运行：
```bash
npm install
```
开发用：
```bash
npm run dev
```
最终发布用：
```bash
npm run build
```
## 📝 License
The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE).
- [Primer CSS - MIT](https://github.com/primer/css/blob/master/LICENSE)
- [APlayer - MIT](https://github.com/MoePlayer/APlayer/blob/master/LICENSE)
- [lazysizes - MIT](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE)
- [medium-zoom - MIT](https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE)
- [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE)
- [ionicons - MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)
> © 2020 DSRKafuU(amzrk2) [Twitter](https://twitter.com/amzrk2) [GitHub]()
## 🤝 Annotations
Thanks to [community contributors](https://github.com/amzrk2/hugo-theme-fuji/graphs/contributors) for great help.
Learned a lot in [Sukka's Blog](https://blog.skk.moe/).
|
