更新记录

更新记录

2021-01-22

hexo&typora文章编写

hexo&typora-文章编写

1.图片资源引入问题

​ 日常习惯使用typora编辑器进行编辑,相关的图片引入均用相关路径进行引用(相同路径下构建同名.assets文件夹存储图片信息),这与hexo的一些使用有所差异,也就是说单纯的md内容,通过hexo渲染能够正常解析,但是针对一些资源的引用则需相应调整

解决方案

​ 针对hexo中的图片引入和typora图片引入问题,参考网络资源可有如下解决方案:

方案1:相对路径

<1>借助“文章资源文件夹”概念

​ 在_config.yml配置文件中,通过设定post_asset_foldertrue,开启资源文件的管理功能:当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个与对应文章文件同名的资源文件夹,从而可以通过相对路径进行引用(针对一些自定义的md笔记文件,可通过这种方式作相应的笔记迁移)

<2>调整md文件中图片信息引入的相对路径和引入格式

​ 此处有两种方式控制:借助模板格式引入、借助原生markdown语法构建

借助模板格式引入

1
2
3
4
5
6
# hexo3 文章中引用资源代码
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

# 基于这种方式针对一些现有的笔记调整成本太高,且没有办法很好的适配typora(无法通过typora预览图片效果)

借助原生markdown语法构建(需引入npm install hexo-renderer-marked插件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 1.项目引入hexo-renderer-marked插件
npm install hexo-renderer-marked

# 2.修改_config.yml配置文件
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

# md文件中使用![]()引用图片信息(![图片备注](图片相对路径))
PS:此处需注意偏好设置中的图片相对路径设定,如果设定规则和文章资源文件夹生成规则相同("同名概念"),则可直接将md中的引用的图片路径(参考格式:文章名/图片.png)中的"文章名/"全文替换为空,从而保证项目发布部署的主页和文章能够正常引用到图片信息

# 由于在之前基于typora编辑md文档设定资源生成路径为"同名文件夹.assets",因此如果是作相应的迁移,则需依据hexo引用的规则复制一份与文章title"同名"的资源文件夹,随后相应作url路径全文替换,对应完整步骤说明如下:
a.hexo博客项目引入hexo-renderer-marked插件并修改_config.yml配置文件
b.将引用的图片资源文件复制一份到与文章title"同名"的资源文件夹(通过检查typora偏好设置查看图片资源路径)
c.全文替换URL引用路径,只保留"图片名称"

自定义插件实现转化(编写插件、注册插件、发布插件、引入插件)

​ 预览图片路径和部署图片路径不同,也可考虑通过自定义插件实现转化(可参考博客):

1
2
![example](postname/example.jpg) --> {% asset_img example.jpg example %}
![example](postname.assets/example.jpg) --> {% asset_img example.jpg example %}

有些方式通过设定md头部配置项中的typora-root-url参数从而保证本地显示和服务器上的根目录一致,但这种不适用于原有typora通过相对路径引用的文件,需结合实际场景考虑

方案2:绝对路径

​ 采用“图床”概念,项目中通过绝对路径引入图片信息。可借助阿里云、腾讯云、路过图床、七牛云等构建自定义图床进行引入