Stellar 提高时间线适配范围

前言

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

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

目前成果

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

聚合的时间线

加入主题

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

路径以stellar主题为根

文件路径: _config.yml 一处

_config.yml

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

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

timeline.ejs

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

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

timeline.js

# 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(' ')

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

食用方法

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

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

示例

以下是一个基本使用格式

简单使用

示例代码

数据代码

xxx.md

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 %}

timetest1.json

{
  "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单独拿出来, 它就是一个数组, 里面有每个配置对象。

xxx.md

1
2
3

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

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

timeline 不能分行, 必须一行。
config整体用双引号包裹, 里面的内容用单引号包裹, 都是英文的!
暂时就这些

指令

指令其实就是调用什么方法去处理指令附属的内容
指令之间是协同的 (比如使用1、2搭配拿到数据,再使用其余指令加以处理补充)
default比较特殊, 一般用了default就不需要使用其余的
主指令是1、2, 常用指令是3、4

filter (可省略, 默认指令)

用途: 匹配数据的方法之一, 匹配的内容为单个
参数: 填写对应的路径, 路径指向的地方是字符串、数值之类
提示: 字符串形式的json或数值也能匹配, 请大胆写路径

map

用途: 匹配数据的方法之一, 匹配的内容为复数
参数: 填写对应的路径, 路径指向的地方是数组之类的集合

default (编码)

用途: 放弃匹配, 使用默认值
参数: 填写组件显示的默认值
提示: 常用来补充作者名、作者头像、来源、来源icon等

base (编码)

用途: 给匹配到的内容追加前缀
参数: 填写需要追加的前缀
提示: 常用来根据ID拼凑源链接、给图片拼凑基础URL。后缀的话…没写!

markdown

用途: 简易的markdown转义
参数: 填写 true
提示: Memos的内容就是markdown

exclude (编码)

用途: 若包含内容关键字, 则放弃这条数据
参数: 填写需要匹配的跳过循环的内容
提示: 比如我网易云动态有分享黑胶礼品卡, 我就填写的黑胶

regex (编码)

用途: 正则替换
参数: 第一个参数为正则规则, 第二个参数为替换内容(不写就是替换为空字符串)
提示: memos去标签的实现 ‘…|regex:#[\d\u4e00-\u9fa5a-zA-Z]+[\s\n]‘ (方便展示, 记得编码)
注意事项: 我忘了要注意什么, 但开发时候依稀记得regex第一个正则参数需要注意点什么…私密马赛

组件

组件其实就是用对应的已经准备好的div和样式去装载内容

root (很重要, 要写在最前面)
1. 组件内容: 接口数据真正的主体
2. 参数类型: 基础路径
3. 提示: 这不是组件, 是一个特殊的配置。指向数据真正的主体(一般指向的是array), 不然其它路径很长且重复
author
1. 组件内容: 时间节点上显示的作者名称
2. 参数类型: 字符串
avatar
1. 组件内容: 时间节点上显示的作者头像
2. 参数类型: 链接
avatar
1. 组件内容: 时间节点上显示的时间
2. 参数类型: 时间戳
3. 提示: 没写多少解析,尽量是标准的时间戳或其字符串, 11位13位均可
tags
1. 组件内容: 内容主体右上角的小标签
2. 参数类型: 字符串或数组
3. 提示: 类似话题之类的
title
1. 组件内容: 内容主体上方居中的标题
2. 参数类型: 字符串或数组
3. 提示: 一般用不上啦
msg
1. 组件内容: 内容主体内容
2. 参数类型: 字符串
3. 提示: 类似\n之类的已经解析了, 更多解析记得开启markdown
quote
1. 组件内容: 内容主体msg下面的引用
2. 参数类型: 字符串
3. 提示: 类似于回复的原内容, 我是因为微信读书笔记有引用
pics
1. 组件内容: 内容主体msg下面的图片
2. 参数类型: 链接 (字符串或数组)
3. 提示: 即使是数组也是显示数组的第一张图片, 不然很丑的! 预留了多张, 请设计一个方案给我.
netease
1. 组件内容: 内容主体msg下面的音乐
2. 参数类型: 网易云音乐歌曲ID
3. 提示: QQ音乐请先打钱, 私密马赛QAQ
link
1. 组件内容: 左下角的小火箭, 点击跳转动态源链接
2. 参数类型: 链接
3. 提示: 一般动态之类的只有ID, 记得加base补充完整
origin
1. 组件内容: 右下角的文字
2. 参数类型: 字符串
3. 提示: 我一般用来写 ‘– Form XXX’, 已经赋予了斜体
icon
1. 组件内容: 右下角的图标
2. 参数类型: 链接
3. 提示: 我一般用来放来源的icon, 至于你呢, 你喜欢便好

编码

因为涉及到正则、冒号、竖杠等特殊字符, 有编码标注的地方需使用下面的编码, 在浏览器控制台即可使用

编码
window.btoa(window.encodeURIComponent(String.raw'输入编码内容')); (编码里面不是单引号, 是常用来包裹代码的符号)
解码
window.decodeURIComponent(window.atob('输入解码内容'))

指令教程

匹配单个

匹配目标集合

没了

不知道写什么, 有问题再问吧!

进阶

已经写成屎山了, 我还在乎多来几个for循环 ?
这里虽然是进阶, 但毫无难度, 只是可能有bug, 排了bug记得告诉我!

timelines一定要紧接在root组件后面, root没有就写在最前面。

sort
1. 用途: 全节点排序
2. 参数: timestamp 顺序 | pmatsemit 逆序 (目前只支持时间排序)
identifier
1. 用途: 集合标识符
2. 参数: 随便一个单词
3. 提示: 需要集合在一起的timeline的标识符是一样的
num
1. 用途: 这个标识符集合的数量
2. 参数: 数值
3. 提示: 考虑到api请求耗时不一样, 还是加一个num为妥, 不满则等待
  { 'type': 'timelines', 'identifier': 'life', 'num': '3', 'sort': 'timestamp' }

代码参考

看着json数据和对应config代码, 相信你就能明白一切, 并且大喊一声: 狗屁设计!!!

网易接口: https://netease.thatapi.cn/user/event?uid=134968139&limit=10
Memos接口: https://memos.thatcoder.cn/api/v1/memos?filter=creator%3D%3D%27users%2F1%27&pageSize=99
微信读书接口: https://blog.thatcoder.cn/custom/test/ThatRead.json (需要提取微信读书数据可留言)

代码参考渲染结果https://blog.thatcoder.cn/邮箱模板集/#组装时间线测试

网易云memos联合测试

timetmpl里面有多个会自动组合并且自动排序, 如果能识别time的话

参考代码

{% timetmpl %}
<!-- node netease -->
`
{ "api": "https://netease.thatapi.cn/user/event?uid=134968139&limit=30" }

`
<!-- node memos -->

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

`
{% endtimetmpl %}

memos单个测试

参考代码

{% timetmpl %}
<!-- node memos -->
`
{ "api": "https://memos.thatcoder.cn/api/v1/memos?filter=creator%3D%3D%27users%2F1%27&pageSize=10" }
`
{% endtimetmpl %}

或者

{% timetmpl %}
<!-- node 这里不写模板名称就得写type里 -->
`
{ "type":"memos", "api": "https://memos.thatcoder.cn/api/v1/memos?filter=creator%3D%3D%27users%2F1%27&pageSize=10" }
`
{% endtimetmpl %}

侧边栏使用

效果是主页侧边栏的 近期动态

在 widgets.yml 写好一个组件, 就能像其它侧边栏一样引用即可

widgets.yml

life_more:
  layout: timetmpl
  title: 近期动态
  config: |
    <!-- node netease -->
    `
    { "api": "https://netease.thatapi.cn/user/event?uid=134968139&limit=10" }
    `