# 顶部轮播图

# gitee+PicGo 创建图床

参考教程:图床

# ShokaX 图片配置

参考教程:Shoka 图床配置

# 本地图片

# 本地文件位置

首先,查阅 hexo 官方文档,易知 post_asset_folder 设置为 true 时,可实现新建 markdown 文件的同时新建文件夹:

_posts
├── article1/
├── article2/
├── article1.md
├── article2.md

但是博主并不喜欢,东西太多太乱了,于是找到了大佬的插件:hexo 目录插件

# 自动生成相对位置

本节已废弃,安装 hexo-asset-dir 足以解决图片插入问题。
本节操作会造成 about 页面图片渲染不出来!

在本地,博主习惯使用 Typora 编辑 md 文件。这样在插入图片时,使用的是相对 md 文件的路径。

然而 hexo g 生成 HTML 后,文件位置会打乱,于是网页找不到图片无法渲染。

这里发现很多博客提及的解决方法 hexo-asset-image 插件已经失效,当前解决方法是 hexo-asset-img 插件:hexo 图片位置插件

由于在 2.1 节中我们对本地文件位置做了修改,这里也要对下载的插件文件进行调整:

var hexoLog = require('hexo-log');
var log = typeof hexoLog["default"] === 'function' ? hexoLog["default"]({
  debug: false,
  silent: false
}) : hexoLog({
  debug: false,
  silent: false
});
const htmlparser2 = require("htmlparser2");
/**
 * md 文件返回 true
 * @param {*} data 
 */
function ignore(data) {
    // TODO: 好奇怪,试了一下,md 返回 true, 但却需要忽略 取反!
    var source = data.source;
    var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
    return ['md',].indexOf(ext) > -1;
}
function random(length) { // generate random string
    res = ''
    letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
    for (let i = 0; i < length; i++) {
        let index = Math.round(Math.random() * 25)
        res += letters[index];
    }
    return res
}
function transform(img, fileName) {
    img = htmlparser2.parseDocument(img, "text/html").children[0]
    src = img.attribs.src
    title = img.attribs.title ? img.attribs.title : ""
    alt = img.attribs.alt ? img.attribs.alt : ""
    style = img.attribs.style ? img.attribs.style : ""
    // 这里对原插件的正则匹配进行了修改
    imgFile = src.match(RegExp(".*?(.+?)$"))[1]
    className = random(12)
    imgTag = "
    // 原插件的路径
    // var regExp = RegExp("!\\[(.*?)\\]\\(<?" + fileName + '/(.+?)>?\\)', "g");
    // var imgExp = RegExp("(<img.*?src=\"" + fileName + "/.+?\".*?>)", "g")
    // 新路径
    var regExp = RegExp("!\\[(.*?)\\]\\((.+?)\\)", "g");
    var imgExp = RegExp("(<img.*?src=\".+?\".*?>)", "g")
    // hexo g
    data.content = data.content.replace(regExp, "", "g");
    data.content = data.content.replace(imgExp, (match, img) => {return transform(img, fileName)}, "g")
    // log.info(`hexo-asset-img: filename: ${fileName}, title: ${data.title.trim()}`);
    // log.info(data.content)
    return data;
}
hexo.extend.filter.register('before_post_render',(data)=>{
    if(!ignore(data)){
        action(data)
    }
}, 0);

注意!如果渲染出现 style 问题,检查一下 _config.yml 中的 html 设置:

markdown:
  render: # 渲染器设置
    html: true

# 结果

经测试,成功

这样就能顺畅的处理图片啦

踩坑了,昭昭前事,惕惕后人,de 了 2 小时 bug(泪)