Hexo图片显示问题

最新推荐文章于 2024-08-22 09:30:24 发布

飘零到末成虚无

最新推荐文章于 2024-08-22 09:30:24 发布

阅读量411

点赞数 4

分类专栏： Hexo 文章标签：经验分享笔记

本文链接：https://blog.csdn.net/qq_40008082/article/details/140061204

版权

Hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Hexo搭建的时候遇到了奇葩的问题，网上的hexo-asset-image也下载了，用Markdown原生的图片引用方式引用，发现主页的预览界面可以正常显示，但是点进文章里面就显示不了了。

而在用了asset文件夹的方式之后，（在页面同目录下创建一个同名文件夹放图片），结果令人哭笑不得————变成了页面内正常显示，主页无法显示了。

问题原因

笔者对Hexo了解不深，如果有类似经历的或者懂得hexo主页和文章渲染时具体原理的大佬可以在评论区交流一下

解决办法

首先还是需要安装hexo-asset-image插件的，在hexo博客的根目录文件夹打开git bash，输入

npm install https://github.com/CodeFalling/hexo-asset-image --save

或者

npm install hexo-asset-image --save

在Hexo图片相关 - 文章显示、主页显示、修改fancybox一文中，作者提到自带的asset-image有bug，可以尝试在根目录中找到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();
    }
}
});