hexo的图片和视频显示

efonfighting

发布于 2020-02-21 18:08:16

1.3K00

代码可运行

文章被收录于专栏：一番码客一番码客

运行总次数：0

代码可运行

本文目录

前言

图片显示插件安装插件修正视频显示参考

前言

之前一番因为买了阿里云和域名，而且备了案。于是在阿里云上重新部署了博客，同样用的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 删除

编程算法

本文分享自一番码客微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度