2019-05-28发表前端 / 开发记录6 分钟读完 (大约914个字)

用Hexo建立Blog时所碰到的各种坑

用Hexo建立Blog非常方便，并且有很多现成的主题可以选择。
本文章将会记录使用过程中碰到的一些问题，以及解决方法。
基础的使用方法请参考Hexo的文档或网络上其他文章。

如何优雅地插入图片

本段内容建立在post_asset_folder为true的前提下进行的。
开启post_asset_folder后的目录结构如下：

_posts
├── 文章.md
└── 文章  // 文件夹
    └── image.jpg

1
2
3

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

文章中引用图片，官方Hexo 3.0给出的方案。
但是本地编写Markdown，体验会变得很糟糕。

解决方法

引入hexo-asset-image。
原理是遍历内容里的img标签，给src属性补上permalink。（源码不长推荐直接阅读源码）

1	![](image.jpg)

接着就可以直接使用图片名进行引用，会转化为该文章对应的文件夹中的图片。

1	![](文章/image.jpg)

不过为了能让本地Markdown编写的体验，所以得在前面加上文件夹名。

但是这种方法只能改变文章内容里的图片地址，对于文件头部Front-matter的图片地址，是无能为力的。
关于Front-matter的图片地址的解决方法，请参考文章封面 Thumbnail。

文章封面-Thumbnail

这里采用的文章封面解决方案是基于hexo-theme-icarus主题的thumbnail。
在文章头部Front-matter中设置属性thumbnail，值设为图片路径。

和正文的图片一样会遇到路径问题，并且官方的图片引用方法和hexo-asset-image都没法解决。

解决方法

找到themes\icarus\includes\helpers\page.js，对get_thumbnail进行修改。

hexo.extend.helper.register('get_thumbnail', function (post) {
    var config = hexo.config;
    var url = post.thumbnail || ''
    if (
        url &&
        config.post_asset_folder &&
        !/http[s]*.*|\/\/.*/.test(url)
    ) {
        var link = post.permalink;
        var beginPos = getPosition(link, '/', 3) + 1;
        var endPos = link.lastIndexOf('/') + 1;
        link = link.substring(beginPos, endPos);

        var linkArray = link.split('/').filter((s) => s != '');
        var urlArray = url.split('/').filter((s) => s != '');
        if(linkArray[linkArray.length - 1] == urlArray[0]) {
            urlArray.shift();
        }
        url = '/' + link + urlArray.join('/');
    } else if (!url) {
        var imgPattern = /\<img\s.*?\s?src\s*=\s*['|"]?([^\s'"]+).*?\>/ig;
        var result = imgPattern.exec(post.content);
        if (result && result.length > 1) {
            url = result[1];
        } else {
            url = this.url_for('images/thumbnail.svg');
        }
    }
    return url
});

如果需要补充路径，则在get_thumbnail中进行补充。

文章锚点

文章开启TOC，可以，通过锚点进行文章定位。但是定位时只能定位到窗口的最顶部。
当我将navbar固定到顶部后，则定位的内容会被遮住。

解决方法

打开themes\icarus\source\js\main.js，在底部添加代码：

window.addEventListener('hashchange', function() {
    var target = $(decodeURI(location.hash));
    var htmlFontSize = parseInt($('html').css('font-size'))
    if(target.length == 1){
        var top = target.offset().top - htmlFontSize * 5;
        if(top > 0){
            $('html,body').animate({ scrollTop: top }, 0);
        }
    }
});

通过监听hash变化，进行定位修正。
其中htmlFontSize * 5 = navbar的高度（4rem）+ 1rem间距。

除此外还有只使用css的解决方法，以及创建隐藏的锚点进行修正。
但都需要对Markdown的样式或内容进行修改。

部署缺失README.md

source文件夹中所有.md文件将会被渲染为html。

解决方法

README.md放置于source文件夹下，_config.yml中设置过滤项。

1	skip_render: README.md

Github Page的Custom domain被清空

在Github上设置好Custom domain，
在使用hexo deploy进行更新内容，会清空Custom domain。

解决方法

在source文件夹中新建文件，命名为CNAME，
文件的内容设为Custom domain的值。

#Hexo