html 块完整提示词（可以自行修改微调提示词）
我需要一个为思源笔记深度定制的 HTML 块，请严格遵循以下所有要求，并且**只能使用 HTML 和 CSS**：
1. **功能目标**: 创建一个[这里填写你的具体功能，例如：会议纪要模板、项目信息卡、读书笔记模板...]。
2. **核心交互元素 (关键！)**:
* 模板中所有需要用户填写或修改的内容，**必须**使用文本标签包裹，例如 `<h3>`, `<p>`, `<li>`, `<b>`, `<strong>`, `<em>` 等。
* 这些文本元素将被工具赋予直接编辑的能力，所以请为它们设置有意义的占位内容。
* **绝对禁止**使用 `<input>`, `<textarea>` 或任何其他表单元素，因为工具不支持对其进行交互。
3. **外观和样式 (CSS)**:
**整体风格**: 设计为[用户选择风格]模板的风格为Notion模板风格，但**背景色如果用户定义配色则需要整体配色也请围绕这个主色调进行协调设计**
**图标化标题**: 每个主要板块的标题（如 <h2>）前添加一个合适的 Emoji 图标，以增强结构感和视觉吸引力。
**文本样式**: 确保所有文本内容（包括标题和段落）都清晰易读。你可以为不同的文本元素设置不同的颜色、字重或样式，以区分其功能。
**字体与排版**: 使用优雅、易读的中文字体（如“思源黑体”），并设置合适的行高和间距，保证整体的美观性。移除不必要的边框、阴影和复杂的背景，让它看起来像一个真正的笔记页面，而不是一个网页卡片。
**全屏宽度**: 模板的根容器必须设置为 width: 100%，并移除任何 max-width 限制和外边距 margin，使其完全占满笔记的可用宽度。
**内容延展**: 模板内部的文本和布局元素（如左右分栏）也必须能随容器延展，填充整个屏幕空间，不能被限制在一个固定宽度的居中区域内。
**栏目结构**: 设计为[这里填写布局要求，例如：优雅的单栏布局、响应式左右双栏布局...]。如果是双栏或多栏，请确保在移动端等窄屏幕上能自动切换为单栏垂直排列。
**动态效果** (可选): 如果需要动画效果（例如：[这里填写想要的动效，如“樱花飘落”...]），必须使用纯 CSS 的 @keyframes 来实现，并确保动画元素不会干扰到下方内容的编辑，并且尽量减少cpu消耗的代码例如transform 和 opacity等
4. **思源笔记兼容性优化 (最高优先级)**:
* 最终生成的代码**绝对不能**包含 `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>` 这些顶层标签。
* 所有 HTML 元素以及 `<style>` 标签，都必须被包裹在一个**唯一的父 `<div>`** 标签内。
* 请确保最终代码是**删除所有在两行内容之间起分隔作用的、完全为空的行**，以防止思源笔记错误地将其解析为多个代码块。
5. **最重要的一点**:
* **绝对禁止**使用任何 `<script>` 标签或任何形式的 JavaScript。
自定义 CSS 隐藏图标，如果需要点击图标等修改操作，直接在内容按右键就是选择框
/* 隐藏html小图标 设置——外观——代码片段——自定义css片段（之后获取html块ID直接在内容按右键） */
/* 隐藏“编辑”图标按钮 */
span[aria-label="编辑"].protyle-action__edit {
display: none !important;
}
/* 隐藏“更多”图标按钮 */
span[aria-label="更多"].protyle-action__menu {
display: none !important;
}
/* 隐藏HTML块图标 */
.protyle-gutters button[data-type="NodeHTMLBlock"] {
display: none !important;
}
建议配合千千块（插件）的 html 块实时编辑使用
千千块插件 ｜v1.0.3 增加思源笔记 html 块实时编辑功能
下面是之前做的工具 html 块实时编辑（目前已经有千千块插件，不需要这个工具，感兴趣可以用这个工具）
（思源笔记首发 ai 辅助工具）叶归 AI 辅助精美笔记工具
如果需要 html 块调用 JS 脚本，在设置——编辑器——打开 允许执行 HTML 块内脚本
提示词如下：
我需要一个为思源笔记深度定制的 HTML 块，请严格遵循以下所有要求，并且**使用 HTML 和 CSS**，如果需要JS则必须遵循JS模板：
1. **功能目标**: 创建一个[这里填写你的具体功能，例如：会议纪要模板、项目信息卡、读书笔记模板...]。
2. **核心交互元素 (关键！)**:
* 模板中所有需要用户填写或修改的内容，**必须**使用文本标签包裹，例如 `<h3>`, `<p>`, `<li>`, `<b>`, `<strong>`, `<em>` 等。
* 这些文本元素将被工具赋予直接编辑的能力，所以请为它们设置有意义的占位内容。
* **绝对禁止**使用 `<input>`, `<textarea>` 或任何其他表单元素，因为工具不支持对其进行交互。
3. **外观和样式 (CSS)**:
**整体风格**: 设计为[用户选择风格]模板的风格为Notion模板风格，但**背景色如果用户定义配色则需要整体配色也请围绕这个主色调进行协调设计**
**图标化标题**: 每个主要板块的标题（如 <h2>）前添加一个合适的 Emoji 图标，以增强结构感和视觉吸引力。
**文本样式**: 确保所有文本内容（包括标题和段落）都清晰易读。你可以为不同的文本元素设置不同的颜色、字重或样式，以区分其功能。
**字体与排版**: 使用优雅、易读的中文字体（如“思源黑体”），并设置合适的行高和间距，保证整体的美观性。移除不必要的边框、阴影和复杂的背景，让它看起来像一个真正的笔记页面，而不是一个网页卡片。
**全屏宽度**: 模板的根容器必须设置为 width: 100%，并移除任何 max-width 限制和外边距 margin，使其完全占满笔记的可用宽度。
**内容延展**: 模板内部的文本和布局元素（如左右分栏）也必须能随容器延展，填充整个屏幕空间，不能被限制在一个固定宽度的居中区域内。
**栏目结构**: 设计为[这里填写布局要求，例如：优雅的单栏布局、响应式左右双栏布局...]。如果是双栏或多栏，请确保在移动端等窄屏幕上能自动切换为单栏垂直排列。
**动态效果** (可选): 如果需要动画效果（例如：[这里填写想要的动效，如“樱花飘落”...]），必须使用纯 CSS 的 @keyframes 来实现，并确保动画元素不会干扰到下方内容的编辑，并且尽量减少cpu消耗的代码例如transform 和 opacity等
4. **思源笔记兼容性优化 (最高优先级)**:
* 最终生成的代码**绝对不能**包含 `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>` 这些顶层标签。
* 所有 HTML 元素以及 `<style>` 标签，都必须被包裹在一个**唯一的父 `<div>`** 标签内。
* 请确保最终代码是**删除所有在两行内容之间起分隔作用的、完全为空的行**，以防止思源笔记错误地将其解析为多个代码块。
5. **最重要的一点**:
* **如果JS必须遵循以下模板**使用任何 `<script>` 标签或任何形式的 JavaScript，需要遵循下面模板
模板要求:1.指纹与全局搜索：必须使用“CUSTOM_ID + 全局搜索”的模式来定位自身。
在脚本顶部定义一个独一无二的 const CUSTOM_ID = "一个独特的字符串";。
使用 document.querySelector(\protyle-html[data-content*="${customID}"]`)` 的方式进行全局查找。
2.使用 Shadow DOM：所有对 HTML 块内部元素的查找和操作，都必须通过获取到的 shadowRoot 引用来进行，例如 self.shadowRoot.getElementById('...')。
3.作用域隔离：所有 JavaScript 代码必须包裹在一个大括号 {...} 中，以创建局部作用域。
4.立即执行：核心逻辑应放在一个立即执行的匿名函数 (() => { ... })(); 中，并在此函数内部首先调用 findSelf() 进行初始化。
JS模板案例如下：
<script>
{
// --- 模板核心：请勿修改 ---
/**
* 1. “指纹”：为你的每个新功能生成一个独一无二的ID。
* 你可以使用在线UUID生成器来创建一个新的ID，确保它不会和别的代码块冲突。
*/
const CUSTOM_ID = "请在这里替换为一个新的、独一无二的ID";
/**
* 2. “全局搜索”函数：这是保证脚本正常运行的核心，无需修改。
*/
function findSelf(customID) {
const protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`);
if (protyle && protyle.parentElement && protyle.parentElement.parentElement) {
const block = protyle.parentElement.parentElement;
return {
id: block.dataset.nodeId,
shadowRoot: protyle.shadowRoot
};
}
return null;
}
// --- 模板结束：从这里开始编写你的代码 ---
// 立即执行你的逻辑
(() => {
const self = findSelf(CUSTOM_ID);
// 必须先检查是否成功找到了自己
if (!self || !self.shadowRoot) {
console.error(`[${CUSTOM_ID}] 脚本初始化失败：无法定位到当前HTML块。`);
return;
}
// --- 在下方编写你的主要逻辑代码 ---
// 使用 self.shadowRoot 来安全地获取你自己的HTML元素
const messageP = self.shadowRoot.getElementById('message');
const myButton = self.shadowRoot.getElementById('my-button');
if (!messageP || !myButton) {
console.error(`[${CUSTOM_ID}] 元素获取失败。`);
return;
}
// 示例：给按钮添加点击事件
myButton.addEventListener('click', () => {
messageP.textContent = `操作成功！当前块 ID 是: ${self.id}`;
messageP.style.color = 'green';
});
console.log(`[${CUSTOM_ID}] 脚本已成功加载并绑定事件。`);
})();
}
</script>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于