最近,Janitor AI 更新了其类名及相关的 CSS 样式,影响了机器人简介和描述。

本文分享的更新后类名和 CSS 选择器,是通过浏览器开发者工具检查 Janitor AI 的前端源代码识别出来的。它们仅用于社区的外观主题设置和创意定制。

这些类名并未由 Janitor AI 官方记录或支持,可能会在网站更新后随时更改或失效,且恕不另行通知。

此信息仅用于教育和创意目的。
未访问或提取任何专有数据、用户数据或账户凭据。

本内容与 JanitorAI 及其工作人员没有任何关联,也未获得其认可或批准。

i 如果你在将代码整合进角色卡时遇到困难,建议查看Rocket 的指南 —— 这是一份更详细的可视化指南,比本机器人底部的内容讲解得更深入。

如果问题仍然存在,可以尝试在 J.AI Discord 中提问,因为我这边能提供的帮助已经有限。

常用类名:

div _characterInfoMarkdownContent_123vi_223

_input_jv6cc_126

目前仍在寻找更多。
随着新类名被发现,此列表会持续更新。请经常回来查看新增内容。

• 约 101 条类名记录
  

• 2026-28-04
  - 通过 permanent 的帮助更新了 4 个以上的类名
  - 将列表按 A-Z 重新整理
  

• 2026-29-04
  - 添加了<p class="class_name"></p> 到性格部分
  - 打开了 Definition
  

• 2026-30-04
  - 更新了 _card_13n8k_2
  - 添加了 _cardTitle_13n8k_402
  

• 2026-01-05
  - 移除了已弃用的类名
  ( _viewAllStandalone_mi467_68, _segmentActive_kwwol_63, _segmented_kwwol_51, _content_1chl9_11, _characterMenu_128g5_496, _count_kwwol_25, _count_mi467_31)
  

• 16/05/2026
  - 更新了已变更的类名
  ^再次感谢 permanent(puppy)^
  

• 2026-19-10
  - 移除了已弃用的类名
  - 更新了替代类名

A

_appModalBadge_xxqvx_134

_appModalContent_xxqvx_85

_appModalCta_xxqvx_195

_archiveButton_di476_217

_autoResizeTextarea_mrqt8_1

B

_banner_2x3bf_17

_baseOverlay_gj1jh_20

_betaBadge_mbh48_65

_btnDanger_1fl1d_98

_btnGhost_1fl1d_59

_btnOutline_1fl1d_48

_btnPrimary_1fl1d_80

_btnSolid_1fl1d_70

_btn_1fl1d_2

C

_cancelButton_10ud6_165

_cancelScheduleButton_1s17f_1202

_cancel_16pja_84

_cancel_1pa8q_211

_cardActions_1tlzn_324

_cardDescription_1mhuy_352_cardHeader_1tlzn_315

_cardMeta_1mhuy_375

_cardTitle_1mhuy_333

_card_1mhuy_2

_card_1tlzn_308

_characterInfoMarkdownContent_123vi_223

_characterInfoMarkdownContent_1yi4w_5

_characterInfoMarkdownContent_9gldz_223

_characterInfoShinyBox_1yi4w_265

_characterInfoShinyBoxInner_1yi4w_286

_checkboxCard_exkyv_105

_checkboxCardError_exkyv_112

_content_xxqvx_12

_count_138g0_7

_createButton_1jb5k_14 pp-top-bar-create-char profile-top-bar-create-char glow-on-hover

css-197qci7

css-1d22cyw

css-1jdnh42

css-1vh5zal

css-2lj9yr

css-7kiadw

css-z5908y

_content_67d1x_11

D

_detailName_4cue2_1923

_detailPane_4cue2_1839

E

_editScheduleButton_1s17f_1180

_expanded_2x3bf_208

_expandedInner_2x3bf_220

F

_filterButtonOpen_1vsdv_27

_footerHint_exkyv_148

_footer_w3wuk_1

H

_hintBox_2ljd6_74

_historyItem_10txd_1

_historyItemFocused_10txd_34

_holidays2025Pattern1_d0q9a_115

_holidays2025Pattern2_d0q9a_124

I

_iconError_1jwi8_310

_iconGlobe_2x3bf_84

_iconInfo_1jwi8_295

_iconSuccess_1jwi8_300

_iconWarning_1jwi8_305

_iconWarning_1s17f_102

_inner_2x3bf_31

_inputContainer_d8bkw_27

_inputError_exkyv_86

_input_10ud6_126

_input_1tlzn_260

_input_exkyv_52

_input_owmrz_7

_iosAlert_1s17f_263

_iosModalWarning_1s17f_544

_iosSelect_1s17f_805

_iosSettingItem_1s17f_46

_iosSettingsSection_1s17f_35

_iosStatusSection_1s17f_208

L

_loadMoreButton_1jwi8_474

_loadMore_1nqdj_38

M

_messageNavigation_1yi4w_348

_modal_pru5r_15

_modalContent_1jhaa_166

_modalWarning_1jwi8_779

_moderationBlock_1s17f_320

_moderationHeader_1s17f_360

_moderationNotes_di476_369

_moderationNotification_di476_333

_moderationReason_1s17f_405

_moderationSubject_di476_360

_motionHeader_1s17f_1361

_motionModal_1s17f_1339

_motionWarning_1s17f_1459

N

_navButton_1yi4w_359

_notificationsButton_1jwi8_7

_notificationItem_di476_2

O

_option_pru5r_82

_otherInput_pru5r_156

P

pp-top-bar-logo profile-top-bar-logo glow-logo css-1bmggo3

_primaryButton_2ljd6_91

_priorityHigh_1jwi8_372

_priorityLow_1jwi8_380

_priorityMedium_1jwi8_376

_privacyNote_2x3bf_301

profile-badge-flex-outer Btn2-purple pp-pg-total css-72h1ey

S

_scheduleInfoNote_1s17f_1106

_scheduleTypeOption_1s17f_1231

_scheduledInput_1s17f_887

_scheduledPreview_1s17f_972

_scheduledReleaseInfo_1s17f_1136

_scheduledReleaseSection_1s17f_863

_scheduledReleaseWarning_1s17f_876

_showLess_1bk4j_26

_signupTextarea_45b6m_172

_submitBtn_1gzug_172

T

_toolbar_1oo8z_6

小贴士:
你可以把多个类名叠加到同一个段落标签中,而不必分别使用。这样就能同时叠加来自不同类名的效果。

简单示例:

div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone

<p class="div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone">你的文字</p>

由 Discord 上的 Utkarsh 制作:

<p class="div iosStatusSection1s17f_208 iosStatusLine1s17f_223">文字 <strong>文字</strong></p>

'文字'文字

<p class="div _iosStatusSection_1s17f_208 _iosStatusLine_1s17f_223">'文字' <a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="your-link-here"><strong>链接</strong></a></p>

'文字' 链接

<p class="css-1jdnh42 _iosStatusLine_1s17f_223"><strong>此处文字</strong>此处你的文字</p>

此处文字此处你的文字

。 <p class="_notificationItem_di476_2" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_unreadIndicator_di476_23" href="blank">。</a>此处你的文字</p>

测试! <p class="_characterInfoMarkdownContent_9gldz_223 _iosStatusLine_1s17f_223" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_characterAvatar_di476_67" href="blank">测试 !</a>此处你的文字</p>

<p class="_card_13n8k_2 _list_13n8k_67 _clickable_13n8k_28

_card_13n8k_2 _list_13n8k_67 _selected_13n8k_67 _clickable_13n8k_28

用空格分隔每个类名即可。注意,叠加得越多,一旦出现问题就越难判断是哪个类名导致的。

使用方法:
如需更详细的可视化使用指南,请查看 Rocket 的指南

打开角色简介输入框,点击编辑器右上角的 </> 按钮。这会切换到原始 HTML 视图,你可以在其中直接查看和编辑底层代码。

要应用某个类名,请像这样用段落标签包裹你的内容:
<p class="YOUR_CLASS_NAME_HERE">此处你的文字</p>

例如:

<p class="div _characterInfoMarkdownContent_123vi_223">此处你的文字</p>

只需把 YOUR_CLASS_NAME_HERE 替换为你想要的类名即可。
编辑完成后,点击 HTML 面板底部的 Apply 按钮保存更改。