查看“︁编辑指南”︁的源代码

# **<center>Wiki.js 编辑风格提示文档</center>**
- 悬浮提示框使用指南
先将以下代码注入页面-样式中
```
[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)
  }
}
  ```
- 基础使用
这是一个<span data-tooltip="这里是悬浮提示内容">悬停文字</span>。
- 多行提示
	<span data-tooltip="第一行：重要说明
第二行：详细解释
第三行：补充信息">多行提示</span>
- 带颜色和样式
<span data-tooltip="重要提醒" style="color: red;">红色警告</span>
**<span data-tooltip="重点内容" style="color: blue;">蓝色重点</span>**
<span data-tooltip="注意细节" style="background: yellow; padding: 2px 4px;">高亮提示</span>


# 📝 基础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!");
}
```
# 视觉语义标记规范
- 核心原则：
  1.语义优先：颜色代表概念类别/阵营归属，尽量统一染色标准。
  2.克制使用：仅用于关键术语、阵营名称、核心概念的首次出现或重点强调，避免滥用。
  
## 色码表
| 分类 | 颜色名称 | 语义指向 | Hex 色码 | Markdown/HTML 示例 |
| :--- | :--- | :--- | :--- | :--- |
| **意识形态与阵营** | | | | |
| 革命与集体 | **赤红色** | 共产主义、社会主义相关概念 | `#C00000` | `<span style="color: #C00000;">社会主义</span>` |
| 资本与民主 | **深蓝色** | 自由主义、共和主义、宪政主义、议会民主派及相关概念 | `#1F4E79` | `<span style="color: #1F4E79;">资本主义</span>` |
| 反动与保守 | **墨绿色** | 保皇党、旧贵族、封建领主、传统主义势力。 | `#2E4D2B` | `<span style="color: #2E4D2B;">传统主义</span>` |
| **宗教与神权** | | | | |
| 泛宗教概念 | **暗金色** | 宗教概念、神灵、普遍性信仰仪式。 | `#B8860B` | `<span style="color: #B8860B;">受膏礼</span>` |
| 圣庭专属 | **绛紫色** | **圣庭**及其相关专属概念、机构、人物、教义。 | `#68228B` | `<span style="color: #68228B;">圣裁官</span>` |
| **地理与政权** | | | | |
| 重要地理区域 | **赭石色** | 具有战略或文化意义的地区、城市、自然奇观。 | `#8B4513` | `<span style="color: #8B4513;">龙脊山脉</span>` |
| 政权/国家实体 | **深灰色** | 中立的政权名称、国家、城邦、政治联盟。 | `#505050` | `<span style="color: #505050;">东部自治联盟</span>` |
| **魔法、科技与灾厄** | | | | |
| 魔法与奥术 | **靛蓝色** | 魔网、法术原理、奥术知识、镜玉（作为魔法载体）。 | `#4B0082` | `<span style="color: #4B0082;">魔网谐振</span>` |
| 科技与工业 | **钢青色** | 科学技术、工业产物、枪械、石油（黑金）、非魔导机械。 | `#4682B4` | `<span style="color: #4682B4;">差分机</span>` |
| 灾厄与异质 | **深紫色** | 三大灾厄（魑魅/古孽、龙族、智械）、深渊、不可名状之物。 | `#800080` | `<span style="color: #800080;">古孽低语</span>` |
| **经济与资源** | | | | |
| 关键资源 | **橄榄色** | 梦盐、镜玉（作为经济资源）、石油等驱动世界经济的核心物资。 | `#6B8E23` | `<span style="color: #6B8E23;">梦盐贸易</span>` |
| **历史与时间** | | | | |
| 历史时期/事件 | **棕色** | 重大历史事件、战争、革命、时代名称。 | `#8B7355` | `<span style="color: #8B7355;">大崩溃</span>` |
| 历法时间 | **茶色** | 独特的纪年、时节、历法单位。 | `#D2B48C` | `<span style="color: #D2B48C;">清霖时节</span>` |