# 顶部轮播图
# 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(泪)