🎭 角色简介
<character_information character="陈知殊">
核心身份:
名称: 陈知殊
别名/小名：殊殊，阿殊，陈狗蛋（小时候硬要父母为他取一个接地气的“狗名儿”，只有最亲近的家人才会这么叫）
性别: 男
年龄: 18（随时间的变化增长）
身高：1…
💬 开场白
“`
<html>
<head>
<style>
/* — 全局样式设定 — */
:root {
–bg-dark: #101014;
–bg-card: #1C1C22;
–text-primary: #F0F0F5;
–text-secondary: #A0A0B0;
–border-color: rgba(248, 46, 157, 0.2);
–shadow-color: rgba(200, 40, 240, 0.1);/* 主题渐变色 */
–gradient-main: linear-gradient(135deg, #F82E9D 0%, #C42AF2 100%);
–gradient-hover: linear-gradient(135deg, #FF4DAF 0%, #D845FF 100%);/* 动画缓动 */
–ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
–ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background-color: var(–bg-dark);
color: var(–text-primary);
/* 使用 Noto Sans SC 作为中文字体，Manrope 作为备用 */
font-family: 'Noto Sans SC', 'Manrope', sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}/* — 自定义滚动条 — */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(–bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(–border-color);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #F82E9D;
}/* — 主容器与布局 — */
.main-container-nova {
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px;
opacity: 0;
animation: fadeIn 1s var(–ease-in-out-cubic) forwards;
}@keyframes fadeIn {
to {
opacity: 1;
}
}.header-nova {
text-align: center;
margin-bottom: 60px;
}.main-title-nova {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 12px;
letter-spacing: -1px;
}.subtitle-nova {
font-size: 1.1rem;
font-weight: 400;
color: var(–text-secondary);
}/* — 开场白网格 — */
.narrative-grid-nova {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}/* — 开场白卡片 — */
.card-nova {
position: relative;
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
transition: transform 0.4s var(–ease-out-quint),
box-shadow 0.4s var(–ease-out-quint),
border-color 0.4s var(–ease-out-quint);
overflow: hidden;
cursor: pointer;
opacity: 0;
transform: translateY(20px);
animation: cardFadeIn 0.6s var(–ease-out-quint) forwards;
animation-delay: calc(var(–card-index) * 0.08s);
}@keyframes cardFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}.card-nova:hover {
transform: translateY(-8px);
border-color: #F82E9D;
box-shadow: 0 10px 30px var(–shadow-color);
}/* 卡片光晕效果 */
.card-nova::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at var(–mouse-x, 50%) var(–mouse-y, 50%), rgba(248, 46, 157, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s var(–ease-out-quint);
pointer-events: none;
}.card-nova:hover::before {
opacity: 1;
}.card-header-nova {
margin-bottom: 16px;
}.card-title-nova {
font-size: 1.5rem;
font-weight: 700;
color: var(–text-primary);
margin-bottom: 4px;
}.card-desc-nova {
font-size: 0.95rem;
line-height: 1.6;
color: var(–text-secondary);
flex-grow: 1;
margin-bottom: 24px;
/* 限制描述文本行数，让界面更整洁 */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}.card-footer-nova {
margin-top: auto;
}.enter-button-nova {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: var(–gradient-main);
color: var(–text-primary);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background 0.3s var(–ease-in-out-cubic), transform 0.2s var(–ease-out-quint);
position: relative;
z-index: 1;
}.enter-button-nova:hover {
background: var(–gradient-hover);
transform: scale(1.03);
}/* — 加载与错误状态 — */
.state-container-nova {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 20px;
text-align: center;
grid-column: 1 / -1; /* 跨越所有列 */
}.loading-spinner-nova {
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite;
}.loading-spinner-nova::before, .loading-spinner-nova::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 4px solid transparent;
border-bottom-color: #F82E9D;
}
.loading-spinner-nova::before {
border-bottom-color: #C42AF2;
animation: rotate 0.5s linear infinite reverse;
}@keyframes rotate {
100% { transform: rotate(360deg); }
}.error-message-nova {
font-size: 1.2rem;
color: var(–text-secondary);
}/* — 页面过渡 — */
.transition-overlay-nova {
position: fixed;
inset: 0;
background: var(–bg-dark);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(–ease-in-out-cubic);
}
.transition-overlay-nova.active {
opacity: 1;
pointer-events: all;
}/* — 响应式设计 — */
@media (max-width: 768px) {
.main-container-nova {
padding: 40px 16px;
}
.narrative-grid-nova {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!– 页面过渡层，点击卡片时会出现 –>
<div id="transitionOverlay" class="transition-overlay-nova">
<div class="loading-spinner-nova"></div>
</div><!– 主容器 –>
<div class="main-container-nova">
<header class="header-nova">
<h1 class="main-title-nova">比格恶霸在线werwerwer</h1>
<p class="subtitle-nova">本卡仅发布于暮色铃兰全女群/dc旅程女性向卡区，禁止二传/商用，偷卡卖卡的卡贩子都死了。如果在其他地方见到本卡请联系村妹儿（dc：chenjuan1314）
第一次写卡多有不足，再次感谢越遥妹儿给我做的状态栏和开场白美化，感谢Ctrl老婆的同层手机授权，感谢群内🐣🐣🐣老师的角色卡面，祝食用开心。</p>
</header><main>
<div id="narrativesGrid" class="narrative-grid-nova">
<!– 卡片将会被动态加载到这里 –>
<div class="state-container-nova" id="loadingState">
<div class="loading-spinner-nova"></div>
</div>
</div>
</main>
</div><script>
// — 主程序逻辑 —
// 这段代码会在页面加载完成后自动运行
document.addEventListener('DOMContentLoaded', () => {const grid = document.getElementById('narrativesGrid');
const overlay = document.getElementById('transitionOverlay');// 鼠标在卡片上移动时，产生漂亮的光晕效果
grid.addEventListener('mousemove', e => {
const card = e.target.closest('.card-nova');
if (card) {
const rect = card.getBoundingClientRect();
const x = e.clientX – rect.left;
const y = e.clientY – rect.top;
card.style.setProperty('–mouse-x', `${x}px`);
card.style.setProperty('–mouse-y', `${y}px`);
}
});/**
* 异步加载所有的开场白，并把它们变成卡片
*/
async function loadNarratives() {
const loadingState = document.getElementById('loadingState');try {
// 这是关键一步：调用SillyTavern的API，获取角色第一个消息的所有“轮滑”
// 在真实环境中，`getChatMessages` 由 SillyTavern 提供
const messages = await getChatMessages("0", { include_swipe: true });// 拿到数据后，就可以移除加载动画了
if (loadingState) loadingState.remove();// 检查是否有开场白，如果没有，就显示提示信息
if (!messages || messages.length === 0 || !messages[0].swipes || messages[0].swipes.length <= 1) {
grid.innerHTML = `
<div class="state-container-nova">
<p class="error-message-nova">妈妈没有找到任何开场白哦，快去添加一些吧。</p>
</div>
`;
return;
}// `swipes` 数组的第一个元素是当前聊天内容，我们从第二个开始取
const swipes = messages[0].swipes.slice(1);// 遍历所有获取到的开场白
swipes.forEach((content, index) => {
const swipeId = index + 1;// 默认的标题和描述
let title = `篇章 ${swipeId}`;
let description = "点击探索这个未被描述的神秘故事。";// 从开场白内容中，通过HTML注释来解析出标题和描述
// 格式是： <!– title: 你的标题 –>
const titleMatch = content.match(/<!–s*title:s*(.*?)s*–>/);
if (titleMatch) title = titleMatch[1].trim();// 格式是： <!– desc: 你的描述 –>
const descMatch = content.match(/<!–s*desc:s*(.*?)s*–>/s);
if (descMatch) description = descMatch[1].trim();// 创建一个新的卡片HTML元素
const card = document.createElement('div');
card.className = 'card-nova';
card.style.setProperty('–card-index', index);
card.dataset.swipeId = swipeId;// 填充卡片的内容
card.innerHTML = `
<div class="card-header-nova">
<h2 class="card-title-nova">${title}</h2>
</div>
<p class="card-desc-nova">${description}</p>
<div class="card-footer-nova">
<button class="enter-button-nova">进入篇章</button>
</div>
`;// 把创建好的卡片添加到网格中
grid.appendChild(card);// 为卡片添加点击事件，点击后切换到这个开场白
card.addEventListener('click', () => switchToNarrative(swipeId));
});} catch (error) {
console.error('加载开场白时出错了:', error);
if (loadingState) loadingState.remove();
grid.innerHTML = `
<div class="state-container-nova">
<p class="error-message-nova">呀，加载失败了，请检查控制台或刷新重试。</p>
</div>
`;
}
}/**
* 切换到用户所选择的开场白
* @param {number} swipeId – 开场白的ID号
*/
async function switchToNarrative(swipeId) {
// 激活全屏过渡动画，让切换过程更平滑
overlay.classList.add('active');try {
// 再次获取消息，确保数据最新
const messages = await getChatMessages("0", { include_swipe: true });
if (messages && messages[0].swipes && messages[0].swipes[swipeId]) {
// 调用SillyTavern的API，将聊天内容设置为选中的开场白
await setChatMessage(messages[0].swipes[swipeId], 0, {
swipe_id: swipeId,
refresh: 'display_and_render_current'
});
// 成功切换后，SillyTavern会自动刷新页面，所以我们不需要隐藏过渡动画
}
} catch (error) {
console.error('切换开场白时出错了:', error);
// 如果出错，就移除过渡动画，让用户可以继续操作
overlay.classList.remove('active');
}
}// 网页加载好后，立即开始加载开场白
loadNarratives();});
</script>
</body>
</html>
“`