AnyBlock 插件系列教程之 --4.更多处理器（装饰处理器）

AnyBlock 插件系列教程之 —4.更多处理器（装饰处理器）

前三章介绍了各种选择器，主要介绍的是列表文本转树形结构的图形

块名

这个相当有用和高频，所以我给了个语法糖，用 # 开头就行

给块一个名字，并且可以自动识别修饰的块的类型。可以很轻易地：

  • 给表格添加| 居中的表格标题
  • 给代码添加| 文件名

表格标题

[2table|#表格标题]

  • 1| 2
  • 3| 4

代码标题

按道理这里的文件名应该和代码块同色，不同色的话自己先在 css 文件里调一下。

找 --pre-background-color ，在 css 文件的前五行，改个颜色值就行。

（尝试过用 js 获取代码块颜色再调的，但失败了）

[#main.cpp]

#include <stdio.h>
 
int main()
{
    /* 我的第一个 C 程序 */
    printf("Hello, World! \n");
 
    return 0;
}

其他标题

[#引用块]

引用块 1
引用块 2

[#列表块标题]

  • 1
    • 2
      • 3
    • 2

折叠

这个是我在写 anyblock 之前，使用 dataviewjs 强行模拟 list2table 效果的代码，内容比较长所以拿过来演示

[fold]

const keyword = "%"+"toTable" // 不能合并
const files = app.vault.getMarkdownFiles()


const lines = files
	.filter((file) => {  // 本篇笔记
		return file.path == dv.current().file.path
	})
	.map(async (file) => {  // 转列表
		const content = await app.vault.cachedRead(file)  
		const lines = content.split("\n")
		return lines
	})
	
Promise.all(lines).then(linesTmp => {
	let lines = linesTmp.flat()

	// 先搜索关键词
	let index = 0
	for(let i=0; i<lines.length; i++){
		if(lines[i].contains(keyword)){
			index = i
			break
		}
	}
	
	// 获取参数
	const args = lines[index].replace(keyword, "").replace(/^|/, "").split("|")
	

	// 先不考虑异常缩进了
	let levelArr = []
	let contentArr = []
	for(let i=index+1; i<lines.length; i++){
		if(/^\s*?-\s(.*?)/.test(lines[i])){
			contentArr.push(lines[i].replace(/^\s*?-\s/, ""))
			levelArr.push(lines[i].replace(/-\s(.*?)$/, "").length/2)
		}
		else{
			break
		}
	}

	// 再弄成正确的层次关系，暂时先只考虑三层
	let tableData = []
	let lastArr = []
	let lastLevel = 0
	for(let i=0; i<levelArr.length; i++){
		if(levelArr[i]==0){
			if(lastArr.length!=0) {// 是否不为第一个数据
				tableData.push(lastArr)
				lastArr = []
			}
			lastLevel = 0
			lastArr.push(contentArr[i])
		}
		else if(levelArr[i]==1){
			if (lastLevel<1){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 1
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 1
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
		else if(levelArr[i]==2){
			if (lastLevel<2){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 2
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 2
				lastArr.push("^^")
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
	}
	tableData.push(lastArr)
	lastArr = []
	
	console.log(tableData)
	dv.table(args, tableData)
})

溢出折叠

像很多博客都有代码块的溢出折叠。AnyBlock 也具备这种处理器，无论是代码块还是其他东西。

用笔记记录长代码块时非常有用

（@todo 这里没匹配亮色模式，而且不一定和用户的的代码块背景相匹配）

[overfold]

const&nbsp;keyword&nbsp;=&nbsp;"%"+"toTable" // 不能合并
const&nbsp;files&nbsp;=&nbsp;app.vault.getMarkdownFiles()


const&nbsp;lines&nbsp;=&nbsp;files
	.filter((file) => {  // 本篇笔记
		return file.path == dv.current().file.path
	})
	.map(async&nbsp;(file)&nbsp;=>&nbsp;{  // 转列表
		const&nbsp;content&nbsp;=&nbsp;await&nbsp;app.vault.cachedRead(file)  
		const&nbsp;lines&nbsp;=&nbsp;content.split("\n")
		return&nbsp;lines
	})
	
Promise.all(lines).then(linesTmp&nbsp;=> {
	let lines = linesTmp.flat()

	// 先搜索关键词
	let index = 0
	for(let i=0; i<lines.length; i++){
		if(lines[i].contains(keyword)){
			index = i
			break
		}
	}
	
	// 获取参数
	const args = lines[index].replace(keyword, "").replace(/^|/, "").split("|")
	

	// 先不考虑异常缩进了
	let levelArr = []
	let contentArr = []
	for(let i=index+1; i<lines.length; i++){
		if(/^\s*?-\s(.*?)/.test(lines[i])){
			contentArr.push(lines[i].replace(/^\s*?-\s/, ""))
			levelArr.push(lines[i].replace(/-\s(.*?)$/, "").length/2)
		}
		else{
			break
		}
	}

	// 再弄成正确的层次关系，暂时先只考虑三层
	let tableData = []
	let lastArr = []
	let lastLevel = 0
	for(let i=0; i<levelArr.length; i++){
		if(levelArr[i]==0){
			if(lastArr.length!=0) {// 是否不为第一个数据
				tableData.push(lastArr)
				lastArr = []
			}
			lastLevel = 0
			lastArr.push(contentArr[i])
		}
		else if(levelArr[i]==1){
			if (lastLevel<1){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 1
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 1
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
		else if(levelArr[i]==2){
			if (lastLevel<2){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 2
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 2
				lastArr.push("^^")
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
	}
	tableData.push(lastArr)
	lastArr = []
	
	console.log(tableData)
	dv.table(args, tableData)
})

[list2table|overfold]

  • < 大类型| 解析方法 | 解析方法 zh | 渲染方法 | 渲染方法 zh | 可转 md/html
  • tree
    • ul-list| ul 树 （一叉多层树）
      • 2ut/2mdut | 转表格（规范） | md/html
    • li-list| li 树 （一叉多层树）
      • 2lt/mdlt | 转列表格 | html
    • ab-tree | 二层树 也叫 ” 消除最高级 ” （一叉二层树）
      • 2timeline | 转时间线 | mermaid
      • 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()/part() | (折叠类) 限高折叠 | html
      • scroll()| (折叠类) 限高滚动 | html
      • title()| 增加块标题（代码块可能会很常用）

滚动

默认是超出 460px 滚动，该处理器也可以接受参数，scroll(超出多少变为滚动)，参数不需要加 px

[scroll]

const keyword = "%"+"toTable" // 不能合并
const files = app.vault.getMarkdownFiles()


const lines = files
	.filter((file) => {  // 本篇笔记
		return file.path == dv.current().file.path
	})
	.map(async (file) => {  // 转列表
		const content = await app.vault.cachedRead(file)  
		const lines = content.split("\n")
		return lines
	})
	
Promise.all(lines).then(linesTmp => {
	let lines = linesTmp.flat()

	// 先搜索关键词
	let index = 0
	for(let i=0; i<lines.length; i++){
		if(lines[i].contains(keyword)){
			index = i
			break
		}
	}
	
	// 获取参数
	const args = lines[index].replace(keyword, "").replace(/^|/, "").split("|")
	

	// 先不考虑异常缩进了
	let levelArr = []
	let contentArr = []
	for(let i=index+1; i<lines.length; i++){
		if(/^\s*?-\s(.*?)/.test(lines[i])){
			contentArr.push(lines[i].replace(/^\s*?-\s/, ""))
			levelArr.push(lines[i].replace(/-\s(.*?)$/, "").length/2)
		}
		else{
			break
		}
	}

	// 再弄成正确的层次关系，暂时先只考虑三层
	let tableData = []
	let lastArr = []
	let lastLevel = 0
	for(let i=0; i<levelArr.length; i++){
		if(levelArr[i]==0){
			if(lastArr.length!=0) {// 是否不为第一个数据
				tableData.push(lastArr)
				lastArr = []
			}
			lastLevel = 0
			lastArr.push(contentArr[i])
		}
		else if(levelArr[i]==1){
			if (lastLevel<1){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 1
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 1
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
		else if(levelArr[i]==2){
			if (lastLevel<2){ // 是否新起一行
				lastArr.push(contentArr[i])
				lastLevel = 2
			}
			else{
				tableData.push(lastArr)
				lastArr = []
				lastLevel = 2
				lastArr.push("^^")
				lastArr.push("^^")
				lastArr.push(contentArr[i])
			}
		}
	}
	tableData.push(lastArr)
	lastArr = []
	
	console.log(tableData)
	dv.table(args, tableData)
})

黑幕

和萌娘百科的黑幕效果类似

[X|addClass(ab-deco-heimu)]

这是一段不能被直接看到的内容
…
…
（你看到了？你知道太多了！ [猫猫刀口舔血.jpg]）

增加 class

addClass (将当前块增加一个类名)、addDiv (增加一个父元素，并给父元素增加一个类名)

这个可以用来让块增添一个自定义样式（像 ad 插件那样），可供会 CSS 的用户扩展

自定义处理器

推荐几个处理器配置就知道怎么用。

id 和 name 都是随便填，下面给个演示

[2table]

  • 注册器匹配名（可以是中文名）| 注册器替换为
  • 引用| add([!quote])|quote
  • 折叠| add([!note]-|qutoe)
  • /导图(.*?)/| rootlist(%1)|mindmap 其中，%n 表示将正则中的第 n 个匹配项替换到该位置 例如上面的导图例子中，导图(主题名) 就会变成 rootlist(主题名)|mindmap

功能比较简单，和用代码来增加处理器比起来功能不足。但通过组合注册器，依然能够做出不错的自定义效果

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。

#obsidian #教程 #anybock
LincZero

LincZero8篇文章

反馈交流

AI 客服

QQ群

微信群 Pkmer微信群

其他渠道
版权声明

版权声明：所有 PKMer 文章如果需要转载，请附上原文出处链接。

本文链接：https://pkmer.cn/show/20230811091919