我没有记录整个建站的详细过程,是因为网上的资料已经很多了。好吧,其实本网站是很久之前搭建的,当时忘记记录了,那就从现在遇到的问题开始吧。

图片使用相对路径 1

相对于图床的方式,我更喜欢就近维护原则,即把每篇文章的图片、附件等静态资源按照一定的规则就近存放,然后在文章中使用相对路径进行引用。 这样不仅方便维护也方便迁移,同时也能避免图床带来的不稳定性问题。

可以有很多方式实现这种相对路径的效果,我认为这种方式最简单且适合我:

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)

使用新标签页打开外部链接 2

正常按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主题 3

替换网址图标

按even的使用文档描述,可以自定义网址图标。

可以使用 favicon.io 4 制作网站图标,支持文字、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

参考链接