发布于 2026-01-06 0 阅读
0

GitHub Pages上的博客API

GitHub Pages上的博客API

我们将学习如何使用 Jekyll 构建静态网站的 API,以便您可以通过任何 Web/移动应用程序使用静态数据。

我们还将了解如何使用 API 获取 JSON 数据。

步骤

以 JSON 格式输出数据。

如果您只需要以 JSON 格式输出一些数据,可以使用过滤器轻松实现jsonify

网站前端的所有变量都可以通过站点变量访问,因此我们使用liquid 过滤器site.whatever将 YAML 数组转换为 JSON jsonify

现在我们来看一个更实际的例子。如果你想把所有帖子的 JSON 输出保存到一个 JSON 文件中,该怎么办?用 Jekyll 也很容易做到。只需两步即可:

  • 首先创建一个名为 `output.txt` 的输出文件output.json

  • 接下来打开output.json文件并添加以下代码:


---
  limit: 10
---

{% for post in site.posts limit: page.limit %}
    {
         "id": "{{ post.id }}",
         "date"     : "{{ post.date | date: "%B %d, %Y" }}",
         "title": {{ post.title | smartify | jsonify }},
         "content_html": {{ post.content | jsonify }},
         "url": "{{ site.url }}{{ post.url }}",

         "summary": {% if post.url contains "/blog/" %}{{ post.excerpt | smartify | jsonify }}{% else %}{{ post.description | smartify | jsonify }}{% endif %},

         "date_published": "{{ post.date }}",
         {% if post.categories %} "categories"  : [
                {% for category in post.categories %} "{{ category }}"
                {% if forloop.last %}{% else %},{% endif %}
                {% endfor %}
                ],
         {% endif %}
         {% if post.categories == nil %} "categories"  : [],  {% endif %}

         {% if post.tags %} "tags"  : [
                {% for tag in post.tags %} "{{ tag }}"
                {% if forloop.last %}{% else %},{% endif %}
                {% endfor %}
                ]
         {% endif %}
         {% if post.tags == nil %} "tags"  : []  {% endif %}

    }{% unless forloop.last == true %},{% endunless %}
{% endfor %}


我们已遍历所有帖子site.posts,并创建了一个 JSON 对象,每个帖子数据之间用逗号分隔。网站构建完成后,Jekyll 将负责解析 YAML 和 Liquid 数据,并将output.json帖子数据以 JSON 格式输出。

你可以用 Jekyll 博客测试一下,运行或构建它,然后查看文件_site夹里的output.json文章数据。或者直接访问127.0.0.1:4000/output.json查看结果。

如果你使用 GitHub Pages,请访问你的博客链接/output.json并查看结果。

front matter 中的metalimit控制要输出的帖子数量JSON

使用 API 的输出

很简单!将文件放在output.json一个名为 `.htm` 的新文件夹下api,然后重命名它index.json

将此 API 转换为 JSON 源

我阅读了有关JSON 源规范的文章,并被它的新颖性所吸引——与其说是 JSON 的易用性,不如说是使用 Atom XML 的难以克服的痛苦。

对于大多数开发者来说,JSON 比 XML 更容易读写。开发者可能对编​​写 XML 解析器感到头疼,但解码 JSON 通常只需要一行代码。

由于我的博客一直使用 Jekyll,所以编写代码需要使用 Liquid,并且不能使用任何插件。

此外,示例中我们已经准备好了 API,为什么不使用它呢?


---
layout: none
---
{
    ""version": "https://jsonfeed.org/version/1",
    "title": {{ site.name | smartify | jsonify }},
    {% if site.description %}"description": {{ site.description | smartify | jsonify }},{% endif %}
    "home_page_url": "{{ site.url }}/",
    "feed_url": "{{ site.url }}/api/index.json",
    "icon": "{{ site.url }}/assets/favicon/android-chrome-192x192.png",
    "favicon": "{{ site.url }}/favicon.ico",
    "author": {
        "name": "{{ site.author }}",
        "url": "https://alokprateek.in/",
        "avatar": "https://alokprateek.in/avatar3.jpg"
    },
    "expired": false,
    "items": [
           ]
}

items之前存在的内容会被保留index.json下来,去掉前面的内容,保持不变。

诸如 、 和 之类的字段icon取决于faviconauthor的具体实现,我不想通过使用 front-matter 变量来概括代码,而是直接粘贴了值。

其次,您需要阅读规范以获取有关哪些字段是可选字段和哪些字段是必填字段的完整信息。

差不多就是这样了!😊

最后一个例子是查看我的最终 JSON。您也可以通过 curl 命令访问此链接blog.alokprateek.in/api/


---
limit: 10
layout: none
---
{
    "version": "https://jsonfeed.org/version/1",
    "title": {{ site.name | smartify | jsonify }},
    {% if site.description %}"description": {{ site.description | smartify | jsonify }},{% endif %}
    "home_page_url": "{{ site.url }}/",
    "feed_url": "{{ site.url }}/api/index.json",
    "icon": "{{ site.url }}/assets/favicon/android-chrome-192x192.png",
    "favicon": "{{ site.url }}/favicon.ico",
    "author": {
        "name": "{{ site.author }}",
        "url": "https://alokprateek.in/",
        "avatar": "https://alokprateek.in/avatar3.jpg"
    },
    "expired": false,
    "items": [
{% for post in site.posts limit: page.limit %}
    {
      "title": "{{ post.title }}",
      "date"     : "{{ post.date | date: "%B %d, %Y" }}",
      "url": "{{ site.url }}{{ post.url }}",
      "summary": {{ post.excerpt | smartify | jsonify }},
      "content_html": {{ post.content | jsonify }},
      {% if post.categories %} "categories"  : [
        {% for category in post.categories %} "{{ category }}"
        {% if forloop.last %}{% else %},{% endif %}
        {% endfor %}
        ],
      {% endif %}
      {% if post.categories == nil %} "categories"  : [],  {% endif %}
      {% if post.tags %} "tags"  : [
        {% for tag in post.tags %} "{{ tag }}"
        {% if forloop.last %}{% else %},{% endif %}
        {% endfor %}
        ]
      {% endif %}
      {% if post.tags == nil %} "tags"  : []  {% endif %}

    }
    {% unless forloop.last %},{% endunless %}
{% endfor %}
    ]
}

下次再见!

干杯!🍻

文章来源:https://dev.to/thewhitewulfy/blog-api-on-github-pages-29ig