Typora+hexo发布博客

前一阵子忙于工程上的任务,好久没写博客了,然后今天打开typora发现本地图片不显示,但是远程是没问题的,吓坏我了。。。都不敢new blog,生怕本地出了问题,排查了半天,发现是typora升级。。。然后相对根目录原来是全局的,现在是每个文档不同,需要再设置的问题。。。以防今后忘记,还是自己做个记录和梳理

Typora

Typora是一个方便简便且强力的Markdown编辑工具,一直都使用他来配合hexo进行博客管理,

https://www.typora.io/ 是官方网址,支持各个系统,非常nice!

轻量,干净,

所以,

下载,安装,

完美!

预备工作

首先,在咱们blog根目录下,

1
2
hexo n "title"
// the sanme as $ hexo new "title"

然后就会发现,在根目录

1
\blog\source\_posts

底下出现了,title.md以及title文件夹,一个是咱们的这篇blog的内容,一个即是咱们这篇blog的文件夹,可以用来存图片,之后相应博客的图片素材都存在各自相应的文件夹内

而后,我们用typora打开文档,可以直接打开,或者建议是打开到_posts底下,之后再打开typora就自动到工作路径,再直接选定需要编辑的博客进行编辑即可

typora左下角,点击打开_posts文件夹,选定需要编辑的blog,进入编辑界面

image-20200320164445581 image-20200320171914618

接着,我们就可以欢乐地进行编辑blog啦!

编辑内容

首先,要注意blog最上方的红方框里的内容,里面是本篇blog的属性,包括title、date、tags、categories,还可能会有是否加密、根目录设置等等,后来发现这些个属性,不全是必须的,date、tags、categories都可以不要;

相应的格式是:

1
2
3
4
5
6
7
tags: [tagA,tagB,...]
//like as
tags: [Tensorflow,机器学习]

categories: categoryA
//like as
categories: Something

关于tag和categories具体可以看:https://hexo.io/docs/front-matter.html

image-20200320215354479

tag内容,就是会显示首页的内容,之下则需要点开博客查看,效果如下:

image-20200320172418649

插入图片

接下来说说插入图片的问题,也就是写这篇文章的诱因……

typora写md有一点好,就是可以直接把图片拖到文档里,就插入,非常流畅,这也是我觉得最好的一点,就像我们把代码拖进IDE一样,舒服~

但是需要注意:

1.图片最好都放在咱们blog相应的文档里,符合规范,也方便管理

2.直接拖入图片的时候,是绝对路径,这样咱们上传远程后,肯定是不中的,所以要改成相对路径,根目录就定为_posts,如下图红框中所示,前面是博客对应的文件,后面是文件名

image-20200320210615757

这样部署到远程后就可以正常访问了

插图小贴士

最后讲讲,上述的操作如何在Typora中更高效的完成,最主要是插入图片:

针对插入图片是绝对路径的问题,可以做两件事方便插图:

1.在格式->图像->全局图像设置中修改设置:

插入图片时复制到咱们相应的文件夹里,这样就很方便了,我们可以直接通过截图软件截图,然后ctrl+c复制进来,然后他会自动把图复制到博客对应的文件夹里,不用像我原来先用截图工具然后保存到文件里,再拖入了,真的,舒服~

勾选优先使用相对路径,这样咱们插入的时候就是相对根目录的相对路径

2.在格式->图像->设置图片根目录把当前文档的根目录设置在_posts

原来的时候typora是把这个放在全局里的,所以我当时在本地编辑的时候是可以识别到的,而后来可能考虑到不同文档的根目录可以不同,所以把这个升级变成跟随文档自定义了,也就导致了我原来的文档看不到图了,但是部署上去的时候倒是没问题的(因为丢失了根目录),而本地在typora编辑的时候,是根据绝对路径的,所以一定要勾选优先使用相对路径

image-20200320211324239 image-20200320211135023

最后,需要注意的是,因为我们插入图片的时候就自动复制了,可能文件夹里有一些图片在编辑过程中加入了,但最后不需要了,所以记得发布前确认下哪些图需要,把不需要的图删了,免得上传上去太大~

ref

解决Hexo部署时文章和页面插入图片不显示的问题