hugo和vscode结合写博客

chariothy 收录于类别 IT备忘

2022-02-15 2022-02-15 约 1946 字预计阅读 4 分钟次阅读

hugo和vscode结合写博客

博客的事情说来话长

其实我挺懒的，可活久了总有些东西要记下来，大致经历了这些过程

Everest，用了挺久的时间，挺好用的，尤其是Web Clip插件好用，唯一的缺陷就是app太臃肿。不过后来它收费了，我就不用了。
有道，之后盯上了免费的有道，都忘了当时怎么迁移文章的了，当文章迁移结束后才发现有道的导出就是个坑，于是打算整个基于文件的记录系统，博客不博客无所谓，首选markdown
vscode，选了很多写markdown之后发现vscode自带的就挺好用，支持预览，我又用gitea自建了一个git系统，支持markdown在网页直接当预览效果。不用github是因为图片等资源有时候会被挡住。
hugo，程序员最能折腾了，在gitea中访问博客太土了，于是找这个表态网站生成器，希望一直这么用下去

世事难两全，hugo <-> vscode

参考链接： render hook

hugo的图片url地址

我在vscode中写markdown时喜欢在当前目录下建一个目录img，然后将文件放在其中

1
2
3
4


project
│   sample.md
└───img
│   │   sample.png

然后我就可以在文章中加入 ![sample](img/sample.png) ，这样就可以在预览中实时看到图片。

但是hugo生成的图片url却是这样的

<img src="img/sample.png">, 这就导致绝对url为 https://<domain>/sample/img/sample.png，而这是无法访问的

解决办法

好在hugo提供了一些hook来支持自定义生成方式，但还是要稍微写点脚本。

hugo的render hook

render-image

在 <project>\layouts\_default\_markup目录中新建render-image.html，在其中加上

1
2
3


<p class="md__image">
<img src='{{ replace .Destination "img/" "/images/" | safeURL }}' alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>

意思就是将生成的img的url中的 img/ 替换成 /images/，后面我们会将图片放到这里。

批处理

因为穷，所以用了公司的笔记本写东西，因此这里是windows的批处理，其它系统的自行搞一个吧，其实bash更简单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


@ECHO OFF
set proj=
cd %proj%

# 删除上次生成的public文件
rd public /s /q
# 重新生成
hugo -D=false

# 复制img下的图片到images下
cd content
for /R %%x in (img\*) do copy "%%x" "..\public\images\"

更新2024-09-15，现在已经改成在linux下定时任务，从gitee拉取，如果有更新就用hugo编译html，并发布到github pages。

部署，完成

hugo的引用链接地址

render-link

文章之间难免有相互引用，之前我的文章名都是用中文名来命名的，比如我在ref.md文章中引用了 [示例](示例.md)，这样在vscode中点击就能跳转到相应文章，gitea也支持这种格式。

但到了hugo中生成的url就成了<a href="示例.md">示例</a>，这根本没法跳转了。因为实际上是https://<domain>/ref/示例.md

而且由于要对url友好，我将链接修改成了 :slug 而不是 :file ，这样hugo就更找不到地址了。

方法还是用hugo的hook，解决方案是在markdown的link之后加上引用文章的slug作为title ：[示例](示例.md "sample") 在 <project>\layouts\_default\_markup目录中新建render-link.html，在其中加上

1

<a href='{{ if strings.HasSuffix .Destination ".md" }} /{{ .Title | safeURL }} {{ else }} {{ .Destination | safeURL }} {{ end }}' {{ if strings.HasPrefix .Destination "https" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

意思就是

- 如果是md结尾的目的文件，则用记录在Title中的slug生成相对链接
- 否则直接用链接

这样hugo中生成的url就成了<a href="/sample">示例</a>，绝对url是https://<domain>/sample

不够完美之处

这样会带来两个小小的麻烦

部署之前要运行刚才的脚本，不过我整个部署都是写在一个脚本中，所以这不是问题
引用链接中要加上slug作为Title，这个嘛习惯就好。

vscode的snippet

尽管hugo new可以用预设的模板生成front matter，但还是习惯用vscode，何况还有那么多的旧文件，于是自建了一个片段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


{
	"Blog post frontmatter": {
	  "prefix": "fmc",
	  "description": "Creates frontmatter for Hugo articles",
	  "body": [
		"---",
		"title: ${TM_FILENAME_BASE}",
		"description: ${TM_FILENAME_BASE}",
		"author: chariothy",
		"draft: false",
		"date: ${2:${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+0800}",
		"categories:", 
		"- ${3:${TM_DIRECTORY/^.+\\\\(.*)\\\\(.*)$/$1-$2/}}", 
		"tags:",
		"- ${4}",
		"keywords:",
		"- ${5}",
		"slug: ${6}",
		"---",
		"# ${TM_FILENAME_BASE}",
		"$0"
	  ]
	}
}

对本文就会生成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


---
title: hugo和vscode结合写博客
description: hugo和vscode结合写博客
author: chariothy
draft: false
date: 2022-02-15T18:45:16+0800
categories:
- IT备忘
tags:
- hugo
- git
keywords:
- blog
- hugo
- vscode
- markdown
slug: combine-hugo-with-vscode
---
# hugo和vscode结合写博客

这样hugo和vscode就相安无事了，用vscode来写作，用hugo来生成。

您要是有更好的想法请一定要留言哦！