Erispyu's Blog

Heatmap Chart

Heatmap Chart Plugin

The heatmapchart tag plugin allows you to display the number of articles on your site in a visually appealing calendar view. It creates interactive and customizable heatmaps to showcase your site’s activity over time.

Quick Start

To quickly get started with the heatmapchart plugin, follow these steps:

  1. Add the Tag to Your Markdown
    Use the heatmapchart tag in your Markdown file to generate a heatmap. Insert the following code snippet into any Hexo post or page:

    {% heatmapchart %}{% endheatmapchart %}

  2. Customize the Heatmap
    You can customize the heatmap by adding arguments to the tag.

    Argument Format:

    {% heatmapchart [color theme] [initial year] [footer display] %}Optional Title{% endheatmapchart %}

    For example:

    {% heatmapchart forest 2024 no-footer %}Blog Heatmap{% endheatmapchart %}

  3. View the Heatmap
    Start your Hexo server and navigate to the page where you added the tag. You should see the heatmap displayed.

    Sample Output:

    Powered by hexo-stats-echarts

For more advanced configurations and examples, refer to the sections below.

Features

  • Click on the year labels on the right to switch between years and view the heatmap for a specific year.

Jump to Archive

  • Click on any calendar cell to navigate to Hexo’s archive page for that specific month.

Automatic Dark/Light Mode Switching

  • The heatmap automatically adapts to the user’s system or browser preference for dark or light mode.
  • The background color will adjust dynamically based on the user’s preference.

Usage and Configuration

Argument Rules

  1. Order Matters: Arguments must be passed in the following order: [color theme], [initial year], [footer display].

  2. Required Precedence: If you want to use a later argument, all preceding arguments must be provided. For example:

    • To use [initial year], you must provide [color theme].
    • To use [footer display], you must provide [color theme] and [initial year].

args[0]: Color Theme

Specifies the color theme for the heatmap. Below is a list of available themes along with their corresponding hex color codes:

Theme Color Palette Example
oceanic ["#A6D8E8", "#6FB3D2", "#4A90BF", "#2E6A8E", "#1A4461"]
forest ["#ACE7AE", "#8FD694", "#69C16D", "#549F57", "#3A7D3E"]
sunset ["#FFD1A6", "#FFA07A", "#FF6F52", "#D94A3D", "#A62B2B"]
earthy ["#E3C8A8", "#C4A076", "#A57C52", "#7A5A3A", "#4E3A28"]
pastel ["#F5D5E6", "#E8B8D0", "#D18FB8", "#A86A8E", "#7A4A61"]
golden ["#FFEBB5", "#FFD966", "#FFB74D", "#D18F4A", "#A66B2B"]
berry ["#F4C2D7", "#E88BB3", "#D94A7A", "#A62B5C", "#7A1F3D"]
charcoal ["#E0E0E0", "#9E9E9E", "#616161", "#424242", "#212121"]
  • Default: If no theme or undefined theme is specified, a random theme will be applied.
  • Custom Theme: You can specify any of the available themes (e.g., oceanic, forest, sunset, etc.).

args[1]: Initial Year

Specifies the initial year to display in the heatmap.

  • If the provided year is not in the data range or is unspecified, the latest year in the data will be used.

Controls the visibility of the footer.

  • Default: Footer is visible.
  • To hide the footer, set this argument to 'no-footer'.

Examples

Below are examples demonstrating how to use the heatmap tag with different configurations.

Uses the forest theme, hides the footer, and sets the initial year to 2024.

{% heatmapchart forest 2024 no-footer %}Blog Heatmap{% endheatmapchart %}

Output:

Blog Heatmap

Uses the sunset theme, hides the footer, and shows the latest year.

{% heatmapchart sunset latest no-footer %}{% endheatmapchart %}

Output:

Charcoal Theme, Invalid Initial Year

If the provided initYear is not in the data range, the latest year in the data will be used.

{% heatmapchart charcoal 1628 %}{% endheatmapchart %}

Output:

Powered by hexo-stats-echarts

Undefined Theme, Random Theme by Default

If an undefined theme is specified, a random theme will be applied.

{% heatmapchart unknown %}{% endheatmapchart %}

Output:

Powered by hexo-stats-echarts

Feedback

Feel free to experiment with different configurations and themes to create the perfect heatmap for your site!

If you have any questions or suggestions, please open an issue on GitHub.

0%