npm 包 hexo-additional-helper 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Hexo 是一款快速、简洁且高效的静态博客框架，它基于 Node.js 开发，拥有丰富的插件和主题库。Hexo 本身提供了一些常用的插件，但是有时候我们需要更多的功能来丰富我们的博客。这时候，npm 包 hexo-additional-helper 就派上用场了。

什么是 hexo-additional-helper?

hexo-additional-helper 是一个用于 Hexo 的 npm 包，它提供了一些额外的辅助方法和标签，可以帮助我们更好地管理博客内容。这些方法和标签包括但不限于：图片渐进加载、自定义缩略图、评论插件等。

安装 hexo-additional-helper 的方法非常简单，只需要在你的 Hexo 博客目录下运行以下命令即可：

npm install hexo-additional-helper --save

安装完成后，在 Hexo 的 _config.yml 文件中添加以下内容：

additional_helper:
  image_pro: true  ## 启用图片渐进加载
  lazyload: true   ## 启用图片懒加载
  toc: true        ## 启用目录生成

在 Hexo 博客中，我们通常会使用图片来丰富我们的内容。然而，在图片较大时，图片的加载可能会较慢，使得用户体验不佳。为了解决这个问题，我们可以使用 hexo-additional-helper 中提供的图片渐进加载方法。

使用方法如下：

{% progressiveImage src, [class] %}

其中，src 为图片的链接地址，class 为图片的 class 名称。

示例代码：

{% progressiveImage /images/img.jpg, img-class %}

在 Hexo 的主题中，常常需要对文章中的图片进行缩略图处理。hexo-additional-helper 提供了一个方便的方法，可以在文章中轻松地添加缩略图。

使用方法如下：

{% gistThumb gistId [, basename [, ext]] %}

其中，gistId 为 Gist 的 Id，basename 为图片的文件名（不包含扩展名），ext 为图片的扩展名。

示例代码：

{% gistThumb 12345678 %}

在博客中添加评论插件是非常重要的，可以让读者与博主进行更好的互动。hexo-additional-helper 中提供了多种评论插件的支持。

使用方法如下：

{% comment %}
支持的评论插件名称
{% endcomment %}

支持的评论插件有：

示例代码：

{% comment %}
Gitalk
{% endcomment %}

通过对 hexo-additional-helper 的介绍，我们可以看出，它是一个非常实用的 Hexo 插件。它提供了多种有用的方法和标签，可以帮助我们更好地管理博客内容。在实际使用中，我们可以根据需求选择使用需要的方法和标签，来丰富我们的博客内容，提高博客的质量和用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067358890c4f7277583dd2