怎样使用 CSS 隐藏嵌入块内引用的标题（像文档名称那样直接隐藏）
-
思源笔记
24803 引用 • 102021 回帖 • 1 关注
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
代码片段
133 引用 • 886 回帖
代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加
[css]或[js]用于区分代码片段类型。 -
Q&A
9407 引用 • 42862 回帖 • 110 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
相关帖子
被采纳的回答
-
JeffreyChen •付费者 支持者 捐赠者
试试这个 JS 片段：
// 嵌入标题块时保留内容隐藏标题 JS片段 (function() { (async () => { const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type !== 'childList') return; // 遍历新增的节点 for (const node of mutation.addedNodes) { // 检查是否是 .protyle-wysiwyg__embed 元素 if (!node.classList || !node.classList.contains('protyle-wysiwyg__embed')) return; // 获取 .protyle-wysiwyg__embed 元素的 data-id 属性 const embedId = node.getAttribute('data-id'); if (!embedId) return; // 在新增的 .protyle-wysiwyg__embed 元素中查找首个符合条件的 [data-type="NodeHeading"] 元素 const heading = node.querySelector(`[data-type="NodeHeading"][data-node-id="${embedId}"]`); if (!heading) return; // 隐藏找到的 [data-type="NodeHeading"] 元素 heading.style.display = 'none'; } } }); observer.observe(document.body, { childList: true, subtree: true }); })(); })();
请输入回帖内容
...
-
JeffreyChen • • 1
如果嵌入块内的第一个块是标题块，就隐藏这个标题块：
.protyle-wysiwyg__embed > [data-type="NodeHeading"]:nth-child(1), .protyle-wysiwyg__embed > [data-type="NodeHeading"]:nth-child(2) { display: none; }1 回复 -
JeffreyChen • • 1 评论
试试这个 JS 片段：
// 嵌入标题块时保留内容隐藏标题 JS片段 (function() { (async () => { const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type !== 'childList') return; // 遍历新增的节点 for (const node of mutation.addedNodes) { // 检查是否是 .protyle-wysiwyg__embed 元素 if (!node.classList || !node.classList.contains('protyle-wysiwyg__embed')) return; // 获取 .protyle-wysiwyg__embed 元素的 data-id 属性 const embedId = node.getAttribute('data-id'); if (!embedId) return; // 在新增的 .protyle-wysiwyg__embed 元素中查找首个符合条件的 [data-type="NodeHeading"] 元素 const heading = node.querySelector(`[data-type="NodeHeading"][data-node-id="${embedId}"]`); if (!heading) return; // 隐藏找到的 [data-type="NodeHeading"] 元素 heading.style.display = 'none'; } } }); observer.observe(document.body, { childList: true, subtree: true }); })(); })();👍shuojie • -
