创作指南
谜题创作规范与最佳实践;登录即可投稿,公开前需经平台审核
谜题内容格式
谜题内容支持 HTML 格式,你可以使用丰富的多媒体元素来创作引人入胜的谜题。以下是支持的格式及其展示效果:
基础文本标签
用于排版和组织文字内容
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>一级标题
二级标题
三级标题
<p>这是一个段落</p><strong>加粗文字</strong><em>斜体文字</em><u>下划线文字</u><s>删除线文字</s>这是一个段落
加粗文字 · 斜体文字 · 下划线文字 · 删除线文字
<blockquote>引用文本</blockquote>引用文本,常用于强调或引述
<ul><li>无序列表项1</li> <li>无序列表项2</li></ul><ol><li>有序列表项1</li> <li>有序列表项2</li></ol>- 无序列表项1
- 无序列表项2
- 有序列表项1
- 有序列表项2
图片嵌入
使用 img 标签嵌入图片,支持 GIF/PNG/JPG/SVG/WebP 等格式
<img src="图片URL" alt="描述" /><!-- 建议添加最大宽度 --><img src="..." style="max-width: 100%;" />示例:400×200 的随机图片
- 使用
max-width: 100%确保图片在移动端自适应 - 单张图片建议不超过 2MB,可使用图床服务
- 添加 alt 属性,提升无障碍访问体验
视频嵌入
支持直接视频链接和平台嵌入两种方式
方式一:直接视频链接
<video src="视频URL" controls width="100%"> 您的浏览器不支持视频播放</video>方式二:B站视频嵌入
<iframe src="//player.bilibili.com/player.html?bvid=BV号" width="100%" height="500" allowfullscreen></iframe>B站视频页面 → 分享 → 嵌入代码 → 复制 iframe
表格数据
使用 table 展示结构化数据,适合谜题中的数据表、密码表等
<table> <thead><tr><th>列1</th><th>列2</th></tr></thead> <tbody> <tr><td>数据1</td><td>数据2</td></tr> </tbody></table>| 符号 | 含义 | 章节 |
|---|---|---|
| Δ | 变化 | 第三章 |
| Ω | 终结 | 最终章 |
| Σ | 总和 | 附录 |
链接与跳转
添加可点击的链接,引导玩家访问外部资源
代码展示
展示代码片段,适合编程类谜题
<pre><code>多行代码块</code></pre><code>行内代码</code>function decode(secret) {
return secret.split('').reverse().join('');
}行内代码示例:console.log('Hello');
内联样式
使用 style 属性美化内容外观
<span style="color: #00ffff;">彩色文字</span><span style="background: #1a1a2e; padding: 10px;">背景块</span><span style="border: 1px solid #0ff; padding: 5px;">边框</span><span style="font-size: 24px;">大号文字</span>彩色文字 · 背景块 · 边框 · 大号
链接主题颜色
题面展示时,平台会在外层容器注入当前主题配色。用 CSS 变量代替写死的色值,Hunt 换肤或站点切换主题后,HTML 装饰会自动跟上。
适用场景
- Hunt 题目:优先使用 --hunt-* 变量(来自 Hunt 视觉主题设置)
- 独立谜题:使用 --primary-color、--text-primary 等站点主题变量
写法
在 HTML 模式中加入 <style> 块,用 class 引用变量。内联 style 属性目前只支持固定色值(如 #00ffff),不能直接写 var(...)。
<style> .puzzle-accent { color: var(--hunt-primary, var(--primary-color)); } .puzzle-card { background: var(--hunt-surface, var(--bg-card)); border: 1px solid var(--hunt-border, var(--border-color)); padding: 12px; border-radius: 8px; }</style><p class="puzzle-accent">强调文字</p><div class="puzzle-card">卡片块</div>强调文字
常用变量
| CSS 变量 | 独立谜题兜底 | 用途 |
|---|---|---|
--hunt-primary | --primary-color | 主色、强调、链接 |
--hunt-accent | --secondary-color | 辅助色、渐变点缀 |
--hunt-text | --text-primary | 正文颜色 |
--hunt-muted | --text-secondary | 次要说明文字 |
--hunt-surface | --bg-card | 卡片 / 块背景 |
--hunt-border | --border-color | 边框 / 分隔线 |
- 写 var(--hunt-primary, var(--primary-color)) 这种带兜底的写法,同一份 HTML 在 Hunt 与独立谜题页都能用
- 编辑器预览与玩家端共用同一套变量,可在 Hunt 里改主题色后立即预览效果
- 固定色值适合刻意隐藏信息(如与背景同色);需要随主题变化时用 CSS 变量
交互题(高级模式)
除 HTML 题面外,可在高级模式将正文载体切换为交互题(iframe)。交互题包需先上传至创作者资源库,再在编辑器中引用。
- 打开「创作者中心 → 资源库」,点击「上传文件」上传 ZIP 或单页 HTML(交互包最大 15MB,图片最大 10MB)。
- 在谜题编辑器切换到高级模式,将正文载体设为「交互题(iframe)」。
- 点击「从资源库选择交互题包」,选中已上传的包;题面将写入 asset:资源ID。也可直接填写 HTTPS URL。
- 使用编辑器「预览」或在资源库点击文件卡片,在沙盒 iframe 中试玩交互题。
- 剧情题不支持交互题载体。
- 交互包勿内置答案或未购提示正文;可使用 /hunt-sandbox-sdk.js 与父页面通信。
- ZIP 包根目录应包含 index.html,以便平台正确加载。
安全限制
- 不支持
<script>标签(防止 XSS 攻击) - 不支持
onclick、onload等事件属性 - 不支持
<iframe>嵌入非白名单域名(仅允许视频平台) - 图片/视频建议使用 HTTPS 链接
答案设置规范
最终答案
每个谜题必须有且只有一个正确答案,这是玩家最终需要找到的目标。
42 或 李白的静夜思中间答案
可以设置中间答案作为阶段性验证,引导玩家继续探索。
阶段1: 密码是123 → 提示:正确!请继续...最终答案 → 提示:恭喜过关!答案格式
- 答案长度限制:最大 500 字符
- 答案验证:不区分大小写,首尾空格会被忽略
- 建议使用简洁明确的答案,避免歧义
提示信息
每个答案可以设置提示信息,当玩家提交错误时显示。
再仔细看看图片的右下角...好的提示,引导性强答案错误过于简单,没有引导性- 避免过于简单的答案,如「是」、「不是」、「不知道」
- 在谜题中说明答案格式,如「答案为纯数字」、「答案为四个字」
- 发布前多次测试答案的正确性
创作最佳实践
🎯 明确的主题
好的谜题应该有清晰的主题和目标,让玩家知道他们在寻找什么。
📖 风味文本
使用风味文本为谜题增添故事背景和氛围,让玩家更有代入感。在谜题编辑器中,风味文案位于作者行与题面正文之间(约三行,可自动增高);Hunt 赛事表格内仍可在行内快速编辑。
🚫 避免常见错误
- 歧义:答案应该唯一确定,不要有多种合理解释
- 外部依赖:谜题应能独立完成,不依赖特定时间地点
- 技术门槛:除非明确说明,否则不应需要编程技能
- 过时内容:链接、图片等资源应长期有效
独立题 · 答案规范化
在编辑器「题目设置」中可配置五项比对规则(大小写、空格、标点、简繁、全半角),与 Puzzlehunt「答案与判题」中的比对规则一致。独立题不支持 Answer Gate 或题目解锁;答对/答错提示在「判题文案」,答错冷却在「答错冷却」(无限制或固定分钟,无 Hunt 级递增策略)。