文学作品页面生成器#

为文学作品生成自包含的单页 HTML 展示页面，包含主题配色、响应式布局和交互功能。

设计流程#

1. 提取主题配色#

根据作品类型选择配色方案（以下为参考建议，实际配色需根据作品具体氛围、用户偏好或品牌要求灵活调整）：

作品类型建议配色武侠/修仙金色 (#d4a853) + 翠绿 (#2dd4a8) + 深色 (#0a0e1a)奇幻/玄幻冰蓝 (#4a9eff) + 深蓝 (#0a1628)历史/权谋金色 (#d4a853) + 朱红 (#c0392b) + 深色 (#0f1419)神话/志怪紫色 (#8e44ad) + 粉色 (#f8cdda) + 青色 (#a8edea)家庭/情感暖棕 (#8B4513) + 金色 (#DAA520) + 米白 (#FFFAF0)科幻/赛博霓虹青 (#00f5ff) + 深色 (#0a0a0a) + 紫罗兰 (#a78bfa)都市/现代纯白 + 蓝色 (#3b82f6) + 灰色

重要提示：上表配色仅为参考建议，实际生成时应根据以下因素灵活调整：

• 作品的具体氛围和情感基调
• 用户明确指定的配色偏好
• 作品中标志性的视觉元素（如封面、海报主色调）
• 品牌或官方配色（如有）
• 可访问性要求（对比度、色盲友好等）

2. 配置字体#

使用 Google Fonts 国内镜像：

html

<link rel="preconnect" href="https://fonts.loli.net">
<link href="https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

• 标题字体: 'Noto Serif SC', serif — 优雅文艺
• 正文字体: 'Noto Sans SC', sans-serif — 清晰易读

3. 响应式断点#

• 768px — 平板：单列布局，缩小字体
• 480px — 手机：紧凑布局，减少内边距

页面结构#

必需区块（按顺序）#

1. Hero 区 — 全视口，作品标题 + 副标题 + 关键数据 + 行动按钮
2. 粘性导航 — 区块链接 + 滚动进度指示器
3. 作品简介 — 概览卡片 + 标签
4. 作者介绍 — 作者简介 + 头像占位
5. 世界观/设定 — 世界观卡片（小说）或 创作背景（非虚构）
6. 主要人物 — 角色卡片网格
7. 情节/章节 — 时间线或卷册卡片
8. 经典语录 — 引用卡片
9. 评析/价值 — 分析卡片
10. 页脚 — 简单页脚

可选区块（根据内容选择）#

• 种族/阵营 — 阵营卡片（奇幻作品）
• 武功/法宝 — 能力体系卡片（武侠/修仙）
• 战斗名场面 — 战斗场景卡片（动作作品）
• 人物关系图 — 关系图（复杂角色群）
• 时间线 — 历史时间线（历史作品）
• 幕后故事 — 幕后花絮（影视作品）
• 社会影响 — 文化影响（经典作品）

组件模板#

Hero 区#

html

<section class="hero">
    <div class="hero-badge">
        <span class="hero-badge-dot"></span>
        {分类标签}
    </div>
    <h1 class="hero-title">
        <span class="char-gold">{作品名}</span>
    </h1>
    <p class="hero-subtitle">{一句话概括}</p>
    <blockquote class="hero-quote">"{经典语录}"</blockquote>
    <div class="hero-stats">
        <div class="hero-stat">
            <div class="hero-stat-value">{数值}</div>
            <div class="hero-stat-label">{标签}</div>
        </div>
    </div>
    <a href="#section1" class="hero-cta">
        开始探索
        <span class="hero-cta-arrow">→</span>
    </a>
</section>

导航栏#

html

<nav class="nav" id="nav">
    <div class="nav-inner">
        <div class="nav-brand">{作品名}</div>
        <ul class="nav-links">
            <li><a href="#intro" class="nav-link active">作品简介</a></li>
            <li><a href="#author" class="nav-link">作者介绍</a></li>
        </ul>
        <div class="nav-right">
            <div class="nav-progress">
                <svg class="nav-progress-ring" viewBox="0 0 36 36">
                    <circle class="bg" cx="18" cy="18" r="15" />
                    <circle class="fill" id="progressRing" cx="18" cy="18" r="15"
                        stroke-dasharray="94.25" stroke-dashoffset="94.25" />
                </svg>
                <span id="progressText">0%</span>
            </div>
        </div>
    </div>
</nav>

卡片组件#

html

<div class="card">
    <div class="card-icon">📚</div>
    <h3 class="card-title">{标题}</h3>
    <p class="card-text">{描述}</p>
    <div class="card-tags">
        <span class="tag">{标签1}</span>
        <span class="tag jade">{标签2}</span>
    </div>
</div>

角色卡片#

html

<div class="character-card">
    <div class="character-avatar">👤</div>
    <div class="character-name">{角色名}</div>
    <div class="character-role">{身份}</div>
    <div class="character-desc">{描述}</div>
</div>

时间线组件#

html

<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-year">{时间}</div>
        <div class="timeline-title">{事件}</div>
        <div class="timeline-desc">{描述}</div>
    </div>
</div>

引用卡片#

html

<div class="quote-card">
    <p class="quote-text">"{语录内容}"</p>
    <p class="quote-source">—— <strong>{出处}</strong></p>
</div>

交互功能#

滚动进度条#

javascript

const progressBar = document.getElementById('progressBar');
window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    progressBar.style.width = progress + '%';
});

导航激活状态#

javascript

const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop - 100;
        if (window.scrollY >= sectionTop) {
            current = section.getAttribute('id');
        }
    });

    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === '#' + current) {
            link.classList.add('active');
        }
    });
});

返回顶部按钮#

html

<button class="back-to-top" id="backToTop" aria-label="返回顶部">↑</button>

<script>
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
    backToTop.classList.toggle('visible', window.scrollY > 300);
});
backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

滚动淡入动画#

css

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

javascript

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));

CSS 设计令牌模板#

以下为示例模板，实际值需根据作品主题和配色方案调整：

css

:root {
    /* 颜色 - 根据作品主题调整（以下为示例值） */
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: rgba(15, 23, 42, 0.85);
    --bg-card-hover: rgba(30, 41, 59, 0.95);

    --gold-primary: #d4a853;
    --gold-light: #f0d78c;
    --gold-glow: rgba(212, 168, 83, 0.4);
    --gold-subtle: rgba(212, 168, 83, 0.1);

    --accent: #2dd4a8; /* 按主题更换 */
    --accent-glow: rgba(45, 212, 168, 0.3);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-subtle: rgba(212, 168, 83, 0.15);
    --border-active: rgba(212, 168, 83, 0.5);

    /* 字体 */
    --font-display: 'Noto Serif SC', serif;
    --font-body: 'Noto Sans SC', sans-serif;

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* 阴影 */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 48px rgba(212, 168, 83, 0.25);

    /* 过渡 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-normal: 0.3s;
}

内容指南#

Hero 区数据（选 3-5 项）#

作品类型推荐数据小说总字数、章节数、出版年份、销量电影豆瓣评分、票房、片长、上映年份动漫集数、评分、首播年份、制作公司历史跨度年数、册数、覆盖朝代

角色卡片（6-12 个角色）#

• 包含主角、反派和关键配角
• 使用 emoji 作为头像占位符
• 描述保持简洁（2-3 句）

语录（4-8 条）#

• 选择标志性、令人难忘的台词
• 标注出处角色或旁白
• 混合哲理性和情感性语录

标签分类#

• 类型标签：历史、奇幻、武侠、都市
• 主题标签：友情、成长、权谋、爱情
• 风格标签：幽默、热血、虐心、治愈

输出要求#

生成单个自包含 HTML 文件：

• 所有 CSS 在 <style> 标签内
• 所有 JavaScript 在 <script> 标签内
• 仅依赖 Google Fonts CDN（使用国内镜像）
• 响应式设计
• 语义化 HTML 结构
• 无障碍访问（正确使用标题层级、alt 属性、ARIA 标签）

质量检查清单#

• 主题配色符合作品氛围（如用户未指定，参考建议配色方案）
• 所有区块有内容（无空占位符）
• 移动端响应式正常（测试 375px 宽度）
• 导航功能正常
• 动画流畅（60fps）
• 字体正确加载（有备用字体）
• 文本可读性好（对比度足够）
• 卡片有悬停效果
• 返回顶部按钮可用
• 进度指示器可用

使用示例#

用户输入：

text

帮我做一个《三体》的介绍页面

提取信息：

• 标题：三体
• 作者：刘慈欣
• 类型：科幻小说
• 主题色：深空蓝 + 红色（文革时代）
• 关键数据：三部曲、88万字、雨果奖
• 角色：叶文洁、罗辑、程心、章北海等
• 核心概念：黑暗森林法则、降维打击、面壁者
• 经典语录："给岁月以文明，而不是给文明以岁月"