前言

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

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

目前成果

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

加入主题

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

路径以stellar主题为根

  1. 文件路径: _config.yml 一处
_config.yml
1
2
3
4
plugins:
stellar:
......
+ custom: /js/plugins/custom.js
  1. 文件路径: layout/_partial/widgets/timeline.ejs 15行一处
timeline.ejs
1
2
-      ['api', 'user', 'hide', 'limit'].forEach(key => {
+ ['api', 'user', 'hide', 'limit', 'config'].forEach(key => {
  1. 文件路径: scripts/tags/lib/timeline.js 38,45行两处
timeline.js
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(' ')
  1. 文件路径: source/js/plugins/custom.js 添加一整个JS文件

食用方法

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

xxx.md
1
2
3
[
{'type': '组件名', 'src':'指令:参数|指令:参数' }
]

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

  • `

本站由 钟意 使用 Stellar 1.28.1 主题创建。
又拍云 提供CDN加速/云存储服务
vercel 提供托管服务
湘ICP备2023019799号-1
总访问 次 | 本页访问