个人博客搭建 - 文章篇

前言

恭喜你！你已经成功完成了你个人网站的搭建，并且对他进行了一定的个性化美化，接下来就是发表自己的 Markdown 文章了。满心欢喜，你把自己的文章上传到了自己的网站里，却发现图片加载不出来，数学公式也没有渲染成功等等问题，接下来就让我们来解决这些问题。

本地图片问题

一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。

如果使用的是绝对路径，这里就会出现图片无法加载的问题，因为我们的博客是要部署在网站上，部署后会生成新的文件目录，导致原来的绝对路径失效，所以我们选择使用相对路径的方式。

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将站点目录 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

post_asset_folder: true

这样在使用 Hexo new 文件名就会生成一个同名文件夹，这个文件夹里就拿来存放图片，然后使用相对路径文件名/图片名引用。（建议使用英文名）

直接新建xxx.md再新建xxx文件夹，这种操作的最终效果是一样的。

然后，我们还需要安装一个插件，插件的名字叫 hexo-asset-image ，在根目录文件夹里我们进入 bash ，输入

npm install hexo-asset-image --save

网上看到的博文是 html 文件，从 md 到 html 的转变是 hexo 帮我们完成的，所以要将 md 中图片的相对路径转换成 html 中的绝对路径才能正常显示。所以下载 hexo-asset-img 插件，就是帮助我们做这个事情的。

当然也有另一种引用方法，在引用图片时直接使用图片名引用，最后网站上是正常显示的，但是在我们编辑 md 文件时不能“所见即所得”，所以还是建议使用第一种方法。

接下来讲一个非常玄学的东西，我在使用 html 语言去引用图片的时候，最后加载出来他的地址老是多一个文件名前缀，导致图片加载错误，一种解决方法是在引用时去掉文件前缀，但是这样会导致不能“所见即所得”，查阅了大量资料以后，得出一个比较玄学的解决方法，仅供参考：

首先进入 /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();
    }
  }
});

作者：小源呀，来源：稀土掘金： https://juejin.cn/post/7006594302604214280

然后进入站点配置文件，找到 post_asset_folder

post_asset_folder: true
# 以下的内容可能没有，需要自己复制进去
marked:
 prependRoot: true
 postAsset: true

然后重新 hexo clean ，hexo d ，发现问题就神奇的解决了，不同的引用方式都可以加载出图片了。实现细节我也没有弄清楚。

希望有能力的老哥做一个新的插件，把这些问题全部解决完善。

数学公式问题

常用的 Markdown 编辑器都会集成 Mathjax ，用来渲染文档中 Latex 格式书写的数学公式。
Hexo默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些有语义冲突的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线’_’代表斜体，会被渲染引擎处理为标签。

最简单的解决方法就是更改渲染引擎，在根目录进入 Bash ，输入以下代码：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

先删除原先的渲染引擎，再安装 hexo-renderer-kramed 渲染引擎。

但是 kramed 也存在语义冲突，所以我们找到 node_modules\kramed\lib\rules\inline.js 文件，找到 escape 和 em 行，将其更改为：

escape: /^\\([`*\[\]()#$+\-.!_>])/，
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

再接着，我们要开启 hexo 的 mathjax 功能。再主题配置文件里找到 Mathjax ，改成：

# MathJax Support
    mathjax:
    enable: true
    per_page: false/true

false 表示只有在 Markdown Front-matter 加上 mathjax: true 的文档才会进行渲染。建议 false ，只有在有公式的文章内渲染，可以提高网页加载速度。