| name | pdf2html |
| description | 读取用户提供的 PDF 文件，提取结构化内容，随机选择 templates/ 目录下的一个 HTML 模板作为风格蓝本，生成专业美观的网页。所有数学公式自动使用 MathJax 渲染，支持标题、段落、表格、公式识别。 |
| license | MIT |
| compatibility | opencode |
| metadata | {"category":"document","tags":"pdf html converter mathjax template random"} |
What I do
- 确认 PDF 文件路径（支持拖入或指定）
- 使用 Python + pypdf（自动安装如果缺失）结构化提取文本、标题、段落、表格，并智能识别/保留数学公式为 LaTeX
- 扫描 templates/ 目录下的所有 .html 文件，随机挑选一个
- 将提取内容注入模板（替换占位符 {{title}}、{{content}}、{{mathjax}} 等）
- 生成完整响应式网页：包含 MathJax CDN、目录导航、站内搜索、暗黑模式切换、打印优化
- 输出到
pdf-web/ 文件夹（可直接部署或打开）
When to use me
当用户说「把这个 PDF 转成网页」「用模板生成 PDF 阅读器」「把论文做成网站」「保留公式转网页」时激活。
澄清问题：「PDF 文件路径？需要突出哪些部分（摘要/公式/表格）？」
How to execute
-
PDF 提取（优先自动）：
python -c "
from pypdf import PdfReader
import sys
reader = PdfReader(sys.argv[1])
text = ''
for page in reader.pages:
text += page.extract_text() + '\n\n'
print(text)
" path/to/file.pdf
（如果 pypdf 未安装，会自动提示 pip install --user pypdf）
-
模板处理：
- 列出 templates/*.html
- 使用 Python random.choice 随机挑选一个
- 读取模板内容，将 {{title}} 替换为 PDF 标题，{{content}} 替换为结构化 HTML（h1/h2/p/table + MathJax 包裹的公式）
- 确保模板中已包含 MathJax script 占位符 {{mathjax_script}}
-
输出：
- 创建
pdf-web/index.html
- 自动打开浏览器预览
- 生成 README.md 说明「此网页由 pdf-to-beautiful-webpage Skill 生成」
Best Practices
- 公式处理：PDF 中 $...$ 或 [ ] 直接保留；纯文本公式用 LLM 转为 LaTeX
- 文字排版要求：字母数字公式和汉字之间留空格
- 模板占位符（模板必须包含）：
- {{title}}
- {{mathjax_script}} （MathJax CDN + 配置）
- {{content}} （主内容 HTML）
- {{toc}} （可选目录）
- 随机性：每次运行必须真正随机（不可固定第一个）
- 美观要求：保留模板的 Tailwind/Bootstrap/Glassmorphism 等现代风格，添加响应式 + 移动友好
- 保持原 PDF 排版意图：图片描述转 alt、表格转 HTML table
Examples
示例1 用户输入：把 paper.pdf 转成网页
→ 随机选用 template-clean-doc.html，生成带侧边目录、MathJax 公式的学术阅读网页
示例2 用户输入：把 lecture.pdf 用现代模板转网页
→ 随机选用 template-modern-blog.html，生成英雄区 + 卡片式内容 + 公式完美渲染的教学网页
templates/ 目录下的示例模板（直接复制使用）
1. templates/template-clean-doc.html（干净学术文档风格，推荐论文/教材）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<script src="https://cdn.tailwindcss.com"></script>
{{mathjax_script}}
<style>body { font-family: system-ui; } .math { padding: 1rem; }</style>
</head>
<body class="bg-zinc-50 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100">
<div class="max-w-4xl mx-auto p-8">
<h1 class="text-4xl font-bold mb-8">{{title}}</h1>
<div class="prose dark:prose-invert max-w-none">
{{content}}
</div>
</div>
{{mathjax_script}}
<script>
MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']] } };
</script>
</body>
</html>
2. templates/template-modern-blog.html（现代博客/教学风格，带英雄区和卡片）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<script src="https://cdn.tailwindcss.com"></script>
{{mathjax_script}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-zinc-900 text-white">
<div class="max-w-5xl mx-auto">
<div class="h-64 bg-gradient-to-r from-violet-600 to-fuchsia-600 flex items-center justify-center">
<h1 class="text-5xl font-bold">{{title}}</h1>
</div>
<div class="p-8 prose prose-invert max-w-none">
{{content}}
</div>
</div>
{{mathjax_script}}
<script>
MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']] } };
</script>
</body>
</html>
（MathJax 脚本占位符会在注入时自动替换为完整 CDN 代码）
