mirror of
https://github.com/comeonzhj/Auto-Redbook-Skills.git
synced 2026-03-27 12:49:27 +08:00
refactor md2Redbook skill with themes and paging
This commit is contained in:
ZhangJia
@@ -1,188 +1,511 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* 小红书卡片渲染脚本 - Node.js 版本
|
||||
* 将 Markdown 文件渲染为小红书风格的图片卡片
|
||||
* 小红书卡片渲染脚本 - Node.js 增强版
|
||||
* 支持多种排版样式和智能分页策略
|
||||
*
|
||||
* 使用方法:
|
||||
* node render_xhs.js <markdown_file> [--output-dir <output_directory>]
|
||||
* node render_xhs.js <markdown_file> [options]
|
||||
*
|
||||
* 选项:
|
||||
* --output-dir, -o 输出目录（默认为当前工作目录）
|
||||
* --theme, -t 排版主题：default, playful-geometric, neo-brutalism, 等
|
||||
* --mode, -m 分页模式：separator, auto-fit, auto-split, dynamic
|
||||
* --width, -w 图片宽度（默认 1080）
|
||||
* --height, -h 图片高度（默认 1440）
|
||||
* --dpr 设备像素比（默认 2）
|
||||
*
|
||||
* 依赖安装:
|
||||
* npm install marked js-yaml playwright
|
||||
* npx playwright install chromium
|
||||
* npm install marked yaml playwright
|
||||
* npx playwright install chromium
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { chromium } = require('playwright');
|
||||
const { marked } = require('marked');
|
||||
const yaml = require('js-yaml');
|
||||
const yaml = require('yaml');
|
||||
const { chromium } = require('playwright');
|
||||
|
||||
// 获取脚本所在目录
|
||||
const SCRIPT_DIR = path.dirname(__dirname);
|
||||
const ASSETS_DIR = path.join(SCRIPT_DIR, 'assets');
|
||||
const THEMES_DIR = path.join(ASSETS_DIR, 'themes');
|
||||
|
||||
// 卡片尺寸配置 (3:4 比例)
|
||||
const CARD_WIDTH = 1080;
|
||||
const CARD_HEIGHT = 1440;
|
||||
// 默认卡片尺寸配置 (3:4 比例)
|
||||
const DEFAULT_WIDTH = 1080;
|
||||
const DEFAULT_HEIGHT = 1440;
|
||||
const MAX_HEIGHT = 2160;
|
||||
|
||||
// 可用主题列表
|
||||
const AVAILABLE_THEMES = [
|
||||
'default',
|
||||
'playful-geometric',
|
||||
'neo-brutalism',
|
||||
'botanical',
|
||||
'professional',
|
||||
'retro',
|
||||
'terminal',
|
||||
'sketch'
|
||||
];
|
||||
|
||||
// 分页模式
|
||||
const PAGING_MODES = ['separator', 'auto-fit', 'auto-split', 'dynamic'];
|
||||
|
||||
// 主题背景色
|
||||
const THEME_BACKGROUNDS = {
|
||||
'default': 'linear-gradient(180deg, #f3f3f3 0%, #f9f9f9 100%)',
|
||||
'playful-geometric': 'linear-gradient(135deg, #8B5CF6 0%, #F472B6 100%)',
|
||||
'neo-brutalism': 'linear-gradient(135deg, #FF4757 0%, #FECA57 100%)',
|
||||
'botanical': 'linear-gradient(135deg, #4A7C59 0%, #8FBC8F 100%)',
|
||||
'professional': 'linear-gradient(135deg, #2563EB 0%, #3B82F6 100%)',
|
||||
'retro': 'linear-gradient(135deg, #D35400 0%, #F39C12 100%)',
|
||||
'terminal': 'linear-gradient(135deg, #0D1117 0%, #161B22 100%)',
|
||||
'sketch': 'linear-gradient(135deg, #555555 0%, #888888 100%)'
|
||||
};
|
||||
|
||||
// 封面标题文字渐变（随主题变化）
|
||||
const THEME_TITLE_GRADIENTS = {
|
||||
'default': 'linear-gradient(180deg, #111827 0%, #4B5563 100%)',
|
||||
'playful-geometric': 'linear-gradient(180deg, #7C3AED 0%, #F472B6 100%)',
|
||||
'neo-brutalism': 'linear-gradient(180deg, #000000 0%, #FF4757 100%)',
|
||||
'botanical': 'linear-gradient(180deg, #1F2937 0%, #4A7C59 100%)',
|
||||
'professional': 'linear-gradient(180deg, #1E3A8A 0%, #2563EB 100%)',
|
||||
'retro': 'linear-gradient(180deg, #8B4513 0%, #D35400 100%)',
|
||||
'terminal': 'linear-gradient(180deg, #39D353 0%, #58A6FF 100%)',
|
||||
'sketch': 'linear-gradient(180deg, #111827 0%, #6B7280 100%)',
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析 Markdown 文件，提取 YAML 头部和正文内容
|
||||
* 解析命令行参数
|
||||
*/
|
||||
function parseArgs() {
|
||||
const args = process.argv.slice(2);
|
||||
const options = {
|
||||
markdownFile: null,
|
||||
outputDir: process.cwd(),
|
||||
theme: 'default',
|
||||
mode: 'separator',
|
||||
width: DEFAULT_WIDTH,
|
||||
height: DEFAULT_HEIGHT,
|
||||
maxHeight: MAX_HEIGHT,
|
||||
dpr: 2
|
||||
};
|
||||
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
const arg = args[i];
|
||||
const nextArg = args[i + 1];
|
||||
|
||||
switch (arg) {
|
||||
case '--output-dir':
|
||||
case '-o':
|
||||
options.outputDir = nextArg;
|
||||
i++;
|
||||
break;
|
||||
case '--theme':
|
||||
case '-t':
|
||||
options.theme = nextArg;
|
||||
i++;
|
||||
break;
|
||||
case '--mode':
|
||||
case '-m':
|
||||
options.mode = nextArg;
|
||||
i++;
|
||||
break;
|
||||
case '--width':
|
||||
case '-w':
|
||||
options.width = parseInt(nextArg);
|
||||
i++;
|
||||
break;
|
||||
case '--height':
|
||||
options.height = parseInt(nextArg);
|
||||
i++;
|
||||
break;
|
||||
case '--max-height':
|
||||
options.maxHeight = parseInt(nextArg);
|
||||
i++;
|
||||
break;
|
||||
case '--dpr':
|
||||
options.dpr = parseInt(nextArg);
|
||||
i++;
|
||||
break;
|
||||
case '--help':
|
||||
printHelp();
|
||||
process.exit(0);
|
||||
default:
|
||||
if (!arg.startsWith('-')) {
|
||||
options.markdownFile = arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印帮助信息
|
||||
*/
|
||||
function printHelp() {
|
||||
console.log(`
|
||||
小红书卡片渲染脚本 - Node.js 版本
|
||||
|
||||
使用方法:
|
||||
node render_xhs.js <markdown_file> [options]
|
||||
|
||||
选项:
|
||||
--output-dir, -o 输出目录（默认为当前工作目录）
|
||||
--theme, -t 排版主题
|
||||
--mode, -m 分页模式
|
||||
--width, -w 图片宽度（默认 1080）
|
||||
--height 图片高度（默认 1440）
|
||||
--max-height 最大高度（默认 2160）
|
||||
--dpr 设备像素比（默认 2）
|
||||
|
||||
可用主题: ${AVAILABLE_THEMES.join(', ')}
|
||||
分页模式: ${PAGING_MODES.join(', ')}
|
||||
`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 Markdown 文件
|
||||
*/
|
||||
function parseMarkdownFile(filePath) {
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
|
||||
// 解析 YAML 头部
|
||||
const yamlPattern = /^---\s*\n([\s\S]*?)\n---\s*\n/;
|
||||
const yamlMatch = content.match(yamlPattern);
|
||||
const yamlMatch = content.match(/^---\s*\n([\s\S]*?)\n---\s*\n/);
|
||||
|
||||
let metadata = {};
|
||||
let body = content;
|
||||
|
||||
if (yamlMatch) {
|
||||
try {
|
||||
metadata = yaml.load(yamlMatch[1]) || {};
|
||||
metadata = yaml.parse(yamlMatch[1]) || {};
|
||||
} catch (e) {
|
||||
metadata = {};
|
||||
}
|
||||
body = content.slice(yamlMatch[0].length);
|
||||
}
|
||||
|
||||
return {
|
||||
metadata,
|
||||
body: body.trim()
|
||||
};
|
||||
return { metadata, body: body.trim() };
|
||||
}
|
||||
|
||||
/**
|
||||
* 按照 --- 分隔符拆分正文为多张卡片内容
|
||||
* 按分隔符拆分内容
|
||||
*/
|
||||
function splitContentBySeparator(body) {
|
||||
const parts = body.split(/\n---+\n/);
|
||||
return parts.filter(part => part.trim()).map(part => part.trim());
|
||||
return parts.map(p => p.trim()).filter(p => p);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Markdown 转换为 HTML
|
||||
* 加载主题 CSS
|
||||
*/
|
||||
function convertMarkdownToHtml(mdContent) {
|
||||
// 处理 tags（以 # 开头的标签）
|
||||
const tagsPattern = /((?:#[\w\u4e00-\u9fa5]+\s*)+)$/m;
|
||||
const tagsMatch = mdContent.match(tagsPattern);
|
||||
let tagsHtml = "";
|
||||
|
||||
if (tagsMatch) {
|
||||
const tagsStr = tagsMatch[1];
|
||||
mdContent = mdContent.slice(0, tagsMatch.index).trim();
|
||||
const tags = tagsStr.match(/#([\w\u4e00-\u9fa5]+)/g);
|
||||
if (tags) {
|
||||
tagsHtml = '<div class="tags-container">';
|
||||
for (const tag of tags) {
|
||||
tagsHtml += `<span class="tag">${tag}</span>`;
|
||||
}
|
||||
tagsHtml += '</div>';
|
||||
}
|
||||
function loadThemeCss(theme) {
|
||||
const themeFile = path.join(THEMES_DIR, `${theme}.css`);
|
||||
if (fs.existsSync(themeFile)) {
|
||||
return fs.readFileSync(themeFile, 'utf-8');
|
||||
}
|
||||
|
||||
// 转换 Markdown 为 HTML
|
||||
const html = marked.parse(mdContent, {
|
||||
breaks: true,
|
||||
gfm: true
|
||||
});
|
||||
|
||||
return html + tagsHtml;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载 HTML 模板
|
||||
*/
|
||||
function loadTemplate(templateName) {
|
||||
const templatePath = path.join(ASSETS_DIR, templateName);
|
||||
return fs.readFileSync(templatePath, 'utf-8');
|
||||
const defaultFile = path.join(THEMES_DIR, 'default.css');
|
||||
if (fs.existsSync(defaultFile)) {
|
||||
return fs.readFileSync(defaultFile, 'utf-8');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成封面 HTML
|
||||
*/
|
||||
function generateCoverHtml(metadata) {
|
||||
let template = loadTemplate('cover.html');
|
||||
|
||||
let emoji = metadata.emoji || '📝';
|
||||
function generateCoverHtml(metadata, theme, width, height) {
|
||||
const emoji = metadata.emoji || '📝';
|
||||
let title = metadata.title || '标题';
|
||||
let subtitle = metadata.subtitle || '';
|
||||
|
||||
// 限制标题和副标题长度
|
||||
if (title.length > 15) {
|
||||
title = title.slice(0, 15);
|
||||
}
|
||||
if (subtitle.length > 15) {
|
||||
subtitle = subtitle.slice(0, 15);
|
||||
}
|
||||
if (title.length > 15) title = title.slice(0, 15);
|
||||
if (subtitle.length > 15) subtitle = subtitle.slice(0, 15);
|
||||
|
||||
template = template.replace('{{EMOJI}}', emoji);
|
||||
template = template.replace('{{TITLE}}', title);
|
||||
template = template.replace('{{SUBTITLE}}', subtitle);
|
||||
const bg = THEME_BACKGROUNDS[theme] || THEME_BACKGROUNDS['default'];
|
||||
const titleBg = THEME_TITLE_GRADIENTS[theme] || THEME_TITLE_GRADIENTS['default'];
|
||||
|
||||
return template;
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=${width}, height=${height}">
|
||||
<title>小红书封面</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
background: ${bg};
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-inner {
|
||||
position: absolute;
|
||||
width: ${Math.floor(width * 0.88)}px;
|
||||
height: ${Math.floor(height * 0.91)}px;
|
||||
left: ${Math.floor(width * 0.06)}px;
|
||||
top: ${Math.floor(height * 0.045)}px;
|
||||
background: #F3F3F3;
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: ${Math.floor(width * 0.074)}px ${Math.floor(width * 0.079)}px;
|
||||
}
|
||||
|
||||
.cover-emoji {
|
||||
font-size: ${Math.floor(width * 0.167)}px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: ${Math.floor(height * 0.035)}px;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-weight: 900;
|
||||
font-size: ${Math.floor(width * 0.12)}px;
|
||||
line-height: 1.4;
|
||||
background: ${titleBg};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-weight: 350;
|
||||
font-size: ${Math.floor(width * 0.067)}px;
|
||||
line-height: 1.4;
|
||||
color: #000000;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cover-container">
|
||||
<div class="cover-inner">
|
||||
<div class="cover-emoji">${emoji}</div>
|
||||
<div class="cover-title">${title}</div>
|
||||
<div class="cover-subtitle">${subtitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成正文卡片 HTML
|
||||
*/
|
||||
function generateCardHtml(content, pageNumber = 1, totalPages = 1) {
|
||||
let template = loadTemplate('card.html');
|
||||
|
||||
const htmlContent = convertMarkdownToHtml(content);
|
||||
function generateCardHtml(content, theme, pageNumber, totalPages, width, height, mode) {
|
||||
const htmlContent = marked.parse(content);
|
||||
const themeCss = loadThemeCss(theme);
|
||||
const pageText = totalPages > 1 ? `${pageNumber}/${totalPages}` : '';
|
||||
const bg = THEME_BACKGROUNDS[theme] || THEME_BACKGROUNDS['default'];
|
||||
|
||||
template = template.replace('{{CONTENT}}', htmlContent);
|
||||
template = template.replace('{{PAGE_NUMBER}}', pageText);
|
||||
let containerStyle, innerStyle, contentStyle;
|
||||
|
||||
return template;
|
||||
if (mode === 'auto-fit') {
|
||||
containerStyle = `
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
background: ${bg};
|
||||
position: relative;
|
||||
padding: 50px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
innerStyle = `
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 60px;
|
||||
height: calc(${height}px - 100px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
contentStyle = 'flex: 1; overflow: hidden;';
|
||||
} else if (mode === 'dynamic') {
|
||||
containerStyle = `
|
||||
width: ${width}px;
|
||||
min-height: ${height}px;
|
||||
background: ${bg};
|
||||
position: relative;
|
||||
padding: 50px;
|
||||
`;
|
||||
innerStyle = `
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 60px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
`;
|
||||
contentStyle = '';
|
||||
} else {
|
||||
containerStyle = `
|
||||
width: ${width}px;
|
||||
min-height: ${height}px;
|
||||
background: ${bg};
|
||||
position: relative;
|
||||
padding: 50px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
innerStyle = `
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 60px;
|
||||
min-height: calc(${height}px - 100px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
`;
|
||||
contentStyle = '';
|
||||
}
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=${width}">
|
||||
<title>小红书卡片</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
width: ${width}px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-container { ${containerStyle} }
|
||||
.card-inner { ${innerStyle} }
|
||||
.card-content { line-height: 1.7; ${contentStyle} }
|
||||
/* auto-fit 用：对整个内容块做 transform 缩放 */
|
||||
.card-content-scale { transform-origin: top left; will-change: transform; }
|
||||
|
||||
${themeCss}
|
||||
|
||||
.page-number {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
right: 80px;
|
||||
font-size: 36px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card-container">
|
||||
<div class="card-inner">
|
||||
<div class="card-content">
|
||||
<div class="card-content-scale">
|
||||
${htmlContent}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-number">${pageText}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用 Playwright 将 HTML 渲染为图片
|
||||
* 渲染 HTML 为图片
|
||||
*/
|
||||
async function renderHtmlToImage(htmlContent, outputPath, width = CARD_WIDTH, height = CARD_HEIGHT) {
|
||||
async function renderHtmlToImage(htmlContent, outputPath, width, height, mode, maxHeight, dpr) {
|
||||
const browser = await chromium.launch();
|
||||
const viewportHeight = mode !== 'dynamic' ? height : maxHeight;
|
||||
const page = await browser.newPage({
|
||||
viewport: { width, height }
|
||||
viewport: { width, height: viewportHeight },
|
||||
deviceScaleFactor: dpr
|
||||
});
|
||||
|
||||
// 设置 HTML 内容
|
||||
await page.setContent(htmlContent, {
|
||||
waitUntil: 'networkidle'
|
||||
});
|
||||
|
||||
// 等待字体加载
|
||||
await page.setContent(htmlContent);
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// 获取实际内容高度
|
||||
const contentHeight = await page.evaluate(() => {
|
||||
const container = document.querySelector('.card-container') || document.querySelector('.cover-container');
|
||||
return container ? container.scrollHeight : document.body.scrollHeight;
|
||||
});
|
||||
let actualHeight;
|
||||
|
||||
// 确保高度至少为 1440px（3:4 比例）
|
||||
const actualHeight = Math.max(height, contentHeight);
|
||||
if (mode === 'auto-fit') {
|
||||
await page.evaluate(() => {
|
||||
const viewportContent = document.querySelector('.card-content');
|
||||
const scaleEl = document.querySelector('.card-content-scale');
|
||||
if (!viewportContent || !scaleEl) return;
|
||||
|
||||
// reset
|
||||
scaleEl.style.transform = 'none';
|
||||
scaleEl.style.width = '';
|
||||
scaleEl.style.height = '';
|
||||
|
||||
const availableWidth = viewportContent.clientWidth;
|
||||
const availableHeight = viewportContent.clientHeight;
|
||||
|
||||
const rect = scaleEl.getBoundingClientRect();
|
||||
const contentWidth = Math.max(scaleEl.scrollWidth, rect.width);
|
||||
const contentHeight = Math.max(scaleEl.scrollHeight, rect.height);
|
||||
|
||||
if (!contentWidth || !contentHeight || !availableWidth || !availableHeight) return;
|
||||
|
||||
const scale = Math.min(1, availableWidth / contentWidth, availableHeight / contentHeight);
|
||||
|
||||
// expand layout box to avoid clip
|
||||
scaleEl.style.width = (availableWidth / scale) + 'px';
|
||||
|
||||
scaleEl.style.transformOrigin = 'top left';
|
||||
scaleEl.style.transform = `translate(0px, 0px) scale(${scale})`;
|
||||
});
|
||||
await page.waitForTimeout(100);
|
||||
actualHeight = height;
|
||||
} else if (mode === 'dynamic') {
|
||||
const contentHeight = await page.evaluate(() => {
|
||||
const container = document.querySelector('.card-container');
|
||||
return container ? container.scrollHeight : document.body.scrollHeight;
|
||||
});
|
||||
actualHeight = Math.max(height, Math.min(contentHeight, maxHeight));
|
||||
} else {
|
||||
const contentHeight = await page.evaluate(() => {
|
||||
const container = document.querySelector('.card-container');
|
||||
return container ? container.scrollHeight : document.body.scrollHeight;
|
||||
});
|
||||
actualHeight = Math.max(height, contentHeight);
|
||||
}
|
||||
|
||||
// 截图
|
||||
await page.screenshot({
|
||||
path: outputPath,
|
||||
clip: { x: 0, y: 0, width, height: actualHeight },
|
||||
type: 'png'
|
||||
});
|
||||
|
||||
console.log(` ✅ 已生成: ${outputPath}`);
|
||||
|
||||
await browser.close();
|
||||
console.log(` ✅ 已生成: ${outputPath} (${width}x${actualHeight})`);
|
||||
return actualHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主渲染函数：将 Markdown 文件渲染为多张卡片图片
|
||||
* 主渲染函数
|
||||
*/
|
||||
async function renderMarkdownToCards(mdFile, outputDir) {
|
||||
console.log(`\n🎨 开始渲染: ${mdFile}`);
|
||||
async function renderMarkdownToCards(options) {
|
||||
const { markdownFile, outputDir, theme, mode, width, height, maxHeight, dpr } = options;
|
||||
|
||||
console.log(`\n🎨 开始渲染: ${markdownFile}`);
|
||||
console.log(` 📐 主题: ${theme}`);
|
||||
console.log(` 📏 模式: ${mode}`);
|
||||
console.log(` 📐 尺寸: ${width}x${height}`);
|
||||
|
||||
// 确保输出目录存在
|
||||
if (!fs.existsSync(outputDir)) {
|
||||
@@ -190,10 +513,9 @@ async function renderMarkdownToCards(mdFile, outputDir) {
|
||||
}
|
||||
|
||||
// 解析 Markdown 文件
|
||||
const data = parseMarkdownFile(mdFile);
|
||||
const { metadata, body } = data;
|
||||
const { metadata, body } = parseMarkdownFile(markdownFile);
|
||||
|
||||
// 分割正文内容
|
||||
// 分割内容
|
||||
const cardContents = splitContentBySeparator(body);
|
||||
const totalCards = cardContents.length;
|
||||
|
||||
@@ -202,67 +524,53 @@ async function renderMarkdownToCards(mdFile, outputDir) {
|
||||
// 生成封面
|
||||
if (metadata.emoji || metadata.title) {
|
||||
console.log(' 📷 生成封面...');
|
||||
const coverHtml = generateCoverHtml(metadata);
|
||||
const coverHtml = generateCoverHtml(metadata, theme, width, height);
|
||||
const coverPath = path.join(outputDir, 'cover.png');
|
||||
await renderHtmlToImage(coverHtml, coverPath);
|
||||
await renderHtmlToImage(coverHtml, coverPath, width, height, 'separator', maxHeight, dpr);
|
||||
}
|
||||
|
||||
// 生成正文卡片
|
||||
for (let i = 0; i < cardContents.length; i++) {
|
||||
const pageNum = i + 1;
|
||||
console.log(` 📷 生成卡片 ${pageNum}/${totalCards}...`);
|
||||
const cardHtml = generateCardHtml(cardContents[i], pageNum, totalCards);
|
||||
const cardPath = path.join(outputDir, `card_${pageNum}.png`);
|
||||
await renderHtmlToImage(cardHtml, cardPath);
|
||||
const content = cardContents[i];
|
||||
console.log(` 📷 生成卡片 ${i + 1}/${totalCards}...`);
|
||||
const cardHtml = generateCardHtml(content, theme, i + 1, totalCards, width, height, mode);
|
||||
const cardPath = path.join(outputDir, `card_${i + 1}.png`);
|
||||
await renderHtmlToImage(cardHtml, cardPath, width, height, mode, maxHeight, dpr);
|
||||
}
|
||||
|
||||
console.log(`\n✨ 渲染完成！图片已保存到: ${outputDir}`);
|
||||
return totalCards;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析命令行参数
|
||||
* 主函数
|
||||
*/
|
||||
function parseArgs() {
|
||||
const args = process.argv.slice(2);
|
||||
|
||||
if (args.length === 0) {
|
||||
console.log('用法: node render_xhs.js <markdown_file> [--output-dir <output_directory>]');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
let markdownFile = null;
|
||||
let outputDir = process.cwd();
|
||||
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
if (args[i] === '--output-dir' || args[i] === '-o') {
|
||||
outputDir = args[i + 1];
|
||||
i++;
|
||||
} else if (!args[i].startsWith('-')) {
|
||||
markdownFile = args[i];
|
||||
}
|
||||
}
|
||||
|
||||
if (!markdownFile) {
|
||||
console.error('❌ 错误: 请指定 Markdown 文件');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(markdownFile)) {
|
||||
console.error(`❌ 错误: 文件不存在 - ${markdownFile}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
return { markdownFile, outputDir };
|
||||
}
|
||||
|
||||
// 主函数
|
||||
async function main() {
|
||||
const { markdownFile, outputDir } = parseArgs();
|
||||
await renderMarkdownToCards(markdownFile, outputDir);
|
||||
const options = parseArgs();
|
||||
|
||||
if (!options.markdownFile) {
|
||||
console.error('❌ 错误: 请提供 Markdown 文件路径');
|
||||
printHelp();
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(options.markdownFile)) {
|
||||
console.error(`❌ 错误: 文件不存在 - ${options.markdownFile}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!AVAILABLE_THEMES.includes(options.theme)) {
|
||||
console.error(`❌ 错误: 不支持的主题 - ${options.theme}`);
|
||||
console.error(`可用主题: ${AVAILABLE_THEMES.join(', ')}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!PAGING_MODES.includes(options.mode)) {
|
||||
console.error(`❌ 错误: 不支持的分页模式 - ${options.mode}`);
|
||||
console.error(`可用模式: ${PAGING_MODES.join(', ')}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
await renderMarkdownToCards(options);
|
||||
}
|
||||
|
||||
main().catch(error => {
|
||||
console.error('❌ 渲染失败:', error.message);
|
||||
process.exit(1);
|
||||
});
|
||||
main().catch(console.error);
|
||||
|
||||
Reference in New Issue
Block a user