add genek-paper-2-all skill: 学术论文转换全流程（海报/PPT/网站）

包含 SKILL.md 主文件、图片提取指南和海报 HTML/CSS 模板参考。

Made-with: Cursor

genek-paper-2-all/SKILL.md

@@ -0,0 +1,273 @@
+---
+name: genek-paper-2-all
+description: 将学术论文转换为会议海报（HTML）、PPT演示文稿和交互式网站。涵盖论文图片提取（优先从出版商网站下载）、海报内容规范（Background/Results/Methods/Conclusions等板块）、折叠式图表展示、物种图标、流程图等。当用户提及"论文转海报"、"论文转PPT"、"提取论文图片"、"学术海报"时使用此技能。
+---
+
+# 学术论文转换全流程（Paper2All）
+
+## 概述
+
+将学术论文（PDF/LaTeX）转换为多种展示格式：
+1. **Paper2Poster**：HTML 交互式会议海报
+2. **Paper2PPT**：PowerPoint 演示文稿（使用 pptxgenjs）
+3. **Paper2Web**：交互式学术主页
+
+## 适用场景
+
+- 会议海报制作、学术演示准备
+- 论文宣传推广材料生成
+- 论文图片提取与复用
+- 用户提及：论文转海报、论文转PPT、提取论文图片、学术海报、conference poster
+
+---
+
+## 一、论文图片提取（关键步骤）
+
+### 优先级策略
+
+| 优先级 | 方法 | 质量 | 适用场景 |
+|--------|------|------|----------|
+| **1** | **出版商网站下载** | 纯图表，无页眉/图注 | 已发表的开放获取论文 |
+| **2** | `pdftoppm` 整页转图 + 裁剪 | 需后处理 | 无法访问网页版时 |
+| **3** | `pdfimages` 提取嵌入图 | 碎片化 | 仅作参考，通常不推荐 |
+
+### 方法一：出版商网站下载（推荐）
+
+**Springer Nature / BMC 系列期刊** URL 模板：
+
+```
+https://media.springernature.com/full/springer-static/image/art%3A{DOI_encoded}/MediaObjects/{journal_id}_{year}_{article_id}_Fig{N}_HTML.png
+```
+
+DOI 解析规则（以 `10.1186/s12915-022-01301-7` 为例）：
+- `journal_id` = `12915`（s 后面的数字）
+- `year` = `2022`
+- `article_id` = `1301`（最后的序号，去掉 `-7` 修订号）
+
+批量下载脚本：
+```bash
+for i in 1 2 3 4 5 6; do
+  curl -sL -o "figures/fig${i}.png" \
+    "https://media.springernature.com/full/springer-static/image/art%3A10.1186%2Fs12915-022-01301-7/MediaObjects/12915_2022_1301_Fig${i}_HTML.png"
+done
+```
+
+其他出版商 URL 规律详见 → [references/figure-extraction.md](references/figure-extraction.md)
+
+### 方法二：PDF 整页转图（备选）
+
+```bash
+# 300 DPI 高清转换
+pdftoppm -png -r 300 paper.pdf figures/page
+
+# 需要 Pillow 裁剪页眉/页脚（精度难保证，仅在方法一不可用时使用）
+```
+
+### 图片命名规范
+
+按论文原始编号命名：`fig1.png` ~ `fig{N}.png`，删除中间过程文件。
+
+---
+
+## 二、学术海报内容规范
+
+### 必备板块
+
+```
+海报结构（3列布局）：
+├── Header：标题 + 作者 + 单位
+├── 第1列
+│   ├── Background（背景 + 物种列表 + 层级图）
+│   ├── Study Design（样本设计 + 测序方案 + 数据量）
+│   └── Bioinformatics Methods（流程图）
+├── 第2列
+│   ├── Results 1（发现卡片 + 折叠图）
+│   └── Results 2（发现卡片 + 折叠图）
+├── 第3列
+│   ├── Results 3（发现卡片 + 折叠图）
+│   └── Results 4（发现卡片 + 折叠图）
+├── Conclusions（跨2-3列，编号列表）
+└── Footer：Data Availability + Funding + Correspondence
+```
+
+### 各板块要求
+
+**Study Design（项目设计）**：
+- 统计概览：物种数、文库数、总接触数、分辨率等（stat-box 展示）
+- 样本表格：物种、重复数、基因组大小、平均接触数
+- 测序方案：平台、酶切、标记方法
+- 数据质量：原始数据量 → 清洗量、Q20/Q30、重复率等
+
+**Methods（生信方法）**：
+- 用 CSS 流程图展示（非纯文本），从原始数据 → QC → 比对 → 矩阵构建 → 分支分析
+- 末尾用 flow-branch 展示并行分析模块
+
+**Results（结果）**：
+- 每个结果板块含 finding-card（发现卡片）+ 折叠图表区
+- 重要发现用 `.finding-card.important` 高亮
+
+### 物种图标
+
+多物种研究中，**不使用 emoji**（跨平台不稳定），改用 CSS 圆形缩写：
+
+```html
+<span class="sp-icon mammal-icon">Hu</span> Human
+<span class="sp-icon bird-icon">Ch</span> Chicken
+<span class="sp-icon fish-icon">Zf</span> Zebrafish
+```
+
+按分类着色：哺乳类（蓝色）、鸟类（暖橙）、鱼类（绿色）。
+
+### 折叠图表 + 放大查看
+
+使用 `<details>/<summary>` 实现折叠，配合 lightbox 实现点击放大：
+
+```html
+<details class="fig-collapse">
+  <summary>Figure 1 — 标题描述</summary>
+  <div class="fig-content">
+    <div class="fig-image-container">
+      <img src="figures/fig1.png" alt="Figure 1">
+      <div class="fig-caption">图注说明</div>
+    </div>
+  </div>
+</details>
+```
+
+Lightbox 实现要点：
+- fixed overlay + `z-index: 9999` + 半透明黑色背景
+- `cursor: zoom-in`（图片）/ `cursor: zoom-out`（overlay）
+- 支持 Esc 键关闭
+
+详细 CSS/HTML 模板见 → [references/poster-guide.md](references/poster-guide.md)
+
+### 中英文双语切换
+
+海报**默认同时输出中英文内容**，通过页面右上角语言切换按钮在线切换：
+
+实现方式：用 `data-lang` 属性标记所有文本元素，JS 控制显示/隐藏。
+
+```html
+<!-- 每段文本提供双语版本 -->
+<p data-lang="en">The 3D architecture of the genome...</p>
+<p data-lang="zh">基因组的三维架构...</p>
+```
+
+```html
+<!-- 语言切换按钮（fixed 定位，右上角） -->
+<div class="lang-switch">
+  <button class="lang-btn active" data-target="en">EN</button>
+  <button class="lang-btn" data-target="zh">中文</button>
+</div>
+```
+
+切换逻辑：
+```javascript
+document.querySelectorAll('.lang-btn').forEach(function(btn){
+  btn.addEventListener('click', function(){
+    var lang = this.dataset.target;
+    document.querySelectorAll('[data-lang]').forEach(function(el){
+      el.style.display = el.dataset.lang === lang ? '' : 'none';
+    });
+    document.querySelectorAll('.lang-btn').forEach(function(b){ b.classList.remove('active'); });
+    this.classList.add('active');
+  });
+});
+// 初始化：默认显示英文
+document.querySelectorAll('[data-lang="zh"]').forEach(function(el){ el.style.display = 'none'; });
+```
+
+注意事项：
+- 板块标题（section-title）、finding-card 内容、结论条目等**均需双语标记**
+- 图表、统计数字、物种缩写（Hu/Mo/Ch 等）中英文通用，无需重复
+- 表格可共用结构，仅表头文字需双语
+- 语言按钮用 `position: fixed; top: 0.2in; right: 0.3in; z-index: 100;` 固定
+
+详细 CSS/JS 实现见 → [references/poster-guide.md](references/poster-guide.md)
+
+---
+
+## 三、HTML/CSS 技术要点
+
+### 特殊字符处理
+
+| 场景 | 正确写法 | 错误写法 |
+|------|----------|----------|
+| HTML 正文 | `&#x25B6;`（▶） | 直接粘贴 emoji |
+| CSS `content` | `content: '\25B8'` | `content: '&#x25B8;'` |
+| 破折号 | `&#x2014;` | `—`（可能编码错误） |
+
+### 关键 CSS 规则
+
+```css
+/* 折叠箭头旋转 */
+details summary::before {
+  content: '\25B8';
+  transition: transform 0.2s;
+  display: inline-block;
+}
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+/* 图片自适应 */
+.fig-image-container img {
+  max-width: 100%;
+  height: auto;
+  cursor: zoom-in;
+}
+
+/* 海报打印尺寸 */
+.poster { width: 48in; }
+
+@media print {
+  body { background: white; padding: 0; }
+  details { open: true; }
+}
+```
+
+### 注意事项
+
+- `<summary>` 中的箭头由 CSS `::before` 生成，HTML 文本中**不要**重复放箭头字符
+- 海报物理尺寸（如 48×36 英寸）在浏览器中显示很大，需缩放查看
+- 使用 `python3 -m http.server` 本地预览，确保图片路径正确
+
+---
+
+## 四、PPT 生成（Paper2PPT）
+
+使用 pptxgenjs（Node.js）生成：
+
+```bash
+npm install pptxgenjs
+node create_pptx.js
+```
+
+详细用法参考 pptx SKILL 中的 pptxgenjs.md。
+
+---
+
+## 五、工作流程
+
+```
+1. 阅读论文 PDF，提取核心内容
+   │
+2. 提取论文图片
+   ├── 尝试从出版商网站下载（优先）
+   └── 失败则用 pdftoppm + 裁剪
+   │
+3. 生成目标格式
+   ├── 海报：HTML 文件 + figures/ 目录
+   ├── PPT：Node.js + pptxgenjs
+   └── 网站：交互式 HTML
+   │
+4. 预览验证
+   ├── python3 -m http.server 本地预览
+   ├── 检查图片加载、折叠展开、放大功能
+   └── 验证物种图标、流程图、特殊字符显示
+```
+
+## 参考文档
+
+- [references/figure-extraction.md](references/figure-extraction.md) — 各出版商图片提取详细指南
+- [references/poster-guide.md](references/poster-guide.md) — 海报 HTML/CSS 完整模板与样式

genek-paper-2-all/references/figure-extraction.md

@@ -0,0 +1,119 @@
+# 学术论文图片提取指南
+
+## 出版商网站图片 URL 模板
+
+### Springer Nature / BMC 系列
+
+适用期刊：BMC Biology, Nature, Nature Methods, Genome Biology 等。
+
+**URL 格式**：
+```
+https://media.springernature.com/full/springer-static/image/art%3A{DOI_URL_ENCODED}/MediaObjects/{journal_id}_{year}_{article_id}_Fig{N}_HTML.png
+```
+
+**DOI 解析示例**：
+
+| DOI | journal_id | year | article_id |
+|-----|-----------|------|------------|
+| `10.1186/s12915-022-01301-7` | 12915 | 2022 | 1301 |
+| `10.1038/s41586-023-06004-9` | 41586 | 2023 | 6004 |
+| `10.1186/s13059-021-02500-z` | 13059 | 2021 | 2500 |
+
+解析规则：
+- `journal_id`：DOI 中 `/s` 后面到 `-` 之间的数字
+- `year`：紧接其后的 4 位年份
+- `article_id`：年份后到末尾修订号之间的数字（去掉 `-N` 后缀）
+
+**完整下载脚本**：
+```bash
+#!/bin/bash
+DOI="10.1186/s12915-022-01301-7"
+JOURNAL_ID="12915"
+YEAR="2022"
+ARTICLE_ID="1301"
+FIG_COUNT=6
+
+DOI_ENCODED=$(echo "$DOI" | sed 's|/|%2F|g; s|:|%3A|g')
+
+mkdir -p figures
+for i in $(seq 1 $FIG_COUNT); do
+  url="https://media.springernature.com/full/springer-static/image/art%3A${DOI_ENCODED}/MediaObjects/${JOURNAL_ID}_${YEAR}_${ARTICLE_ID}_Fig${i}_HTML.png"
+  echo "下载 Fig ${i}..."
+  curl -sL -o "figures/fig${i}.png" "$url"
+  if [ -s "figures/fig${i}.png" ]; then
+    echo "  成功: $(wc -c < "figures/fig${i}.png") bytes"
+  else
+    echo "  失败: 文件为空，URL 可能不正确"
+  fi
+done
+```
+
+### 其他出版商（待补充）
+
+| 出版商 | 图片 URL 特征 | 备注 |
+|--------|--------------|------|
+| Elsevier (Cell/Lancet) | `ars.els-cdn.com` 域名 | 通常需要从文章页面解析 |
+| Wiley | `onlinelibrary.wiley.com` | 图片嵌入在文章页面 |
+| Oxford University Press | `oup.com` 域名 | 类似 Springer 有独立图片页 |
+| PLOS | `journals.plos.org` | 开放获取，图片可直接下载 |
+| MDPI | `mdpi.com` | 开放获取，图片 URL 规律性强 |
+
+> 遇到新出版商时，先访问论文网页版，在文章页面中查找 "Full size image" 或类似链接，
+> 用浏览器开发者工具查看图片的实际 URL，总结 URL 模板后补充到此文档。
+
+---
+
+## 备选方案：PDF 提取
+
+### pdftoppm 整页转图
+
+```bash
+# 前置条件：安装 Poppler
+# macOS: brew install poppler
+# Ubuntu: apt install poppler-utils
+
+# 300 DPI 高清转换所有页面
+pdftoppm -png -r 300 paper.pdf figures/page
+
+# 仅转换特定页面（如第3页）
+pdftoppm -png -r 300 -f 3 -l 3 paper.pdf figures/page
+```
+
+转换后需要人工确认各 Figure 对应的页码，然后重命名：
+```bash
+mv figures/page-03.png figures/fig1.png
+mv figures/page-05.png figures/fig2.png
+# ...
+rm figures/page-*.png  # 删除中间文件
+```
+
+### Pillow 裁剪（不推荐，精度差）
+
+如果必须裁剪，使用以下 Python 脚本：
+
+```python
+from PIL import Image
+
+img = Image.open("figures/fig1.png")
+# crop box: (left, upper, right, lower)
+# 需要逐张图手动确定坐标，容易不精确
+cropped = img.crop((35, 210, 2445, 2815))
+cropped.save("figures/fig1.png")
+```
+
+**已知问题**：
+- 页眉位置因期刊格式不同而变化，难以统一
+- 图注与正文的分界不清晰
+- 多次裁剪尝试耗时且效果不稳定
+
+**结论**：始终优先从出版商网站下载原始图片。
+
+---
+
+## pdfimages（不推荐）
+
+```bash
+pdfimages -png paper.pdf figures/img
+```
+
+**问题**：学术论文中的 Figure 通常由多个子面板（A, B, C...）组成，在 PDF 中以向量图形 + 多个小位图混合存储。`pdfimages` 只能提取嵌入的位图，得到的往往是碎片化的小图，无法还原完整 Figure。

genek-paper-2-all/references/poster-guide.md

@@ -0,0 +1,389 @@
+# 学术海报 HTML/CSS 完整指南
+
+## 整体结构
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>论文标题 — Poster</title>
+  <style>/* 样式见下方 */</style>
+</head>
+<body>
+  <div class="poster">
+    <div class="header"><!-- 标题/作者/单位 --></div>
+    <div class="content"><!-- 3列网格 --></div>
+    <div class="footer"><!-- Data Availability / Funding --></div>
+  </div>
+
+  <!-- Lightbox -->
+  <div class="lightbox-overlay" id="lightbox">
+    <img id="lightbox-img" src="" alt="">
+    <div class="lightbox-hint">Click anywhere or press Esc to close</div>
+  </div>
+
+  <script>/* Lightbox JS 见下方 */</script>
+</body>
+</html>
+```
+
+## CSS 变量（配色方案）
+
+```css
+:root {
+  --primary: #1B3A4B;
+  --secondary: #065A82;
+  --accent: #00A7E1;
+  --warm: #E8927C;
+  --bg-light: #F4F7F9;
+  --bg-cream: #FAFBFC;
+  --text-dark: #1A1A2E;
+  --text-muted: #5A6B7D;
+  --gold: #D4A574;
+  --green-a: #2E8B57;
+  --red-b: #C85A54;
+}
+```
+
+## 3列网格布局
+
+```css
+.poster { width: 48in; background: var(--bg-cream); }
+
+.content {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.3in;
+  padding: 0.45in 0.55in;
+}
+
+/* 板块定位 */
+.background   { grid-column: 1; grid-row: 1; }
+.study-design { grid-column: 1; grid-row: 2; }
+.methods-flow { grid-column: 1; grid-row: 3; }
+.results-1    { grid-column: 2; grid-row: 1; }
+.results-2    { grid-column: 2; grid-row: 2; }
+.results-3    { grid-column: 3; grid-row: 1; }
+.results-4    { grid-column: 3; grid-row: 2; }
+.conclusions  { grid-column: 2 / 4; grid-row: 3; }
+```
+
+## 物种图标系统
+
+**原则**：不用 emoji，用 CSS 圆形缩写，确保跨平台一致。
+
+```css
+.sp-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 0.22in; height: 0.22in; border-radius: 50%;
+  font-size: 0.11in; font-weight: 700; color: white;
+}
+.sp-icon.mammal-icon { background: var(--secondary); }
+.sp-icon.bird-icon   { background: var(--warm); }
+.sp-icon.fish-icon   { background: var(--green-a); }
+```
+
+```html
+<span class="sp-icon mammal-icon">Hu</span> Human
+<span class="sp-icon mammal-icon">Mo</span> Mouse
+<span class="sp-icon bird-icon">Ch</span> Chicken
+<span class="sp-icon fish-icon">Zf</span> Zebrafish
+```
+
+## 统计数据展示（stat-box）
+
+```css
+.stat-row { display: flex; gap: 0.15in; flex-wrap: wrap; }
+.stat-box {
+  flex: 1; min-width: 1in;
+  background: var(--bg-light); border-radius: 0.06in;
+  padding: 0.14in; text-align: center;
+  border-left: 3px solid var(--accent);
+}
+.stat-box .number {
+  font-size: 0.34in; font-weight: 900;
+  color: var(--secondary);
+}
+.stat-box .label {
+  font-size: 0.12in; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 1px;
+}
+```
+
+## 发现卡片（finding-card）
+
+```css
+.finding-card {
+  background: var(--bg-light); border-radius: 0.06in;
+  padding: 0.15in; margin: 0.1in 0;
+  border-left: 4px solid var(--accent);
+}
+.finding-card.important {
+  border-left-color: var(--warm);
+  background: #FFF8F5;
+}
+```
+
+## CSS 流程图
+
+```css
+.flowchart {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 0;
+}
+.flow-node {
+  background: white; border: 2px solid var(--secondary);
+  border-radius: 0.06in; padding: 0.1in 0.15in;
+  text-align: center; width: 90%;
+}
+.flow-node.primary-node {
+  background: var(--secondary); color: white;
+}
+.flow-arrow {
+  width: 2px; height: 0.18in; background: var(--secondary);
+  position: relative;
+}
+.flow-arrow::after {
+  content: ''; position: absolute;
+  bottom: -4px; left: -4px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--secondary);
+}
+/* 分支节点 */
+.flow-branch {
+  display: grid; grid-template-columns: repeat(5, 1fr);
+  gap: 0.08in; width: 100%;
+}
+```
+
+## 折叠图表
+
+```css
+details.fig-collapse {
+  margin-top: 0.12in;
+  border: 1px solid #D8DEE4;
+  border-radius: 0.06in;
+  overflow: hidden;
+}
+details.fig-collapse summary {
+  background: var(--bg-light);
+  padding: 0.1in 0.14in;
+  font-weight: 700; color: var(--secondary);
+  cursor: pointer;
+  list-style: none;
+}
+details.fig-collapse summary::-webkit-details-marker { display: none; }
+
+/* CSS 箭头（不要在 HTML 中重复放箭头字符） */
+details.fig-collapse summary::before {
+  content: '\25B8';
+  color: var(--accent);
+  transition: transform 0.2s;
+  display: inline-block;
+  margin-right: 0.08in;
+}
+details.fig-collapse[open] summary::before {
+  transform: rotate(90deg);
+}
+
+/* 图片容器 */
+.fig-image-container {
+  text-align: center; margin: 0.08in 0;
+  border: 1px solid #E0E4E8; border-radius: 0.04in;
+  overflow: hidden;
+}
+.fig-image-container img {
+  max-width: 100%; height: auto;
+  display: block; margin: 0 auto;
+  cursor: zoom-in;
+}
+.fig-image-container img:hover { opacity: 0.85; }
+.fig-caption {
+  font-size: 0.12in; color: var(--text-muted);
+  padding: 0.06in; background: var(--bg-light);
+  text-align: left;
+}
+```
+
+## Lightbox 放大查看
+
+```css
+.lightbox-overlay {
+  display: none; position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.88);
+  z-index: 9999;
+  justify-content: center; align-items: center;
+  cursor: zoom-out;
+}
+.lightbox-overlay.active { display: flex; }
+.lightbox-overlay img {
+  max-width: 92%; max-height: 92%;
+  object-fit: contain; border-radius: 4px;
+  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
+}
+```
+
+```javascript
+(function(){
+  var overlay = document.getElementById('lightbox');
+  var lbImg = document.getElementById('lightbox-img');
+  document.querySelectorAll('.fig-image-container img').forEach(function(img){
+    img.addEventListener('click', function(){
+      lbImg.src = this.src;
+      lbImg.alt = this.alt;
+      overlay.classList.add('active');
+    });
+  });
+  overlay.addEventListener('click', function(){ overlay.classList.remove('active'); });
+  document.addEventListener('keydown', function(e){
+    if(e.key === 'Escape') overlay.classList.remove('active');
+  });
+})();
+```
+
+## 特殊字符速查表
+
+| 字符 | HTML 实体 | CSS content | 用途 |
+|------|----------|-------------|------|
+| ▶ | `&#x25B6;` | `\25B6` | 折叠箭头 |
+| ▸ | `&#x25B8;` | `\25B8` | 小三角 |
+| → | `&#x2192;` | `\2192` | 右箭头 |
+| ➡ | `&#x27A1;` | `\27A1` | 粗右箭头 |
+| — | `&#x2014;` | `\2014` | 破折号 |
+| – | `&#x2013;` | `\2013` | 短横线 |
+| † | `&#x2020;` | `\2020` | 共同一作 |
+| ≥ | `&ge;` | - | 大于等于 |
+| ≤ | `&le;` | - | 小于等于 |
+| × | `&times;` | - | 乘号 |
+| − | `&minus;` | - | 减号 |
+| ↔ | `&#x2194;` | `\2194` | 双向箭头 |
+| © | `&copy;` | - | 版权 |
+
+## 打印与预览
+
+```css
+@media print {
+  body { background: white; padding: 0; }
+  .poster { box-shadow: none; }
+  details.fig-collapse { open: true; }
+}
+```
+
+本地预览命令：
+```bash
+cd project_directory
+python3 -m http.server 8765
+# 访问 http://localhost:8765/poster.html
+```
+
+## 中英文双语切换
+
+### 语言切换按钮样式
+
+```css
+.lang-switch {
+  position: fixed;
+  top: 0.2in; right: 0.3in;
+  z-index: 100;
+  display: flex; gap: 2px;
+  background: rgba(255,255,255,0.95);
+  border-radius: 0.04in;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+  overflow: hidden;
+  border: 1px solid #D8DEE4;
+}
+.lang-btn {
+  border: none; background: transparent;
+  padding: 0.06in 0.14in;
+  font-size: 0.13in; font-weight: 700;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.lang-btn:hover { color: var(--secondary); }
+.lang-btn.active {
+  background: var(--secondary);
+  color: white;
+}
+```
+
+### HTML 双语标记规范
+
+所有需要翻译的文本元素加 `data-lang` 属性：
+
+```html
+<!-- 板块标题 -->
+<h2 class="section-title" data-lang="en">Background</h2>
+<h2 class="section-title" data-lang="zh">研究背景</h2>
+
+<!-- 段落内容 -->
+<p data-lang="en">The 3D architecture of the eukaryotic genome...</p>
+<p data-lang="zh">真核生物基因组的三维架构高度有序...</p>
+
+<!-- finding-card -->
+<div class="finding-card">
+  <h4 data-lang="en">Chromosome length governs architecture</h4>
+  <h4 data-lang="zh">染色体长度决定整体架构</h4>
+  <p data-lang="en">Contact probability negatively correlated...</p>
+  <p data-lang="zh">接触概率与基因组距离呈负相关...</p>
+</div>
+
+<!-- 结论条目 -->
+<div class="concl-item">
+  <div class="concl-num">1</div>
+  <div class="concl-text" data-lang="en"><strong>Genome size...</strong></div>
+  <div class="concl-text" data-lang="zh"><strong>基因组大小...</strong></div>
+</div>
+```
+
+### 无需双语的元素
+
+以下内容中英文通用，**不加** `data-lang`：
+- 数字/统计值（stat-box 中的 `12`、`5.75B` 等）
+- 物种缩写图标（`Hu`、`Mo`、`Ch`）
+- 图片（`<img>` 标签）
+- 数据表格中的数值列
+- DOI、GEO 编号等标识符
+- 作者姓名、单位名称（保持英文原文）
+
+表格表头需要双语：
+```html
+<thead>
+  <tr data-lang="en"><th>Species</th><th>Replicates</th><th>Genome Size</th></tr>
+  <tr data-lang="zh"><th>物种</th><th>重复数</th><th>基因组大小</th></tr>
+</thead>
+```
+
+### 完整 JS 切换逻辑
+
+```javascript
+(function(){
+  var btns = document.querySelectorAll('.lang-btn');
+  btns.forEach(function(btn){
+    btn.addEventListener('click', function(){
+      var lang = this.dataset.target;
+      document.querySelectorAll('[data-lang]').forEach(function(el){
+        el.style.display = el.dataset.lang === lang ? '' : 'none';
+      });
+      btns.forEach(function(b){ b.classList.remove('active'); });
+      this.classList.add('active');
+    });
+  });
+  // 默认英文
+  document.querySelectorAll('[data-lang="zh"]').forEach(function(el){
+    el.style.display = 'none';
+  });
+})();
+```
+
+### 打印时双语处理
+
+```css
+@media print {
+  .lang-switch { display: none; }
+  /* 打印时显示当前选中的语言，或可改为两种都显示 */
+}
+```