编辑指南：修订间差异

2026年4月6日 (一) 08:05的版本

**Wiki.js 编辑风格提示文档**

🎯 悬浮提示框使用指南先将以下代码注入页面-样式中 ``` [data-tooltip] {

 position: relative;
 cursor: help;
 display: inline;
 text-decoration: none

} [data-tooltip]::before {

 content: attr(data-tooltip);
 position: absolute;
 bottom: calc(100% + 10px);
 left: 50%;
 transform: translateX(-50%);
 min-width: 80px;
 max-width: 800px;
 width: max-content;
 white-space: pre-line;
 word-wrap: break-word;
 overflow-wrap: break-word;
 background: #fff;
 color: #333;
 border: 1px solid #e0e0e0;
 border-radius: 6px;
 padding: 10px 14px;
 font-size: 14px;
 line-height: 1.5;
 box-shadow: 0 2px 8px rgba(0,0,0,.1);
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
 transition: all .2s ease

} [data-tooltip]::after {

 content: ;
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 border: 6px solid transparent;
 border-top-color: #fff;
 opacity: 0;
 visibility: hidden;
 transition: all .2s ease

} [data-tooltip]:hover::after, [data-tooltip]:hover::before {

 opacity: 1;
 visibility: visible

} @media (max-width:768px) {

 [data-tooltip]::before {
   max-width: 250px;
   left: 0;
   transform: translateX(0)
 }

}

```

- 基础使用这是一个悬停文字。 - 多行提示多行提示 - 带颜色和样式 - 红色警告 - **蓝色重点** - 高亮提示

1. 产品功能说明

1. **智能识别** 📊 2. **快速处理** ⚡ 3. **安全可靠** 🔒 📝 基础Markdown语法速查文字样式 <MARKDOWN>

一级标题
1. 二级标题
  1. 三级标题

- 粗体文字** 或 __粗体__
斜体文字* 或 _斜体_
- - 粗斜体***

~~删除线文字~~ `行内代码` 列表 <MARKDOWN>

1. 无序列表

- 项目一 - 项目二

 - 子项目
 - 子项目

1. 有序列表

1. 第一项 2. 第二项

  1. 子项
  2. 子项

1. 任务列表

- [ ] 未完成任务 - [x] 已完成任务链接与引用 <MARKDOWN>

1. 外部链接

[链接文本](https://example.com)

1. 内部Wiki链接

页面名称页面名称

1. 引用

> 这里是一段引用文字 > > 引用可以多行

1. 脚注

这是一句话[^1]。 [^1]: 这是脚注内容。表格 <MARKDOWN> | 表头1 | 表头2 | 表头3 | |-------|-------|-------| | 内容1 | 内容2 | 内容3 | | 左对齐 | 居中 | 右对齐 | | :--- | :---: | ---: | 代码块 ```语言名称 // 代码示例 function hello() {

 console.log("Hello World!");

} ```

@@ 第1行： / 第1行： @@
-# 关于悬浮提示框注入
+# **Wiki.js 编辑风格提示文档**
-- 将以下代码注入页面-样式中：
+🎯 悬浮提示框使用指南
-`[data-tooltip] {
+先将以下代码注入页面-样式中
+```
+[data-tooltip] {
    position: relative;
    cursor: help;
@@ 第56行： / 第58行： @@
    }
 }
-`
+  ```
-. 简单提示
+- 基础使用
-点击<span data-tooltip="这是一个简单的帮助提示">这里</span>查看详情。
+这是一个<span data-tooltip="这里是悬浮提示内容">悬停文字</span>。
-. 多行提示
+- 多行提示
-<span data-tooltip="第一行：重要提示
+<span data-tooltip="第一行：重要说明
-                    第二行：请注意操作
+第二行：详细解释
-                    第三行：后果自负">多行警告
+第三行：补充信息">多行提示</span>
-</span>
+- 带颜色和样式
-. 带颜色的文字
+- <span data-tooltip="重要提醒" style="color: red;">红色警告</span>
-- <span data-tooltip="重要事项" style="color: red;">红色重要</span>
+- **<span data-tooltip="重点内容" style="color: blue;">蓝色重点</span>**
-- <span data-tooltip="注意事项" style="color: orange;">橙色注意</span>
+- <span data-tooltip="注意细节" style="background: yellow; padding: 2px 4px;">高亮提示</span>
-- <span data-tooltip="完成状态" style="color: green;">绿色完成</span>
+## 产品功能说明
-- <span data-tooltip="链接说明" style="color: blue;">蓝色链接</span>
+. **智能识别** <span data-tooltip="基于AI技术，准确率99%">📊</span>
-. 加粗文字
+. **快速处理** <span data-tooltip="处理速度比传统方法快10倍">⚡</span>
-**<span data-tooltip="加粗的提示内容">重要术语</span>**需要特别注意。
+. **安全可靠** <span data-tooltip="通过ISO 27001安全认证">🔒</span>
-. 颜色+加粗
+📝 基础Markdown语法速查
-**<span data-tooltip="非常重要" style="color: red;">红色加粗警告</span>**
+文字样式
-. 特殊样式组合
+<MARKDOWN>
-<span data-tooltip="特殊说明" style="color: purple; font-size: 16px; font-weight: bold;">紫色大号加粗
+# 一级标题
-</span>
+## 二级标题
+### 三级标题
+**粗体文字** 或 __粗体__
+*斜体文字* 或 _斜体_
+***粗斜体***
+~~删除线文字~~
+`行内代码`
+列表
+<MARKDOWN>
+## 无序列表
+- 项目一
+- 项目二
+  - 子项目
+  - 子项目
+## 有序列表
+. 第一项
+. 第二项
+. 子项
+. 子项
+## 任务列表
+- [ ] 未完成任务
+- [x] 已完成任务
+链接与引用
+<MARKDOWN>
+## 外部链接
+[链接文本](https://example.com)
+## 内部Wiki链接
+[[页面名称]]
+[[显示文本|页面名称]]
+## 引用
+> 这里是一段引用文字
+>
+> 引用可以多行
+## 脚注
+这是一句话[^1]。
+[^1]: 这是脚注内容。
+表格
+<MARKDOWN>
+| 表头1 | 表头2 | 表头3 |
+|-------|-------|-------|
+| 内容1 | 内容2 | 内容3 |
+| 左对齐 | 居中 | 右对齐 |
+| :---  | :---: | ---: |
+代码块
+```语言名称
+// 代码示例
+function hello() {
+  console.log("Hello World!");
+}
+```