指南与更多内容

译自英语

Guide & More Stuff

69

144

高级 JanitorAI 简介设计 · Melancholux 的免费社区指南

REGINA 的工作坊 // 社区资源高级简介手册手机 · 档案 · 开场 · 音频 · 图库 · 控制台 PATCH · 更多
00 // REGINA 的工作坊开始之前的一点说明一份道歉、几点澄清,以及一声感谢。

嗨,亲爱的们。是 Mel。🤍

在分享今天的指南之前,我得为上周事件的处理方式向你道歉。我没有给出人们本可以合理期待的那种回应。我当时既防备又不成熟,我也意识到,在与其它 Janitor 社区的过往分歧中,也发生过类似的行为。

我不打算删除相关内容。同时,如果会引起不适,我也不打算在未来重复那一类内容。喜欢或不喜欢一个话题是一回事;因为话题而攻击真实的人则是另一回事。即使有人明显在试图激怒我们,我们也可以选择不回应。我们不知道自己的话会对他人产生多深的影响,而多一分体贴对我们来说毫无损失。

对于我造成的麻烦,以及花了这么久才发布这些内容,我很抱歉。我最近异常疲惫,白天大部分时间都在睡觉。这不是借口,只是解释我为何沉默。谢谢你的耐心。

现在说点我真心想分享的:我在试验高级 Janitor 简介时学到的所有东西。我希望更多创作者能做出自己喜欢的东西,而不必对这些技巧设卡保密。欢迎回家。🌷

01 // REGINA 的工作坊什么是高级简介?角色描述里的一个小小的主题页面。

你可以用 HTML 搭配 内联 CSS 代替纯文本,打造一个微型界面:仿手机、聊天气泡、开场场景文件、图片画廊、音乐播放器,甚至假应用。本指南包含一个可见的演示,以及紧接其下的可编辑代码。你无需下载任何东西就能从中学习。

两个不同的系统: 创作者个人主页的 CSS 可能影响你的主页及其原生卡片。角色描述中的 HTML 通常最好在每个元素上使用 style="...";全局的 <style> 或 <script> 可能会被剥离。下文描述的 API 变通方法是非官方的,平台更新后可能失效。
02 // REGINA 的工作坊保留预览图机器人的卡片上,第一印象很重要。
中性的预览页头
从简单的段落标记开始。根据我们的经验,这样更可能让第一张图片出现在公开预览中。但这并不能保证适用于每一次 Janitor 更新。

一份甜蜜的新指南来啦!

源代码 — 选择并复制
<p style="text-align:center;">一份甜蜜的新指南来啦!</p>
<p style="text-align:center;"></p>
<p style="text-align:center;"><img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;max-width:100%;height:auto;margin:0 auto;"></p>
03 // REGINA 的工作坊小小手机我们的仿聊天界面:无需 JavaScript。
Clara 尝试 Amen 姿势
手机边框、聊天气泡、照片和状态栏区域。修改文字和图片以匹配你自己的角色。
Clara 🌸
走廊对面

我看到年轻人在做什么叫 Amen 姿势的东西......

  <p style="background:white;border-radius:15px;padding:10px;">请别笑。我已经后悔发这个了。</p>
</div>
源代码 — 选择并复制
<div style="width:268px;max-width:100%;margin:auto;background:#171416;border-radius:42px;padding:9px;">
  <div style="border-radius:34px;overflow:hidden;background:#f9f1ea;font-family:Arial,sans-serif;">
    <div style="padding:12px;text-align:center;background:white;color:#41313a;"><b>Clara 🌸</b><br><small>走廊对面</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">我看到年轻人在做什么叫 Amen 姿势的东西......</p>
      <img src="https://ella.janitorai.com/media-approved/tFa0-Leebkg_pPplQvxBj.webp" style="max-width:100%;height:auto;border-radius:12px;">
      <p style="background:white;border-radius:15px;padding:10px;">请别笑。我已经后悔发这个了。</p>
    </div>
  </div>
</div>
04 // REGINA 的工作坊开场场景一张标题背后带图片的电影感卡片。
带封面图的展开式开场
点击卡片展开场景简报。图片是摘要的背景,而不是一张分离的图片。
01 · 给新邻居的一束花
她只是想欢迎你......
展开场景 ↓
Clara 捧着一小束花敲了敲门,忽然比预想的害羞得多。
源代码 — 选择并复制
<details style="border:1px solid #d3a8b8;border-radius:15px;overflow:hidden;">
  <summary style="cursor:pointer;list-style:none;display:block;background:linear-gradient(transparent,rgba(38,24,35,.88)),url('https://ella.janitorai.com/media-approved/ovh2DAZQGTdr78LhhS9Gw.webp');background-size:cover;background-position:center;padding:42% 18px 20px;text-align:center;color:white;">
    <b>01 · 给新邻居的一束花</b><br>
    <i>她只是想欢迎你......</i><br>
    <small>展开场景 ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Clara 捧着一小束花敲了敲门,忽然比预想的害羞得多。</div>
</details>
没有图片?改用档案吧。
羊皮纸风格的手风琴折叠式设计,即使不重复使用无关的插图,看起来也像是刻意为之。
✦ 文件 IV — 锁着的门
一条毛巾。一条非常不幸的走廊。
展开条目 ↓
这个场景没有图片,于是纸张本身就成了视觉主题。
源代码 — 选择并复制
<details style="border:1px solid #bca47b;background:#f4e7c9;border-radius:13px;color:#4d3926;">
  <summary style="cursor:pointer;list-style:none;padding:18px;font-family:Georgia,serif;">✦ 文件 IV — 锁着的门<br><i>一条毛巾。一条非常不幸的走廊。</i><br><small>展开条目 ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">这个场景没有图片,于是纸张本身就成了视觉主题。</div>
</details>
05 // REGINA 的工作坊音频与文字记录让一条语音留言或虚构场景可以播放。
Erika — 调度录音
直接的 MP3 链接 + 原生 HTML 播放器 + 可选的文字记录。别指望能自动播放。
☎ 911 调度档案

虚构录音 · 184 天后

调度员: 911,您有什么紧急情况?

ERIKA: 请......打给 {{user}}。

源代码 — 选择并复制
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ 911 调度档案</b>
  <p>虚构录音 · 184 天后</p>
  <audio controls preload="metadata" style="width:100%;">
    <source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
  </audio>
  <p><b>调度员:</b> 911,您有什么紧急情况?</p>
  <p><b>ERIKA:</b> 请......打给 {{user}}。</p>
</div>
06 // REGINA 的工作坊图片画廊与社区链接把不同方向的图片分开,并做成真正可点击的卡片。
滚动图片条
当你同时拥有竖版和横版格式时,把它们分别放在各自的区块里。
源代码 — 选择并复制
<div style="display:flex;overflow-x:auto;gap:12px;padding:10px;">
  <img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
  <img src="https://ella.janitorai.com/media-approved/eEY7icr8-9ZhuhcKNd3KC.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
</div>
把 Discord 横幅做成按钮
使用真正的 href。整张横幅就是可点击区域。
REGINA 的巢穴
加入社区 ↗
源代码 — 选择并复制
<a href="https://discord.gg/Uvz7TG5ceJ" style="display:block;text-decoration:none;background:linear-gradient(transparent,rgba(21,17,28,.90)),url('https://ella.janitorai.com/media-approved/8OpbhA9D9TkCTKK-W31wG.webp');background-size:cover;background-position:center;padding:31% 12px 20px;text-align:center;border-radius:14px;color:white;"><b>REGINA 的巢穴</b><br><small>加入社区 ↗</small></a>
07 // REGINA 的工作坊动画:哪些真正有效一个对个人主页 CSS 很重要的区别。

一些创作者使用动画个人主页效果、CSS 标签页、悬停过渡和滚动画廊。这个示例展示了一个带有减少动态效果支持的轻柔浮动贴纸。请把这段 CSS 放进 个人主页 CSS/HTML 区域,而不要以为它在角色简介里也能用。

<style>
/* 用于个人主页 CSS,不是角色简介 */
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.my-profile-sticker { display:inline-block;animation:gentleFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .my-profile-sticker { animation:none; } }
</style>
<span class="my-profile-sticker">🌸 欢迎回家!</span>
08 // REGINA 的工作坊我们的控制台 PATCH 方法如何运作写给想尝试高级描述创作的创作者们。

1. 创建或打开一个你拥有的角色,最好是一个未发布的测试机器人。2. 备份它当前的描述。3. 制作你的 HTML 页面。4. 在角色 URL 中找到 UUID。5. 在本地获取你自己的访问令牌。6. 使用包含压缩 HTML 描述的 PATCH 脚本。7. 重新加载并检查公开页面,包括桌面端和移动端。

重要: 访问令牌是登录凭证,不是公开代码。只有在登录你自己的账户时才能获取它。不要把它发给其他创作者、粘进截图里,或发布在机器人中。下面的代码只读取你本地的 Janitor cookies,并把令牌复制到你自己的剪贴板;它不会联系任何第三方服务器。浏览器或 cookie 的变化可能会让它失效。
步骤 A — 你自己的令牌

在桌面端登录 Janitor,打开 DevTools → Console,在本地运行这段代码,然后妥善保管复制到的值。

(async () => {
  const getCookie = n => {
    const p = ("; " + document.cookie).split("; " + n + "=");
    return p.length === 2 ? p.pop().split(";").shift() : null;
  };
  const m = document.cookie.match(/(?:^|;\s*)(sb-[^=]+-auth-token)(?:\.\d+)?=/);
  const base = m ? m[1] : "sb-auth-auth-token";
  let raw = getCookie(base);
  if (!raw) {
    const chunks = [];
    for (let i = 0; ; i++) {
      const c = getCookie(base + "." + i);
      if (c === null) break;
      chunks.push(c);
    }
    raw = chunks.join("");
  }
  if (!raw) throw new Error("未找到 Janitor 会话。");
  let json;
  if (raw.startsWith("base64-")) {
    let b64 = raw.slice(7).replace(/-/g, "+").replace(/_/g, "/");
    while (b64.length % 4) b64 += "=";
    json = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
  } else { json = decodeURIComponent(raw); }
  const token = JSON.parse(json)?.access_token;
  if (!token) throw new Error("未找到 access_token。");
  copy(token);
  console.log("✅ 你自己的访问令牌已在本地复制。");
})();
步骤 B — PATCH 格式

这是我们使用的 API 请求外壳。替换角色 UUID、你的私有令牌和压缩后的 HTML 载荷。载荷是你完整 HTML 的 gzip → base64 表示,通常在本地或由代码工具生成。

(async()=>{
const CHARACTER_ID="YOUR_CHARACTER_UUID";
const ACCESS_TOKEN="YOUR_PRIVATE_ACCESS_TOKEN";
const bin=Uint8Array.from(atob("YOUR_GZIP_BASE64_HTML"),c=>c.charCodeAt(0));
const ds=new DecompressionStream("gzip");
const description=await new Response(new Blob([bin]).stream().pipeThrough(ds)).text();
const r=await fetch("https://janitorai.com/mb/characters/"+CHARACTER_ID,{
  method:"PATCH",credentials:"include",
  headers:{"content-type":"application/json","authorization":"Bearer "+ACCESS_TOKEN},
  body:JSON.stringify({description})
});
console.log("HTTP STATUS:",r.status);console.log("RESPONSE:",await r.text());
})();
永远不要盲目运行陌生人给的脚本。阅读它的目标 URL,并确认它只更新你自己的角色。这是一种非官方方法,并不代表兼容性保证,也不是绕过未来安全限制的许可。
09 // REGINA 的工作坊用于寻找灵感的元素拾取器在公开页面上点击一个元素,以检视它渲染后的 HTML。

想了解一张卡片、一个文本框或一种布局是如何构建的?在公开角色页面上,打开 DevTools 并运行这个拾取器。悬停在可见元素上,点击以复制它的 outerHTML,或按 Escape 取消。这有助于研究结构;计算样式、私有数据和脚本生成的行为不包含在内。

(() => {
  let current = null;
  const mark = e => {
    if (current) current.style.outline = "";
    current = e.target;
    current.style.outline = "3px solid #ff8db1";
  };
  const stop = () => {
    document.removeEventListener("mouseover", mark, true);
    document.removeEventListener("click", pick, true);
    document.removeEventListener("keydown", key, true);
    if (current) current.style.outline = "";
  };
  const key = e => { if (e.key === "Escape") { stop(); console.log("拾取器已取消。"); } };
  const pick = async e => {
    e.preventDefault(); e.stopImmediatePropagation();
    const element = e.target;
    stop();
    const html = element.outerHTML;
    try { await navigator.clipboard.writeText(html); console.log("HTML 已复制。"); }
    catch { copy(html); console.log("已使用 DevTools 复制 HTML。"); }
  };
  document.addEventListener("mouseover", mark, true);
  document.addEventListener("click", pick, true);
  document.addEventListener("keydown", key, true);
  console.log("悬停并点击一个元素以复制它渲染后的 HTML。ESC 取消。");
})();
把其他创作者的作品当作学习参考;在适当的情况下署名。不要把他们的具体设计或美术作品当作自己的重新发布。另外,复制来的元素可能需要外部样式才能看起来完全一致。
10 // REGINA 的工作坊我吃过苦头才学到的事发布前的实用检查清单。
✓ 卡片预览使用一个中性的首段和一张真实的图片。
✓ 优先使用 <div>、<span>、<img>、<a>、<details> 和 <summary>。
✓ 角色描述中的样式保持内联。
✓ 避免过大的固定宽度;检查移动端的可读性。
✓ 把竖版和横版照片分开。
✓ 给每个机器人它自己的视觉语言,而不是给同一个模板换个颜色。
✓ 使用真正的链接,而不是假的按钮。
✓ 尽可能使用 <audio controls> 和无障碍的文字记录。
✓ 实验前备份之前的简介。
✓ 保留像 {{user}} 这样的占位符。
✓ 永远不要把你在用的访问令牌放进公开描述里。
做一些能体现你角色感觉的东西。一本课堂笔记本、一部小小的手机、一份案件档案、一本魔法书——任何属于他们故事的东西。更多来自 MELANCHOLUX 的内容 ↗保持毛茸茸的,亲爱的们。—— Mel & Regina 🌸🤍

已创建 10月21日

已更新 10月21日

已发布 10月21日

已发布聊天