思源笔记折腾记录 - 更奇怪的 html 块 - 模板可以传参啦

更多类似的内容在思源笔记折腾记录 - 稍微汇总一下 - leolee 的回帖 - 链滴 (ld246.com)可以看到,扩展功能有风险的,小心使用嗷

我们之前在

思源笔记折腾记录 -html 块 - 链接卡片 - 链滴 (ld246.com)

弄了一个这样的代码块:

let findHostBlock;
findHostBlock = (element) => {
  try {
    if (element.host) {
      return findHostBlock(element.host);
    }机
    if (
      element.parentNode &&
      element.parentNode.getAttribute &&
      element.parentNode.getAttribute("data-node-id")
    ) {
      return element.parentNode;
    }
    return findHostBlock(element.parentNode);
  } catch (e) {
    return undefined;
  }
};
try {
  class scriptX extends HTMLElement {
    constructor() {
      super();
      this.style.display = "none";
      this.hostBlock = findHostBlock(this);
      if (this.hostBlock) {
        let iife = new Function(`return (hostBlock)=>{${this.innerText}}`)();
        iife(this.hostBlock);
      }
    }
  }
  customElements.define("script-x", scriptX);
} catch (e) {}
​

之前我们并没有实际用到它,现在就要实际用上了.

这里我们来搞一个会自毁的 html 块

<div>
<script>
let findHostBlock;
findHostBlock = (element) => {
  try {
    if (element.host) {
      return findHostBlock(element.host);
    }机
    if (
      element.parentNode &&
      element.parentNode.getAttribute &&
      element.parentNode.getAttribute("data-node-id")
    ) {
      return element.parentNode;
    }
    return findHostBlock(element.parentNode);
  } catch (e) {
    return undefined;
  }
};
try {
  class scriptX extends HTMLElement {
    constructor() {
      super();
      this.style.display = "none";
      this.hostBlock = findHostBlock(this);
      if (this.hostBlock) {
        let iife = new Function(`return (hostBlock)=>{${this.innerText}}`)();
        iife(this.hostBlock);
      }
    }
  }
  customElements.define("script-x", scriptX);
} catch (e) {}
</script>
<script-x>
	let id = hostBlock.dataset.nodeId
	fetch(
	'/api/block/deleteBlock',
	{
		method:"post",
		body:JSON.stringify({id:id})
	}
	)
</script-x>
</div>
​

你可以尝试一下把上面那个 html 代码块的内容贴到 html 块里面,你会发现它消失了,或者说根本贴不进去.

那一个根本无法渲染出来的 html 块有什么卵用咧?

我们可以试一下这个

<div>
<script>
let findHostBlock;
findHostBlock = (element) => {
  try {
    if (element.host) {
      return findHostBlock(element.host);
    }
    if (
      element.parentNode &&
      element.parentNode.getAttribute &&
      element.parentNode.getAttribute("data-node-id")
    ) {
      return element.parentNode;
    }
    return findHostBlock(element.parentNode);
  } catch (e) {
    return undefined;
  }
};
try {
  class scriptX extends HTMLElement {
    constructor() {
      super();
      this.style.display = "none";
      this.hostBlock = findHostBlock(this);
      if (this.hostBlock) {
        let iife = new Function(`return (hostBlock)=>{${this.innerText}}`)();
        iife(this.hostBlock);
      }
    }
  }
  customElements.define("script-x", scriptX);
} catch (e) {}
</script>
<script>
//这里可以搞别的事情
</script>
<script-x>
hostBlock.nextElementSibling.setAttribute('style','color:red')
</script-x>
<script-x>
	let id = hostBlock.dataset.nodeId
	fetch(
	'/api/block/deleteBlock',
	{
		method:"post",
		body:JSON.stringify({id:id})
	}
	)
</script-x>
</div>
{: id="20230427014752-jugtp3g"}

{: id="20230427014913-wud8xuf"}
​

把它保存成一个模板之后, 模板就可以用来当成命令使用了嗷(谨慎操作,多加测试,死了我肯定不管埋)

注意这玩意是没有办法在文档里面写了之后保存成模板的,你只能直接编辑模板......

非常没啥卵用,甚至有点危险,但是可以开开脑洞,模板不能传参的问题,大概可能也许应该可以靠这个来解决........