美文网首页
hexo 图片

hexo 图片

作者: BI罗 | 来源:发表于2021-04-13 17:16 被阅读0次

    一.插入图片的步骤

    1 把主页配置文件_config.yml 里的post_asset_folder:设置为true

    2 在hexo目录下执行这样一句话npm install hexo-asset-image --save

    3 等待一小段时间后,再运行hexo n "xx"来生成md文章,/source/_posts文件夹生成一个xx.md文件的同名的文件夹

    二.hexo图片的几种用法:

    1.<img>标签写法可以并排显示,md写法不行
    2.两种写法混合:html与md写法必须隔开一个空行(<b r>标签后),否则md写法不生效

    ---
    title: test2测试图片并排显示
    date: 2021-04-15 20:43:07
    tags:
    ---
    html写法
    
    <img class="nofancybox" src=".\test2\image1.jpg" style="display: inline; border-style: none;">
    <img class="nofancybox" src=".\test2\image2.jpg" style="display: inline; border-style: none;">
    
    <br> 
    <br> 
    <br> 
    <br> 
    <br>
    
    md写法
    ![这是代替图片的文字,随便写](image1.jpg)
    ![这是代替图片的文字,随便写](image2.jpg)
    ![这是代替图片的文字,随便写](image3.jpg)
    
    <br> 
    <br> 
    <br> 
    <br> 
    
    
    md图片超链接
    ![这是代替图片的文字,随便写](image3.jpg)
    [![这是代替图片的文字,随便写](image3.jpg)](https://www.jianshu.com/p/a4f5af4d8cd8)
    

    3.利用<a>标签给图片加上超链接

    <a href="/2021/04/15/test2/">
      <img class="nofancybox" src="maoboli.jpg" style="display: inline; border-style: none;" width=300 height=160  >
    </a>
    

    ======================================================

    三.结构目录

    注意:.\test2\image.jpg的html写法

    验证写法有没有错,注意public的目录有没有生成你所需的图片


    插件不起作用?

    修改 /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-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();
        }
      }
    });
    

    相关文章

      网友评论

          本文标题:hexo 图片

          本文链接:https://www.haomeiwen.com/subject/pkyclltx.html