在开发前端网站时，我们常常需要在网页中加入照片。而 Flickr 是著名的照片存储和分享网站，自然成为了我们许多人的首选。为了方便使用 Flickr 的照片，有开发者开发了方便的 npm 包 hexo-tag-flickr-extended。本文就是介绍这个 npm 包的使用教程。
1. 安装 hexo-tag-flickr-extended
首先，需要安装 hexo-tag-flickr-extended 这个 npm 包。可以通过以下命令进行安装：
npm install --save hexo-tag-flickr-extended
2. 获取 Flickr API Key 和 Secret
hexo-tag-flickr-extended 要求必须提供 Flickr API Key 和 Secret。要获取这两个信息，需要在 Flickr 上注册开发者账号，然后创建一个新的应用程序。具体的步骤可以参考 Flickr 的官方文档。
获取到 API Key 和 Secret 后，可以在 hexo 的配置文件中加入如下配置：
flickr: api_key: your_api_key secret: your_secret
3. 使用 hexo-tag-flickr-extended
hexo-tag-flickr-extended 提供了一个名为 flickr 的标签，可以在 hexo 的 Markdown 文件中使用。它的语法格式如下：
{% flickr photo_id %}其中 photo_id 是 Flickr 照片的 ID。对于在 Flickr 上的照片，可以在 URL 中找到其 ID。
例如，对于以下照片的 URL：
https://www.flickr.com/photos/nasapictureoftheday/9475641072/
其 ID 为 "9475641072"，可以在 hexo 的 Markdown 文件中如下使用：
{% flickr 9475641072 %}在生成 HTML 文件时，hexo-tag-flickr-extended 会自动调用 Flickr API 获取照片的信息，并将其转换为嵌入式的 HTML 代码。因此，在网页中就可以直接显示 Flickr 的照片了。
不仅如此，hexo-tag-flickr-extended 还提供了许多其他的功能，例如可以设置照片大小、位置、边框、标题等等。具体的设置方法可以参考 hexo-tag-flickr-extended 的官方文档。
4. 示例代码
下面是一个完整的示例，展示了如何在 hexo 的 Markdown 文件中使用 hexo-tag-flickr-extended。
在 hexo 的配置文件中加入如下配置：
flickr: api_key: your_api_key secret: your_secret
在 Markdown 文件中加入如下代码：
{% flickr 9475641072 align=left size=s title="NASA's Hubble Sees Mars-Bound Comet Sprout Multiple Jets" %}其中 align=left 表示设置照片对齐方式为左对齐，size=s 表示设置照片大小为 small，title 表示设置照片的标题。控制台输出就会显示以下内容：
<figure class="flickr-figure alignleft">
<img src="https://farm4.staticflickr.com/5780/9475641072_d5f561c67a_m.jpg" alt="NASA's Hubble Sees Mars-Bound Comet Sprout Multiple Jets">
<figcaption>
<a href="https://www.flickr.com/photos/nasapictureoftheday/9475641072/" target="_blank">View on Flickr</a>
</figcaption>
</figure>5. 总结
本文介绍了 npm 包 hexo-tag-flickr-extended 的使用教程，包括安装、获取 Flickr API Key 和 Secret、使用以及示例代码。相信读完本文后，你已经可以方便地在 hexo 中使用 Flickr 的照片了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4581e8991b448ebc9a