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="">

Donate

Support this reposibility

Give this repository a free star

Let more people know about this project

Looking forward to you finding bugs and submitting them to issues to help me improve this project

Buy me a coffee

Links

Isubo | CLI tool for issue-blog

Isaac Kam's Blog

Licence

MIT @ isaaxite