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

前言

Hexo 是一个非常流行的静态博客框架, 能够帮助我们快速搭建起静态博客。而七牛云是一个高性能、低成本的云存储服务, 提供了全球 CDN 加速、海量数据存储、智能图片处理等丰富的功能。在此基础上，我们可以使用 hexo-tag-qiniu 这个 npm 包帮助我们在 Hexo 博客中快速集成七牛云存储服务。

安装 hexo-tag-qiniu

npm install hexo-tag-qiniu

配置

我们可以在 Hexo 的 _config.yml 文件中添加如下信息来配置七牛云存储服务：

# _config.yml
qiniu:
  accessKey: <YOUR_ACCESS_KEY>
  secretKey: <YOUR_SECRET_KEY>
  bucket: <YOUR_BUCKET>
  domain: <YOUR_DOMAIN>

我们需要填写具有权限的 Access Key 和 Secret Key。然后设置 bucket，就是将我们的博客上传到七牛云存储的容器。最后是配置 domain，我们可以通过七牛云的外链域名来访问我们图片。

在博客中使用

在博客中，我们可以使用 qiniuImg 或 qiniuVideo 标签来使用七牛云存储服务。

qiniuImg 标签

使用 qiniuImg 标签来上传图片，这可以帮助我们更加方便地管理我们的博客图片。语法如下：

{% qiniuImg <filename> [class:classname] [alt:alt_text] %}

filename: 必须指定，上传到七牛云的图片的名称。
class:classname: 可选参数，为图片指定一个 class 样式。
alt:alt_text: 可选参数，为图片设置一个替代文本。

示例代码：

{% qiniuImg hexo-logo.png alt:hexo-logo %}

这个标签将会在我们的博客中显示一张名为 hexo-logo.png 的图片，并将它的 alt 值设置为 hexo-logo。

qiniuVideo 标签

使用 qiniuVideo 标签来上传视频，语法如下：

{% qiniuVideo <filename> %}

filename: 必须指定，上传到七牛云的视频的名称。

示例代码：

{% qiniuVideo hexo.ogv %}

这个标签将会在我们的博客中嵌入一个名为 hexo.ogv 的视频。

结论

现在，我们已经学会了如何使用 hexo-tag-qiniu 这个 npm 包，帮助我们更好地管理我们的博客图片和视频。同时，这也能够让我们更快地构建和发布我们的 Hexo 博客，让我们的博客拥有更好的用户体验。

参考文献

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