版本
测试中
仅供预览 | Changelog
音乐播放器
这是一个久违的“新”功能!它的排期比较靠后,因为至少要先等到 TypechoCore
完成基于原生 JS 的重构才能考虑向下推进。
得益于 Howler
支撑的“所谓的”Cisum 播放器 ——现在点击侧边或上边导航栏的音乐播放器按钮,就会在顶部唤出一个方形的播放器控件。
此控件使用了 TypechoCore
在其 ui
包中新添加的两个静态 API:一个用于令任意元素可拖拽,另一个则用于令任意元素“可空闲”。当我们将鼠标放置在播放小控件右侧的 音乐封面图 上时, cursor
就会暗示其元素当前可拖拽...那么按住鼠标,然后将这个播放器从上面“无情地拉下来”吧!然后,再次得益于可拖拽 API 的磁吸选项,如果那播放器靠得太近,它就会被重新吸附回顶部,是不是有点酷酷的!
吸附顶栏的、已激活的播放器会在点击其它位置时隐藏,而被拖拽下来的则不会;相反,它们会在鼠标离开一段时间之后变得小而透明。除此之外,新的播放器还提供了其它基本且同样酷酷的功能,包括一个经典的可视化频谱、可供 自由切换/回顶/定位至当前对象 的播放队列,以及 歌词/频谱/闲置状态锁 切换器。它们没有任何使用难度!
实际上音乐播放器是允许“内容联动”的,这也是大家喜闻乐见的功能,不过很遗憾由于我真的好累,所以这个特性写不完只能隐藏,直到下个版本才可用。
图库
图库及其相关功能的 solution,是早在数个大型版本之前就开始的提案:
- 要么引入一个专门的图库体系,主要是后端作业,包括完整的分类、内容类型等;
- 要么基于现有的文章系统,以追求更少的学习成本和更加成熟的解决方案。
最后我选择了提案 B,而目前一切运行良好,所以也暂时证明它是正确的。在 milestone @1.121.30
中,富文本编辑器引入了一个全新的插件: Gallery
。此插件将允许编辑者快速且直接、低代码地向当前位置插入一个图库小部件,其中包含若干更小的图片 Widget 。
双击图库 Widget 就能以列表形式管理图片,而双击图片 Widget 则可以直接编辑目标。暂时支持的图库类型有:
模式 | 描述 |
---|---|
经典 | 原始极简、舒适且经典的相册。所见即所得,所有图片的尺寸统一为相册高度。 |
Carousel | 带有左右控件、允许实现轮播的相册。这种模式下,相册高度是指整个控件的最大高度。 |
Carousel [经典缩略图] | 使用旧版、较为方正缩略图样式的轮播相册。 |
Carousel [自动播放] | 此模式下的缩略图会尝试完成自动播放。鼠标离开一段时间后,就会自动载入下一张。 |
这些模式都可以在此网站的相册中浏览到。
此特性目前已经处于 STAGE_3 ,也就是只剩下了一些功能完善和代码优化的任务。另外,富文本编辑器也允许以链接形式插入一个隐藏图片了。
过渡动效
总算可以摆脱冗长繁琐、一调需要调试半天的、基于土著 animation
的页面切换动画实现了。
如你所见,现在通过向 Seamless(马上就会在下面提到)集成简单的 document.startViewTransition
,便可搭配一众 CSS 伪选择器实现“真正的动画”。
页面之间的过渡切换,从此会无限地接近“终极丝滑”。这真不是我吹,试试就知道了。后台还支持三种动画 下进下出、淡入淡出、缩放进出 的切换。
顶部导航栏
如果你觉得左侧导航栏过于抽象,那么可以在后台将它切换成顶部导航栏。这里我就不展示了(主要也没法展示)。
值得一提的是顶部导航栏模式下,其右侧会显示一个指示当前页面标题的水印元素,滚动到顶部还会变成站点标题。嗯。我觉得还蛮好玩的。
内核重构与 Seamless
众所周知公民使用一个小轮子,它叫做 TypechoCore
。此轮一开始是基于 jQuery
,但我随即、很快就发现它必须使用 Vanilla JS。所幸重构的时候,我已经复习完了绝大部分 JavaScript 八股,所以整个任务进行下来也算轻松。现在,所有前端已经全部基于原生 JavaScript,且它们是 ES6 的。
至于单页依赖也即所谓 PJAX,一开始是把 MoOx/Pjax 直接拿来用了,但后来在考虑切换动画的时候引入了 TransitionAPI ,所以不得已而亲自修改了 Pjax。它现在是专用于公民的基本库,改了个名字叫 Seamless——因为我觉得 Pjax 这个名字丑丑的。关于这个库先预定一篇文档,当然也没什么讲的打算和 Core 一起水。
来到编码惯例方面,并没有太多的变化。略微调整了几个函数的位置,同时添加了一些实用静态方法,导致 typechoCore.js
的体积来到了惊人的 21.4 KB,而它形影不离的好伙伴 Seamless
则有足足 12.2KB。此外还有 lazysizes
@7.9 KB...核心依赖加起来 41.5 的话,也算差强人意吧,毕竟我就这么菜,该摆烂摆烂。
至于公民作为独立主题的核心代码...和之前也没差。除了要适配 typechoCore
向 Vanilla 的过渡之外,最显著的变动就是音乐播放器。它的原始文件足足有 1200 行代码,甚至还需要附带一个专门用来解析歌词的第三方库,9KB,以及我们的老朋友 Howler
,它有 26.9KB...总之公民的基本内核压缩后大小是 67KB。
这些暂时还尚能让人接受,不是吗?
其它一些杂项
包括无数个问题修复。另外稍稍能激动人心的——当属富文本编辑器支持的一些新样式:
这是一个比较绿的提示,它允许你写出绿绿的文本,当然只是背景绿而已。通过在前面结合一个图标,效果貌似会更好。
像上面这个提示,其背景还有浅红色和浅黄色可以选择。除此之外呢,形如 SPACE 、 CTRL + S 这样的拟态按键也能出现在正文中了。
最后是按钮功能。虽然在这里渲染一个按钮会让人感到突兀,但原谅我不得不 这么做 。
很久之前写的 TODO
我又把这个主题接回来了。之前的变更已经忘得差不多了,所以都清除掉然后重新写,现在只做备忘录用。
- 分类视图现在来看有些单调,实际应该允许在列表和网格视图之间进行切换;
- 添加一些实用特殊功能如随机文章、最近评论等。之前莫名其妙不知道把这些搞到哪里去了;
- 允许为评论设置禁用词。最近有个傻逼老外把暗网广告持续投放在我网站,不知道老外脑子是真不好使还是假不好使,没发觉我开了评论审核么...
- 于分类列表隐藏空分类(已实现但方法很拙劣,必须改进);
- 没能实现对编辑器的配置自由,应当考虑改进,此外尽快引入 MD 与数学公式支持;
- 考虑更加令人满意的钩子结构。
- 考虑引入站内页面引用体系,参考 MediaWiki,这样还可以添加一个花里胡哨的鼠标悬停页面小预览功能;
- 考虑引入站外 URL 展开,不过只是一个
大概率夭折无限延后考虑的小小想法。 - 前端在文章预载的这个时间点,应已经能开始支持一些健壮的 hook。今天想到了检测坏链,不过由于这个过程繁琐些所以不异步实现已经不现实了。
至于发布版本的提供,由于对 Typecho 内部有改动,很难找到土著用户和我这种激进用户之间的平衡,所以还要等待相当一段时间。