版本

已完成或计划内的版本任务。

测试中 
仅供预览 | 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。

这些暂时还尚能让人接受,不是吗? 害羞

其它一些杂项

包括无数个问题修复。另外稍稍能激动人心的——当属富文本编辑器支持的一些新样式:

已完成(淡化颜色) 这是一个比较绿的提示,它允许你写出绿绿的文本,当然只是背景绿而已。通过在前面结合一个图标,效果貌似会更好。

像上面这个提示,其背景还有浅红色和浅黄色可以选择。除此之外呢,形如 SPACECTRL + S 这样的拟态按键也能出现在正文中了。

最后是按钮功能。虽然在这里渲染一个按钮会让人感到突兀,但原谅我不得不 这么做

很久之前写的 TODO

我又把这个主题接回来了。之前的变更已经忘得差不多了,所以都清除掉然后重新写,现在只做备忘录用。

  • 分类视图现在来看有些单调,实际应该允许在列表和网格视图之间进行切换;
  • 添加一些实用特殊功能如随机文章、最近评论等。之前莫名其妙不知道把这些搞到哪里去了;
  • 允许为评论设置禁用词。最近有个傻逼老外把暗网广告持续投放在我网站,不知道老外脑子是真不好使还是假不好使,没发觉我开了评论审核么...
  • 于分类列表隐藏空分类(已实现但方法很拙劣,必须改进);
  • 没能实现对编辑器的配置自由,应当考虑改进,此外尽快引入 MD 与数学公式支持;
  • 考虑更加令人满意的钩子结构。
  • 考虑引入站内页面引用体系,参考 MediaWiki,这样还可以添加一个花里胡哨的鼠标悬停页面小预览功能;
  • 考虑引入站外 URL 展开,不过只是一个 大概率夭折 无限延后考虑的小小想法。
  • 前端在文章预载的这个时间点,应已经能开始支持一些健壮的 hook。今天想到了检测坏链,不过由于这个过程繁琐些所以不异步实现已经不现实了。

至于发布版本的提供,由于对 Typecho 内部有改动,很难找到土著用户和我这种激进用户之间的平衡,所以还要等待相当一段时间。