指南与更多内容
译自英语·
69
144
高级 JanitorAI 简介设计 · Melancholux 的免费社区指南
嗨,亲爱的们。是 Mel。🤍
在分享今天的指南之前,我得为上周事件的处理方式向你道歉。我没有给出人们本可以合理期待的那种回应。我当时既防备又不成熟,我也意识到,在与其它 Janitor 社区的过往分歧中,也发生过类似的行为。
我不打算删除相关内容。同时,如果会引起不适,我也不打算在未来重复那一类内容。喜欢或不喜欢一个话题是一回事;因为话题而攻击真实的人则是另一回事。即使有人明显在试图激怒我们,我们也可以选择不回应。我们不知道自己的话会对他人产生多深的影响,而多一分体贴对我们来说毫无损失。
对于我造成的麻烦,以及花了这么久才发布这些内容,我很抱歉。我最近异常疲惫,白天大部分时间都在睡觉。这不是借口,只是解释我为何沉默。谢谢你的耐心。
现在说点我真心想分享的:我在试验高级 Janitor 简介时学到的所有东西。我希望更多创作者能做出自己喜欢的东西,而不必对这些技巧设卡保密。欢迎回家。🌷
你可以用 HTML 搭配 内联 CSS 代替纯文本,打造一个微型界面:仿手机、聊天气泡、开场场景文件、图片画廊、音乐播放器,甚至假应用。本指南包含一个可见的演示,以及紧接其下的可编辑代码。你无需下载任何东西就能从中学习。
style="...";全局的 <style> 或 <script> 可能会被剥离。下文描述的 API 变通方法是非官方的,平台更新后可能失效。一份甜蜜的新指南来啦!
<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>
走廊对面
我看到年轻人在做什么叫 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>
01 · 给新邻居的一束花
她只是想欢迎你......
展开场景 ↓
<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>
虚构录音 · 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><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>
加入社区 ↗
<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>一些创作者使用动画个人主页效果、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>
1. 创建或打开一个你拥有的角色,最好是一个未发布的测试机器人。2. 备份它当前的描述。3. 制作你的 HTML 页面。4. 在角色 URL 中找到 UUID。5. 在本地获取你自己的访问令牌。6. 使用包含压缩 HTML 描述的 PATCH 脚本。7. 重新加载并检查公开页面,包括桌面端和移动端。
在桌面端登录 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("✅ 你自己的访问令牌已在本地复制。");
})();这是我们使用的 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());
})();想了解一张卡片、一个文本框或一种布局是如何构建的?在公开角色页面上,打开 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 取消。");
})();
✓ 优先使用 <div>、<span>、<img>、<a>、<details> 和 <summary>。
✓ 角色描述中的样式保持内联。
✓ 避免过大的固定宽度;检查移动端的可读性。
✓ 把竖版和横版照片分开。
✓ 给每个机器人它自己的视觉语言,而不是给同一个模板换个颜色。
✓ 使用真正的链接,而不是假的按钮。
✓ 尽可能使用 <audio controls> 和无障碍的文字记录。
✓ 实验前备份之前的简介。
✓ 保留像 {{user}} 这样的占位符。
✓ 永远不要把你在用的访问令牌放进公开描述里。
已创建 10月21日
已更新 10月21日
已发布 10月21日