# Puock 主题功能使用指南

本文档详细介绍了 Puock 主题中友情链接和提示框等常用功能的使用方法。

## 目录

- [友情链接功能](#友情链接功能)
  - [启用链接管理器](#启用链接管理器)
  - [添加友情链接](#添加友情链接)
  - [创建友情链接页面](#创建友情链接页面)
  - [首页显示友情链接](#首页显示友情链接)
- [Puock提示框功能](#puock提示框功能)
  - [基础用法](#基础用法)
  - [可用类型](#可用类型)
  - [添加图标](#添加图标)
  - [轮廓样式](#轮廓样式)
- [其他短代码功能](#其他短代码功能)
  - [回复可见](#回复可见)
  - [登录可见](#登录可见)
  - [密码可见](#密码可见)
  - [折叠面板](#折叠面板)
  - [文件下载](#文件下载)
  - [视频播放](#视频播放)
  - [音频播放](#音频播放)
  - [GitHub卡片](#github卡片)

---

## 友情链接功能

友情链接功能基于 WordPress 内置的链接管理器实现，可以帮助你管理和展示网站的友情链接。

### 启用链接管理器

WordPress 在较新版本中默认隐藏了链接管理器功能。如果你在 WordPress 后台左侧菜单中没有看到"链接"选项，需要先启用它：

**方法1：使用插件（推荐）**
1. 在 WordPress 后台进入 `插件` → `安装插件`
2. 搜索 `Link Manager` 或 `Links Manager`
3. 安装并启用插件
4. 刷新页面后，左侧菜单会出现 `链接` 选项

**方法2：添加代码**
在主题的 `functions.php` 文件或使用代码片段插件添加以下代码：

```php
add_filter('pre_option_link_manager_enabled', '__return_true');
```

### 添加友情链接

1. 在 WordPress 后台左侧菜单中点击 `链接` → `添加`
2. 填写链接信息：
   - **名称**：友情链接网站的名称
   - **网址**：友情链接网站的 URL（必填）
   - **描述**：网站的简介描述（可选）
   - **类别**：为链接选择或创建分类（可以创建多个分类来组织链接）
3. 高级选项：
   - **链接图像**：可以设置网站的 Logo 或图标 URL
   - **链接目标**：通常选择 `_blank`（在新窗口打开）
   - **链接关系 (rel)**：可以设置为 `nofollow` 或 `friend`
4. 点击 `添加链接` 按钮保存

**管理链接分类：**
- 点击 `链接` → `链接分类` 可以创建和管理链接分类
- 建议创建如 "推荐链接"、"合作伙伴"、"个人博客" 等分类来组织你的友情链接

### 创建友情链接页面

1. 在 WordPress 后台进入 `页面` → `新建页面`
2. 输入页面标题，如 "友情链接"
3. 在右侧的 `页面属性` → `模板` 下拉菜单中选择 **`友情链接`** 模板
4. 在页面编辑器中可以输入友情链接页面的说明文字（可选）
5. 在页面下方的 `自定义字段` 或 `页面设置` 区域（根据主题版本可能位置不同）：
   - **page_links_id**：选择要显示的链接分类 ID（可多选）
   - **use_theme_link_forward**：是否使用主题的跳转功能（用于统计和保护）
6. 点击 `发布` 按钮

**获取链接分类 ID 的方法：**
1. 进入 `链接` → `链接分类`
2. 鼠标悬停在分类名称上
3. 在浏览器底部状态栏或查看链接地址，可以看到类似 `tag_ID=123` 的 ID 数字
4. 记录下这个 ID 数字，在页面设置中使用

### 首页显示友情链接

如果想在首页或其他位置显示友情链接模块：

1. 进入 Puock 主题设置后台
2. 找到 `首页设置` 或 `全局设置`
3. 查找 `友情链接` 相关设置：
   - **index_link_id**：选择要在首页显示的链接分类 ID
   - **index_link_order**：排序方式（ASC 升序 / DESC 降序）
   - **index_link_order_by**：排序依据（link_id / link_name / link_rating 等）
   - **link_page**：指定友情链接完整页面的 ID（显示"更多链接"按钮）
4. 保存设置

---

## Puock提示框功能

Puock 主题提供了多种样式的提示框短代码，可以在文章或页面中使用。

### 基础用法

在文章编辑器中使用以下格式：

```
[t-类型]这里是提示框的内容[/t-类型]
```

**示例：**

```
[t-primary]这是一个主要提示框[/t-primary]
```

效果：显示一个蓝色背景的提示框

### 可用类型

Puock 主题支持以下 6 种提示框类型：

| 短代码 | 类型 | 颜色 | 适用场景 |
|--------|------|------|----------|
| `[t-primary]` | 主要 | 蓝色 | 一般信息提示 |
| `[t-success]` | 成功 | 绿色 | 成功消息、正面信息 |
| `[t-info]` | 信息 | 浅蓝色 | 补充信息、提示说明 |
| `[t-warning]` | 警告 | 黄色 | 警告信息、注意事项 |
| `[t-danger]` | 危险 | 红色 | 危险警告、错误信息 |
| `[t-dark]` | 深色 | 深灰色 | 次要信息、引用内容 |

**使用示例：**

```
[t-success]操作成功！您的设置已保存。[/t-success]

[t-warning]注意：此操作不可撤销，请谨慎操作。[/t-warning]

[t-danger]错误：文件上传失败，请检查文件大小和格式。[/t-danger]

[t-info]提示：您可以在设置中修改默认选项。[/t-info]
```

### 添加图标

可以在提示框中添加 Font Awesome 图标：

```
[t-primary icon="fa fa-info-circle"]带图标的提示框内容[/t-primary]
```

**常用图标示例：**

```
[t-success icon="fa fa-check-circle"]成功完成任务[/t-success]

[t-warning icon="fa fa-exclamation-triangle"]请注意操作风险[/t-warning]

[t-danger icon="fa fa-times-circle"]发生严重错误[/t-danger]

[t-info icon="fa fa-lightbulb"]这是一个小技巧[/t-info]
```

更多图标可以在 [Font Awesome 官网](https://fontawesome.com/icons) 查找。

### 轮廓样式

使用 `outline="true"` 参数可以启用轮廓样式（边框样式，无背景填充）：

```
[t-primary outline="true"]这是轮廓样式的提示框[/t-primary]
```

**完整示例（带图标和轮廓）：**

```
[t-info outline="true" icon="fa fa-star"]这是一个带星标图标的轮廓提示框[/t-info]
```

---

## 其他短代码功能

Puock 主题还提供了丰富的其他短代码功能：

### 回复可见

在文章中隐藏部分内容，需要读者评论后才能查看：

```
[reply]
这里的内容需要评论后才能查看
支持多行内容
[/reply]
```

### 登录可见

内容仅登录用户可见：

```
[login]
这里的内容仅登录用户可见
[/login]
```

### 登录并验证邮箱可见

内容需要登录且验证过邮箱的用户才能查看：

```
[login_email]
这里的内容需要登录并验证邮箱后才能查看
[/login_email]
```

### 密码可见

使用密码保护内容：

```
[password pass="123456" desc="请输入密码查看隐藏内容"]
这里是需要密码才能查看的内容
[/password]
```

参数说明：
- `pass`：设置密码（必填）
- `desc`：提示文字（可选，默认："此处含有隐藏内容，需要正确输入密码后可见！"）

### 折叠面板

创建可折叠展开的内容：

```
[collapse title="点击展开查看详细内容"]
这里是折叠的内容
可以是很长的文本
[/collapse]
```

### 文件下载

显示文件下载信息框：

```
[download file="软件名称-v1.0.zip" size="25.6MB"]
https://example.com/download/file.zip
[/download]
```

参数说明：
- `file`：文件名
- `size`：文件大小

### 视频播放

嵌入视频播放器：

```
[video url="https://example.com/video.mp4" autoplay="false" pic="https://example.com/poster.jpg"]
```

参数说明：
- `url`：视频地址（必填）
- `autoplay`：是否自动播放（true/false，默认 false）
- `type`：视频类型（auto/hls/flv 等）
- `pic`：视频封面图片
- `ssl`：是否强制使用 HTTPS（true/false）

### 音频播放

嵌入音频播放器：

```
[music]https://example.com/audio.mp3[/music]
```

### GitHub卡片

显示 GitHub 仓库信息卡片：

```
[github]用户名/仓库名[/github]
```

**示例：**

```
[github]Licoy/wordpress-theme-puock[/github]
```

---

## 使用技巧

### 1. 古腾堡编辑器中使用短代码

- 添加一个 `短代码` 区块
- 在区块中输入短代码
- 预览或发布后即可看到效果

### 2. 经典编辑器中使用短代码

- 切换到 `文本` 模式（而非 `可视化` 模式）
- 直接输入短代码
- 切换回 `可视化` 模式预览效果

### 3. 使用 Puock 提示框区块（古腾堡）

如果使用古腾堡编辑器，可以直接搜索并添加 `Puock提示框` 区块：
1. 点击 `+` 添加区块
2. 搜索 `Puock` 或 `提示框`
3. 选择 `Puock提示框` 区块
4. 在区块设置中配置颜色、文本、图标等

### 4. 短代码嵌套

短代码支持嵌套使用：

```
[collapse title="查看更多信息"]
[t-info]这是折叠面板中的提示框[/t-info]
这是一些文字内容
[t-warning]这是警告提示[/t-warning]
[/collapse]
```

### 5. 自定义样式

可以为提示框添加自定义 CSS 类：

```
[t-primary class="my-custom-class"]带自定义样式的提示框[/t-primary]
```

然后在主题的自定义 CSS 中添加样式：

```css
.my-custom-class {
    font-size: 18px;
    border-radius: 10px;
}
```

---

## 常见问题

### Q1: 为什么看不到"链接"菜单？

A: WordPress 在新版本中默认隐藏了链接管理器，需要安装 Link Manager 插件或添加代码启用。详见 [启用链接管理器](#启用链接管理器)。

### Q2: 友情链接页面显示为空白？

A: 检查以下几点：
1. 是否已添加友情链接并设置为可见
2. 页面模板是否选择了"友情链接"
3. 页面的 `page_links_id` 字段是否正确设置了分类 ID
4. 链接分类 ID 是否正确

### Q3: 短代码不起作用，直接显示代码文本？

A: 可能原因：
1. 短代码格式错误（检查方括号和标签名称）
2. 在代码块中使用了短代码（短代码在代码块中不会被解析）
3. 主题或插件冲突（尝试切换到默认主题测试）

### Q4: 提示框样式不对或不显示？

A: 检查：
1. 主题版本是否是最新版
2. 浏览器缓存是否清除
3. 短代码类型名称是否正确（如 `t-primary` 而不是 `t-blue`）

### Q5: 如何获取链接分类的 ID？

A: 进入 `链接` → `链接分类`，鼠标悬停在分类名称上，查看浏览器底部或地址栏中的 `tag_ID=数字`，这个数字就是分类 ID。

---

## 更多帮助

- 主题文档：https://www.licoy.cn/puock-doc.html
- 问题反馈：https://github.com/Licoy/wordpress-theme-puock/issues
- QQ/微信交流群：https://licoy.cn/go/puock-update.php?r=qq_qun

---

**文档版本**: 1.0  
**最后更新**: 2024