专栏首页小狼的世界Hexo博客写作与图片处理的经验

Hexo博客写作与图片处理的经验

目录

  • 目标
  • Typora 编写博客
  • Hexo配置
  • hexo-asset-image 的问题
  • hexo-simple-image 的问题
  • 解决方案
  • 参考资料

本文使用的Typora版本为0.9.9.32.1(4191),Hexo版本为4.2.0。

Hexo是一款非常优秀的开源博客管理工具,所有的博客文档都通过Markdown格式编写,Markdown编辑器有很多,原来的时候我经常用Evernote编写,但是Evernote写Markdown经常会出现输入法响应缓慢的情况。最近我从Evernote转到了Typora,想到哪里就能够敲字写到哪里,而且输入后马上就能够转换为友好的显示样式,体验非常好。

本文介绍了如何处理博客博客编写过程中插入图片,上传图片等一些问题,希望我的经验能够对大家有帮助。

目标

我的目标是使用Typora编写博客,编写过程中可能通过拷贝、粘贴插入图片,也可能从网络上下载图片。希望能够达到以下效果:

  • 使用Typora编写的时候能够实时看到图片
  • 本地使用hexo server浏览效果时,也能够看到图片
  • 图片和Markdown文件放一起都上传到GitHub pages。

我没有选择图床作为图片的保存方式,一方面免费的图床很不稳定,另一方面使用图床在没有网络的情况下可能浏览器来还是不太方便。我还是习惯将所有笔记最终都归档保存在Evernote中。

Typora 编写博客

Typora支持将插入的图片文件拷贝到指定路径,通过Typora->偏好设置->图像,然后参照下图选择复制到指定路径将图片拷贝到与Markdown文件同名目录下。

这样我们在编辑博客的时候,就可以实时看到插入的图片。可以截图插入,也可以从网页上直接拖拽插入,非常方便。

查看Markdown源代码,看到图片是以Markdown的图片格式插入的。

![image-20200314195122981](20200314-write-hexo-with-typora/image-20200314195122981.png)

Hexo配置

首先修改 hexo 全局配置文件 _config.yml 中的配置:

post_asset_folder: true

这样在我们每次新建Markdown文件的时候,都会创建一个与文件同名的文件夹用于存放图片。

$ hexo new 20200314-es-monitoring-metric
$ ls source/_posts/
total 8
drwxr-xr-x   4 shiqiang  staff   128B  3 14 07:58 ./
drwx------+ 32 shiqiang  staff   1.0K  3 14 07:52 ../
drwxr-xr-x   2 shiqiang  staff    64B  3 14 07:58 20200314-es-monitoring-metric/
-rw-r--r--   1 shiqiang  staff    77B  3 14 07:58 20200314-es-monitoring-metric.md

使用hexo generate生成静态文件后,可以观察到图片已经拷贝到了对应的目录下。

$ ls public/2020/03/14/20200314-write-hexo-with-typora/
total 424
drwxr-xr-x  6 shiqiang  staff   192B  3 14 10:26 ./
drwxr-xr-x  4 shiqiang  staff   128B  3 14 10:26 ../
-rw-r--r--  1 shiqiang  staff    14K  3 14 10:26 Screenshot-150-1-20200314081849804.png
-rw-r--r--  1 shiqiang  staff    79K  3 14 10:26 image-20200314080935503.png
-rw-r--r--  1 shiqiang  staff   106K  3 14 10:26 image-20200314083152512.png
-rw-r--r--  1 shiqiang  staff   5.3K  3 14 10:26 index.html

但是现在浏览的时候还不能够看到图片,可以看到是因为我们插入的时候用的是包含了一个与Markdown文件同名文件夹的相对路径,而生成的静态文件夹下没有那个同名文件夹所以造成了访问404。

这时首先通过搜索引擎查到了有两个解决方案:hexo-asset-imagehexo-simple-image

hexo-asset-image 的问题

这个插件在处理图片路径时,看到更新的路径有问题,导致通过hexo server 还是不能够正确显示图片。

hexo-simple-image 的问题

在 Hexo 官网上看到这个插件的描述也是解决图片路径问题的,但是安装尝试之后遇到如下报错。

07:19:06.993 FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
TypeError: Cannot read property '1' of null
    at /Users/shiqiang/Projects/hexo-blog/blog/node_modules/hexo-simple-image/lib/index.js:9:20
    at String.replace (<anonymous>)
    at Hexo.module.exports (/Users/shiqiang/Projects/hexo-blog/blog/node_modules/hexo-simple-image/lib/index.js:2:31)

解决方案

参考hexo-asset-imagehexo-simple-image的源码,发现一个思路是在after_post_render之后将html中图片链接替换为绝对路径,一个是在before_post_render阶段将markdown文件中图片的路径转换为asset_img函数。

经过分析,觉得还是 hex-simple-image 的处理方式比较简单,因此对插件内容做了修改,现在可以用我这个新的插件来解决图片显示的问题。

具体可以按照下面的步骤操作。

  • 修改post_asset_folder: true
  • 生成一篇新的博客 hexo new blog-name
  • 通过typora向博客中插入一张图片,此时可以到source/_posts目录下看图片是否拷贝到了对应的目录
  • npm install hexo-image-link --save安装插件
  • hexo server -debug 预览图片是否能正常显示

参考资料

  1. Hexo与typora结合
  2. Front-matter 说明
  3. 用 Typora 写 Hexo 博客
  4. Hexo 插件
  5. hexo-simple-image
  6. hexo-asset-image
  7. Node.js
  8. JavaScript 1.3 Overview, Part II: Replace Method's Lambda Expression - Doc JavaScript

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sublimetext3将空格转换为Tab

    最近在学习Python,从网上粘贴的代码很多缩进都是空格,这样就会导致代码执行的时候报错,因为Python是依靠缩进来判断代码层次的。我的编辑器是Sublime...

    大江小浪
  • Kubernetes 存储系统 Storage 介绍

    容器中的存储都是临时的,因此Pod重启的时候,内部的数据会发生丢失。实际应用中,我们有些应用是无状态,有些应用则需要保持状态数据,确保Pod重启之后能够读取到之...

    大江小浪
  • IDF2011参会记

    今年有幸得到了免费参加IDF2011大会的机会,于是早早的出门去参会。早上一到会场,就已经有很多的人在排队等着进入主题演讲。

    大江小浪
  • 给公众号加了后台,添加了智能机器人和圣诞图片处理

    ​搞了大概一周的时间,走过了一坑又一坑,坑连坑,终于可以拿出来见人了,功能还不完善,很多有待提升。

    Python疯子
  • Python自动刷网课

    人在学校,身不由己。总有一些奇奇怪怪的学习任务,需要我们刷够一定的时长去完成,但这很多都是不太令人感兴趣的文字或是视频,而这些课都有共同的特点就是会间隔一定时间...

    老肥码码码
  • Creating a Filter, Edge Detection

    Below, you've been given one common type of edge detection filter: a Sobel opera...

    小飞侠xp
  • 别让自己成为一名废弃的程序员

    Java架构
  • OpenCV画直线,画圆,画椭圆,画矩形,绘制文字

    zy010101
  • SSM项目中配置文件的解说

    “ 讲解一下基于SSM框架的Java Web项目中的配置文件,必要的注释,我已经添加到了代码中,可以下载。”

    赵腰静
  • input只允许上传图片类型文件

    input[file]标签的accept属性可用于指定上传文件的 MIME类型 。

    DencyCheng

扫码关注云+社区

领取腾讯云代金券