Hexo-filter-relative-src NPM

📑 Overview

Renders local images of relative paths, compatible with vscode and hexo preview display.

📝Hint: You can not only use relative paths but also paths with Hexo syntax.

📣 This is a start-up project, please give me a star, your support is the driving force for my continuous update.

📥 Installation

npm i hexo-filter-relative-src --save

🎯 Feautres

Relative path: Use the markdown notation of the image using the vscode relative path, which will replace the relative path of the directory section when translating hexo.
Url prefix: You can set a global prefix
Compatible: Compatible with hexo-path syntax

🕹️ Usage

# conf at root _conf.yml
# or not set `relitive_src_filter`
# It is enabled by default, and it needs to be explicitly set only if it needs to be disabled. 
relitive_src_filter:
  enable: true

# asset directory structure
|-- license 
| |-- da68b98e404578126b87c5afd9ba9bc3.png
|-- license.md

# use asset
[anchor link](./license/da68b98e404578126b87c5afd9ba9bc3.png)
![pic link 1](da68b98e404578126b87c5afd9ba9bc3.png)
![pic link 2](license/da68b98e404578126b87c5afd9ba9bc3.png)
![pic link 3](./license/da68b98e404578126b87c5afd9ba9bc3.png)

📦 Effects

💔 Before using

After the above is compiled by hexo, the resulting html fragment:

<a href="./license/da68b98e404578126b87c5afd9ba9bc3.png">anchor link</a>
<img src="da68b98e404578126b87c5afd9ba9bc3.png" alt="">
<img src="/blog/license/da68b98e404578126b87c5afd9ba9bc3.png" alt="">
<img src="/blog/./license/da68b98e404578126b87c5afd9ba9bc3.png" alt="">

💪 After using

hexo-filter-relative-src use Duck Typing to pattern.

For image type, /blog/license/ and /blog/./license/ (/blog is the setting of root at _conf.yml) will be patterned, then return their basename.

For anchor type, if the match is a relative path, return basename.

<a href="da68b98e404578126b87c5afd9ba9bc3.png">anchor link</a>
<img src="da68b98e404578126b87c5afd9ba9bc3.png" alt="">
<img src="da68b98e404578126b87c5afd9ba9bc3.png" alt="">
<img src="da68b98e404578126b87c5afd9ba9bc3.png" alt="">

./license/ will be replaced with '', and then the markdown image will be handed over to hexo for compilation.

🔩 Options

Add or modify the following section to your root _config.yml file.

enable: on or off plugin

Type: boolean

Default: ture

prefix: set prefix brefore filename

Type: string

Detault: ""

# conf
relitive_src_filter:
  enable: true
  prefix: 'https://raw.githubusercontent.com/isaaxite/blog/matser/'

# markdown link
![](./license/da68b98e404578126b87c5afd9ba9bc3.png)

# resulting
<img
  src="https://raw.githubusercontent.com/isaaxite/blog/matser/da68b98e404578126b87c5afd9ba9bc3.png"
  alt="">