choyy / timeline-sy Goto Github PK

View Code? Open in Web Editor NEW

19.0 2.0 2.0 4.8 MB

思源笔记时间线挂件

License: Mozilla Public License 2.0

CSS 86.40% HTML 2.75% JavaScript 10.85%

siyuan-widget timeline timelinejs siyuan-note

timeline-sy's Introduction

Timeline Beta

此项目是将 TimelineJS3 移植为思源笔记挂件。

反馈可在 Issues · choyy/Timeline-SY 或 [挂件] 时间线 - 链滴。

预览

使用说明

界面介绍

界面分为上、下两部分，上方为时间轴，时间轴上显示所创建的事件和时期；下方为幻灯片，点击时间轴上的事件或时期即可展示其具体内容。
时间线内容组成： 标题、事件、时期和纪元
- 标题是用来描述该时间线的主题，一个时间线仅有一个标题，不可删除。
- 事件是对应某一时间点的项目，在时间轴上占据某一时间点。
- 时期是对应某一时间段的项目，在时间轴上占据某一时间段。
- 纪元与时期类似，同样对应某一时间段，它是简化版的时期，仅由开始时间、结束时间和名称组成。与时期相比，纪元更加简洁，它直接显示在时间轴上，对于一段很长的时期使用纪元可能效果更好，比如使用“第二次世界大战”纪元：
时间线编辑操作： 新建、编辑和删除
- 新建：点击新建按钮可新建一个项目，其中开始日期和标题为必填项，结束日期、描述、分组、背景图片和思源块 id 为选填项。
  - 若结束日期留空，则表示该项目为一个事件，否则表示一个时期。
  - 标题会在时间轴中显示，在标题开头使用颜色标记可给标题指定颜色，有 6 种颜色标记可选：#r(红色)、#g(绿色)、#b(蓝色)、#y(黄色)、#o(橙色)、#p(紫色)
  - 描述为对该时间或时期的具体描述。
    
    标题与描述支持使用 markdown 语法插入网页链接
  - 分组用于对事件进行分类，给事件添加一个分组，同一分组的事件会在时间轴上显示在同一行
  - 背景图片为该事件或时期对应幻灯片的背景，背景图片须填入图片的 url ，也可为思源的资源文件，格式为 assets/xxx.jpg/png。
- 编辑：点击编辑按钮可编辑当前幻灯片所对应的事件或时期的内容。
- 删除：点击编辑按钮可编辑当前幻灯片所对应的事件或时期，注意当时间轴上仅有一个事件或时期时无法删除，因为时间轴上至少要有一个项目。
- 可在浏览器打开时间线进行编辑操作，在浏览器编辑后需在思源中刷新时间线才能看到浏览器编辑后的内容。
嵌入或链接到思源内容块
- 链接：描述支持粘贴思源块超链接,粘贴思源块超链接不影响输入其他内容，保存后点击链接即可跳转到对应块。
  
  同时，思源块超链接同样支持 markdown 链接语法，可通过[锚文本](思源块超链接)语法插入超链接。
- 嵌入：在思源块id填入 id 即可在幻灯片嵌入该内容块。
数据存储： 时间线数据存储在挂件块的自定义属性中，建议将数据做个备份以防不测。

感谢

NUKnightLab 的 TimelineJS3

感谢 leolee9086 提供的帮助以及贡献了“嵌入思源内容块"功能

感谢池鱼以及 Zuoqiu-Yingyi 提供的帮助

更新日志

20230421：v0.0.16，支持时、分、秒
20230421：v0.0.14，支持全屏，修复#17
20220906：v0.0.13，修复移动端无法显示的bug
20220819：v0.0.12，支持分组重命名
20220810：v0.0.11，新增分组、时间线设置、给时间轴上项目标题添加颜色
20220701：v0.0.10，新增“纪元”
20220618：v0.0.9，新增刷新时间线，在浏览器编辑后在思源中刷新才能看到
20220614：v0.0.8，支持鼠标滚轮切换幻灯片
20220530：v0.0.7，支持直接插入思源块超链接，支持markdown语法插入思源块超链接
20220527：v0.0.6，描述支持换行，删除时自动跳到下一个
20220525：v0.0.5，支持嵌入思源内容块
20220524：v0.0.4，支持链接到思源内容块，支持markdown语法链接

timeline-sy's People

Contributors

Stargazers

Watchers

Forkers

leolee9086 nonomal

timeline-sy's Issues

大佬有没有考虑单独整个不带时间线的PPT挂件

发现timeline-sy这个挂件和思源的内容结合很棒，觉得单独的PPT的运用场景可能比timeline的场景可能更多，期待有开发者来搞一搞~
没有要求和冒犯的意思哈~

建议：引入时区概念

对于历史事件来说也许并不重要，但是对于当前这个快节奏全球化的世界来说，时间线不仅仅对应的是时间概念，还有时间在不同时区转化的概念。
所以，建议加入时区的选择，作为可选项。

浏览器打开时报错

因为在获取思源主题时没有判定siyuan是否存在
init.js di 第15行
可以改为
if (window.top.siyuan&&window.top.siyuan.config.appearance.mode === 1)

bug, bug, bug

一个很有意思的思源挂件，不知怎么回事，我的时间线只能新增两个，再增加会覆盖旧的事件，而且添加后不能再编辑了，对markdown语法支持还需要改进。可能是因为SiYuan版本更新的比较快，挂件的作者太忙了，没时间跟进，挂件不兼容了。
希望作者抽时间优化亲测一下。

var id = ''
if(window.frameElement){
var id = window.frameElement.parentElement.parentElement.dataset.nodeId;
}
else{
const search = location.search
const obj = new URLSearchParams(search);
id = obj.get('blockid')
}

请求增加对分组进行修改的功能

正在尝试使用时间线的挂件，感觉很好用。因为是刚开始使用，所以容易用法不标准，产生问题

例如我正在尝试在看明朝那些事时，用挂件记录一下看到的关键时间节点，因为只看了一点点，暂且将一开始和朱元璋相关的内容放在一起，但对此分组的命名并没有想好，可能后面还会改，但后面随着这个分组的事件逐渐变多以后，如果一个个事件去修改分组的话就会很麻烦，所以希望增加分组修改功能

时间线如何使用，

已经正确安装了插件，如何在笔记中新建一条时间线

功能建议：增加搜索功能

时间线内容在思源中是无法搜索到的，不知有没有可能加入搜索功能？

能否实现竖栏实现时间线

目前时间线是只能横向设置，在笔记本等屏幕较小的电脑上显示范围偏小，能否对时间线的增加横向和竖向两种选择设置，偏好横向设置的使用横向时间线；需要竖向设置的，可以选择竖向时间线时，不仅时间线的显示范围更广，而且标题事件等内容也能一行显示，信息容量更大，这样不失增加了一种选择。

Changing languages

Hey, I've been trying to change every language entry code in the js folder to pt-br, but had no change from chinese in the widget whatsoever, neither do I know how to navigate to a "change language" option inside it. Is it just me? Could you point a specific way in the Readme for changing languages? Thank you very much the widget!