前言

在塔建hexo框架中遇到的问题是基于以下的版本和butterfly主题开发的一个个人博客
    hexo的版本: ^5.0.0
butterfly主题基于以下插件及版本开发:
    "hexo-butterfly-clock": "^1.0.7",
    "hexo-butterfly-tag-plugins-plus": "^1.0.17"
用的imgage图片引入插件
    "hexo-asset-image": "github:CodeFalling/hexo-asset-image"
路径生成用了hexo-abbrlink
    "hexo-abbrlink": "^2.2.1"

注意:以下问题是基于仓库和github用户一致的情况，或者有自己域名的情况

更新踩坑记录

点击查看踩坑记录

更新记录

2022-11-21 记录问题

2022-11-18 记录问题

本地样式是好的部署的环境样式错乱

查看详情

  1. 如果你在github上新建仓库时，仓库名字没有和用户名一致

    2. </ol>
    </div>
    修改站点配置文件_config.yml，如果未购买域名，将url设置成 https://.github.io/仓库名/ （这个也是你网上访问的路径。但是要注意的是，用这个就要注意_config.butterfly.yml中静态资料引入路径问题要加上仓库名否则访问不到），如果已经购买域名，将url设置成你的域名，再重新部署即可看到效果。

    1. 如果你在github上新建仓库时，仓库名字和用户名一致

      2. </ol>
      </div>
      修改站点配置文件_config.yml，如果未购买域名，将url设置成 https://.github.io（这个也是你网上访问的路径。），如果已经购买域名，将url设置成你的域名，再重新部署即可看到效果。

      路径问题

      1.问题描述

      在塔建hexo框架+butterfly主题时，hexo的原生路径是用生md文件的年份加月份加日加md文件名permalink: :year/:month/:day/:title/ 但是当直接将这个放入网页中，点击链接是无法访问的，那么我们怎么解决这个问题呢？


      2.问题解决方法
      查看解决方法

      1.在根目录下,执行如下命令

      bash
      npm install hexo-abbrlink --save

      2.站点配置文件中的_config.yml修改:

      yml
      # permalink: :year/:month/:day/:title/
      permalink: post/:abbrlink.html  # post 是自定义的前缀 这里是为了生成的文章链接不会因为有中文而访问不到
      abbrlink:
          alg: crc32   #算法： crc16(default) and crc32 默认16位
          rep: hex     #进制： dec(default) and hex 默认dec进制
          allow: ['post','school','cpp',"java","blog"] #允许的模板类型.默认为["post"]
          disallow: [] #不允许的模板类型，默认为空列表

      这里permalink有二种配置方法

        1. post/:abbrlink.html带.html的后缀方法
        1. post/:abbrlink/ 不带后缀的方法
          注意: 个人不推荐在permaklink:post/:abbrlink.html配置成这样,推荐 permalink:post/:abbrlink/ 原因如下
      他们的优缺点

      1.带后缀的
      优点是在链接上加上.html会让浏览认为这是一个页面与利于seo搜索
      缺点是利用markdown的内置语法![图片名字](./xxx/xxx.png)图片在页面不能显示
      2.不带后缀的
      优点是利用markdown的内置语法![图片名字](./xxx/xxx.png)可以展示，但是还存在一些小问题，请看下面的用markdown原生语法不能展示图片问题
      缺点是路径跳转存在很大问题，下面用markdown原生语法[xxx](xxx)不能跳转讲述
      注意:路径最后面一定要加上/ 不然点击文章是无法打开页面只会下载这个页面

      用markdown原生语法![xxx](xxx)不能展示图片问题

      查看详情

      1.在根目录下,执行如下命令

      bash
      npm install hexo-asset-image --save

      2.在站点配置文件_config.yml配置如下

      yml
      # 默认是false改为true
      post_asset_folder: true

      3.在项目依赖node_modules/hexo-asset-image/index.js修改成以下代码(最好将源码先备份一下)

      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.md".
          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();
          }
        }
      });
      上面代码亲测有效网上说还有一个方法,没有试过,自己酌情处理.代码如下:
      js
      //原来的第58行的
      $(this).attr('src', config.root + link + src);
      //修改成
      $(this).attr('src', src);
      然后hexo clean && hexo g && hexo s
      注意:在生成文章md时所生的文章夹一定不要删,将每个对应的文章图片放入相应的文件夹下

      图片引入的二种方式

      1.原生的markdown内置语法 ![图片描述](图片路径)
      2.标签插件 hexo内置 ``

      用markdown原生语法[xxx](xxx)不能跳转

      首先我在前文中说到了配置路径有二种方式,一种带.html后缀,另一种不带后缀

      在站内跳转到对应的标题处的使用方法

      bash
      描点[文章内跳转](#目标位置)
      目标位置<span id="目标位置"></span>

      查看详情

      2.1在站内跳转到对应的标题处的使用方法一

      bash
      描点[文章内跳转](/本文的目录/xxxx/#目标位置)
      目标位置<span id="目标位置"></span>

      2.2在站内跳转到对应的标题处的使用方法二
      html
      <a href="/post/80bacdb6/#要跳转处的标题id">xxxxxxx</a>