惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
月光博客
月光博客
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
M
MIT News - Artificial intelligence
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
The Cloudflare Blog
Blog — PlanetScale
Blog — PlanetScale
F
Full Disclosure
G
Google Developers Blog
罗磊的独立博客
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
J
Java Code Geeks
A
About on SuperTechFans
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
GbyAI
GbyAI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
The Register - Security
The Register - Security
U
Unit 42
D
Docker
Martin Fowler
Martin Fowler
L
LINUX DO - 热门话题
NISL@THU
NISL@THU
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
博客园_首页
Google DeepMind News
Google DeepMind News

Fooleap's Blog

渴望理想 | Fooleap's Blog 19 年底一些事 | Fooleap's Blog 藉秋风,跑起来 | Fooleap's Blog 一个人去跑步 | Fooleap's Blog 8 月的跑量仿佛是那暑假的作业 | Fooleap's Blog 三伏天跑步那么难受,为何还要跑? | Fooleap's Blog 解决小程序开发“当前系统代理不是安全代理” | Fooleap's Blog 忘却配速的夏日跑步 | Fooleap's Blog 六月天时“带水”跑步更爽 | Fooleap's Blog 出来混迟早要还的 | Fooleap's Blog 跑步不能当饭吃 | Fooleap's Blog 将京东移动端详情页链接转为 PC 端 | Fooleap's Blog 不是热就是雨 | Fooleap's Blog 这半月,我跑了 11 个 520 | Fooleap's Blog 跑完流汗一时爽,一直流汗一直爽 | Fooleap's Blog 初夏夜跑 | Fooleap's Blog Electron 中打开 QQ 临时会话 | Fooleap's Blog 春节期间的培隆角 | Fooleap's Blog 从春天跑到夏天 | Fooleap's Blog 晨雾中奔跑 | Fooleap's Blog 漫步春雨中 | Fooleap's Blog 跑在木棉花下 | Fooleap's Blog 我在春节依然坚持跑步 | Fooleap's Blog 伴随着日出跑步 | Fooleap's Blog 没有最好,只有更好 | Fooleap's Blog 电子气温计 | Fooleap's Blog 渡亭小学的金凤花 | Fooleap's Blog 随心而跑 | Fooleap's Blog 2018 跑步小结 | Fooleap's Blog 在 gVim 中使用“非等宽字体” | Fooleap's Blog 动车进汕,喜大普奔 | Fooleap's Blog 雨战汕马,漫步鮀城 | Fooleap's Blog 准备出发汕马 | Fooleap's Blog 环苏溪跑个半马 | Fooleap's Blog 不义之财 | Fooleap's Blog 跑去培隆看日落 | Fooleap's Blog 雨后跑土路 | Fooleap's Blog 秋意渐浓 | Fooleap's Blog 在夕阳下奔跑 | Fooleap's Blog 准备参加 2018 汕马 | Fooleap's Blog 不可立见的 spoiler 标签 | Fooleap's Blog TomTom Spark 表带 | Fooleap's Blog Disqus 支持新浪微博图床 | Fooleap's Blog 暂存 Disqus 匿名评论者邮箱地址 | Fooleap's Blog 组一台迷你主机 DeskMini 310 | Fooleap's Blog 我的个人信息卖给了谁? | Fooleap's Blog 我发了违法短信? | Fooleap's Blog 使用 Python 合并地图瓦片 | Fooleap's Blog 使用 Python 合并瓦片图 | Fooleap's Blog 拆电热水壶 | Fooleap's Blog 使用树莓派做监控显示 | Fooleap's Blog 南方的冷 | Fooleap's Blog 蓝牙耳机 Avantree Jogger Plus | Fooleap's Blog 新厝布网 | Fooleap's Blog 报装移动宽带 | Fooleap's Blog 双十一战绩 | Fooleap's Blog 郁闷的心情 | Fooleap's Blog 像 Disqus 一样获取链接颜色 | Fooleap's Blog Disqus 的 URL 编码问题 | Fooleap's Blog 选择框的全选联动 | Fooleap's Blog 弹出层中的视频全屏问题 | Fooleap's Blog 2016 年台风海马 | Fooleap's Blog 纯 CSS 实现导航图标动画 | Fooleap's Blog 湾头晨跑路线推荐:南湾小学跑道 | Fooleap's Blog Jekyll 显示每一年的文章数 | Fooleap's Blog 湾头晨跑路线推荐:南湾堤顶 | Fooleap's Blog Disqus 的 @ 提及功能 | Fooleap's Blog 近日渡亭堤顶的夕阳 | Fooleap's Blog 使用 Disqus API 上传图片 | Fooleap's Blog Disqus API 评论嵌套问题 | Fooleap's Blog Disqus API 的权限问题 | Fooleap's Blog 湾头晨跑路线推荐:环三湾 | Fooleap's Blog 如何下载 Apple Emoji 的 PNG 图片 公众号文章二维码 | Fooleap's Blog Disqus 的评论预审核 | Fooleap's Blog 湾头最好的跑道 | Fooleap's Blog 结合七牛和高德地图 API 显示照片位置 | Fooleap's Blog Zip 压缩排除特定目录 | Fooleap's Blog 流水涸摸蚬热 | Fooleap's Blog 2017 跨年跑 | Fooleap's Blog Jekyll 的中文字数统计 | Fooleap's Blog 为 Jekyll 文章页添加相关文章 | Fooleap's Blog 为 Jekyll 添加一个标签页面 | Fooleap's Blog 干了这瓶蛇草水 | Fooleap's Blog 在 macOS 上使用 NTFS 差点丢数据 Disqus Moderator Badge Text 已支持中文 为 Jekyll 加上简单搜索功能 | Fooleap's Blog 解决 Jemoji 的出错 | Fooleap's Blog 检测网络是否能够访问 Disqus | Fooleap's Blog 解决 This socket is closed 问题 更好的 Markdown 插图方式 | Fooleap's Blog 转换 Nike+ 的坐标数据 | Fooleap's Blog 高德地图 API 显示跑步路线 | Fooleap's Blog 善用 Google 搜索工具 | Fooleap's Blog 利用 Nike+ API 获取跑步路线数据 | Fooleap's Blog 七牛 API 生成页面 URL 二维码 旧年 12 月跑步笔记 | Fooleap's Blog 科学使用 Disqus | Fooleap's Blog 培隆角的日出 | Fooleap's Blog 11 月跑步笔记 | Fooleap's Blog
为 Jekyll 添加一个简单的 API | Fooleap's Blog
fooleap · 2017-05-14 · via Fooleap's Blog

Jekyll 是静态博客生成器,只能生成静态页面,原则上是没法创建一个动态的 API。但灵活利用 Liquid 的语法,还是可以创建一个简单的静态的 API,也就是说传参无效的,直接返回 JSON 数据的 API。

Jekyll 可以生成静态的 HTML 页面,也可以生成其他文本格式的文件。只要稍微一改,便可生成一个包含 JSON 数据的文件,这也就是 API。

下面以一个简单的例子来看看是怎么实现的。

确定需求

Jekyll 有分页功能,这是由一个官方的插件 jekyll-paginate 提供的[1]。这个插件会给文章列表分页,并生成页数相应的页面文件。

我们想要实现不刷新的分页,可以直接在一个页面输出所有文章列表,经 CSS 实现显隐,并通过 JS 来进行 DOM 操作即可。这样是不完美的,如果文章够多,列表项足够复杂,页面会很大,若带上图,那就更加酸爽了。

这时候,若有个简单的 API 就好了,这个 API 一般是这样的:传入页数输出相应的文章数据。前面已经说过,Jekyll 实现的 API 没法实现传参,那么这个 API,只能是返回所有文章数据。

实现需求

那么,应该如何创建这样一个 API 呢?这才是关键,我们很懒,遇到问题第一时间不是自己苦想怎么实现,而是进行 Google 搜索,这不,随便一搜有不少答案[2][3]

以下代码将创建一个文件,包含所有文章的数组,每篇文章有标题、链接、分类、时间、标签等属性。

---
layout: null
permalink: /post.json
---
[{% for post in site.posts %}
    {
        "title": {{ post.title | jsonify }},
        "url": {{ post.url | jsonify }},
        "category": {{ post.category | jsonify }},
        "date": {{ post.date | jsonify }},
        "tags": {{ post.tags | jsonify }}
    }{% unless forloop.last %},{% endunless %}
{% endfor %}]

其中所用到的 Liquid 语法主要有标签 forunless 以及过滤器 jsonify

参考资料

本文历史

  • 2017 年 05 月 14 日 完成初稿

最近更新

猜你喜欢