Stellar 提高时间线适配范围

前言

注意：迁移1.22.1后本文作废，已完成便于主题更新的方案，待写文档中

某天想把其它app的动态放进时间线, 但每个app接口都返回不同的json数据格式, 即使同一个app不同提取项目也是不同的json数据格式,
便不了了之。
直到前几天萌生一个想法: 通过传入有效路径匹配提取对应的json数据。但是这样代码太长就不推送了, 也需要的人自己加进去(
不影响主题升级)

目前成果

• 编写路径即可匹配数据
• 编写路径时赋予路径类型可生成对应类型组件
• 允许多个api聚合到一个时间线展示
• 有时间字段可按照时间排序
• 排除包含的内容、正则匹配替换内容

聚合的时间线

加入主题

经常使用git的coder直接看提交吧 [add] 添加timeline功能: api自适应
注意最后一个custom.js非终版, 以下方的为准

路径以stellar主题为根

1. 文件路径: _config.yml 一处

1
2
3
4

plugins:
  stellar:
    ......
+   custom: /js/plugins/custom.js

2. 文件路径: layout/_partial/widgets/timeline.ejs 15行一处

1
2

-      ['api', 'user', 'hide', 'limit'].forEach(key => {
+      ['api', 'user', 'hide', 'limit', 'config'].forEach(key => {

3. 文件路径: scripts/tags/lib/timeline.js 38,45行两处

1
2
3
4
5
6

# 38行
-      args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide')
+      args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide', 'config'])
# 45行
-      el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ')
+      el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'config']).join(' ')

4. 文件路径: source/js/plugins/custom.js 添加一整个JS文件
   custom.js-持续更新https://kedao.thatcoder.cn/#s/9kZW_6Eg

食用方法

作为一个timeline插件形式, 所以使用和正常的timeline一样, 只是多了一个config。

有点抽象, 我尽能力表述清楚

示例

以下是一个基本使用格式

1
2

{% timeline api:https://blog.thatcoder.cn/custom/test/timetest1.json type:custom config:"[{ 'type': 'root', 'src': 'data' }, { 'type': 'msg', 'src': 'content|markdown:true' }, { 'type': 'tags', 'src': 'map:talkTags' },{ 'type': 'timestamp', 'src': 'time时间戳' }]" %}
{% endtimeline %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "id": "timetest1",
  "data": [
    {
      "talkTags": ["测试", "BUG制造者"],
      "content": "这是timetest1的**第一个数据**, 时间为2023-08-11",
      "time时间戳": "1691740257"
    },
    {
      "talkTags": ["摆烂", "佛祖保佑", "永无BUG"],
      "content": "这是timetest1的第二个数据, 时间为2023-06-06",
      "time时间戳": "1686037857"
    },
    {
      "talkTags": ["再看一眼","就会爆炸"],
      "content": "这是timetest1的第三个数据, 时间为2023-07-06 \n再看一眼就会爆炸, 应该排除",
      "time时间戳": "1688629857"
    }
  ]
}

关于config

我们现在把config单独拿出来, 它就是一个数组, 里面有每个配置对象。

1
2
3

[
  {'type': '组件名', 'src':'指令:参数|指令:参数' }
]

组件名和指令细分在下文
现在需要注意的是以下几点:

• `

许可协议

本文为 钟意 撰写, 采用 CC BY-NC-SA 4.0 许可协议, 转载请注明出处。

分享文章