在hexo的Icarus主题页面底部加入备案号

2020年12月31日提交的ICP备案申请，在今天（2020年1月7日）通过啦！

接着就是要把备案号添加到博客页脚。

参考的资料链接为：Hexo博客icarus主题定制篇

定制备案

icarus主题目前没有备案的扩展点，官方后续应该后支持这个功能，我先自己扩展一个用用。

编辑文件node_modules\hexo-theme-icarus\layout\common\footer.jsx

const {
            logo,
            logoUrl,
            siteUrl,
            siteTitle,
            siteYear,
            author,
            links,
            showVisitorCounter,
            visitorCounterTitle,
            /* 添加下面这行代码 */
			beian
        } = this.props;


<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
{/* 添加下面这行代码 */}
<br /><a href={beian.url}>{beian.title}</a>
123456789101112131415161718

配置_config.icarus.yml：

beian:
    title: xxxxxx备案号
    url: xxxurl
123

上面这部分是关于参考博客的原文的引用。

我打开的是themes\icarus\layout\common\footer.jsx ，应该是安装的时候用的方式不同，博主用的应该是插件式的方式安装Icarus主题。不过都一样。

我第一次尝试的时候只添加了<br /><a href={beian.url}>{beian.title}</a>这一部分代码，没看到上面，随后hexo报错：

err: ReferenceError: beian is not defined

beian未定义？我已经在配置文件中定义了beian这个配置项啊。随后看到了上面那部分，原来是因为，虽然配置传入了Footer组件的属性，但是并未被解构赋值取出来，所以需要在一开头把beian这一项取出来。

然而，即使我这样做了，还是出现了问题：

err: TypeError: Cannot read property 'title' of undefined

这说明beian还是未定义，是哪里出现问题了呢？

我发现这个文件中除了Footer这个react组件的定义之外，还有如下代码：

themes\icarus\layout\common\footer.jsx

module.exports = cacheComponent(Footer, 'common.footer', props => {
    const { config, helper } = props;
    const { url_for, _p, date } = helper;
    const { logo, title, author, footer, plugins } = config;

    const links = {};
    if (footer && footer.links) {
        Object.keys(footer.links).forEach(name => {
            const link = footer.links[name];
            links[name] = {
                url: url_for(typeof link === 'string' ? link : link.url),
                icon: link.icon
            };
        });
    }

    return {
        logo,
        logoUrl: url_for(logo),
        siteUrl: url_for('/'),
        siteTitle: title,
        siteYear: date(new Date(), 'YYYY'),
        author,
        links,
        showVisitorCounter: plugins && plugins.busuanzi === true,
        visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>'),
    };
});

可以发现，这段代码的前面有个config，并且解构赋值了几个在配置文件中存在的字段，我想，这应该就是读取配置并且将它们作为属性传给Footer组件的代码了，所以我在这里也做了修改：

themes\icarus\layout\common\footer.jsx

module.exports = cacheComponent(Footer, 'common.footer', props => {
    const { config, helper } = props;
    const { url_for, _p, date } = helper;
    const { logo, title, author, footer, plugins,beian } = config;//在这里添加beian

    const links = {};
    if (footer && footer.links) {
        Object.keys(footer.links).forEach(name => {
            const link = footer.links[name];
            links[name] = {
                url: url_for(typeof link === 'string' ? link : link.url),
                icon: link.icon
            };
        });
    }

    return {
        logo,
        logoUrl: url_for(logo),
        siteUrl: url_for('/'),
        siteTitle: title,
        siteYear: date(new Date(), 'YYYY'),
        author,
        links,
        showVisitorCounter: plugins && plugins.busuanzi === true,
        visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>'),
        beian//并且在这里返回出去
    };
});

该文件中所有的修改

完成这些就ok了，hexo clean & hexo s之后，在博客最底部可以看到备案号。