238 lines
8.4 KiB
HTML
238 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>掘金封面图 - Bookworm Blog Series</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { background: #1a1a2e; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px; font-family: 'Segoe UI', -apple-system, sans-serif; }
|
||
.label { color: #888; font-size: 14px; margin-bottom: -30px; }
|
||
.cover {
|
||
width: 800px; height: 450px;
|
||
border-radius: 12px; overflow: hidden;
|
||
position: relative; display: flex;
|
||
flex-direction: column; justify-content: center;
|
||
padding: 60px;
|
||
}
|
||
|
||
/* ===== Cover 1: 50 Tips ===== */
|
||
.cover-1 {
|
||
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
||
}
|
||
.cover-1::before {
|
||
content: '';
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
background:
|
||
radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
|
||
radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
|
||
}
|
||
.cover-1 .number {
|
||
font-size: 180px; font-weight: 900; color: rgba(99, 102, 241, 0.15);
|
||
position: absolute; right: 50px; top: 20px; line-height: 1;
|
||
font-family: 'Georgia', serif;
|
||
}
|
||
.cover-1 .tag {
|
||
display: inline-block; background: rgba(99, 102, 241, 0.8);
|
||
color: #fff; padding: 6px 16px; border-radius: 20px;
|
||
font-size: 14px; font-weight: 600; letter-spacing: 1px;
|
||
margin-bottom: 20px; position: relative; z-index: 1;
|
||
}
|
||
.cover-1 h1 {
|
||
font-size: 42px; font-weight: 800; color: #fff;
|
||
line-height: 1.3; position: relative; z-index: 1;
|
||
max-width: 550px;
|
||
}
|
||
.cover-1 h1 span { color: #a78bfa; }
|
||
.cover-1 .subtitle {
|
||
font-size: 18px; color: rgba(255,255,255,0.6);
|
||
margin-top: 16px; position: relative; z-index: 1;
|
||
}
|
||
.cover-1 .badge-row {
|
||
display: flex; gap: 10px; margin-top: 24px;
|
||
position: relative; z-index: 1;
|
||
}
|
||
.cover-1 .badge {
|
||
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
|
||
color: rgba(255,255,255,0.8); padding: 4px 12px;
|
||
border-radius: 6px; font-size: 13px;
|
||
}
|
||
|
||
/* ===== Cover 2: BM25 Technical ===== */
|
||
.cover-2 {
|
||
background: linear-gradient(135deg, #0a192f, #112240, #1a365d);
|
||
}
|
||
.cover-2::before {
|
||
content: '';
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
background:
|
||
radial-gradient(circle at 70% 30%, rgba(34, 211, 238, 0.15) 0%, transparent 50%),
|
||
radial-gradient(circle at 30% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
|
||
}
|
||
.cover-2 .code-bg {
|
||
position: absolute; right: 30px; top: 30px;
|
||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||
font-size: 13px; color: rgba(34, 211, 238, 0.2);
|
||
line-height: 1.8; text-align: left; white-space: pre;
|
||
}
|
||
.cover-2 .tag {
|
||
display: inline-block;
|
||
background: linear-gradient(90deg, rgba(34,211,238,0.8), rgba(16,185,129,0.8));
|
||
color: #fff; padding: 6px 16px; border-radius: 20px;
|
||
font-size: 14px; font-weight: 600; letter-spacing: 1px;
|
||
margin-bottom: 20px; position: relative; z-index: 1;
|
||
}
|
||
.cover-2 h1 {
|
||
font-size: 38px; font-weight: 800; color: #fff;
|
||
line-height: 1.3; position: relative; z-index: 1;
|
||
max-width: 520px;
|
||
}
|
||
.cover-2 h1 span { color: #22d3ee; }
|
||
.cover-2 .formula {
|
||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||
font-size: 16px; color: rgba(34, 211, 238, 0.8);
|
||
margin-top: 20px; position: relative; z-index: 1;
|
||
background: rgba(0,0,0,0.3); padding: 10px 16px;
|
||
border-radius: 8px; border-left: 3px solid #22d3ee;
|
||
display: inline-block;
|
||
}
|
||
.cover-2 .metrics {
|
||
display: flex; gap: 30px; margin-top: 24px;
|
||
position: relative; z-index: 1;
|
||
}
|
||
.cover-2 .metric-val {
|
||
font-size: 28px; font-weight: 800; color: #22d3ee;
|
||
}
|
||
.cover-2 .metric-label {
|
||
font-size: 12px; color: rgba(255,255,255,0.5);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ===== Cover 3: Comparison ===== */
|
||
.cover-3 {
|
||
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
|
||
}
|
||
.cover-3::before {
|
||
content: '';
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
background:
|
||
radial-gradient(circle at 25% 50%, rgba(251, 146, 60, 0.15) 0%, transparent 40%),
|
||
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
|
||
radial-gradient(circle at 75% 50%, rgba(34, 197, 94, 0.15) 0%, transparent 40%);
|
||
}
|
||
.cover-3 .tag {
|
||
display: inline-block;
|
||
background: linear-gradient(90deg, #f97316, #ef4444);
|
||
color: #fff; padding: 6px 16px; border-radius: 20px;
|
||
font-size: 14px; font-weight: 600; letter-spacing: 1px;
|
||
margin-bottom: 20px; position: relative; z-index: 1;
|
||
}
|
||
.cover-3 h1 {
|
||
font-size: 36px; font-weight: 800; color: #fff;
|
||
line-height: 1.3; position: relative; z-index: 1;
|
||
max-width: 700px; text-align: center;
|
||
}
|
||
.cover-3 { align-items: center; text-align: center; }
|
||
.cover-3 .vs-row {
|
||
display: flex; align-items: center; gap: 24px;
|
||
margin-top: 30px; position: relative; z-index: 1;
|
||
}
|
||
.cover-3 .tool-box {
|
||
width: 140px; height: 80px;
|
||
border-radius: 12px; display: flex;
|
||
flex-direction: column; align-items: center; justify-content: center;
|
||
font-weight: 700; font-size: 16px; color: #fff;
|
||
}
|
||
.cover-3 .tool-box.claude { background: rgba(217, 119, 87, 0.3); border: 2px solid #d97757; }
|
||
.cover-3 .tool-box.cursor { background: rgba(99, 102, 241, 0.3); border: 2px solid #6366f1; }
|
||
.cover-3 .tool-box.copilot { background: rgba(34, 197, 94, 0.3); border: 2px solid #22c55e; }
|
||
.cover-3 .tool-box.devin { background: rgba(168, 85, 247, 0.3); border: 2px solid #a855f7; }
|
||
.cover-3 .tool-sub {
|
||
font-size: 11px; color: rgba(255,255,255,0.5);
|
||
font-weight: 400; margin-top: 4px;
|
||
}
|
||
.cover-3 .vs-label {
|
||
font-size: 20px; font-weight: 900; color: rgba(255,255,255,0.3);
|
||
}
|
||
.cover-3 .year {
|
||
font-size: 15px; color: rgba(255,255,255,0.4);
|
||
margin-top: 20px; position: relative; z-index: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<p class="label">封面 1 — blog-01-50-tips.md (800×450, 右键另存为图片或截图)</p>
|
||
<div class="cover cover-1">
|
||
<div class="number">50</div>
|
||
<div class="tag">CLAUDE CODE TIPS</div>
|
||
<h1>Claude Code 的 <span>50</span> 个<br>隐藏技巧</h1>
|
||
<div class="subtitle">用 Bookworm 路由系统释放全部潜力</div>
|
||
<div class="badge-row">
|
||
<span class="badge">50 专家技能</span>
|
||
<span class="badge">10 智能体</span>
|
||
<span class="badge">实战案例</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="label">封面 2 — blog-02-bm25-routing.md</p>
|
||
<div class="cover cover-2">
|
||
<div class="code-bg">function bm25Score(term, doc) {
|
||
const tf = doc.freq[term] || 0;
|
||
const df = corpus.docFreq[term];
|
||
const idf = Math.log((N - df + 0.5)
|
||
/ (df + 0.5) + 1);
|
||
const tfNorm = (tf * (k1 + 1))
|
||
/ (tf + k1 * (1 - b + b
|
||
* doc.length / avgDL));
|
||
return idf * tfNorm;
|
||
}</div>
|
||
<div class="tag">DEEP DIVE</div>
|
||
<h1><span>BM25</span> + TF-IDF<br>语义路由引擎</h1>
|
||
<div class="formula">score = BM25(0.6) + CTX(0.2) + PROJ(0.1) + WF(0.1)</div>
|
||
<div class="metrics">
|
||
<div>
|
||
<div class="metric-val">100%</div>
|
||
<div class="metric-label">路由准确率</div>
|
||
</div>
|
||
<div>
|
||
<div class="metric-val">2,393</div>
|
||
<div class="metric-label">加权关键词</div>
|
||
</div>
|
||
<div>
|
||
<div class="metric-val">1,371</div>
|
||
<div class="metric-label">测试用例</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="label">封面 3 — blog-03-ai-tools-comparison.md</p>
|
||
<div class="cover cover-3">
|
||
<div class="tag">2026 DEEP COMPARISON</div>
|
||
<h1>AI 编程工具深度对比</h1>
|
||
<div class="vs-row">
|
||
<div class="tool-box claude">
|
||
Claude Code
|
||
<span class="tool-sub">+ Bookworm</span>
|
||
</div>
|
||
<span class="vs-label">VS</span>
|
||
<div class="tool-box cursor">
|
||
Cursor
|
||
<span class="tool-sub">$1.2B ARR</span>
|
||
</div>
|
||
<span class="vs-label">VS</span>
|
||
<div class="tool-box copilot">
|
||
Copilot
|
||
<span class="tool-sub">20M Users</span>
|
||
</div>
|
||
<span class="vs-label">VS</span>
|
||
<div class="tool-box devin">
|
||
Devin
|
||
<span class="tool-sub">AI Agent</span>
|
||
</div>
|
||
</div>
|
||
<div class="year">数据截至 2026.03 | 所有价格和统计数字均附来源链接</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|