hexo&typora-文章编写

hahah

发布于 2022-06-15 19:43:34

6740

发布于 2022-06-15 19:43:34

文章被收录于专栏：爪哇学习日记

hexo&typora-文章编写

1.图片资源引入问题

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

解决方案

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

方案1：相对路径

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

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

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

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

借助模板格式引入

# hexo3 文章中引用资源代码
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

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

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

# 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引用路径，只保留"图片名称"

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

预览图片路径和部署图片路径不同，也可考虑通过自定义插件实现转化（可参考博客）：

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

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