magazine-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

杂志排版设计师

Magazine Layout Designer

将纯文本转换为专业设计的杂志风格HTML页面，使用Tailwind CSS实现精美排版。

Convert plain text into professionally designed magazine-style HTML pages with exquisite typesetting using Tailwind CSS.

快速开始

Quick Start

用户提供文本内容
与用户讨论并选择合适的风格
根据选定风格生成完整HTML
可选：导出为PDF

User provides text content
Discuss with the user and select an appropriate style
Generate complete HTML based on the selected style
Optional: Export as PDF

工作流程

Workflow

第一步：分析内容结构

Step 1: Analyze Content Structure

识别文本的结构元素：

标题和副标题
章节和小标题
重要引言或金句
列表和数据要点
作者/日期信息

Identify structural elements of the text:

Headings and subheadings
Chapters and subchapters
Important quotes or key sentences
Lists and data points
Author/date information

第二步：风格选择（与用户协商）

Step 2: Style Selection (Consult with User)

重要：必须向用户展示风格选项，与用户讨论后再确定。使用 AskUserQuestion 工具让用户选择。

阅读 references/styles.md 获取完整模板。

可选风格一览：

编号	风格名称	适用场景	视觉特点
1	经典优雅 (Classic Elegance)	文学、散文、回忆录	衬线字体、暖色调、首字下沉、装饰性分隔线
2	现代极简 (Modern Minimalist)	科技博客、现代文章	无衬线字体、大量留白、简洁线条
3	科技杂志 (Tech Magazine)	编程、技术内容	渐变色彩、代码块样式、未来感设计
4	自然生活 (Nature & Lifestyle)	生活方式、旅行、美食	自然绿色调、有机造型、手写风格点缀
5	大胆社论 (Bold Editorial)	观点、评论文章	超大标题、高对比黑白、红色强调
6	复古怀旧 (Vintage Retro)	历史、怀旧内容	复古边框、打字机字体、羊皮纸质感
7	商务专业 (Corporate Professional)	商业报告、企业文档	海军蓝配色、清晰层级、专业严谨
8	创意艺术 (Creative Art)	设计、艺术创作	不对称布局、色块装饰、手绘风格
9	学术期刊 (Academic Journal)	学术论文、研究报告	双栏布局、摘要样式、引用格式
10	时尚奢华 (Fashion Luxe)	时尚、奢侈品内容	金色点缀、优雅衬线、精致留白
11	新闻报道 (News & Report)	新闻、新闻报道	报纸风格、多级标题、突发标签
12	暗黑科技 (Dark Mode Tech)	开发者内容	深色背景、荧光配色、终端风格

风格推荐逻辑：

文学/散文类 → 推荐：经典优雅、复古怀旧
技术/编程类 → 推荐：科技杂志、暗黑科技、现代极简
商业/报告类 → 推荐：商务专业、新闻报道
生活/旅行类 → 推荐：自然生活、时尚奢华
观点/评论类 → 推荐：大胆社论、创意艺术
学术/研究类 → 推荐：学术期刊

用户也可以：

混合多种风格元素
自定义颜色、字体
调整页面尺寸和间距

Important: You must present style options to the user and confirm after discussion. Use the AskUserQuestion tool to let the user choose.

Read references/styles.md for complete templates.

Overview of Optional Styles:

ID	Style Name	Use Case	Visual Features
1	Classic Elegance	Literature, essays, memoirs	Serif fonts, warm color tones, drop cap, decorative dividers
2	Modern Minimalist	Tech blogs, modern articles	Sans-serif fonts, ample white space, clean lines
3	Tech Magazine	Programming, technical content	Gradient colors, code block styles, futuristic design
4	Nature & Lifestyle	Lifestyle, travel, food	Natural green tones, organic shapes, handwritten style accents
5	Bold Editorial	Opinions, commentaries	Oversized headings, high-contrast black and white, red accents
6	Vintage Retro	History, nostalgic content	Vintage borders, typewriter fonts, parchment texture
7	Corporate Professional	Business reports, corporate documents	Navy blue color scheme, clear hierarchy, professional and rigorous
8	Creative Art	Design, artistic creation	Asymmetric layout, color block decorations, hand-drawn style
9	Academic Journal	Academic papers, research reports	Two-column layout, abstract style, citation format
10	Fashion Luxe	Fashion, luxury content	Gold accents, elegant serifs, refined white space
11	News & Report	News, news reports	Newspaper style, multi-level headings, breaking news tags
12	Dark Mode Tech	Developer content	Dark background, fluorescent color scheme, terminal style

Style Recommendation Logic:

Literature/essays → Recommended: Classic Elegance, Vintage Retro
Technical/programming → Recommended: Tech Magazine, Dark Mode Tech, Modern Minimalist
Business/reports → Recommended: Corporate Professional, News & Report
Lifestyle/travel → Recommended: Nature & Lifestyle, Fashion Luxe
Opinions/commentaries → Recommended: Bold Editorial, Creative Art
Academic/research → Recommended: Academic Journal

Users can also:

Mix elements from multiple styles
Customize colors, fonts
Adjust page size and spacing

第三步：生成HTML

Step 3: Generate HTML

从 references/styles.md 读取选定风格的模板，生成完整HTML。

生成规则：

严格使用选定风格的模板结构
保留用户原文的全部内容 - 绝不删减或总结
应用合适的排版组件：
- 首段使用
```
drop-cap
```
  首字下沉
- 重要语句使用
```
blockquote
```
  引言样式
- 章节间使用风格专属的分隔线
- 正确的标题层级 (h1 > h2 > h3)
必须包含智能分页CSS（见下方说明）
内容必须适应页面尺寸
包含所有CSS（内联或通过CDN引入Tailwind、Google Fonts）
输出完整、自包含的HTML文件

核心排版组件：

html

<!-- 首字下沉段落 -->
<p class="drop-cap">首段文字内容...</p>

<!-- 引言/引用块 -->
<blockquote>
  <p>"重要引言内容"</p>
  <cite>— 来源</cite>
</blockquote>

<!-- 章节分隔线 -->
<div class="elegant-divider"><span>※</span></div>

<!-- 标题区域 -->
<header>
  <h1>主标题</h1>
  <p class="subtitle">副标题或导语</p>
</header>

智能分页CSS（必须包含）：

确保PDF导出时内容不会在元素中间被切断。每个模板已内置此CSS，生成HTML时必须保留：

css

/* 打印/PDF模式 */
@media print {
  /* 标题后禁止分页 */
  h1, h2, h3, .chapter-number, .chapter-title {
    page-break-after: avoid; break-after: avoid;
  }
  /* 块级元素内部禁止分页 */
  blockquote, .highlight-box, .stage-item, .question-item,
  .code-block, .terminal, figure, img, table {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* 列表保持完整 */
  ul, ol, .numbered-list, .stage-list {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* 分隔线后禁止分页 */
  .elegant-divider, .divider, hr {
    page-break-after: avoid; break-after: avoid;
  }
  /* 段落孤行寡行控制 */
  p { orphans: 3; widows: 3; }
}
/* 非打印时也应用，确保PDF渲染一致 */
blockquote, .highlight-box, .code-block, .terminal, figure, img, table {
  page-break-inside: avoid; break-inside: avoid;
}

CSS属性	效果	适用元素
`page-break-inside: avoid`	元素内部禁止分页	引言、卡片、列表
`page-break-after: avoid`	元素后禁止分页	标题、分隔线
`orphans: 3`	页底至少保留3行	段落
`widows: 3`	页顶至少保留3行	段落

Read the template for the selected style from references/styles.md to generate complete HTML.

Generation Rules:

Strictly follow the template structure of the selected style
Preserve all content from the user's original text - Never delete or summarize
Apply appropriate typesetting components:
- Use
```
drop-cap
```
  for the first paragraph
- Use
```
blockquote
```
  style for important sentences
- Use style-specific dividers between chapters
- Correct heading hierarchy (h1 > h2 > h3)
Must include intelligent pagination CSS (see explanation below)
Content must adapt to page size
Include all CSS (inline or via CDN for Tailwind, Google Fonts)
Output a complete, self-contained HTML file

Core Typesetting Components:

html

<!-- Drop cap paragraph -->
<p class="drop-cap">First paragraph content...</p>

<!-- Quote/citation block -->
<blockquote>
  <p>"Important quote content"</p>
  <cite>— Source</cite>
</blockquote>

<!-- Chapter divider -->
<div class="elegant-divider"><span>※</span></div>

<!-- Header section -->
<header>
  <h1>Main Title</h1>
  <p class="subtitle">Subtitle or introduction</p>
</header>

Intelligent Pagination CSS (Must Include):

Ensure content is not cut off in the middle of elements during PDF export. This CSS is built into each template and must be preserved when generating HTML:

css

/* Print/PDF mode */
@media print {
  /* Prevent page breaks after headings */
  h1, h2, h3, .chapter-number, .chapter-title {
    page-break-after: avoid; break-after: avoid;
  }
  /* Prevent page breaks inside block elements */
  blockquote, .highlight-box, .stage-item, .question-item,
  .code-block, .terminal, figure, img, table {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Keep lists intact */
  ul, ol, .numbered-list, .stage-list {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Prevent page breaks after dividers */
  .elegant-divider, .divider, hr {
    page-break-after: avoid; break-after: avoid;
  }
  /* Control orphan and widow lines for paragraphs */
  p { orphans: 3; widows: 3; }
}
/* Apply to non-print modes too for consistent PDF rendering */
blockquote, .highlight-box, .code-block, .terminal, figure, img, table {
  page-break-inside: avoid; break-inside: avoid;
}

CSS Property	Effect	Applicable Elements
`page-break-inside: avoid`	Prevent page breaks inside elements	Quotes, cards, lists
`page-break-after: avoid`	Prevent page breaks after elements	Headings, dividers
`orphans: 3`	Keep at least 3 lines at the bottom of a page	Paragraphs
`widows: 3`	Keep at least 3 lines at the top of a page	Paragraphs

第四步：PDF导出（可选）

Step 4: PDF Export (Optional)

使用

scripts/html_to_pdf.py

脚本：

bash

undefined

Use the

scripts/html_to_pdf.py

script:

bash

undefined

检查可用引擎

Check available engines

python scripts/html_to_pdf.py --check

转换（自动检测最佳引擎）

Convert (auto-detect best engine)

python scripts/html_to_pdf.py magazine.html

指定输出文件名

Specify output filename

python scripts/html_to_pdf.py magazine.html output.pdf

使用特定引擎

Use specific engine

python scripts/html_to_pdf.py magazine.html --engine playwright


**引擎安装方法：**
- Playwright（推荐）: `pip install playwright && playwright install chromium`
- WeasyPrint: `pip install weasyprint`
- wkhtmltopdf: `brew install wkhtmltopdf` (macOS)

python scripts/html_to_pdf.py magazine.html --engine playwright


**Engine Installation Methods:**
- Playwright (Recommended): `pip install playwright && playwright install chromium`
- WeasyPrint: `pip install weasyprint`
- wkhtmltopdf: `brew install wkhtmltopdf` (macOS)

长文分页处理

Long Article Pagination Handling

智能分页：所有模板已内置分页控制CSS，PDF导出时自动避免在以下位置分页：

标题与正文之间
引用块、高亮框、列表内部
分隔线与下方内容之间

对于超长内容（需手动分割时）：

在自然断点处分页（每页约800-1000字）
生成独立HTML文件：
```
文章_第1页.html
```
、
```
文章_第2页.html
```
每页都是完整自包含的HTML（含完整CSS和分页控制）

Intelligent Pagination: All templates have built-in pagination control CSS, which automatically avoids page breaks at the following positions during PDF export:

Between headings and body text
Inside quote blocks, highlight boxes, lists
Between dividers and content below

For ultra-long content (when manual splitting is needed):

Split at natural break points (approx. 800-1000 words per page)
Generate independent HTML files:
```
Article_Page1.html
```
,
```
Article_Page2.html
```
Each page is a complete, self-contained HTML file (with full CSS and pagination controls)

输出格式

Output Format

markdown

undefined

markdown

undefined

您的杂志页面

Your Magazine Page

将以下代码保存为

文章.html

：

```html

<!DOCTYPE html>

...完整HTML代码... ```

查看方式： 用浏览器打开

文章.html

导出PDF：

python scripts/html_to_pdf.py 文章.html

undefined

Save the following code as

Article.html

html

<!DOCTYPE html>
...complete HTML code...

How to View: Open

Article.html

in a browser Export to PDF:

python scripts/html_to_pdf.py Article.html

undefined

风格定制

Style Customization

用户可能要求修改：

颜色：修改CSS变量或Tailwind类
字体：更新Google Fonts导入
间距：调整padding、margin、line-height
布局：修改页面宽高尺寸

在保持整体风格协调的前提下应用修改。

Users may request modifications to:

Colors: Modify CSS variables or Tailwind classes
Fonts: Update Google Fonts imports
Spacing: Adjust padding, margin, line-height
Layout: Modify page width and height dimensions

Apply modifications while maintaining overall style harmony.

资源文件

Resource Files

scripts/

```
html_to_pdf.py
```
- HTML转PDF脚本，支持多种渲染引擎（Playwright/WeasyPrint/wkhtmltopdf）

```
html_to_pdf.py
```
- HTML to PDF script that supports multiple rendering engines (Playwright/WeasyPrint/wkhtmltopdf)

references/

```
styles.md
```
- 全部12种风格的完整模板，包含配色方案、字体设置、智能分页CSS和HTML模板代码

```
styles.md
```
- Complete templates for all 12 styles, including color schemes, font settings, intelligent pagination CSS, and HTML template code