hexo文章中插入图片的解决


一、一般解决思路

1. 安装图片插入路径转换的插件 hexo-asset-image

npm install hexo-asset-image --save

2. 在hexo的__config.yml中开启功能

writing:
 post_asset_folder: true

3. 当创建文章时,会自动在文章同一目录下生成同名文件夹,将图片放入。

  假设我要插入的图片名字为1.jpg,放在博客主目录source文件夹下的XXX文件夹里。 了解到有两种方式在文章中插入图片。

![图片描述](/XXX/1.jpg) //md语言的插入图片
{% asset_img 1.jpg "这里是图片描述" %} //hexo内置插入图片的方式

二、实际问题

1. 两种方式都无法正常显示

  • 在网页源代码中找到图片位置的源代码

  <p><img src="/.pink/2020/04//1.jpg" alt></p>

  我的域名为 mysite.pink 这里的图片路径就成了 mysite.pink.pink…

  该路径存在bug,导致浏览器无法找到该文件。

  • 在仓库中找寻图片的文件。

  正确上传,路径如同预计。判断是生成html时出现bug。

2. 解决

npm i hexo-permalink-pinyin --save #安装此插件可以生成文章的拼音路径,解决链接转码导致的路径问题。

  判断是图片路径插件的问题。搜索到一位博主的文章。他贴出了自己对插件的修改

  /node_modules/hexo_asset-image/index.js 将该文件修改为:

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];

      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});
————————————————
版权声明:本文为CSDN博主「Ericam_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xjm850552586/article/details/84101345

3. 再次尝试

  在文章中使用两种不同方式插入相同图片。

  hexo相对路径插入资源,正确显示。

  md语言插入图片,依然失败。

三、姑且算是解决问题了。

  收工恰饭,敲打总结。示例:一段文字

参考文章:

hexo官方文档关于资源插入标签的解释

修改插件代码的大佬原文章


评论
  目录