Stellar 时间线万能对接（重构）

Posted on 2026-03-03 17:40 笔名钟意阅读(0) 评论(0) 收藏举报

前言

重构说明

之前这篇文章实现了，但不太方便，趁着迁移最新版stellar主题，把之前的代码重构一下。

万能对接应该就这个形式了，未来stellar主题有新标签我会在这个代码上运用补充进来。

{% link /Stellar-Timeline-More/ Stellar-提高时间线适配范围 %}

示例说明

本文示例的配置文件与接口源如下，接口数据量大请配合json插件参考。

{% link /custom/json/timetmpl/netease.json 对接网易云动态的配置 %}

{% link https://netease.thatapi.cn/user/event?uid=134968139&limit=10 网易云动态接口数据 %}

参数说明

文章开头这里先预热一下，配置参数能大概写哪些。

现在请移步示例说明的对接网易云动态的配置JSON文件。

我想你大概能看出一些端倪。比如顶级的key应该是代表存在的组件，然后他们共通有 path 这个子key。

让我们再捋捋，path 是给父级的key组件指向要显示的数据在哪，其它子参数应该是指令，他们对父级的key组件显示做出相应的限制。

如果你能get到我们就开始吧！

数据参数

这里的参数作用到整个接口数据，遂名主参

Api-接口

必填

@param api {string} 接口链接

值为一个链接，用来请求json数据

{
  "api": "https://netease.thatapi.cn/user/event?uid=134968139&limit=10"
}

Root-根节点

非必填

@param root? {json} 配置指令

建议填写，指向接口数据真正的主体。(e.g. 网易云动态数据体在 events 这个列表参数里面)

若接口返回的值就是需求数据可不填。(e.g. 类似memos接口就不需要 root 参数)

{
  "root": {
    "path": "events[:9]"
  }
}

组件参数

组件参数根据显示需要，选填即可。

Author-作者

@param author? {json} 配置指令

时间线左侧的名字

{
  "author": {
    "path": "user.nickname",
    "once": true
  }
}

一般值都是一样的，给 once 获取一次即可，能提供代码数速度。

Avatar-头像

@param avatar? {json} 配置指令

时间线左侧的头像

{
  "avatar": {
    "path": "user.avatarUrl",
    "once": true
  }
  
}

一般值都是一样的，给 once 获取一次即可，能提供代码数速度。

Time-时间

@param time? {json} 配置指令

时间线左侧的时间

{
  "time": {
    "path": "showTime",
    "sort": 0
  }
}

支持 sort 指令

Title-标题？

{
  "title": "user.nickname"
}

一般用不上

Msg-内容

@param msg? {json} 配置指令

时间线主体的内容

{
  "msg": "json.msg"
}

Quote-引用？

{
  "quote": "json.msg",
  "markdown": true
}

Music-音乐？

@param music? {json} 配置指令

时间线主体内容下面的音乐控件

{
  "music": {
    "path": "json.song.id",
    "type": "netease"
  }
}

Tags-标签？

@param tags? {json} 配置指令

时间线主体右上角的话题标签位置

{
  "tags": {
    "path": "bottomActivityInfos[*].name",
    "exclude": ["黑胶"]
  }
}

Pics-图片？

@param pics? {json} 配置指令

时间线主体内容下面的音乐控件

{
  "pics": "pics[*].originUrl"
}

跳转详情？

{
  "link": {
    "path": "info.commentThread.resourceInfo.id",
    "base": "https://music.163.com/#/event?uid=134968139&"
  }
}

From-来源？

@param from? {json} 配置指令

时间线主体右下角的数据来源

{
  "from": {
    "default": "-- From 网易云音乐 "
  }
}

一般为默认值，给 default 就行。

Icon-图标

@param icon? {json} 配置指令

时间线主体右下角的数据来源的logo图标

{
  "icon": {
    "default": "https://blog.thatcoder.cn/custom/img/网易云音乐.svg"
  }
}

一般为默认值，给 default 就行。

配置指令

组件参数通用配置指令，当然有几个特殊的，比如 sort 这种，就只写在对应的组件参数下面了。

Path-路径

@param path {string} 数据路径

值为一个字符串路径，指向到需要的地方，然后获取指定的数据回馈给组件参数显示。

匹配JSON：
- 就像往常获取json对象一样直接写点就好
- "path": "user.avatarUrl"：获取user对象里面的avatarUrl值
匹配时有数组：
- 相比前作，写了一个数组选择器。而且即使你的选择值超过数组长度也会自动优化，亦可以选择单个。
- "events[0:9]" 区间为左闭右开。
- "path": "events[:9]" ：获取events这个数组的前九个数据
- "path": "events[2:10]" ：获取events这个数组的第3-10的数据
- "path": "events[]" || "path": "events[*]" || "path": "events[all]" ：获取events这个数组的全部数据
- "path": "pics[2:].originUrl" ：获取pics这个数组的第3开始的全部数据里面的originUrl参数
- "path": "pics[2].originUrl" ：只获取pics这个数组的第3项的数据的originUrl参数

如果组件参数的配置对象只有path，可以直接把path的值写上去，就不需要配置对象了。

比如 "pics": "pics[*].originUrl" 相当于 "pics": {"path": "pics[*].originUrl"}

Default-默认值

@param default {string} 默认值

值为一个字符串，全部显示为这个值，不需要获取，

填了这个值就可以不用其他的指令了

Once-一次

@param once {boolean} 获取一次

值为布尔，默认false，为true表示这个path的内容都一样。

如果path内容一样建议填写，提供解析效率，只需要循环一次这个path即可。

Exclude-排除

@param exclude {array[string]} 排除内容

值为字符串数组，排除包含的。

我网易云会分享黑胶会员，我需要排除这种动态就写

{
"tags": {
    "path": "bottomActivityInfos[*].name",
    "exclude": ["黑胶"]
}
}

Include-仅要

@param include {array[string]} 仅要内容

值为字符串数组，只要包含的。

当exclude和include同时使用，前者优先。

Replace-替换

@param replace {array[string]} 替换内容

值为字符串数组，第一项为不要的(支持正则表达式)，第二项为需要的。

用法如下，替换全部cnm为小可爱。

{
"msg": {
  "path": "json.msg",
  "replace": [/草泥马/g, "小可爱"]
}
}

如果当删除关键字的用法可以省略第二项即可

Prefix-前缀

@param prefix {string} 前缀

值为一个字符串，给结果拼接前缀。

比如给图片id拼接完整的链接？？？

Suffix-后缀

@param suffix {string} 后缀

值为一个字符串，给结果拼接后缀。

Markdown-解析

@param once {boolean} 获取一次

值为布尔，默认false，为true表示这个path的内容是md格式。

比如memos的内容就需要解析一下不是吗？

补充

数组优化

区间或星为迭代获取多个
单数字为获取一个
范围索引，比如 .Skills[1:3] .Skills[-1]. 解决需要某个数组里的数据而不是全部

样式选择

加上style选项

代办

点赞数
评论数
转发数
评论展示
简洁收纳
视频
附件
标签懒加载

举个栗子

{% timetmpl %}

{ "api": "https://netease.thatapi.cn/user/event?uid=134968139&limit=10" }

{ "api": "https://mem.sov.red/api/v1/memos?filter=creator%3D%3D%27users%2F1%27&pageSize=10" }

栗子代码

{% timetmpl %}
<!-- node netease -->
`
{ "api": "https://netease.thatapi.cn/user/event?uid=134968139&limit=10" }
`
<!-- node memos -->
`
{ "api": "https://mem.sov.red/api/v1/memos?filter=creator%3D%3D%27users%2F1%27&pageSize=10" }
`
{% endtimetmpl %}

刷新页面返回顶部

Joney Knight