在开发前端网站时，我们常常需要在网页中加入照片。而 Flickr 是著名的照片存储和分享网站，自然成为了我们许多人的首选。为了方便使用 Flickr 的照片，有开发者开发了方便的 npm 包 hexo-tag-flickr-extended。本文就是介绍这个 npm 包的使用教程。
1. 安装 hexo-tag-flickr-extended
首先，需要安装 hexo-tag-flickr-extended 这个 npm 包。可以通过以下命令进行安装：
--- ------- ------ ------------------------
2. 获取 Flickr API Key 和 Secret
hexo-tag-flickr-extended 要求必须提供 Flickr API Key 和 Secret。要获取这两个信息，需要在 Flickr 上注册开发者账号，然后创建一个新的应用程序。具体的步骤可以参考 Flickr 的官方文档。
获取到 API Key 和 Secret 后，可以在 hexo 的配置文件中加入如下配置：
------- -------- ------------ ------- -----------
3. 使用 hexo-tag-flickr-extended
hexo-tag-flickr-extended 提供了一个名为 flickr 的标签，可以在 hexo 的 Markdown 文件中使用。它的语法格式如下：
-- ------ -------- --
其中 photo_id 是 Flickr 照片的 ID。对于在 Flickr 上的照片，可以在 URL 中找到其 ID。
例如，对于以下照片的 URL：
-------------------------------------------------------------
其 ID 为 "9475641072"，可以在 hexo 的 Markdown 文件中如下使用：
-- ------ ---------- --
在生成 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 的配置文件中加入如下配置：
------- -------- ------------ ------- -----------
在 Markdown 文件中加入如下代码：
-- ------ ---------- ---------- ------ ------------- ------ ---- ---------- ----- ------ -------- ----- --
其中 align=left 表示设置照片对齐方式为左对齐，size=s 表示设置照片大小为 small，title 表示设置照片的标题。控制台输出就会显示以下内容：
------- -------------------- -----------
---- --------------------------------------------------------------------- ----------- ------ ---- ---------- ----- ------ -------- ------
------------
-- -------------------------------------------------------------------- -------------------- -- ----------
-------------
---------5. 总结
本文介绍了 npm 包 hexo-tag-flickr-extended 的使用教程，包括安装、获取 Flickr API Key 和 Secret、使用以及示例代码。相信读完本文后，你已经可以方便地在 hexo 中使用 Flickr 的照片了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c4581e8991b448ebc9a