hexo-breadcrumb

A Hexo plugin to generate breadcrumb navigation for post and page layouts.

Features

• Compatible with post and page layouts.
• Set custom title for the home page.
• Customize delimiter and styling.
• Accessible navigation with ARIA attributes of navigation.

Installation

1. ni: ni hexo-breadcrumb -D
2. npm: npm i hexo-breadcrumb -D
3. yarn: yarn add hexo-breadcrumb -D
4. pnpm: pnpm add hexo-breadcrumb -D

Usage

Configuration

In _config.yml file, specify the breadcrumb settings as following:

breadcrumb:
  delimiter:
    # /, >, etc.
    content: '/'
    # Applied on ::after pseudo element.
    style: 'font-weight: bold;'
    # Customize the margin for breadcrumb items.
    margin: '0.5rem'
  aria:
    nav: 'Breadcrumb'
  homepage:
    # Customize the title for the homepage in the breadcrumb.
    title: 'Home'
  templates:
    - layout: 'post'
      tokens:
        - 'home'
        - 'category'
        - 'title'
    - layout: 'page'
      tokens:
        - 'home'
        - 'title'
  render:
    # Enable or disable breadcrumb rendering.
    enable: true
    # Specify the layout's direction for rendering.
    direction: 'horizontal' # or 'vertical'

Integration with Hexo themes

Add the following snippets to a layout file in order to display the breadcrumb.

<%- page.breadcrumb %>

License

This project is licensed under the MIT License.