hexo icarus主题添加相关文章

前言

个人感觉next主题过于单调，甚至有点简陋，挑来挑去看上了icarus主题。趁着这次假期，便把博客从next主题迁移到了icarus主题。
迁移之后发现，icarus并没有原生支持相关文章的插件，而且模板用的是jsx，跟原来next使用swig完全不一样，也不是官方主题所用的ejs。看了hexo-related-popular-posts插件的github issue也没人提过，自己折腾一番最后终于搞定了，还是有点波折的。
特此记录一下如何使用hexo-related-popular-posts为icarus主题添加相关文章的功能，希望能帮助到有同样需求的人。

修改代码

hexo-related-popular-posts是如何安装的我就不再赘述了，记得hexo 5.0要安装最新版本的，之前的4.0可能会因为一些api报错。

由于最新的Icarus使用npm安装的话是安装到node_modules下的，所以我们需要把主题弄到themes目录下。可以直接git clone一份到这个目录或者是复制出来，hexo加载themes目录下的主题优先级是大于node_modules目录。

layout\common目录下新增related.jsx

与其他主题不同，icarus的post叫做page，this.props中是不包含post的。hexo-related-popular-posts注册了popular_posts函数用于渲染相关文章，这个需要在helper加上。
hexo-related-popular-posts生成的html text需要使用dangerouslySetInnerHTML设置，否则直接渲染出来的是带引号的。
下面是我编写的related.jsx。

const logger = require('hexo-log')();
const { Component } = require('inferno');
const view = require('hexo-component-inferno/lib/core/view');


module.exports = class extends Component {
    render() {
        const { config, helper, page } = this.props;
        const { __, popular_posts } = helper;
        let relatedText = popular_posts( {} , page )
        if (!relatedText || relatedText.length == 0) {
            return null;
        }
        return <div class="card">
            <div class="card-content">
                <h3>相关文章</h3>
                <span
            dangerouslySetInnerHTML={{__html:(relatedText) }}>
            </span>
            </div>
        </div>;
    }
};

修改article.jsx

编写好了related.jsx，就需要在article.jsx中修改了。需要引入自定义的jsx文件，并在合适的位置插入标签。

require jsx

const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
+ const Related = require('./related');

插入相关文章标签

我把它放在文章的尾部，捐赠的上方，!index表示首页不出现。

{!index ? <Related config={config} page={page} helper={helper}/> :null}

{/* Donate button */}
+ {!index ? <Donates config={config} helper={helper} /> : null}

效果预览&后记

如果有啥报错的话，记得hexo clean一下。

具体的样式可以自己微调，上述代码的改动效果如下。
hexo-related-popular-posts生成的div有自带class，可以自行添加icarus/source/css/style.styl与修改icarus/include/style目录下的style进行样式的微调。