EfonMark

一番码客 : 挖掘你关心的亮点。
http://www.efonmark.com

本文目录:

[TOC]

image-20200201225035376

前言

之前一番因为买了阿里云和域名,而且备了案。于是在阿里云上重新部署了博客,同样用的hexo。

但一直来都有图片不能和视频不能显示的问题。因为没有连续的时间去研究,也就一直没有解决,处于残缺的状态。

刚好这次假期延长,有时间来处理,于是今天一番研究了下源码,终于找到了图片和视频的显示方案。

具体效果感兴趣的朋友可以直接访问一番的网站:『http://www.efonmark.com/』。

image-20200201232125346

图片显示

插件安装

因为hexo本身不支持通用的markdown图片插入语法,因此需要借助一个插件hexo-asset-image

在工程文件根目录执行如下脚本安装:

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

插件修正

但这个插件有点bug,会导致转换出来的img的路径不对,因此需要手动定位修改一下。

通过在/node_modules/hexo-asset-image/index.js中加入打印,并用chrome查看图片路径和执行hexo g命令时的打印。debug后我们可以对该脚本进行修正,最终得到如下脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'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();
}
}
});

一番在这里花的时间比较多,最终定位到做路径拼接时的这段代码需要修正:

1
2
3
4
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里就可以了。

具体方式如下图:

image-20200201224756529

这里注意手动指定下widthheight,例如:

1
<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>

参考

一番雾语:终于把博客完善得可以正常看了。


免费知识星球:一番码客-积累交流
微信公众号:一番码客
微信:Efon-fighting
网站:http://www.efonmark.com/