hexo的图片和视频显示
本文目录
前言
图片显示插件安装插件修正视频显示参考
前言
之前一番因为买了阿里云和域名，而且备了案。于是在阿里云上重新部署了博客，同样用的hexo。
但一直来都有图片不能和视频不能显示的问题。因为没有连续的时间去研究，也就一直没有解决，处于残缺的状态。
刚好这次假期延长，有时间来处理，于是今天一番研究了下源码，终于找到了图片和视频的显示方案。
具体效果感兴趣的朋友可以直接访问一番的网站：『http://www.efonmark.com/』。
图片显示
插件安装
因为hexo本身不支持通用的markdown图片插入语法，因此需要借助一个插件hexo-asset-image。
在工程文件根目录执行如下脚本安装：
npm install https://github.com/CodeFalling/hexo-asset-image --save
插件修正
但这个插件有点bug，会导致转换出来的img的路径不对，因此需要手动定位修改一下。
通过在/node_modules/hexo-asset-image/index.js中加入打印，并用chrome查看图片路径和执行hexo g命令时的打印。debug后我们可以对该脚本进行修正，最终得到如下脚本：
'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();
}
}
});
一番在这里花的时间比较多，最终定位到做路径拼接时的这段代码需要修正：
if(version.length > 0 && Number(version[0]) >= 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
因为之前一番在百度云上的hexo版本是3.xxx，而在阿里云上部署的时候已经升级到4.xxx了，因此将version[0]) == 3改为了version[0]) >= 3。至此图片显示正常了。
视频显示
视频显示因为直接引用本地视频一直有问题，于是一番只能用iframe的方式引用bilibli的地址。
bilibili的好处是没有广告，如果要引用优酷等视频源，方法一样。
直接将分享处的“嵌入代码”复制到markdown里就可以了。
具体方式如下图：
这里注意手动指定下width和height，例如：
<iframe src="//player.bilibili.com/player.html?aid=85335904&cid=145872634&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100% height=480> </iframe>
参考
- 《hexo引用本地图片无法显示》：『https://blog.csdn.net/xjm850552586/article/details/84101345』
一番雾语：终于把博客完善得可以正常看了。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录