主页
博客
hexo搭建博客遇到的问题
Jul 09 2022

使用MarkDown的相关问题

在写文章的时候,我们可以插入图片和相关资源使得文章更加丰富生动,但是在本地写MarkDown文件时,上传的本地图片是无法实现在网络上或是在另外一台设备上访问的。我在完成基于github使用hexo博客的搭建后,我发现了一些问题,关于 gitalk评论模块的一些坑我已经写在themes那片博客里了,剩下的一些写在这里。

文章内容显示不全

​ 我在生产部署之后进行 hexo s 本地测试的时候发现我的使用了图片的文章都显示不全,而且很统一的在文章第一个出现图片的地方之后就不显示接下来的内容了,而没有图片的hexo初始化就自带的 hello world 就没有出现这样的情况,因为已经修复了就不放bug图了,直接说解决方法吧。

办法一:同名目录 + 相对路径

​ 在使用Hexo写博客时,每一篇文章创建一个同名目录,并在这个同名目录中放置需要插入的图片文件,在MarkDown文章中插入使用图片的相对路径,然后在部署博客的时候也一同将这个文件夹上传到服务器。

  1. 修改配置文件_config.yml使得每一次新建文章的时候自动生成同名目录。(方法二中其实就不需要这个选项了,使用方法二可以改为false)

    post_asset_folder: true
    

2.修改MarkDown编辑器配置,实现粘贴图片时自动将图片文件复制一份到所对应的同名目录。

我使用的Typora编辑MarkDown文件,通过ctrl + , 打开Typora的设置,并按图片中完成相关设置。

./${filename}

完成这样的设置后,每当我们在Typora中粘贴图片的时候就会将图片复制到同名目录下。

但是需要注意的是,这样上传到Hexo依旧不能解决图片无法访问的问题,因为图片的路径还是本地的路径,只是这个图片所属的本地的文件夹是和文章同名的。

解决办法:将绝对路径变成相对路径,这样在Hexo服务器上就会自动的在与文章同名的那个文件夹里面找图片文件,所以只需要删去前面的一部分,只留下图片的文件名。

这样做可以实现在博客上能展现图片了,但是有一个弊端就是本地是看不见图片的了。本地效果如下:

总结这个方法:

本地看不到图片的效果,但是上传至Hexo后是可以查看的,能解决Hexo上查看本地图片的问题。
但是仍然不能解决Hexo以外的诸多博客平台的本地图片访问问题,对于CSDN、简书来说它都有自己的图床,所以可以上传到对应平台的图床,然后用网络的链接访问图片。
使得Hexo文件变得臃肿,随着博客文章的积累,用到的图片会在每次部署和上传到服务器时一并被携带上传,造成部署和上传的压力,使得上传的速度变得很慢。
由于博客部署在GitHub Pages,就会导致加载博客文章时,一大部分时间用于请求Github Pages服务器加载图片文件,再加上Github Pages服务器在大陆访问有时很慢的情况,使得博客网页加载奇慢无比。
综上,这个办法并不是长久有效的。

方法二:Github + PicGo

因为上一个方法每一次都需要重新将之前的图片资源重复部署,导致速度越来越慢,不是一个一劳永逸的方法,所以我找到了更好的方法,那就是使用图床

图床网上也有很多免费的,但是大部分都不靠谱,如果放在免费的图床上我们需要米娜对一一些问题:

  1. 网络图床有可能突然就不维护了,那么我们放的图片也就不翼而飞了,而如果你的图片又没有备份的话,那么所有用到这些图片的文件都会被涉及到,这些图片也就访问不了,消失在网络的大海里。
  2. 免费的图床有额度限制,一般可用的空间不会太大。
  3. 本地写文章时不够简便,需要每张图片手动上传。

但是我扣,所以我选择全球最大的同性交友网站Github作为免费床图😁,接下来讲一下操作流程。

Github设置

  • 首先创建一个专门用来保存博客上传图片的仓库,基本操作就不演示了。
  • 然后我们生成GitHub Tokens,点击Settings,进入Settings后,点击左侧下方的Developer settings,网页跳转后,选左边的Personal access tokens,点击Generate a personal access tokenNote这里填写为什么创建这个Token,可随意填写,下方勾上repo即可。然后滑到最下方点击Generate token。然后会生成一条Token信息,生成的Token只会出现一次,记得复制保存。(省略了一些简单的步骤的截图,大家应该都懂)

Typora设置

  • 打开Typora,点击左上角菜单栏的Typora,点击弹出框里下方的偏好设置,(macOS是这样,Win的自行搜索)设置成如下。

PicGo设置

打开运行PicGo,左侧打开打开详细窗口,选择图床设置(Github图床)。
参数设置说明:

仓库名:表示远程仓库地址,固定格式 Github用户名/仓库名,前期准备用到的仓库
分支名:表示分支,默认填入master,需要根据自己Github上的分支进行填写,看个人设置
Token:填入Github中生成的Token,就是让复制保存的那个
存储路径:可以自定义一个文件路径
自定义域名:建议使用https:cdn.jsdelivr.net/gh/Github用户名/仓库名
最后记得设为默认图床,然后在正式使用的时候会进行i个测试,会告诉你测试结果是否成功。(macOS和Win不一样,WIn好像设置里有测试的选项,macOS没有)我是测试完了之后再写的,所以没有截图。

完成上述的步骤就完成所以的配置了,可以hexo new test新建一个文件上传图片测试一下了,

Tips:快捷键及相关配置

支持快捷键command+shift+p(macOS)或者control+shift+p(windows\linux)用以支持快捷上传剪贴板里的图片(第一张)。

PicGo支持自定义快捷键,使用方法见配置手册。

注:可以将快捷键设置为ctrl+shift+c

总结
将上面的步骤都设置好,每次截图之后,都可以按一下ctrl+shift+c,这样就会将剪切板上面的截图转化为在线网络图片链接,简直就是爽的不要不要的,关键是背靠 GitHub ,比自建服务器都稳!

博客搭建