Hexo icarus 主题挂件支持自定义页面展示

以下文章属于本站原创作品，转载请注明出处

最近将本站从 next 主题迁移到 icarus，界面瞬间感觉清爽很多，特别是 icarus 挂件相对来说丰富不少，但是设置 widget 挂件后，所有页面都是相同的效果。内容分三栏后中间主题部分感觉被挤压，在浏览文章时很不方便，因此打算将挂件修改成可以在自定义一些页面中展示。这样一来，widget 挂件设置更加灵活，而且可以实现不同的页面进行不同的分栏处理，话不多说，直接上代码。

一、环境以及版本

Hexo: 4.2.0
hexo-theme-icarus: 3.0.1

二、修改组件内容

找到 hexo/themes/icarus/layout/common/widgets.jsx 路径下的文件，分别修改或新增以下三个方法：

1、添加参数 page

function formatWidgets(widgets, page) {
    const result = {};
    if (Array.isArray(widgets)) {
        widgets.filter(widget => typeof widget === 'object').forEach(widget => {
            // Decide the widget should show in the page or not
            if ('pages' in widget && typeof widget.pages === 'object') {
                const pageName = getPageName(page);
                var pageShow = false;
                widget.pages.forEach(item => {
                    if (item === pageName) {
                      pageShow = true;
                    }
                });
                if (!pageShow) {
                    return;
                }
            }
            // Just left or right should the widget show in
            if ('position' in widget && (widget.position === 'left' || widget.position === 'right')) {
                if (!(widget.position in result)) {
                    result[widget.position] = [widget];
                } else {
                    result[widget.position].push(widget);
                }
            }
        });
    }
    return result;
}

2、新增方法，获取当前页面类型

// eg: index, archive, category, tag, post
function getPageName(page) {
    if (page.__index === true ) {
        return 'index';
    } else if (page.archive === true) {
        return 'archive';
    } else if (page.__categories === true) {
        return 'category';
    } else if (page.__tags === true) {
        return 'tag';
    } else if (page.__post === true) {
        return 'post';
    }
}

3、添加参数 page

function hasColumn(widgets, page, position) {
    var hasColumn = false;
    if (Array.isArray(widgets)) {
        const pageName = getPageName(page);
        widgets.forEach(widget => {
            var hasPos = widget.position === position;
            var hasPage = false;
            if (!('pages' in widget)) {
                hasPage = true;
            } else if (Array.isArray(widget.pages)) {
                widget.pages.forEach(item => {
                    if (item === pageName) {
                        hasPage = true;
                        return;
                    }
                });
            }
            if (hasPos && hasPage) {
                hasColumn = true;
                return;
            }
        });
    }
    return hasColumn;
}

最后将调用以上三个方法的地方参数均补充完整。

三、修改配置文件

修改 hexo\themes\icarus\_config.yml 文件 widget 配置部分如下：

widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: profile
   		# ...
   		# Specified pages that will show the widget, all pages by default. eg: index, archive, category, tag, post
        pages:
            - index
	# ...
    # Table of contents widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        pages:
            - post
    # Recent posts widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: recent_posts
    # Categories widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: categories
    # Tags widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: tags

其中 pages 可选值包含 index（首页）、 archive（归档）、 category（分类）、 tag（标签）、 post（正文），如若不填，则默认所有页面均显示该挂件。

例如 profile 个人简介挂件表示只在首页显示，toc 目录挂件表示只在正文页面显示，其余三个则表示所有页面均展示该挂件，实际效果可参考本站。