hexo.图片【转】
1、Hexo 图片不显示 - lwcxy966的博客 - CSDN博客.html(https://blog.csdn.net/lwcxy966/article/details/91363965)
2、
Hexo 图片不显示
在搭建Hexo Blog 过程中出现了图片不显示,现记录起解决的方法:
一.插件安装与配
首先我们需要安装一个图片路径转换的插件,这个插件名字是hexo-asset-image
npm install https://github.com/CodeFalling/hexo-asset-image --save
ZC:这个命令在"...\某个博客文件夹\"路径下执行时,是安装在如下目录:"...\某个博客文件夹\node_modules\"下(没有尝试在nodejs路径下执行是什么效果)
打开_config.yml文件,修改下述内容
post_asset_folder: true
测试:
在blog 目录中右键打开命令行
#清除缓存 hexo clean #开起服务,并选debug 模式 hexo server --debug #看图片是否会显示成功
注:如以下方法不能解决图片显示问题
请按下以修改文件:
打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码
1 'use strict'; 2 var cheerio = require('cheerio'); 3 4 // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string 5 function getPosition(str, m, i) { 6 return str.split(m, i).join(m).length; 7 } 8 9 hexo.extend.filter.register('after_post_render', function(data){ 10 var config = hexo.config; 11 if(config.post_asset_folder){ 12 var link = data.permalink; 13 var beginPos = getPosition(link, '/', 3) + 1; 14 // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html". 15 var endPos = link.lastIndexOf('/') + 1; 16 link = link.substring(beginPos, endPos); 17 18 var toprocess = ['excerpt', 'more', 'content']; 19 for(var i = 0; i < toprocess.length; i++){ 20 var key = toprocess[i]; 21 22 var $ = cheerio.load(data[key], { 23 ignoreWhitespace: false, 24 xmlMode: false, 25 lowerCaseTags: false, 26 decodeEntities: false 27 }); 28 29 $('img').each(function(){ 30 if ($(this).attr('src')){ 31 // For windows style path, we replace '\' to '/'. 32 var src = $(this).attr('src').replace('\\', '/'); 33 if(!/http[s]*.*|\/\/.*/.test(src) && 34 !/^\s*\//.test(src)) { 35 // For "about" page, the first part of "src" can't be removed. 36 // In addition, to support multi-level local directory. 37 var linkArray = link.split('/').filter(function(elem){ 38 return elem != ''; 39 }); 40 var srcArray = src.split('/').filter(function(elem){ 41 return elem != '' && elem != '.'; 42 }); 43 if(srcArray.length > 1) 44 srcArray.shift(); 45 src = srcArray.join('/'); 46 $(this).attr('src', config.root + link + src); 47 console.info&&console.info("update link as:-->"+config.root + link + src); 48 } 49 }else{ 50 console.info&&console.info("no src attr, skipped..."); 51 console.info&&console.info($(this)); 52 } 53 }); 54 data[key] = $.html(); 55 } 56 } 57 });
Hexo 最常用的几个命令
hexo s
hexo s
启动本地服务器,用于预览主题。默认地址: http://localhost:4000/
- hexo s 是 hexo server 的缩写,命令效果一致;
- 预览的同时可以修改文章内容或主题代码,保存后刷新页面即可;
- 对 Hexo 根目录 _config.yml 的修改,需要重启本地服务器后才能预览效果。
hexo new
hexo new "demo"
新建一篇标题为demo的文章,因为标题里有空格,所以加上了引号。
hexo d
hexo d
自动生成网站静态文件
hexo d 是 hexo deploy 的缩写,命令效果一致。
hexo clean
hexo clean
清除缓存文件 db.json 和已生成的静态文件 public 。
网站显示异常时可以执行这条命令试试。
hexo g
hexo g
生成网站静态文件到默认设置的 public 文件夹。
- 便于查看网站生成的静态文件或者手动部署网站;
- 如果使用自动部署,不需要先执行该命令;
- hexo g 是 hexo generate 的缩写,命令效果一致。
hexo new page
hexo new page aboutme
新建一个标题为 aboutme 的页面,默认链接地址为 主页地址/aboutme/
3、
4、
5、