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

本贴最后更新于 252 天前,其中的信息可能已经时移俗易

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

  • 思源笔记

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

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

    25356 引用 • 104719 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 118 关注
  • Bootstrap

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

    18 引用 • 33 回帖 • 645 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • IDEA

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

    181 引用 • 400 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 706 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 631 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 668 关注
  • webpack

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

    42 引用 • 130 回帖 • 250 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 3 关注
  • RemNote
    2 引用 • 16 回帖 • 10 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    28 引用 • 197 回帖 • 30 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • 大数据

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

    93 引用 • 113 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 2 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • Visio
    1 引用 • 2 回帖 • 2 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 495 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    411 引用 • 3588 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1441 引用 • 10069 回帖 • 496 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 813 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3200 引用 • 8215 回帖