2026-05-22 23:49:02 +00:00
|
|
|
|
/**
|
|
|
|
|
|
* ═══════════════════════════════════════════════════
|
2026-05-27 18:31:06 +08:00
|
|
|
|
* 小红书卡片模板 · 2026审美版 · 1080×1440 (3:4)
|
2026-05-22 23:49:02 +00:00
|
|
|
|
* ═══════════════════════════════════════════════════
|
|
|
|
|
|
*
|
2026-05-27 18:31:06 +08:00
|
|
|
|
* 风格：极简大标题 + 高对比度 + 大面积留白 + 渐变色块
|
|
|
|
|
|
* 支持 CSS 变量驱动配色（从 registry 预设传入）
|
|
|
|
|
|
*
|
|
|
|
|
|
* 布局：
|
|
|
|
|
|
* - default: 标题 + 正文列表（教程/干货）
|
|
|
|
|
|
* - quote: 金句居中大字
|
|
|
|
|
|
* - hero: 大标题 + 一句话副标题（封面）
|
2026-05-22 23:49:02 +00:00
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
import { STYLES } from '../config.js'
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
const W = 1080
|
|
|
|
|
|
const H = 1440
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 将 CSS 变量对象转换为 :root 样式
|
|
|
|
|
|
*/
|
|
|
|
|
|
function cssVarBlock(vars = {}) {
|
|
|
|
|
|
const lines = Object.entries(vars).map(([k, v]) => ` ${k}: ${v};`)
|
|
|
|
|
|
return `:root {\n${lines.join('\n')}\n }`
|
|
|
|
|
|
}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 生成小红书卡片 HTML
|
|
|
|
|
|
*/
|
|
|
|
|
|
export function xiaohongshuCard(data) {
|
|
|
|
|
|
const {
|
|
|
|
|
|
title = '',
|
|
|
|
|
|
body = '',
|
|
|
|
|
|
subtitle = '',
|
|
|
|
|
|
tag = '',
|
|
|
|
|
|
layout = 'default',
|
|
|
|
|
|
pageNum = 1,
|
|
|
|
|
|
totalPages = 1,
|
2026-05-27 18:31:06 +08:00
|
|
|
|
cssVars = {},
|
2026-05-22 23:49:02 +00:00
|
|
|
|
} = data
|
|
|
|
|
|
|
|
|
|
|
|
const bodyLines = body.split('\n').filter(Boolean)
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
// 渲染正文：支持列表、小标题、加粗
|
2026-05-22 23:49:02 +00:00
|
|
|
|
const bodyHtml = bodyLines.map(line => {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
const trimmed = line.trimStart()
|
|
|
|
|
|
if (trimmed.startsWith('- ') || trimmed.startsWith('• ')) {
|
|
|
|
|
|
const text = trimmed.replace(/^[-•]\s*/, '')
|
|
|
|
|
|
return `<li>${text}</li>`
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
2026-05-27 18:31:06 +08:00
|
|
|
|
if (trimmed.startsWith('## ')) {
|
|
|
|
|
|
return `<h3 class="sub-heading">${trimmed.slice(3)}</h3>`
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
2026-05-27 18:31:06 +08:00
|
|
|
|
const formatted = trimmed.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
|
|
|
|
return `<p>${formatted}</p>`
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}).join('\n')
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
const C = {
|
|
|
|
|
|
bg: 'var(--bg, #faf8f5)',
|
|
|
|
|
|
primary: 'var(--primary, #1a1a2e)',
|
|
|
|
|
|
accent: 'var(--accent, #4f8cff)',
|
|
|
|
|
|
highlight: 'var(--highlight, #00d4ff)',
|
|
|
|
|
|
gold: 'var(--gold, #c9a96e)',
|
|
|
|
|
|
warm: 'var(--warm, #f5e6c8)',
|
|
|
|
|
|
text: 'var(--text, #1a1a2e)',
|
|
|
|
|
|
textMuted: 'var(--textMuted, #6b7280)',
|
|
|
|
|
|
cardBg: 'var(--cardBg, #ffffff)',
|
|
|
|
|
|
border: 'var(--border, #e5e7eb)',
|
|
|
|
|
|
}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
return `<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
|
|
|
|
|
|
|
|
|
|
|
|
${cssVarBlock(cssVars)}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
width: ${W}px;
|
|
|
|
|
|
height: ${H}px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
background: ${C.bg};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-family: 'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
|
|
|
|
|
|
color: ${C.text};
|
2026-05-22 23:49:02 +00:00
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
/* ── 装饰 · 几何光斑 ── */
|
|
|
|
|
|
.orb {
|
2026-05-22 23:49:02 +00:00
|
|
|
|
position: absolute;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
filter: blur(80px);
|
2026-05-22 23:49:02 +00:00
|
|
|
|
opacity: 0.15;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
pointer-events: none;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.orb-1 {
|
|
|
|
|
|
width: 400px;
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
background: ${C.accent};
|
|
|
|
|
|
top: -80px;
|
|
|
|
|
|
left: -120px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.orb-2 {
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
height: 300px;
|
|
|
|
|
|
background: ${C.highlight};
|
|
|
|
|
|
bottom: 100px;
|
|
|
|
|
|
right: -100px;
|
|
|
|
|
|
opacity: 0.1;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
/* ── 主容器 ── */
|
2026-05-22 23:49:02 +00:00
|
|
|
|
.container {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
height: 100%;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding: 80px 72px 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 顶部渐变装饰线 ── */
|
|
|
|
|
|
.accent-line {
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 5px;
|
|
|
|
|
|
background: linear-gradient(90deg, ${C.accent}, ${C.highlight});
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
margin-bottom: 40px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 标签 ── */
|
|
|
|
|
|
.tag {
|
|
|
|
|
|
display: inline-block;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding: 10px 24px;
|
|
|
|
|
|
background: ${C.cardBg};
|
|
|
|
|
|
color: ${C.accent};
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
margin-bottom: 28px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
align-self: flex-start;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
|
border: 2px solid ${C.accent}22;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
/* ── 大标题 · 2026审美核心 ── */
|
2026-05-22 23:49:02 +00:00
|
|
|
|
.title {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
|
|
|
|
|
|
font-size: 68px;
|
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
|
line-height: 1.25;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.primary};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
margin-bottom: 20px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.subtitle {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: 400;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.textMuted};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
margin-bottom: 40px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
letter-spacing: 1px;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
line-height: 1.5;
|
|
|
|
|
|
opacity: 0.8;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 正文 ── */
|
|
|
|
|
|
.body {
|
|
|
|
|
|
flex: 1;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
line-height: 1.8;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.text};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.body p {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
margin-bottom: 14px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.body ul, .body ol {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding-left: 0;
|
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
list-style: none;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.body li {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
|
margin-bottom: 10px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.text};
|
|
|
|
|
|
position: relative;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding-left: 36px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.body li::before {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
content: "▸";
|
2026-05-22 23:49:02 +00:00
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
color: ${C.accent};
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
top: 4px;
|
|
|
|
|
|
font-weight: 700;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sub-heading {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-family: 'Noto Serif SC', serif;
|
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
|
font-weight: 700;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.accent};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
margin: 32px 0 16px 0;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.body strong {
|
|
|
|
|
|
color: ${C.highlight};
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-22 23:49:02 +00:00
|
|
|
|
/* ── 金句布局 ── */
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.quote-wrapper {
|
2026-05-22 23:49:02 +00:00
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
text-align: center;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding: 0 60px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.quote-icon {
|
|
|
|
|
|
font-size: 100px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
line-height: 1;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
opacity: 0.2;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.quote-text {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
font-family: 'Noto Serif SC', serif;
|
|
|
|
|
|
font-size: 52px;
|
|
|
|
|
|
font-weight: 700;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
line-height: 1.5;
|
|
|
|
|
|
color: ${C.primary};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
letter-spacing: 4px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.quote-author {
|
2026-05-27 18:31:06 +08:00
|
|
|
|
margin-top: 40px;
|
|
|
|
|
|
font-size: 24px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.textMuted};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── Hero 封面布局 ── */
|
|
|
|
|
|
.hero-wrapper {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.hero-title {
|
|
|
|
|
|
font-family: 'Noto Serif SC', serif;
|
|
|
|
|
|
font-size: 80px;
|
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
|
line-height: 1.2;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.primary};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hero-subtitle {
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
color: ${C.textMuted};
|
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
opacity: 0.8;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.hero-decorator {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
height: 4px;
|
|
|
|
|
|
background: linear-gradient(90deg, ${C.accent}, ${C.highlight});
|
|
|
|
|
|
margin: 32px 0;
|
|
|
|
|
|
border-radius: 2px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 19:19:14 +08:00
|
|
|
|
/* ── 底部 · 子域名水印 ── */
|
2026-05-22 23:49:02 +00:00
|
|
|
|
.footer {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
2026-05-27 18:31:06 +08:00
|
|
|
|
padding-top: 24px;
|
|
|
|
|
|
font-size: 16px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
color: ${C.textMuted};
|
2026-05-27 18:31:06 +08:00
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
letter-spacing: 1px;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 19:19:14 +08:00
|
|
|
|
.footer-domain {
|
|
|
|
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: ${C.accent};
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
.footer-dot {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 6px;
|
|
|
|
|
|
height: 6px;
|
|
|
|
|
|
background: ${C.accent};
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
margin: 0 8px;
|
|
|
|
|
|
opacity: 0.4;
|
2026-05-22 23:49:02 +00:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
<div class="orb orb-1"></div>
|
|
|
|
|
|
<div class="orb orb-2"></div>
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
2026-05-27 19:19:14 +08:00
|
|
|
|
${tag ? `<div class="tag">${tag}</div>` : ''}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
${layout === 'quote' ? `
|
2026-05-27 18:31:06 +08:00
|
|
|
|
<div class="quote-wrapper">
|
|
|
|
|
|
<div class="quote-icon">"</div>
|
|
|
|
|
|
<div class="quote-text">${title}</div>
|
|
|
|
|
|
${subtitle ? `<div class="quote-author">—— ${subtitle}</div>` : ''}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
</div>
|
2026-05-27 18:31:06 +08:00
|
|
|
|
` : layout === 'hero' ? `
|
|
|
|
|
|
<div class="hero-wrapper">
|
|
|
|
|
|
<div class="hero-title">${title}</div>
|
|
|
|
|
|
<div class="hero-decorator"></div>
|
|
|
|
|
|
${subtitle ? `<div class="hero-subtitle">${subtitle}</div>` : ''}
|
2026-05-22 23:49:02 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
` : `
|
2026-05-27 18:31:06 +08:00
|
|
|
|
<div class="accent-line"></div>
|
2026-05-22 23:49:02 +00:00
|
|
|
|
<div class="title">${title}</div>
|
|
|
|
|
|
${subtitle ? `<div class="subtitle">${subtitle}</div>` : ''}
|
|
|
|
|
|
<div class="body">
|
|
|
|
|
|
${bodyHtml}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
`}
|
|
|
|
|
|
|
2026-05-27 18:31:06 +08:00
|
|
|
|
<div class="footer">
|
2026-05-27 19:19:14 +08:00
|
|
|
|
<span class="footer-domain">cover.guanghulab.com</span>
|
2026-05-27 18:31:06 +08:00
|
|
|
|
${totalPages > 1 ? `<span>${pageNum}<span class="footer-dot"></span>${totalPages}</span>` : ''}
|
|
|
|
|
|
</div>
|
2026-05-22 23:49:02 +00:00
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>`
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function xiaohongshuCarousel(data, pages) {
|
|
|
|
|
|
return pages.map((body, i) => xiaohongshuCard({
|
|
|
|
|
|
...data,
|
|
|
|
|
|
body,
|
|
|
|
|
|
pageNum: i + 1,
|
|
|
|
|
|
totalPages: pages.length,
|
|
|
|
|
|
}))
|
|
|
|
|
|
}
|
