update: demo folder

any-block · Feb 9, 2023 · 2682bc3 · 2682bc3
1 parent 0c32608
commit 2682bc3
Show file tree

Hide file tree

Showing 10 changed files with 654 additions and 188 deletions.
diff --git a/demo/0. 基础教程.md b/demo/0. 基础教程.md
@@ -1,4 +1,7 @@
 **ob 库，请用Obsidian安装AnyBlock插件打开**
+你可能需要频繁切换：源码/实时/渲染模式，推荐个人快捷键：
+- <kbd>Ctrl</kbd> + <kbd>/</kbd> | 切换源码和实时（默认未设置）
+- <kbd>Alt </kbd> + <kbd>/</kbd> | 切换编辑和渲染（默认Ctrl+E）
 
 插件推荐设置：
 - 范围管理器
@@ -13,8 +16,29 @@
 - 实验性功能
 	- 启用负级列表 | 开（但现在还开不了）
 
+# 流畅性选项
+
+在看基础教程时，为了方便理解，请使用上面的推荐设置（插件默认设置）
+- 如果追求功能性，你可以将范围管理器里的一些选项改为 `总是识别`
+- 如果追求流畅性，或者你发现使用过程中有点卡顿（本插件目前可能还优化得不是很好，例如没有限制刷新频率等）
+  你可以选择少使用像mermaid的功能、或避免块二次转化
+  **或者将 `实时模式中启用` 改为 `不启用`**，这个是会非常流畅的
+
 # 选择器
 
+选择器包括**局部选择器**、**全局选择器**
+- 局部选择器
+	- 列表选择器
+	- 引用块选择器
+	- 代码块选择器
+- 全局选择器
+	- 首尾选择器
+	- 标题选择器
+
+全局选择器的特点：
+- 可以包括很大一片区域，并且该区域可以有各种复合元素
+- 为防止用户误操作，决定不提供 `总是识别` 功能
+
 ## 列表选择器
 
 只要在列表的上一行加上 `[header]` 即可。其中 `header` 是要对该列表进行的操作
@@ -30,31 +54,100 @@
 包括：引用块选择器、代码块选择器、标题层级选择器
 和列表选择的操作是类似的
 
-## 选项
+## 选择器选项（此功能未开发）
 
 `[>XXX]` 可以缩减范围选择（此功能未开发）
 {^XXX} 所在层级选择，不同于下一层级选择（此功能未开发）
 
 # 操作
 
-支持的操作：
+操作分为
+- 渲染操作
+	- 包括解析操作，其实叫做“解析并渲染”会更通俗一点
+	- 如果不指定渲染操作则为md渲染操作
+- 文本操作
+	- 仅处理文本，即将一系列纯文本转化为另一个新的纯文本，可叠加
+复合操作
+- 由多个文本操作组成
+
+**（下面可能包含旧的或未实现的或与插件版本不符的处理器，也可能通过设置面板查看自己安装插件所支持的所有处理器）**
+
+支持的渲染操作：
 
 [list2table]
-- 类型 | 类型zh | 方法 | 方法zh | 可转md/html
-- ul-list
-	- ul列表
+- < 大类型| 解析方法 | 解析方法zh | 渲染方法 | 渲染方法zh | 可转md/html
+- tree
+	- ul-list| ul树
+	  （一叉多层树）
 		- 2ut/2mdut       | 转表格（规范） | md/html
-- tree-list
-	- 树列表
-		- 2table/2mdtable | 转树表格 | html
+	- li-list| li树
+	  （一叉多层树）
 		- 2lt/mdlt        | 转列表格 | html
-		- 2mermaid  | 转树类形（脑图、流程图等） | mermaid/html
+	- ab-tree | 二层树
+	  也叫 "消除最高级"
+	  （一叉二层树）
 		- 2timeline | 转时间线 | mermaid
-		- 2tree-indent | 转树缩进 | md
-- tree-indent
-	- 树缩进
-		- 2tree-list | 转树列表 | md/html
-- code      | 一定代码 | 2doctable | 转表格   | html
+		- 2tab         | 转标签栏 | html
+		- 2chat       | 转对话
+	- tree-list | 树列表
+	  （多叉多层树）
+		- 2table/2mdtable | 转树表格 | html
+		- 2mermaid  | 转流程图   | mermaid/html
+		- 2mindmap  | 转思维导图      | html
+		- 2tree     | 长得像树的树状图 | html
+		- 2xuri     | 旭日图         | html
+		- 2brace    | 括弧分类图      | html
+- other
+	- title       | 标题级（语法糖）
+		- 2list+list2xxx | (组合使用，下面提供了几种语法糖)
+		- 2tab
+		- 2table
+		- 2mindmap
+	- code      | 一定代码
+		- 2doctable | 转表格（文档生成） | html
+		- json | 这个不能转树，只能说转可折叠渲染
+	- common    | 通用
+		- text | 纯文本            | md
+		- md   | md渲染            | md
+	- render| 渲染
+	  （理论上为 "渲染修饰器"
+	  但该功能没做）
+		- flod | (折叠类)可折叠     | md+
+		- hide | (折叠类)默认折叠   | md+
+		- heimu| (折叠类)黑幕遮挡   | html
+		- limit() | (折叠类)限高折叠 | html
+		- scroll()| (折叠类)限高滚动 | html
+
+支持的文本操作：
+（与渲染操作相比，文本操作的特点在于可叠加。即：可以先经过多个文本操作，再进行渲染操作）
+
+[2table]
+- < 类型 | 类型zh | 方法 | 方法zh
+- title| 标题类
+	- title2list| 转列表文本，title最重要的处理器，可配合list渲染器使用
+- tree-indent | 树缩进
+	- indent2list | 缩进转列表
+- code/quote | 代码或引用块
+	- X    | 根据选择器自动解除块
+	- code/code(str) | 变代码块
+	- Xcode/Xcode(bool) | 解除代码块
+	- quote | 变引用块
+	- Xquote | 解除引用块
+	- code2quote | 代码块转引用块
+	- quote2code | 引用块转代码块
+- text | 纯文本操作
+	- replace| 替换（带参）
+	- slice()| 切片（例如切割1,-1，也可以达到类似Xcode的效果）
+	- listroot| 增加列表根
+	- 2tree-indent | 列表转缩进
+
+
+三种可解析为树的选择器的差异
+[2table]
+- < 选择器|     可解析层次|       在ul-list里解析的区别
+- 列表选择器|  树层次（>0）|     首列仅解析列表层，`|`为分割
+- 负列表选择器| 树层级（>-4）|   首列仅解析负列表层
+- 标题选择器|  树层级（>-9）|    首列仅解析标题层
 
 补充：
 - `2` 表示 `to` 的意思（就是一种格式转化为另一种格式）

diff --git a/demo/1. 使用示例 - 列表选择器.md b/demo/1. 使用示例 - 列表选择器.md
@@ -57,7 +57,8 @@
 
 ## 转列表格
 
-@todo 这里样式可以再优化一下，甚至可能弄可折叠方案
+这里我弄了**可折叠**（@todo 虽然没有画折叠符号，而且有bug，但的确是可折叠的）
+
 描述一下公司结构：
 
 [2lt]
@@ -75,7 +76,7 @@
 描述一下你对下面各种水果的看法
 
 [2ut]
-- 水果
+- < 水果
 	- 颜色
 	- 英文
 - 苹果
@@ -112,9 +113,10 @@
 ## 列表转时间线
 
 列表转时间线
-@todo 这里样式可以再优化一下
+@todo 这里样式可以再优化一下，目前看起来是和2ut的效果一样的
+@attension 这里在渲染模式可能与table-extended插件冲突
 
-[2mdut]
+[list2mdtimeline]
 - 1840年6月
 	- 英军发动鸦片战争
 - 1842年8月
@@ -130,7 +132,7 @@
 	  > 5. 中国逐渐开始了反帝反封建的资产阶级民主革命。
 	  >    
 	   | | |
-	   | ------ | -------------------------------------- |
+       |----:| -------------------------------------- |
 	   | 1943年 | 中英《虎门条约》签订;                  |
 	   | 1844年 | 中关《望厦条约》、中法《黄埔条约》签订 | 
 - 1841年5月
@@ -141,22 +143,87 @@
 
 
 
-## 最后补充两个语法糖
 
-- 语法糖1：当选择器为列表选择器，且[]第一个字符为2时，在前面追加list字符）
-- 语法糖2：当[]第一个字符为!时，`[!XXX]`会自动变成`[code]\n ad-xxx`）
+## 列表转标签栏
 
-## 转流程图/脑图
+可以点击标签栏切换 @todo：样式优化
+demo: 接下来我们来讲一下如何安装python
 
-描述一下树设计的脑图（由于ob的mermaid版本较低，没有mindmap，暂用流程图代替）
+[list2mdtab]
+- windows
+	- 转到官方 Python 站点，并导航到最新版本。在撰写本文时，即 `3.10.6`。
+	- 下载适用于您平台的二进制文件。执行二进制。
+	- 除了将 Python 添加到 `PATH` 之外，您不需要选择任何选项，因为默认安装程序具有您需要的一切。只需单击“安装”即可。
+- linux
+	- 可以通过执行以下命令在终端中使用 apt 包安装程序：
+	  ```shell
+	  apt-get install python3.6
+      ```
+- macOS
+	- 转到官方 Python 站点，并导航到最新版本。在撰写本文时，即 `3.10.6`。
+	- 下载适用于您平台的二进制文件。执行二进制。
+	- 在 Mac 上，这将默认在 dmg 安装程序中完成。
 
-（@bug mermaid在这里有点bug，会闪一下。可能会考虑的解决方案：仅渲染模式生效）
+## 转流程图
 
-[2mermaid]
+描述一下树设计的脑图
+
+[list2mermaid]
 - 树结构
 	- 基本术语
+		- A
+		- B
+		- C
 	- 性质
 	- 基本运算
 	- 二叉树
 
 
+
+## 加列表根
+
+如果列表有root，我们可以写列表时将root省略掉，在头部信息中加上。
+在转流程图和思维导图时该技巧很好用
+
+例如：
+[listroot(树结构)]
+- 基本术语
+	- A
+	- B
+	- C
+- 性质
+- 基本运算
+- 二叉树
+
+
+## 转思维导图
+
+（由于ob的mermaid版本较低，没有mindmap，所以这里插件内置了一个新的mermaid）
+（当然缺点是：插件大小从200KB变为了9MB多，等到ob更新mermaid版本我会将插件内置的那份给去除掉的）
+
+这里我就直接使用mermaid官方给的例子了
+
+[listroot(root((mindmap)))|list2mindmap]
+- Origins
+	- Long history
+	- ::icon(fa fa-book)
+	- Popularisation
+		- British popular psychology author Tony Buzan
+- Research
+	- On effectiveness<br/>and features
+	- On Automatic creation
+		- Uses
+			- Creative techniques
+			- Strategic planning
+			- Argument mapping
+- Tools
+	- Pen and paper
+	- Mermaid
+
+## 最后补充两个语法糖
+
+- 语法糖1：当选择器为列表选择器，且[]第一个字符为2时，在前面追加list字符）
+- 语法糖1.5：列表第一行前面加上：`< `，则视为表头（虽然表头可以不止一行，但这里只能设置第一行为表头）
+- 语法糖2：当[]第一个字符为!时，`[!XXX]`会自动变成`[code]\n ad-xxx`）
+
+# 负列表选择器（暂未开发）
diff --git a/demo/2. 使用示例 - 代码块引用块选择器.md b/demo/2. 使用示例 - 代码块引用块选择器.md
@@ -1,20 +1,24 @@
 # 代码块引用块选择器
 
-## 消除块
+## 基本使用
+
+### 消除块（代码/引用）
 
 [Xquote]
 > 引用行1
 > 引用行2
 
-[Xcode]
+[Xcode(true)]
 ```js
 var str = "Hello World"
 console.log(str)
 ```
 
-## 增添块
+
+### 增添块（代码/引用）
 
 这里借助了“范围选择器”，详见下一节
+
 {[code]
 ad-quote
 It is a good plugin
@@ -25,33 +29,61 @@ It is a good plugin
 行1
 行2
 }.
-其中，如果要转化为callout语法的引用块的话，这里有个语法糖：
-用感叹号快捷表示，就不用像上一项那样写两行了
 
-{[!info]
-ad-quote
-### dfsf
-dfsfs
-dfsfsdafa
-}.
 
-## 转化块
+### 转化块
+
+块的转化有时也有大用，例如：
+- 借用md格式
+	- 像 Any-Block 就内置了很多这种功能，例如列表转化为其他树类格式。
+	  在[设计理念](4.%20设计理念.md)中，也演示过没有callout语法的环境下，如何将引用块转Ad代码块
+- 借用代码格式
+	- 反过来也行，例如mermaid是没有提供代码高亮功能的，写起来比较痛苦。
+	- 但在这里我们可以借助js的**高亮**来写mermaid代码，然后渲染回mermaid格式
 
-@todo 这个比较繁琐，后续更新会有更方便的写法
-利用这个原理我们还能进行块转化
+块的转化是非常灵活的，基于复合处理器，可以有很多种不同的写法：
+比较笨拙的写法：
 
-[Xcode]
+[Xcode(true)]
 ```js
-将代码块变成引用块
 > 行1
 > 行2
 ```
 
 [Xquote]
-> 或者将引用块变成代码块
 > ```js
 > console.log("Hello World")
 > ```
 
+更好的写法：
+（code2quote其实就相当于Xcode(true)|quote）
+（quote2code(js)其实就相当于Xquote|code(js)）
+
+[code2quote]
+```js
+行1
+行2
+```
+
+[quote2code(js)]
+> console.log("Hello World")
+
+其中，如果要转化为callout语法的引用块的话，这里有个语法糖：用感叹号快捷表示，就不用像上一项那样写两行了
+
+{[!info]
+ad-quote
+dfsfs
+dfsfsdafa
+}.
+
+## 一些比较有用的建议
+
+有时代码块/引用块的内容会比较长，折叠起来可能会比较方便
 
+hide/fold 快捷指令，代码块默认折叠/可折叠
+
+[hide]
+```js
+console.log("Hello World")
+```