Ceļvedis un citas lietas

Tulkots no angļu valodas

144

Uzlabots JanitorAI biogrāfijas dizains · Melancholux bezmaksas kopienas ceļvedis

REGĪNAS DARBNĪCA // KOPIENAS RESURSSUzlabotās biogrāfijas rokasgrāmataTālruņi · Arhīvi · Ievadi · Audio · Galerijas · Konsole PATCH · Vairāk

00 // REGĪNAS DARBNĪCAPiezīme pirms sākumaAtvainošanās, daži precizējumi un paldies.

Sveiki, dārgumiņi. Te Mel. 🤍

Pirms dalos ar šodienas ceļvedi, man jāatvainojas par to, kā es risināju pagājušās nedēļas notikumus. Es nedeju tādu atbildi, kādu cilvēki pamatoti varēja no manis sagaidīt. Es biju aizsardzības pozā un bērnišķīga, un atzīstu, ka līdzīga uzvedība ir bijusi arī iepriekšējos strīdos ar citām Janitor kopienām.

Es neplānoju dzēst attiecīgo saturu. Tajā pašā laikā es nevēlos nākotnē atkārtot tieši šāda veida saturu, ja tas rada diskomfortu. Patikt vai nepatikt kādai tēmai ir viena lieta; vērsties pret konkrētiem cilvēkiem tās dēļ ir cita. Pat ja kāds acīmredzami cenšas mūs izprovocēt, mēs varam izvēlēties neatbildēt. Mēs nezinām, cik dziļi mūsu vārdi var ietekmēt kādu citu, un nedaudz uzmanības mums neko nemaksā.

Es atvainojos par sagādātajām nepatikšanām un par to, ka tik ilgi gaidīju ar šo ierakstu. Pēdējā laikā esmu neparasti izsmelta un lielu dienas daļu esmu nogulējusi. Tas nav attaisnojums, tikai paskaidrojums, kāpēc klusēju. Paldies par jūsu pacietību.

Tagad kaut kas, ar ko tiešām gribu dalīties: viss, ko esmu iemācījusies, eksperimentējot ar uzlabotajām Janitor biogrāfijām. Es gribu, lai vairāk autoru varētu veidot lietas, kas viņiem patīk, nenoturot šīs tehnikas aiz slēgtām durvīm. Laipni lūdzam mājās. 🌷

01 // REGĪNAS DARBNĪCAKas ir uzlabotā biogrāfija?Maza tematiska lapa rakstura apraksta iekšienē.

Vienkārša teksta vietā jūs varat apvienot HTML ar iekļauto CSS, lai izveidotu miniatūru saskarni: viltus tālruņus, tērzēšanas burbuļus, ievada ainu failus, attēlu galerijas, mūzikas atskaņotājus un pat viltus lietotnes. Šajā ceļvedī ir redzama demonstrācija un tieši zem tās — rediģējams kods. Lai no tā mācītos, jums nekas nav jālejupielādē.

Divas dažādas sistēmas: Autorprofila CSS var ietekmēt jūsu profilu un tā vietējās kartītes. Rakstura apraksta HTML parasti vislabāk darbojas ar style="..." katram elementam; globāls <style> vai <script> var tikt izgriezts. Tālāk aprakstītais API apiešanas paņēmiens ir neoficiāls un var pārstāt darboties pēc platformas izmaiņām.

02 // REGĪNAS DARBNĪCASaglabājiet priekšskatījuma attēluPirmais iespaids uz bota kartītēm ir svarīgs.

Neitrālā priekšskatījuma galvene

Sāciet ar vienkāršu rindkopas marķējumu. Mūsu pieredzē tas palielina iespēju, ka pirmais attēls parādīsies publiskajā priekšskatījumā. Tas nav garantēts katrā Janitor atjauninājumā.

Jauns jauks ceļvedis ir klāt!

PIRMKODS — ATLASĪT UN KOPĒT

<p style="text-align:center;">Jauns jauks ceļvedis ir klāt!</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 // REGĪNAS DARBNĪCAMazais tālrunisMūsu viltus tērzēšanas saskarne: JavaScript nav nepieciešams.

Klara izmēģina Amen pozu

Tālruņa rāmis, tērzēšanas burbuļi, foto un statusa zona. Mainiet tekstu un attēlus, lai tie atbilstu jūsu pašu raksturam.

Klara 🌸
pāri gaitenim

Es redzēju jauniešus darām kaut ko tādu, ko sauc par Amen pozu...

  <p style="background:white;border-radius:15px;padding:10px;">Lūdzu, nesmejies. Es jau nožēloju, ka to nosūtīju.</p>
</div>

PIRMKODS — ATLASĪT UN KOPĒT

<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>Klara 🌸</b><br><small>pāri gaitenim</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">Es redzēju jauniešus darām kaut ko tādu, ko sauc par Amen pozu...</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;">Lūdzu, nesmejies. Es jau nožēloju, ka to nosūtīju.</p>
    </div>
  </div>
</div>

04 // REGĪNAS DARBNĪCAIevada scenārijiKinematogrāfiska kartīte ar attēlu aiz virsraksta.

Izvēršams ievads ar vāka mākslu

Noklikšķiniet uz kartītes, lai atklātu scenārija kopsavilkumu. Attēls ir kopsavilkuma fons, nevis atsevišķs attēls.

01 · Pušķis jaunajai kaimiņienei
Viņa tikai gribēja tevi sveikt...
ATVĒRT AINU ↓

Klara klauvē ar mazu pušķi, pēkšņi daudz kautrīgāka, nekā gaidīts.

PIRMKODS — ATLASĪT UN KOPĒT

<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 · Pušķis jaunajai kaimiņienei</b><br>
    <i>Viņa tikai gribēja tevi sveikt...</i><br>
    <small>ATVĒRT AINU ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Klara klauvē ar mazu pušķi, pēkšņi daudz kautrīgāka, nekā gaidīts.</div>
</details>

Nav attēla? Izmantojiet arhīvu.

Pergamenta stila akordeons var izskatīties tīši, neizmantojot nesaistītu mākslu.

✦ FAILS IV — Aizslēgtās durvis
Viens dvielis. Viens ļoti neveiksmīgs gaitenis.
ATVĒRT IERAKSTU ↓

Ainai nav attēla, tāpēc papīrs pats kļūst par vizuālo tēmu.

PIRMKODS — ATLASĪT UN KOPĒT

<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;">✦ FAILS IV — Aizslēgtās durvis<br><i>Viens dvielis. Viens ļoti neveiksmīgs gaitenis.</i><br><small>ATVĒRT IERAKSTU ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">Ainai nav attēla, tāpēc papīrs pats kļūst par vizuālo tēmu.</div>
</details>

05 // REGĪNAS DARBNĪCAAudio un transkriptiPadariet balss ziņojumu vai izdomātu ainu atskaņojamu.

Erika — dispečera ieraksts

Tieša MP3 saite + vietējais HTML atskaņotājs + neobligāts rakstisks transkripts. Nepaļaujieties uz automātisko atskaņošanu.

☎ 911 DISPEČERA ARHĪVS

Izdomāts ieraksts · 184 dienas vēlāk

DISPEČERS: 911, kāda ir jūsu ārkārtas situācija?

ERIKA: Lūdzu... zvaniet {{user}}.

PIRMKODS — ATLASĪT UN KOPĒT

<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ 911 DISPEČERA ARHĪVS</b>
  <p>Izdomāts ieraksts · 184 dienas vēlāk</p>
  <audio controls preload="metadata" style="width:100%;">
    <source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
  </audio>
  <p><b>DISPEČERS:</b> 911, kāda ir jūsu ārkārtas situācija?</p>
  <p><b>ERIKA:</b> Lūdzu... zvaniet {{user}}.</p>
</div>

06 // REGĪNAS DARBNĪCAAttēlu galerijas un kopienas saitesSaglabājiet atšķirīgas attēlu orientācijas un veidojiet īstas noklikšķināmas kartītes.

Ritinoša attēlu josla

Turiet portretu un ainavas galerijas savās atsevišķās sadaļās, ja jums ir abi formāti.

PIRMKODS — ATLASĪT UN KOPĒT

<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 baneris kā poga

Izmantojiet īstu href. Viss baneris ir noklikšķināmā virsma.

REGĪNAS MIDZENS
PIEVIENOJIES KOPIENAI ↗

PIRMKODS — ATLASĪT UN KOPĒT

<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>REGĪNAS MIDZENS</b><br><small>PIEVIENOJIES KOPIENAI ↗</small></a>

07 // REGĪNAS DARBNĪCAAnimācijas: kas patiešām darbojasAtšķirība, kas svarīga profila CSS.

Daži autori izmanto animētus profila efektus, CSS cilnes, pārvietošanās pārejas un ritinošas galerijas. Šis piemērs parāda maigu peldošu uzlīmi ar samazinātas kustības atbalstu. Ievietojiet šo CSS profila CSS/HTML apgabalā, nevis pieņemiet, ka tas darbosies rakstura biogrāfijas iekšienē.

<style>
/* PROFILA CSS, NEVIS RAKSTURA BIOGRĀFIJA */
@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">🌸 Laipni lūdzam mājās!</span>

08 // REGĪNAS DARBNĪCAKā darbojas mūsu konsoles PATCH metodeAutoriem, kuri vēlas eksperimentēt ar uzlabotiem aprakstiem.

1. Izveidojiet vai atveriet raksturu, kas pieder jums, vēlams nepublicētu testa botu. 2. Dublējiet tā pašreizējo aprakstu. 3. Izveidojiet savu HTML lapu. 4. Atrodiet UUID rakstura URL. 5. Iegūstiet savu piekļuves pilnvaru lokāli. 6. Izmantojiet PATCH skriptu, kas ietver saspiesto HTML aprakstu. 7. Pārlādējiet un pārbaudiet publisko lapu datorā un mobilajā ierīcē.

Svarīgi: Piekļuves pilnvara ir pieteikšanās akreditācijas dati, nevis publisks kods. Iegūstiet to tikai tad, kad esat pieteicies savā kontā. Nesūtiet to citam autoram, neielīmējiet to ekrānuzņēmumos un nepublicējiet to bota iekšienē. Tālāk esošais kods tikai nolasa jūsu vietējos Janitor sīkfailus un kopē pilnvaru jūsu paša starpliktuvē; tas nesazinās ar nevienu trešās puses serveri. Pārlūka vai sīkfailu izmaiņas var liegt tam darboties.

SOLIS A — JŪSU PAŠA PILNVARA

Piesakieties Janitor datorā, atveriet DevTools → Console, palaidiet šo lokāli, pēc tam glabājiet nokopēto vērtību privāti.

(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("Nav atrasta Janitor sesija.");
  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("Nav atrasts access_token.");
  copy(token);
  console.log("✅ Jūsu paša piekļuves pilnvara tika nokopēta lokāli.");
})();

SOLIS B — PATCH FORMA

Šis ir API pieprasījuma apvalks, ko mēs izmantojam. Aizstājiet rakstura UUID, savu privāto pilnvaru un saspiesto HTML datu kopu. Datu kopa ir jūsu pilnā HTML gzip → base64 attēlojums, ko parasti ģenerē lokāli vai ar koda rīku.

(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());
})();

Nekad nepalieciet akli skriptu, ko iedevis svešinieks. Izlasiet tā galamērķa URL un pārbaudiet, vai tas atjaunina tikai jūsu paša raksturu. Šī ir neoficiāla metode, nevis solījums par saderību vai atļauja apiet turpmākos drošības ierobežojumus.

09 // REGĪNAS DARBNĪCAElementu izvēlētājs iedvesmaiNoklikšķiniet uz elementa publiskā lapā, lai pārbaudītu tā renderēto HTML.

Vēlaties uzzināt, kā tika veidota kartīte, teksta lodziņš vai izkārtojums? Publiskā rakstura lapā atveriet DevTools un palaidiet izvēlētāju. Virziet kursoru pār redzamu elementu, noklikšķiniet, lai nokopētu tā outerHTML, vai nospiediet Escape, lai atceltu. Tas palīdz pētīt struktūru; aprēķinātie stili, privātie dati un skriptu ģenerētā uzvedība netiek iekļauta.

(() => {
  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("Izvēlētājs atcelts."); } };
  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 nokopēts."); }
    catch { copy(html); console.log("HTML nokopēts, izmantojot DevTools."); }
  };
  document.addEventListener("mouseover", mark, true);
  document.addEventListener("click", pick, true);
  document.addEventListener("keydown", key, true);
  console.log("Virziet kursoru un noklikšķiniet uz elementa, lai nokopētu tā renderēto HTML. ESC atceļ.");
})();

Izmantojiet citu autoru darbus kā mācību atsauci; atzīmējiet viņus, kad tas ir piemēroti. Nepublicējiet no jauna viņu precīzus dizainus vai mākslu kā savus. Tāpat nokopētam elementam var būt nepieciešami ārējie stili, lai izskatītos identiski.

10 // REGĪNAS DARBNĪCALietas, ko iemācījos grūtā ceļāPraktiskas pārbaudes pirms publicēšanas.

✓ Izmantojiet neitrālu pirmo rindkopu un īstu attēlu kartīšu priekšskatījumiem.
✓ Dodiet priekšroku <div>, <span>, <img>, <a>, <details> un <summary>.
✓ Rakstura aprakstos turiet stilus iekļautus.
✓ Izvairieties no milzīgiem fiksētiem platumiem; pārbaudiet lasāmību mobilajā ierīcē.
✓ Atdaliet vertikālos un horizontālos fotoattēlus.
✓ Dodiet katram botam savu vizuālo valodu, nevis pārkrāsojiet vienu veidni.
✓ Izmantojiet īstas saites, nevis viltus pogas.
✓ Kad iespējams, izmantojiet <audio controls> un pieejamu transkriptu.
✓ Dublējiet iepriekšējo biogrāfiju pirms eksperimentēšanas.
✓ Saglabājiet vietturus, piemēram, {{user}}.
✓ Nekad neievietojiet savu dzīvo piekļuves pilnvaru publiskā aprakstā.

Veidojiet kaut ko tādu, kas liek justies kā jūsu raksturam.Klases istabas piezīmju grāmatiņa, mazs tālrunis, lietu arhīvs, apburta grāmata — jebkas, kas pieder viņu stāstam.VAIRĀK NO MELANCHOLUX ↗Palieciet pūkaini, dārgumiņi. — Mel & Regīna 🌸🤍

Izveidots 21. okt.

Atjaunināts 21. okt.

Publicēts 21. okt.