Hexo添加自定义分类菜单项并定制页面布局(简洁版)

发表于 2021-06-20 更新于 2022-08-29 分类于 Hexo 评论：阅读次数：

希望在Hexo的NexT主题中增加自定义分类的菜单，即一个指向特定分类的链接，且页面显示的是类似主页的标题+摘要风格。定制Hexo分类页面布局

之前有一个比较粗暴的实现：# Hexo添加自定义分类菜单项并定制页面布局。由于直接修改了源码，属于侵入式实现，导致以后升级Hexo和主题时需要手动再改代码，不推荐。

本文采用Hexo扩展简洁地定制新的分类页面布局，并解决了之前实现在升级插件或主题后需要修改源码的问题。所用版本：Hexo v5.4.0，NexT v8.5.0。

添加自定义菜单项

为了让每个页面都生成新的菜单项，编辑主题配置文件_config.yml中的menu部分，增加一行：

楼市分析: /realestate/ || fas fa-chart-line

变为：

menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  楼市分析: /realestate/ || fas fa-chart-line

其中menu菜单每行的格式为"Key: /link/ || icon"。需要自定义icon可以在对应版本的fontawesome icon列表中找。这里的图标定义是fontawesome v5.13.0。

注意这里的/realestate/即是定制页面的URL。

用Hexo扩展生成定制页面

为显示某分类下所有文章的标题+摘要，从而和站点的主页风格一致，可以写一个Hexo扩展customcategory.js，放在Hexo的scripts目录（如果没有则创建一个）：

var pagination = require('hexo-pagination');

const filteredCategory = '楼市分析';

hexo.extend.generator.register('customcategory', function(locals){
  var realestatePosts = locals.posts.filter(function(x) {
    return x.categories.data[0].name == filteredCategory;
  });

  return pagination('realestate', realestatePosts, {
    perPage: 10,
    layout: ['customcategory']
  });
});

Pagination的用法：pagination(base, posts, [options])

Option	Description	Default
`perPage`	Posts displayed per page	10
`format`	URL format	page/%d/
`layout`	Layout. This value can be a string or an array.	['archive', 'index']
`data`	Extra data

这个实现比修改hexo-generator-category插件来得更方便，注入一个新的Generator叫做customcategory，把所有post locals.posts过滤一下，只留下分类为filteredCategory的文章，再用hexo-pagination将它们渲染成customcategory的layout。下一节介绍如何新建这个页面模板(注意下面的customcategory.njk和这里的文件名需要一致)。

添加分类页面模板

默认分类页面布局在主题目录的layout/category.njk，生成的每个post的为posts-collapse，即时间线形式，而我们希望这个页面是posts-expand的状态。于是需要在layout目录定制一个新的模板文件customcategory.njk：

{% extends '_layout.njk' %}
{% import '_macro/post-collapse.njk' as post_template with context %}
{% import '_macro/sidebar.njk' as sidebar_template with context %}

{% block title %}{{ __('title.category') }}: {{ page.category }} | {{ title }}{% endblock %}

{% block class %}index posts-expand{% endblock %}

{% block content %}

  {%- for post in page.posts.toArray() %}
    {{ partial('_macro/post.njk', {post: post, is_index: true}) }}
  {%- endfor %}

  {%- include '_partials/pagination.njk' -%}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

运行hexo g，就可以生成定制化的分类页面/realestate/了。

参考

# Variables|Hexo # Generator|Hexo # hexo-pagination # hexo-generator-category