hexo.图片
Posted h5skill
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
打开_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、
Hexo 图片不显示在搭建Hexo Blog 过程中出现了图片不显示，现记录起解决的方法：
一.插件安装与配首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image
npm install https://github.com/CodeFalling/hexo-asset-image --save1打开_config.yml文件，修改下述内容
post_asset_folder: true1测试：
在blog 目录中右键打开命令行
#清除缓存hexo clean#开起服务，并选debug 模式hexo server --debug#看图片是否会显示成功12345注：如以下方法不能解决图片显示问题
请按下以修改文件：
打开/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-stringfunction getPosition(str, m, i) { return str.split(m, i).join(m).length;}
hexo.extend.filter.register(‘after_post_render‘, function(data){ var config = hexo.config; if(config.post_asset_folder){ var link = data.permalink; 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(); } }});123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657Hexo 最常用的几个命令hexo shexo s1启动本地服务器，用于预览主题。默认地址： http://localhost:4000/
hexo s 是 hexo server 的缩写，命令效果一致；预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。hexo newhexo new "demo"1新建一篇标题为demo的文章，因为标题里有空格，所以加上了引号。
hexo dhexo d1自动生成网站静态文件hexo d 是 hexo deploy 的缩写，命令效果一致。
hexo cleanhexo clean1清除缓存文件 db.json 和已生成的静态文件 public 。网站显示异常时可以执行这条命令试试。
hexo ghexo g1生成网站静态文件到默认设置的 public 文件夹。
便于查看网站生成的静态文件或者手动部署网站；如果使用自动部署，不需要先执行该命令；hexo g 是 hexo generate 的缩写，命令效果一致。hexo new pagehexo new page aboutme1新建一个标题为 aboutme 的页面，默认链接地址为 主页地址/aboutme/————————————————版权声明：本文为CSDN博主「风清云韵！」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/lwcxy966/article/details/91363965
以上是关于hexo.图片的主要内容，如果未能解决你的问题，请参考以下文章
hexo 图片添加水印（png, jpeg, jpg, gif）