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
      • 让图标的颜色与周围的元素更搭更和谐
      • 为图片添加工程风的网格背景

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23014 引用 • 92573 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 189 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 163 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23014 引用 • 92572 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 4 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 216 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 440 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    492 引用 • 926 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 253 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    51 引用 • 25 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注