我没有记录整个建站的详细过程,是因为网上的资料已经很多了。好吧,其实本网站是很久之前搭建的,当时忘记记录了,那就从现在遇到的问题开始吧。
图片使用相对路径
相对于图床的方式,我更喜欢就近维护原则,即把每篇文章的图片、附件等静态资源按照一定的规则就近存放,然后在文章中使用相对路径进行引用。
这样不仅方便维护也方便迁移,同时也能避免图床带来的不稳定性问题。
可以有很多方式实现这种相对路径的效果,我认为这种方式最简单且适合我:
1
2
3
4
|
# 不使用这种方式创建文章
hugo new post/demo.md
# 而是使用这种方式创建文章(index固定不变)
hugo new post/demo/index.md
|
图片按自己的方式就近存放即可,如:
1
|
post/demo/images/image.png
|
下面简单解释一下原因(假设图片按上述方式存放):
1、使用 hugo new post/demo.md
方式创建文章时,得到的源文件结构为:
1
2
|
post/demo.md
post/demo/images/image.png
|
得到的目标文件结构是:
1
2
3
|
# 即网址是:www.example.com/post/demo/index.html
public/post/demo/index.html
public/post/demo/images/image.png
|
对比两种结构可以看出,相对路径无法同时满足源文件结构和目标文件结构。如果要满足源文件结构(相对于 demo.md
),
则需要写成 ![](demo/images/image.png)
,而要满足目标文件结构(相对于 index.html
),则需要写成 ![](images/image.png)
。
如果为了满足目标文件结构使用后者,那么对于我们迁移源文件或者使用其他 markdown 软件预览时是很不友好的。
2、而使用 hugo new post/demo/index.md
方式创建文章时,得到的源文件结构为:
1
2
|
post/demo/index.md
post/demo/images/image.png
|
得到的目标文件结构是:
1
2
3
|
# 即网址是:www.example.com/post/demo/index.html
public/post/demo/index.html
public/post/demo/images/image.png
|
对比两种结构可以看出,相对路径只需要写成 ![](images/image.png)
就可以同时满足两个文件结构。
内部超链接也可以使用相对路径。如要引用 post/demo1/index.md
文章时,写成 [demo1](../demo1)
使用新标签页打开外部链接
正常按markdown语法写链接,然后通过Hugo的Render hooks实现在新标签页打开外部链接的效果。
在主题目录下创建文件:
1
|
layouts/_default/_markup/render-link.html
|
在文件中添加如下内容:
1
2
|
<!-- 效果是:外部链接使用新标签页打开,内部标签在当前标签页打开 -->
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" style="background: url(/images/link-external.svg) center right no-repeat;padding-right: 13px;"{{ end }}>{{ .Text }}</a>
|
使用even主题
替换网址图标
按even的使用文档描述,可以自定义网址图标。
可以使用 favicon.io 制作网站图标,支持文字、emoji、上传图片等。
升级hugo导致报错
1
2
3
|
hugo升级前版本: 忘记了(嘿嘿
hugo升级后版本: v0.124.1
even版本: https://github.com/olOwOlo/hugo-theme-even/tree/564697987de962672112b910422682eb6f9c26ba
|
启动或构建时报错:
1
2
3
4
5
6
7
8
9
|
Watching for changes in /Users/xxx/blog/{archetypes,content,layouts,static,themes}
Watching for config changes in /Users/xxx/blog/config.toml
Start building sites …
hugo v0.124.1-db083b05f16c945fec04f745f0ca8640560cf1ec+extended darwin/amd64 BuildDate=2024-03-20T11:40:10Z VendorInfo=brew
ERROR render of "taxonomy" failed: "/Users/xxx/blog/themes/even/layouts/_default/baseof.html:14:5": execute of template failed: template: _default/terms.html:14:5: executing "_default/terms.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:79:13: no such template "_internal/google_news.html"
ERROR render of "term" failed: "/Users/xxx/blog/themes/even/layouts/_default/baseof.html:14:5": execute of template failed: template: _default/taxonomy.html:14:5: executing "_default/taxonomy.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:79:13: no such template "_internal/google_news.html"
Built in 52 ms
Error: error building site: render: failed to render pages: render of "home" failed: "/Users/xxx/blog/themes/even/layouts/_default/baseof.html:14:5": execute of template failed: template: index.html:14:5: executing "index.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:79:13: no such template "_internal/google_news.html"
|
解决方法是:
1
2
3
4
5
|
# 在主题目录下搜索 google_news,如下,删除对应的行
{{- template "_internal/google_news.html" . -}}
# 相关文件有:
layouts/partials/head.html
|
升级hugo导致警告
1
2
3
|
hugo升级前版本: 忘记了(嘿嘿
hugo升级后版本: v0.124.1
even版本: https://github.com/olOwOlo/hugo-theme-even/tree/564697987de962672112b910422682eb6f9c26ba
|
启动或构建时警告:
1
|
WARN deprecated: .Site.RSSLink was deprecated in Hugo v0.114.0 and will be removed in a future release. Use the Output Format's Permalink method instead, e.g. .OutputFormats.Get "RSS".Permalink
|
解决方法是:
1
2
3
4
5
6
7
|
# 在主题目录下搜索 .RSSLink,如下
<a href="{{ .Site.RSSLink }}" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
# 替换成
<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
# 相关文件有:
layouts/partials/footer.html
|
参考链接