【个人网站搭建】Hexo框架下文章插入图片部署到GitHub Pages显示失败解决方法

阳光穿透心脏的1/2处 2022-12-29 14:12 186阅读 0赞

# 0x00 前言 #

文章中的文字可能存在语法错误以及标点错误，请谅解；

如果在文章中发现代码错误或其它问题请告知，感谢！

Hexo博客框架版本（`hexo vesion`）：v5.3.0

# 0x02 解决方法 #

1.安装插件，在**根目录**打开Git Bash,执行：

npm install hexo-asset-image --save

2.打开**根目录**下`_config.yml`配置文件，定位到`post_asset_folder`，将选项从false改成true：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]

3.打开`/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();
        }
      }
    });

4.至此可以实现文章中插入图片了，在`hexo n 文章标题`之后会在`source/_posts`文件夹内生成`文章标题.md`文件和`文章标题`文件夹，将文章需要用到的插图保存在`文章标题`文件夹内，在`文章标题.md`中使用markdown语法来添加图片：

![本地路径](图片名称.jpeg)

添加完成之后使用`hexo g`和`hexo d`部署到GitHub Pages上，打开网站页面可以看到图片成功上传：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center 1]  
以上。

参考文档：  
1.[https://www.jianshu.com/p/f72aaad7b852][https_www.jianshu.com_p_f72aaad7b852]  
2.[https://blog.csdn.net/xjm850552586/article/details/84101345][https_blog.csdn.net_xjm850552586_article_details_84101345]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f853144775ba40fda384bcf4068d212a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/8cf830ce9e7244dc98809de294aee59b.png
[https_www.jianshu.com_p_f72aaad7b852]: https://www.jianshu.com/p/f72aaad7b852
[https_blog.csdn.net_xjm850552586_article_details_84101345]: https://blog.csdn.net/xjm850552586/article/details/84101345