Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

md img render part improvement of hexo-render-marked #216

Open
ChanryLimmy opened this issue Oct 22, 2021 · 7 comments · May be fixed by #271
Open

md img render part improvement of hexo-render-marked #216

ChanryLimmy opened this issue Oct 22, 2021 · 7 comments · May be fixed by #271

Comments

@ChanryLimmy
Copy link

Background

u know when we use other md editor write a post, the img with relative path is like this ![makabaka](postname/1.jpg), but here in hexo-render-marked i must use ![makabaka](1.jpg) if the config like this:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

it means there must be one side between md editor & hexo can't see the pic.

My solution

i opened node_modules -> hexo-render-marked -> lib -> render.js and change the image part (between the *** lines):

  // Prepend root to image path
  image(href, title, text) {
    const { hexo, options } = this;
    const { relative_link } = hexo.config;
    const { lazyload, prependRoot, postPath } = options;

    if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
      if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
        const PostAsset = hexo.model('PostAsset');
        // findById requires forward slash
        // ************************************************************
        const pp = require('path');
        const ppp = pp.join(postPath, '../');
        // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
        const asset = PostAsset.findById(join(ppp, href.replace(/\\/g, '/')));
        // ************************************************************
        // asset.path is backward slash in Windows
        if (asset) href = asset.path.replace(/\\/g, '/');
      }
      href = url_for.call(hexo, href);
    }

    let out = `<img src="${encodeURL(href)}"`;
    if (text) out += ` alt="${text}"`;
    if (title) out += ` title="${title}"`;
    if (lazyload) out += ' loading="lazy"';

    out += '>';

    return out;
  }
}

it works. so the following is my suggests about this product experience

Feature Request

  • provide a better implement cuz im not good at this language
  • provide a config choice 4 this problem

tks a lot!
@ChanryLimmy ChanryLimmy changed the title md img rendder part improvement of hexo-render-marked md img render part improvement of hexo-render-marked Oct 22, 2021
@github-actions
Copy link

This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@SukkaW
Copy link
Member

SukkaW commented Dec 22, 2021

Unstale

@stevenjoezhang stevenjoezhang transferred this issue from hexojs/hexo Dec 22, 2021
@Kevincible
Copy link

Same request here

With the post_asset_folder option in hexo, it seems natural to store those images inside the post_asset_folder, and just use the relative path when writing, which offers a much better markdown preview experience

@Jack-InGitHub
Copy link

Jack-InGitHub commented Aug 15, 2022 •
edited

@ChanryLimmy code doesn't seem to work for me, I modified it a little, and the following code works fine for me. Others can refer to it.

"hexo-renderer-marked@^5.0.0",

    if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
      if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
        const PostAsset = hexo.model('PostAsset');
        // findById requires forward slash
        // ***************** Add the following code *******************
        const fixPostPath = join(postPath, '../');
        const asset = PostAsset.findById(join(fixPostPath, href.replace(/\\/g, '/')));
        // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
        // ************************** End *****************************
        // asset.path is backward slash in Windows
        if (asset) href = asset.path.replace(/\\/g, '/');
      }
      href = url_for.call(hexo, href);
    }

@Jack-InGitHub Jack-InGitHub mentioned this issue Aug 15, 2022
Closed
@zhaomoran
Copy link

@SukkaW This issue has been put on hold for a long time, and #225 have not been closed yet. Is there any suggestion for us to end this problem?

@2-3-5-7
Copy link

2-3-5-7 commented May 24, 2023

I have written a plugin to solve this, hexo-relative-link

@lucienshawls lucienshawls linked a pull request Jan 18, 2024 that will close this issue
Open
@lucienshawls
Copy link

I made a pr #271 and hopefully this solves the issue. More tests are welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add more asset-searching locations and solve a known issue lucienshawls/hexo-renderer-marked
7 participants
@Kevincible @zhaomoran @ChanryLimmy @SukkaW @Jack-InGitHub @2-3-5-7 @lucienshawls