000 从零开始的 mini-vlook: WIP 起航！

[!Example]+ 属性

• 版本 v0.0.1-alpha+20240826

你还在为找不到心意的插件而烦恼吗？你还在为大佬更新过慢而困扰吗？你还在因为不同主题的特色功能而反复切换或者取舍不定吗？—— 少年！来吧，求人不如求自己，让我们一起从零开启插件和主题的“深度自定义”之旅吧！

跟着我走，你能学习到如何从零开始开发主题和插件，甚至你能学习到如何管理自己的项目和任务，组织自己的知识和笔记。

我不会深入告诉你 CSS 盒子模型是怎么折磨人的，也不会告诉你复杂的 js 语法糖是怎么起作用的。因为我也不懂。我甚至不想教你如何正确规划自己的编程路线，因为 Github 上路线图真的比我的要全。

我只是把自己摸索和学习的过程分享给你——正如，2 年前，我一边在浏览器搜 “CSS 如何让文字居中”、“CSS 如何改变文字颜色”，一边东拼西凑起这个 bug 不断、又很小众审美的 mini-vlook 主题。

我折腾的最初动力就是—— 我想把 Typora 的 vlook 插件中的“小部分”功能，迁移到我的新笔记软件——思源笔记上。

我从魔改 Zhang Light 主题开始，到借鉴萌仙子的 Dark+ 的项目结构和启动脚本， 复制 Roy 和 Savor 的一个个有趣的功能项，加上一些自己的主观用途，又在折腾群群主老哥和各位大佬的帮助下，一个东拼西凑的主题就奇妙的跑起来。

出发点就是一个很私人的主题诞生了——一个上架就是为了蹭免费云端备份和同步的小小主题，居然也有了点小小的下载量。

搭台唱戏，台下哪怕没有一个人，也应该把戏唱完，何况还有这么多朋友也恰好和我有一样的喜好呢？

所以，我决定把现在 mini-vlook​ 主题拆分成 mini-vlook​ 主题和 mini-vlook-addin​ 插件两个项目（插件不依赖主题，拆分是为了解耦），并添加最近从其他插件和主题中学习到一些“新点子”到这次改进中。

写这个系列的原因，也是希望有人可以像我魔改 Zhang Light 主题一样，把我的主题改成更加符合自己脾气的主题。当然，如果也可以分享出来让社区的兄弟姐妹们参考，那也是极好的。

先画饼——啊呸，先放路线图，让各位看官们解解馋：

[!Tip]+ 提示信息：

下面的内容有些是现在有的，有些是有但是有 BUG，有些可能会被废弃，有些是要新增的功能，至于每个功能是做什么的，等开发到的时候再介绍吧。

• mini-vlook

  • 整体布局（siyuan）

    • 顶部: 主菜单、同步、前进、后退、插件按钮、标题名、年付订阅、功能特性、插件、命令面板、全局搜索、外观切换、最小化、最大化、关闭
    • 左侧: 文档树、大纲、收集箱、书签、标签、插件面板
    • 右侧：关系图、全局关系图、反向链接
    • 底部：隐藏/停靠面板、同步提示信息、字符数/字数、帮助按钮
    • 其他窗口处理：设置页面、数据历史、闪卡、右键菜单、Tip 快捷菜单、下拉菜单、功能菜单 /​、模板、检索、PDF 标注

  • 内容块渲染：

    • 容器样式：段落、标题、列表块、引述块（引用块）、表格、行内代码块、数学公式块、嵌入块 {{SQL}}​、HTML 块、超级块、挂件、分隔线、IFrame、视频、音频、脑图、流程图、时序图、甘特图、类图、用户游历图、GIt 图、实体关系图、图表、五线谱、Graphviz、Flowchart、PlantUML
    • 文本样式：块引用、超链接、图片、下划线、粗体、斜体、删除线、高亮（标记）、上标、下标、行内代码、键盘、标签、行级公式、备注、前景颜色、背景颜色、虚拟引用

  • 额外增加的功能

    • 封面和封底​​theme=tm1...tm7​​

    • 自动编号​​f=bt​​

    • 文字竖排​​f=sp​​

    • 列表转表格​​f=bg​​

    • 列表转看板​​f=kb​​

    • 列表转看板（c）​​f=kbw​​

    • 分割线 + 列表转看板​​1-4个分割线​​

      • ​​f=bc​​ 启用旧版渲染模式，用 1、2、3 个分割线，分别渲染为 表格、看板和脑图

    • 列表转导图​​f=map​​

    • card 视图​​card card.img-top card.list​​

    • ​​链接前小图片​​

    • ​​多级标签渲染增强​​需要 JavaScript**_RD

    • ​​显示 custom-f 属性​​

    • ​​OneNote 左侧树状列表​​

    • ​​透明现代化的底部Dock​​

    • ​​封面和封底​​

    • ​​多主题切换​​需要 JavaScript**_RD

  • 行内代码扩展（需要 JavaScript 辅助）【VLOOK13 语法】

    • 微章​​f=wz​​
    • 微章​​f=chk-wz​​
    • 注音​​f=pg​​
    • 刮刮卡​​f=rb​​
    • 彩虹引用​​f=bqcolor​​
    • 复选框​​f=chk​​扩展
    • 计数任务​​f=todo​​扩展
    • 下拉选择​​f=cx​​扩展
    • 分页引用​​f=bqtab​​扩展 ：
    • 命令​​f=bqtab​​扩展 ：
    • 列表仿 workflowy 注释​​f=ae​​扩展:

• mini-vlook-addin

  • ​​mini-vlook 主题设置按钮​​

  • ​​色号​​ _~色号~_​ 【斜体 + 下标】

  • ​​标签​​ * 内容 1 *​ 【斜体 + 行内代码】

  • ​​微章​​ *标题 内容 1 内容2*_~色号~_​ 【斜体 + 行内代码】

    • 支持变量格式突出显示： {{变量}}​ %变量%​ ${变量}​ #{变量}​ var(变量)​；

  • ​​进度条​​ **==进度数值==**​ （0-100，可溢出）【粗体 + 高亮】

  • ​​面包屑​​ *===面包屑内容=*​ 支持的分隔符： >​ /​ \​ ▸​ ▶︎​ 【斜体 + 高亮】

  • ​​注音​​ 拼音*^yin^*​ 【斜体 + 上标】

  • ​​刮刮卡​​ *提示说明**被隐藏的内容***​ 【斜体 + 粗体】

  • ​​分栏引用​​非 mini-vlook 主题-生效

  • ​​列表看板​​非 mini-vlook 主题-生效

  • ​​GitHub Style Alert​​

  • ​​明信片​​

  • ​​封面&封底​​非 mini-vlook 主题-生效

  • ​​多主题切换​​非 mini-vlook 主题-生效

  • ​​跨行进行文本渲染​​

  • ​​导出​​: markdown​、pdf​、docx​

  • ​​表格​​

    • 自动编号、添加题注

  • ​​图片​​

    • 自动编号、添加题注
    • 在高分屏下自动适配显示高清的版本（2x、3x）
    • 自动适配 Dark Mode
    • 让图标的颜色与周围的元素更搭更和谐
    • 为图片添加工程风的网格背景

‍

‍

‍

‍