编辑指南:修订间差异
更多操作
wiki-js>Cyanidion import from wiki.js: updated row=87 (content = post-action snapshot) |
wiki-js>Cyanidion import from wiki.js: updated row=88 (content = post-action snapshot) |
||
| 第1行: | 第1行: | ||
# **Wiki.js 编辑风格提示文档** | # **<center>Wiki.js 编辑风格提示文档</center>** | ||
🎯 悬浮提示框使用指南 | 🎯 悬浮提示框使用指南 | ||
先将以下代码注入页面-样式中 | 先将以下代码注入页面-样式中 | ||
| 第73行: | 第73行: | ||
2. **快速处理** <span data-tooltip="处理速度比传统方法快10倍">⚡</span> | 2. **快速处理** <span data-tooltip="处理速度比传统方法快10倍">⚡</span> | ||
3. **安全可靠** <span data-tooltip="通过ISO 27001安全认证">🔒</span> | 3. **安全可靠** <span data-tooltip="通过ISO 27001安全认证">🔒</span> | ||
📝 基础Markdown语法速查 | |||
## 📝 基础Markdown语法速查 | |||
文字样式 | 文字样式 | ||
<MARKDOWN> | <MARKDOWN> | ||
| 第96行: | 第97行: | ||
1. 子项 | 1. 子项 | ||
2. 子项 | 2. 子项 | ||
链接与引用 | 链接与引用 | ||
<MARKDOWN> | <MARKDOWN> | ||
| 第113行: | 第111行: | ||
这是一句话[^1]。 | 这是一句话[^1]。 | ||
[^1]: 这是脚注内容。 | [^1]: 这是脚注内容。 | ||
表格 | ## 表格 | ||
<MARKDOWN> | <MARKDOWN> | ||
| 表头1 | 表头2 | 表头3 | | | 表头1 | 表头2 | 表头3 | | ||
|-------|-------|-------| | |-------|-------|-------| | ||
| 第120行: | 第119行: | ||
| 左对齐 | 居中 | 右对齐 | | | 左对齐 | 居中 | 右对齐 | | ||
| :--- | :---: | ---: | | | :--- | :---: | ---: | | ||
代码块 | |||
## 代码块 | |||
```语言名称 | ```语言名称 | ||
// 代码示例 | // 代码示例 | ||
| 第127行: | 第127行: | ||
} | } | ||
``` | ``` | ||
# 常用文字颜色及代码 | |||
<font color=#8B000>深红色</font>:#8B0000 | |||
红色: #ff0000 或 red | |||
蓝色: #0000ff 或 blue | |||
绿色: #008000 或 green | |||
黄色: #ffff00 或 yellow | |||
紫色: #800080 或 purple | |||
橙色: #ffa500 或 orange | |||
灰色: #808080 或 gray | |||
2026年4月6日 (一) 08:20的版本
- **
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. **智能识别** 📊 2. **快速处理** ⚡ 3. **安全可靠** 🔒
- 📝 基础Markdown语法速查
文字样式 <MARKDOWN>
- 一级标题
- 二级标题
- 三级标题
- 二级标题
- 粗体文字** 或 __粗体__
- 斜体文字* 或 _斜体_
- 粗斜体***
~~删除线文字~~ `行内代码` 列表 <MARKDOWN>
- 无序列表
- 项目一 - 项目二
- 子项目 - 子项目
- 有序列表
1. 第一项 2. 第二项
1. 子项 2. 子项
链接与引用 <MARKDOWN>
- 外部链接
[链接文本](https://example.com)
- 内部Wiki链接
- 引用
> 这里是一段引用文字 > > 引用可以多行
- 脚注
这是一句话[^1]。 [^1]: 这是脚注内容。
- 表格
<MARKDOWN>
| 表头1 | 表头2 | 表头3 | |-------|-------|-------| | 内容1 | 内容2 | 内容3 | | 左对齐 | 居中 | 右对齐 | | :--- | :---: | ---: |
- 代码块
```语言名称 // 代码示例 function hello() {
console.log("Hello World!");
} ```
- 常用文字颜色及代码
深红色:#8B0000 红色: #ff0000 或 red 蓝色: #0000ff 或 blue 绿色: #008000 或 green 黄色: #ffff00 或 yellow 紫色: #800080 或 purple 橙色: #ffa500 或 orange 灰色: #808080 或 gray