zh.html

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="#eae7df" name="theme-color"/>
<meta content="出海社媒配图助手 | 输入自己的内容，选择风格，分别导出 Pinterest、Instagram、Lemon8、Facebook 配图。中文操作，英文文案可直接排版；发布前逐平台预览。" name="description"/>
<link href="https://lydiatools.github.io/aspectory/zh.html" rel="canonical"/>
<link href="https://lydiatools.github.io/aspectory/" hreflang="en" rel="alternate"/>
<link href="https://lydiatools.github.io/aspectory/zh.html" hreflang="zh-CN" rel="alternate"/>
<meta content="website" property="og:type"/>
<meta content="LydiaTools" property="og:site_name"/>
<meta content="出海社媒配图助手｜Pinterest、Instagram、Lemon8、Facebook" property="og:title"/>
<meta content="输入自己的内容，选择风格，分别导出 Pinterest、Instagram、Lemon8、Facebook 配图。中文操作，英文文案可直接排版；发布前逐平台预览。" property="og:description"/>
<meta content="https://lydiatools.github.io/aspectory/social-card-zh.png?v=2" property="og:image"/>
<meta content="image/png" property="og:image:type"/>
<meta content="1200" property="og:image:width"/>
<meta content="630" property="og:image:height"/>
<meta content="本工具用同一份 CoverCalc Pro 中文示例实际导出的四平台配图局部拼贴；并非发布效果数据。" property="og:image:alt"/>
<meta content="summary_large_image" name="twitter:card"/>
<meta content="出海社媒配图助手｜Pinterest、Instagram、Lemon8、Facebook" name="twitter:title"/>
<meta content="输入自己的内容，选择风格，分别导出 Pinterest、Instagram、Lemon8、Facebook 配图。中文操作，英文文案可直接排版；发布前逐平台预览。" name="twitter:description"/>
<meta content="https://lydiatools.github.io/aspectory/social-card-zh.png?v=2" name="twitter:image"/>
<meta content="本工具四平台实际导出配图的局部拼贴，并非运营效果数据。" name="twitter:image:alt"/>
<title>出海社媒配图助手｜Pinterest、Instagram、Lemon8、Facebook</title>
<meta content="zh_CN" property="og:locale"/></head>
<body>
<div id="app">
<header class="topbar">
<a aria-label="出海社媒配图助手首页" class="brand" href="./" id="home-link"><span aria-hidden="true" class="brand-mark"><i></i><i></i><i></i></span><span class="brand-name" data-i18n="productName">出海社媒配图助手</span></a>
<div class="topbar-right"><span class="local-note" data-i18n="local">本机制作，无需账号</span><button aria-label="Switch to English" class="language" id="language" type="button">English</button></div>
</header>
<nav class="tool-nav" aria-label="工具"><span aria-current="page" data-i18n="composerLink">制作配图</span><a id="carousel-link" href="./carousel.html?lang=zh" data-i18n="carouselLink">批量保留整图</a></nav>
<main class="workspace">
<section aria-labelledby="main-title" class="editor">
<div class="intro"><p class="overline" data-i18n="overline">Pinterest · Instagram · Lemon8 · Facebook</p><h1 data-i18n="heading" id="main-title">给海外平台发图，<br/><em>一次做好四种尺寸。</em></h1><p class="intro-copy" data-i18n="intro">输入自己的内容，选择风格，分别导出 Pinterest、Instagram、Lemon8、Facebook 配图。中文操作，英文文案可直接排版；发布前逐平台预览。</p><a class="language-entry is-secondary" data-i18n="alternateLanguage" href="./" id="alternate-language" lang="en">English: Social Post Image Maker ↗</a><a class="profile-link" data-i18n="profileLink" href="https://github.com/LydiaTools" rel="noopener noreferrer" target="_blank">到 LydiaTools GitHub 看更多开源工具 ↗</a></div>
<div class="step-title"><span>01</span><h2 data-i18n="contentHeading">内容</h2></div>
<div class="fields">
<label><span data-i18n="brand">品牌／署名</span><input id="brand" maxlength="42" value="CoverCalc Pro"/></label>
<label><span data-i18n="eyebrow">栏目分类</span><input id="eyebrow" maxlength="50" value="园艺用量小算例"/></label>
<label class="wide"><span data-i18n="title">标题</span><textarea id="title" maxlength="110" rows="2">覆盖物要买多少袋？</textarea></label>
<label class="wide"><span data-i18n="body">补充说明</span><textarea id="body" maxlength="190" rows="3">花坛长宽各 10 英尺，铺 3 英寸厚，需要 25 立方英尺覆盖物。每袋 2 立方英尺，12.5 袋要向上取整。</textarea></label>
<div class="field-pair"><label><span data-i18n="figure">核心数字</span><input id="figure" maxlength="24" value="13 袋"/></label><label><span data-i18n="figureLabel">数字说明</span><input id="figureLabel" maxlength="55" value="每袋 2 立方英尺"/></label></div>
<label><span data-i18n="cta">底部引导语</span><input id="cta" maxlength="85" value="测量面积，再算购买量"/></label>
<label><span data-i18n="url">来源／网站</span><input id="url" maxlength="90" value="covercalcpro.com"/></label>
</div>
<div class="step-title"><span>02</span><h2 data-i18n="artHeading">视觉风格</h2></div>
<div aria-label="视觉风格" class="style-grid" role="radiogroup">
<button aria-checked="true" class="style-option is-selected" data-style="field" role="radio" type="button"><span class="swatch field-swatch"><b></b></span><strong data-i18n="field">田野笔记</strong><small data-i18n="fieldDesc">安静、编辑感、准确</small></button>
<button aria-checked="false" class="style-option" data-style="photo" role="radio" type="button"><span class="swatch photo-swatch"><b></b></span><strong data-i18n="photo">照片叙事</strong><small data-i18n="photoDesc">图片主导、温暖自然</small></button>
<button aria-checked="false" class="style-option" data-style="data" role="radio" type="button"><span class="swatch data-swatch"><b></b></span><strong data-i18n="data">数据手册</strong><small data-i18n="dataDesc">数字和背景一目了然</small></button>
<button aria-checked="false" class="style-option" data-style="poster" role="radio" type="button"><span class="swatch poster-swatch"><b></b></span><strong data-i18n="poster">醒目海报</strong><small data-i18n="posterDesc">大字与鲜明对比</small></button>
</div>
<label class="upload"><input accept="image/png,image/jpeg,image/webp" id="image" type="file"/><span aria-hidden="true" class="upload-icon">＋</span><span><strong data-i18n="upload">添加自己的照片</strong><small data-i18n="uploadHelp">可选，仅照片叙事使用；图片留在浏览器里。</small></span><span class="upload-status" id="image-status"></span></label>
<div class="step-title"><span>03</span><h2 data-i18n="destination">发布平台</h2></div>
<div aria-label="导出平台" class="platforms" role="group">
<button aria-pressed="true" class="platform is-selected" data-platform="pinterest" type="button"><strong>Pinterest</strong><span>2:3 · 1000×1500</span></button>
<button aria-pressed="false" class="platform" data-platform="instagram" type="button"><strong>Instagram</strong><span>4:5 · 1080×1350</span></button>
<button aria-pressed="false" class="platform" data-platform="lemon8" type="button"><strong>Lemon8</strong><span>3:4 · 1080×1440</span></button>
<button aria-pressed="false" class="platform" data-platform="facebook" type="button"><strong>Facebook</strong><span>1:1 · 1080×1080</span></button>
</div>
<p class="format-note" data-i18n="formatNote">这些是导出尺寸预设，不保证流量。发布前请在平台预览。</p>
</section>
<aside aria-label="实时预览" class="preview-column">
<div class="preview-top"><div><p class="overline" data-i18n="live">实时画布</p><h2 id="preview-name">Pinterest | 田野笔记</h2></div><span class="size-tag" id="size">1000 × 1500 px</span></div>
<div class="canvas-stage"><canvas aria-label="生成的帖子图片预览" height="1500" id="preview" width="1000"></canvas></div>
<div class="export-bar"><button class="export-primary" data-i18n="downloadPng" id="png" type="button">下载 PNG</button><button class="export-secondary" data-i18n="downloadJpeg" id="jpeg" type="button">JPEG</button></div>
<button class="export-all" data-i18n="downloadAll" id="all" type="button">四平台 PNG 打包下载</button>
<p aria-live="polite" class="status" id="status" role="status"></p>
<div class="export-followup" hidden id="export-followup"><p data-i18n="exportFollowup">还想为下一篇内容找工具？</p><a data-i18n="profileAction" href="https://github.com/LydiaTools" rel="noopener noreferrer" target="_blank">到 LydiaTools GitHub 看更多开源工具 ↗</a><a data-i18n="sourceAction" href="https://github.com/LydiaTools/aspectory" rel="noopener noreferrer" target="_blank">查看这个工具的源码 ↗</a><a id="longform-link" data-i18n="longformAction" href="https://lydiatools.github.io/longform-atlas/?lang=zh&amp;utm_source=aspectory&amp;utm_medium=referral&amp;utm_campaign=lydiatools_cross_project&amp;utm_content=export_followup" rel="noopener noreferrer" target="_blank">围绕这个主题规划海外长文 ↗</a></div>
<p class="bottom-note" data-i18n="privacy">不自动发布；文字与照片留在浏览器。本托管演示页仅在你同意后启用 Google Analytics 访问统计。</p>
</aside>
</main>
<footer class="footer"><span><span data-i18n="productName">出海社媒配图助手</span> © <a href="https://github.com/LydiaTools" rel="noopener noreferrer" target="_blank">LydiaTools</a></span><div class="footer-links"><a data-i18n="sourceLink" href="https://github.com/LydiaTools/aspectory" rel="noopener noreferrer" target="_blank">GitHub 源码</a><a data-i18n="feedbackLink" href="https://github.com/LydiaTools/aspectory/issues/new?template=use-feedback.yml" rel="noopener noreferrer" target="_blank">反馈使用体验</a></div></footer>
</div>
<script src="/src/app.js" type="module"></script>
</body>
</html>