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