feat: new tag picture-caption

[Mister-Kin]

PR Checklist

• The changes have been tested (for bug fixes / features).
• Docs in NexT website have been added / updated (for features).
  • Not yet! If this PR is accepted and merged after review, I will submit a documentation PR for the NexT website.

PR Type

• Bugfix.
• Feature.
• Improvement.
• Code style update (e.g. formatting, linting).
• Refactoring (no changes to functionality and APIs).
• Documentation.
• Translation.
• Other... Please describe:

What is the current behavior?

None.

What is the new behavior?

Background

I understand that enabling the figcaption: true option of hexo-renderer-marked plugin allows displaying image captions using the ![]() Markdown syntax, but it offers limited customization control.

Enable figcaption: true option in hexo _config.yml:

marked:
  figcaption: true

The new behavior of this PR

This tag feature picture-caption provides a new method for inserting the image and image caption, supporting additional configuration parameters for controlling image corner radius, image dimensions, as well as the position and alignment direction of the caption text, etc.

How to use?

In NexT _config.yml (Here you can configure default parameters for the Picture Caption tag feature.):

# Picture Caption tag
picture_caption:
  picture_border_radius:
    enable: false
    radius_size: 5px
  # Picture gap size between pictures. No strict validation for units; the `px` unit is also acceptable.
  picture_gap: 0.5em
  # Available caption position: top | bottom
  caption_position: bottom
  # Available caption alignment: left | center | right
  caption_alignment: center
  # Caption margin size between picture and caption. No strict validation for units; the `px` unit is also acceptable.
  caption_margin: 0.5em
  caption_font_size: 0.875em

Usage syntax in markdown file:

{% picturecaption pictureUrl, captionText %}
{% picturecaption pictureUrl, pictureWidth, pictureHeight, captionText, captionUrl, captionIcon, captionPosition, captionAlignment %}

Examples

The simplest usage syntax

In this case, other default parameters will use the default parameter values from NexT's _config.yml.

The complete usage syntax

[welcome]

Thanks so much for opening your first PR here!

[CLAassistant]

All committers have signed the CLA.

[github-actions]

This pull request contains changes to the configuration file. Please make sure the documentation in NexT website is changed or added.
Please edit relevant source files here: https://github.com/next-theme/theme-next-docs/tree/master/source/docs and create a pull request with the changes here: https://github.com/next-theme/theme-next-docs/pulls