目录

使用vscode来写hugo博客并处理图片插入问题

如果对typora情有独钟的同学可以参考https://zahui.fan/posts/b4cf69c3/,不过我用来用去还是发现vscode好,哪怕不写代码,仅仅写文章也挺不错的。不过直接用的话有很多问题,我们还需要借助vscode强大的插件系统。

插入到static目录

插入图片问题

我们在写博客的时候,有时会有一些插入图片的需求,之前的做法是–截图保存到static/images目录,然后文章里面添加![图片说明](/images/xxx.png),操作很繁琐,或者也可以使用图床,不过也挺麻烦的。我们可以用一款叫paste image的插件来简化我们的插入图片的操作。

假设你的博客图片放在仓库根目录的static/images目录下,博客文章在其他地方,需要修改

  • 图片存放的位置:

    /images/2022-03-30-00-46-15.png

  • 图片的基础路径:

    即在markdown文件里面不显示static了,只从images开始显示

    /images/2022-03-30-00-48-30.png

  • 路径的前缀:

    如果不加的话,路径是类似于![图片说明](images/xxx.png),我们想要的是![图片说明](/images/xxx.png)

    /images/2022-03-30-00-55-40.png

以上修改完成后,就可以使用ctrl+alt+v键直接从电脑剪贴板粘贴了。

以上配置文件的修改也可以通过直接编辑json文件来进行

{
    "pasteImage.basePath": "${projectRoot}/static",
    "pasteImage.path": "${projectRoot}/static/images",
    "pasteImage.prefix": "/"
}

避免blog仓库过大

blog仓库只保留文本文件,每次提交commit也是有意义的,但是像图片等就没必要这样了,所以static目录我是用了一个git submodule,当然还有一种方法是使用图床,放在github仓库里,使用jsdeliver进行CDN加速

使用图床

图床说白了就是个存图片的地方,可以通过http直链来访问,可以简化md编写和移动,可以使用PicGo来简化操作

我用的是github做图床,通过jsdelivr来进行CDN加速,我的配置文件如下(其中token需要在github后台生成):

{
  "picBed": {
    "current": "github",
    "uploader": "github",
    "smms": {
      "token": ""
    },
    "github": {
      "branch": "master",
      "customUrl": "https://cdn.jsdelivr.net/gh/iuxt/static",
      "path": "images/",
      "repo": "iuxt/static",
      "token": "xxxx"
    }
  },
  "settings": {
    "shortKey": {
      "picgo:upload": {
        "enable": true,
        "key": "CommandOrControl+Shift+P",
        "name": "upload",
        "label": "快捷上传"
      }
    },
    "server": {
      "port": 36677,
      "host": "127.0.0.1",
      "enable": true
    },
    "privacyEnsure": true,
    "showUpdateTip": true
  },
  "picgoPlugins": {},
  "debug": true,
  "PICGO_ENV": "GUI",
  "needReload": false
}

按下快捷键 ctrl + shift + p 会自动上传剪切板上的图片,然后将连接写入剪切板

hugo命令

只需要将hugo.exe扔到path里就好了,我个人比较喜欢的做法是在家目录创建一个bin目录,然后把这个bin目录添加到path环境变量中,具体操作如下:

下载hugo.exe放到%userprofile%\bin中,然后

系统设置

/images/2022-03-30-01-01-09.png

高级系统设置

/images/2022-03-30-01-02-08.png

环境变量

/images/2022-03-30-01-02-16.png