wehub-resource-sync
1343 lines
45 KiB
HTML
1343 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>huashu-md-html · md 是源代码，html/docx 是产物</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--c-cream: #FDF8EE;
|
||
--c-cream-deep: #F7EFDF;
|
||
--c-paper: #FFFFFF;
|
||
--c-ink: #1A1A1A;
|
||
--c-muted: #6B6B6B;
|
||
--c-line: #E5DCC6;
|
||
--c-line-soft: #F0E6D2;
|
||
--c-orange: #C2410C;
|
||
--c-orange-deep: #9A3412;
|
||
--c-orange-bg: #FFEDD5;
|
||
--c-orange-line: #FED7AA;
|
||
--c-teal: #0E7C66;
|
||
--c-teal-bg: #CCFBF1;
|
||
--max-w: 880px;
|
||
--max-w-wide: 1080px;
|
||
--font-cn-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
|
||
--font-cn-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
|
||
--font-en: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: var(--font-cn-sans);
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
color: var(--c-ink);
|
||
background: var(--c-cream);
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
body * { font-family: var(--font-en), var(--font-cn-sans); }
|
||
|
||
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
|
||
.wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px; }
|
||
|
||
a { color: var(--c-orange); text-decoration: none; transition: color 0.2s; }
|
||
a:hover { color: var(--c-orange-deep); }
|
||
|
||
/* =====================================================
|
||
HERO
|
||
====================================================== */
|
||
.hero {
|
||
padding: 80px 0 70px;
|
||
background:
|
||
radial-gradient(ellipse at top right, rgba(194, 65, 12, 0.04) 0%, transparent 50%),
|
||
radial-gradient(ellipse at bottom left, rgba(14, 124, 102, 0.03) 0%, transparent 50%),
|
||
var(--c-cream);
|
||
border-bottom: 1px solid var(--c-line);
|
||
}
|
||
|
||
.hero-badges {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-bottom: 36px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 5px 12px;
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
color: var(--c-muted);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.hero-badge.featured {
|
||
background: var(--c-orange-bg);
|
||
border-color: var(--c-orange-line);
|
||
color: var(--c-orange);
|
||
font-weight: 600;
|
||
}
|
||
.hero-badge .dot {
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
display: inline-block;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 64px;
|
||
font-weight: 800;
|
||
line-height: 1.02;
|
||
letter-spacing: -0.025em;
|
||
text-align: center;
|
||
color: var(--c-ink);
|
||
margin-bottom: 6px;
|
||
}
|
||
.hero-title .accent { color: var(--c-orange); }
|
||
|
||
.hero-arrow {
|
||
font-family: var(--font-mono);
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 24px;
|
||
color: var(--c-orange);
|
||
margin: 14px 0 6px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.hero-products {
|
||
font-family: var(--font-mono);
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: var(--c-muted);
|
||
margin-bottom: 36px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.hero-products span {
|
||
color: var(--c-ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hero-tagline {
|
||
font-family: var(--font-cn-serif);
|
||
font-style: italic;
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
color: var(--c-muted);
|
||
margin-bottom: 32px;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.hero-desc {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: var(--c-muted);
|
||
line-height: 1.85;
|
||
max-width: 720px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
.hero-desc b { color: var(--c-ink); font-weight: 600; }
|
||
|
||
.hero-install {
|
||
max-width: 580px;
|
||
margin: 0 auto 28px;
|
||
display: flex;
|
||
align-items: stretch;
|
||
background: var(--c-ink);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 50px -20px rgba(26, 26, 26, 0.4);
|
||
}
|
||
.hero-install .label {
|
||
background: var(--c-orange);
|
||
color: var(--c-paper);
|
||
padding: 14px 18px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.hero-install code {
|
||
flex: 1;
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
color: #FED7AA;
|
||
padding: 14px 18px;
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.hero-meta {
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: var(--c-muted);
|
||
}
|
||
.hero-meta strong { color: var(--c-ink); font-weight: 600; }
|
||
|
||
.hero-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 6px 0;
|
||
margin-top: 28px;
|
||
font-size: 13px;
|
||
color: var(--c-muted);
|
||
}
|
||
.hero-nav a {
|
||
padding: 4px 14px;
|
||
border-right: 1px solid var(--c-line);
|
||
color: var(--c-muted);
|
||
}
|
||
.hero-nav a:hover { color: var(--c-orange); }
|
||
.hero-nav a:last-child { border-right: none; }
|
||
|
||
/* =====================================================
|
||
SECTION COMMON
|
||
====================================================== */
|
||
section {
|
||
padding: 80px 0;
|
||
border-bottom: 1px solid var(--c-line);
|
||
}
|
||
section:last-of-type { border-bottom: none; }
|
||
|
||
.section-label {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--c-orange);
|
||
margin-bottom: 14px;
|
||
padding: 4px 10px;
|
||
background: var(--c-orange-bg);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
line-height: 1.15;
|
||
color: var(--c-ink);
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.section-sub {
|
||
font-size: 16px;
|
||
color: var(--c-muted);
|
||
line-height: 1.7;
|
||
margin-bottom: 44px;
|
||
max-width: 680px;
|
||
}
|
||
|
||
/* =====================================================
|
||
DEMO SECTION
|
||
====================================================== */
|
||
.demo-hero {
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
}
|
||
.demo-hero img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.demo-caption {
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: var(--c-muted);
|
||
line-height: 1.7;
|
||
}
|
||
.demo-caption a { color: var(--c-orange); font-weight: 500; }
|
||
|
||
.demo-secondary {
|
||
margin-top: 36px;
|
||
padding: 20px 24px;
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.demo-secondary .icon {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--c-orange);
|
||
background: var(--c-orange-bg);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.demo-secondary .text { flex: 1; min-width: 240px; font-size: 14px; color: var(--c-muted); line-height: 1.6; }
|
||
.demo-secondary .text b { color: var(--c-ink); font-weight: 600; }
|
||
.demo-secondary a {
|
||
font-size: 13px;
|
||
color: var(--c-orange);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* =====================================================
|
||
4 ABILITIES GRID
|
||
====================================================== */
|
||
.abilities-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.abilities-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.ability {
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 14px;
|
||
padding: 30px;
|
||
position: relative;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.ability:hover {
|
||
border-color: var(--c-orange-line);
|
||
transform: translateY(-2px);
|
||
}
|
||
.ability.featured {
|
||
background: linear-gradient(180deg, var(--c-orange-bg) 0%, var(--c-paper) 35%);
|
||
border-color: var(--c-orange-line);
|
||
}
|
||
.ability .ab-num {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 28px;
|
||
font-family: var(--font-en);
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
color: var(--c-orange);
|
||
opacity: 0.18;
|
||
line-height: 1;
|
||
}
|
||
.ability.featured .ab-num { opacity: 0.32; }
|
||
|
||
.ability .ab-route {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--c-muted);
|
||
margin-bottom: 14px;
|
||
}
|
||
.ability .ab-route .from, .ability .ab-route .to {
|
||
color: var(--c-ink);
|
||
font-weight: 600;
|
||
}
|
||
.ability .ab-route .arrow {
|
||
color: var(--c-orange);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.ability h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--c-ink);
|
||
margin-bottom: 10px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.ability p {
|
||
font-size: 14px;
|
||
color: var(--c-muted);
|
||
line-height: 1.7;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.ability .ab-tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 16px;
|
||
}
|
||
.ability .ab-tool {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--c-orange);
|
||
background: var(--c-orange-bg);
|
||
border: 1px solid var(--c-orange-line);
|
||
padding: 3px 9px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.principle-box {
|
||
margin-top: 28px;
|
||
padding: 20px 24px;
|
||
background: #FFFEF9;
|
||
border-left: 3px solid var(--c-orange);
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 14px;
|
||
color: var(--c-ink);
|
||
line-height: 1.8;
|
||
}
|
||
.principle-box strong { color: var(--c-orange); font-weight: 700; }
|
||
.principle-box ul { margin: 8px 0 0 0; padding-left: 20px; list-style: none; }
|
||
.principle-box li {
|
||
padding-left: 18px;
|
||
position: relative;
|
||
margin-bottom: 4px;
|
||
}
|
||
.principle-box li::before {
|
||
content: "·";
|
||
position: absolute;
|
||
left: 4px;
|
||
color: var(--c-orange);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* =====================================================
|
||
4 THEMES GALLERY
|
||
====================================================== */
|
||
.themes-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
margin-top: 28px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.themes-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.theme-card {
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.theme-card img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
border-bottom: 1px solid var(--c-line);
|
||
}
|
||
.theme-card .theme-info {
|
||
padding: 14px 18px;
|
||
}
|
||
.theme-card .theme-name {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
color: var(--c-ink);
|
||
margin-bottom: 4px;
|
||
}
|
||
.theme-card .theme-desc {
|
||
font-size: 12px;
|
||
color: var(--c-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* =====================================================
|
||
TABLES
|
||
====================================================== */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 24px 0;
|
||
font-size: 14px;
|
||
background: var(--c-paper);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 0 1px var(--c-line);
|
||
}
|
||
thead th {
|
||
background: var(--c-cream-deep);
|
||
color: var(--c-ink);
|
||
font-weight: 600;
|
||
text-align: left;
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
letter-spacing: 0.02em;
|
||
border-bottom: 1px solid var(--c-line);
|
||
}
|
||
tbody td {
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid var(--c-line-soft);
|
||
line-height: 1.6;
|
||
vertical-align: top;
|
||
}
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background: rgba(194, 65, 12, 0.02); }
|
||
table code {
|
||
font-family: var(--font-mono);
|
||
background: var(--c-cream-deep);
|
||
color: var(--c-orange);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
}
|
||
table strong { color: var(--c-ink); font-weight: 600; }
|
||
|
||
/* =====================================================
|
||
DOCX SPOTLIGHT (NEW ABILITY)
|
||
====================================================== */
|
||
.docx-spotlight {
|
||
background: linear-gradient(135deg, var(--c-orange-bg) 0%, var(--c-cream) 60%);
|
||
border: 1px solid var(--c-orange-line);
|
||
border-radius: 16px;
|
||
padding: 44px 48px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.docx-spotlight::before {
|
||
content: "NEW";
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 36px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--c-paper);
|
||
background: var(--c-orange);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.15em;
|
||
}
|
||
|
||
.docx-spotlight h3 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--c-ink);
|
||
margin-bottom: 8px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.docx-spotlight .docx-why {
|
||
font-size: 14px;
|
||
color: var(--c-muted);
|
||
line-height: 1.75;
|
||
margin-bottom: 24px;
|
||
max-width: 640px;
|
||
}
|
||
.docx-spotlight .docx-why em {
|
||
color: var(--c-orange);
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0;
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-orange-line);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.feature-grid .cell {
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--c-line-soft);
|
||
border-right: 1px solid var(--c-line-soft);
|
||
}
|
||
.feature-grid .cell:nth-child(2n) { border-right: none; }
|
||
.feature-grid .cell:nth-last-child(-n+2) { border-bottom: none; }
|
||
@media (max-width: 600px) {
|
||
.feature-grid .cell { border-right: none; }
|
||
.feature-grid .cell:nth-last-child(2) { border-bottom: 1px solid var(--c-line-soft); }
|
||
}
|
||
.feature-grid .label {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--c-orange);
|
||
margin-bottom: 4px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.feature-grid .value {
|
||
font-size: 13px;
|
||
color: var(--c-ink);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.realworld {
|
||
margin-top: 24px;
|
||
font-family: var(--font-cn-serif);
|
||
font-style: italic;
|
||
font-size: 15px;
|
||
color: var(--c-ink);
|
||
line-height: 1.7;
|
||
padding-left: 14px;
|
||
border-left: 3px solid var(--c-orange);
|
||
}
|
||
.realworld b { font-style: normal; color: var(--c-orange); }
|
||
|
||
/* =====================================================
|
||
CODE BLOCKS
|
||
====================================================== */
|
||
pre {
|
||
background: var(--c-ink);
|
||
color: #FED7AA;
|
||
padding: 22px 26px;
|
||
border-radius: 10px;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
overflow-x: auto;
|
||
margin: 18px 0;
|
||
box-shadow: 0 4px 20px -8px rgba(26, 26, 26, 0.3);
|
||
}
|
||
pre code { font-family: inherit; }
|
||
pre .comment { color: #94A3B8; font-style: italic; }
|
||
pre .cmd { color: #FCD34D; font-weight: 600; }
|
||
pre .arg { color: #BEF264; }
|
||
pre .str { color: #FED7AA; }
|
||
|
||
code:not(pre code) {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92em;
|
||
background: var(--c-cream-deep);
|
||
color: var(--c-orange);
|
||
padding: 1px 7px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* =====================================================
|
||
WORKFLOW
|
||
====================================================== */
|
||
.workflow-scenarios {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
.workflow-item {
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.workflow-item .wf-head {
|
||
padding: 14px 22px;
|
||
background: var(--c-cream-deep);
|
||
border-bottom: 1px solid var(--c-line);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.workflow-item .wf-num {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--c-paper);
|
||
background: var(--c-orange);
|
||
padding: 3px 9px;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.workflow-item .wf-title {
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
color: var(--c-ink);
|
||
}
|
||
.workflow-item pre {
|
||
margin: 0;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* =====================================================
|
||
DEPENDENCY TABLE
|
||
====================================================== */
|
||
.warning-box {
|
||
background: #FFFBEB;
|
||
border-left: 3px solid #D97706;
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 16px 20px;
|
||
margin: 18px 0;
|
||
font-size: 13px;
|
||
color: var(--c-ink);
|
||
line-height: 1.7;
|
||
}
|
||
.warning-box strong { color: #D97706; }
|
||
|
||
/* =====================================================
|
||
FILE TREE
|
||
====================================================== */
|
||
.filetree {
|
||
background: var(--c-ink);
|
||
color: #E5DCC6;
|
||
padding: 24px 28px;
|
||
border-radius: 10px;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
line-height: 1.85;
|
||
overflow-x: auto;
|
||
}
|
||
.filetree .dir { color: #FED7AA; font-weight: 600; }
|
||
.filetree .file { color: #BEF264; }
|
||
.filetree .new { color: var(--c-paper); background: var(--c-orange); padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-left: 6px; font-weight: 700; letter-spacing: 0.05em; }
|
||
.filetree .cmt { color: #94A3B8; font-style: italic; }
|
||
|
||
/* =====================================================
|
||
PHILOSOPHY
|
||
====================================================== */
|
||
.philosophy {
|
||
font-family: var(--font-cn-serif);
|
||
font-size: 18px;
|
||
line-height: 1.95;
|
||
color: var(--c-ink);
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.philosophy p { margin-bottom: 20px; }
|
||
.philosophy p.lede {
|
||
font-size: 22px;
|
||
color: var(--c-ink);
|
||
}
|
||
.philosophy p.lede b {
|
||
color: var(--c-orange);
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
}
|
||
.philosophy ul {
|
||
list-style: none;
|
||
margin: 24px 0;
|
||
padding: 0;
|
||
}
|
||
.philosophy ul li {
|
||
padding-left: 24px;
|
||
position: relative;
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
color: var(--c-muted);
|
||
}
|
||
.philosophy ul li::before {
|
||
content: "—";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--c-orange);
|
||
font-weight: 700;
|
||
}
|
||
.philosophy ul li b { color: var(--c-ink); font-weight: 600; }
|
||
|
||
/* =====================================================
|
||
CONTACT
|
||
====================================================== */
|
||
.contact-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin-top: 28px;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.contact-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.contact-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 14px 18px;
|
||
background: var(--c-paper);
|
||
border: 1px solid var(--c-line);
|
||
border-radius: 8px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.contact-card:hover { border-color: var(--c-orange-line); }
|
||
.contact-card .platform {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--c-muted);
|
||
letter-spacing: 0.05em;
|
||
min-width: 90px;
|
||
}
|
||
.contact-card .handle {
|
||
font-size: 14px;
|
||
color: var(--c-ink);
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
|
||
/* =====================================================
|
||
FOOTER
|
||
====================================================== */
|
||
footer {
|
||
padding: 60px 0 70px;
|
||
background: var(--c-cream-deep);
|
||
text-align: center;
|
||
border-top: 1px solid var(--c-line);
|
||
}
|
||
footer .sig {
|
||
font-family: var(--font-cn-serif);
|
||
font-style: italic;
|
||
font-size: 16px;
|
||
color: var(--c-orange);
|
||
margin-bottom: 10px;
|
||
}
|
||
footer .sub {
|
||
font-size: 13px;
|
||
color: var(--c-muted);
|
||
line-height: 1.7;
|
||
}
|
||
footer .sub a { color: var(--c-orange); font-weight: 500; }
|
||
|
||
/* responsive */
|
||
@media (max-width: 720px) {
|
||
.hero-title { font-size: 44px; }
|
||
.hero { padding: 60px 0 50px; }
|
||
section { padding: 60px 0; }
|
||
.section-title { font-size: 28px; }
|
||
.docx-spotlight { padding: 30px 24px; }
|
||
.wrap, .wrap-wide { padding: 0 20px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============== HERO ============== -->
|
||
<header class="hero">
|
||
<div class="wrap">
|
||
<div class="hero-badges">
|
||
<span class="hero-badge"><span class="dot"></span>MIT License</span>
|
||
<span class="hero-badge"><span class="dot"></span>Agent-Agnostic</span>
|
||
<span class="hero-badge"><span class="dot"></span>skills.sh Compatible</span>
|
||
<span class="hero-badge featured"><span class="dot"></span>NEW · md → docx</span>
|
||
</div>
|
||
|
||
<h1 class="hero-title">huashu<span class="accent">-</span>md<span class="accent">-</span>html</h1>
|
||
|
||
<div class="hero-arrow">md → html / docx</div>
|
||
<div class="hero-products"><span>md</span> 是源代码，<span>html / docx</span> 是产物。</div>
|
||
|
||
<div class="hero-tagline">"Source once · publish many."</div>
|
||
|
||
<p class="hero-desc">
|
||
把任意文件（<b>PDF / DOCX / PPTX / XLSX / EPUB / 图片 / 音频 / YouTube / 网页 URL</b>）转成干净的 markdown；
|
||
再用 4 套精挑过的主题加工成出色的 html；或反过来把已发布的 html 拉回来归档；
|
||
需要给出版社/编辑/投稿系统时——一条命令把 md 加工成<b>出版社级 docx</b>，自动嵌图、加封面、做目录、配页眉页脚。
|
||
</p>
|
||
|
||
<div class="hero-install">
|
||
<div class="label">INSTALL</div>
|
||
<code>npx skills add alchaincyf/huashu-md-html</code>
|
||
</div>
|
||
|
||
<p class="hero-meta">
|
||
跨 agent 通用 · <strong>Claude Code · Cursor · Codex · OpenClaw · Hermes</strong> 都能装
|
||
</p>
|
||
|
||
<nav class="hero-nav">
|
||
<a href="#demo">看效果</a>
|
||
<a href="#abilities">四个能力</a>
|
||
<a href="#themes">4 套主题</a>
|
||
<a href="#docx">出版社 docx</a>
|
||
<a href="#workflow">一条龙工作流</a>
|
||
<a href="#philosophy">设计哲学</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== DEMO ============== -->
|
||
<section id="demo">
|
||
<div class="wrap">
|
||
<span class="section-label">DEMO</span>
|
||
<h2 class="section-title">20 秒看懂 md / html / docx 怎么流转</h2>
|
||
<p class="section-sub">Kenya Hara 极简风格 · md → 入·排·出 → html · 衬线 + 留白 + 一抹赤陶橙。</p>
|
||
|
||
<div class="demo-hero">
|
||
<img src="../demos/v3-hara-hero.gif" alt="huashu-md-html Hero · md 是源，html 是产物">
|
||
</div>
|
||
<p class="demo-caption">
|
||
👉 <a href="../demos/v3-hara-hero.mp4">下载 MP4（含 BGM · 850KB）</a>
|
||
</p>
|
||
|
||
<div class="demo-secondary">
|
||
<span class="icon">ALT</span>
|
||
<span class="text">
|
||
<b>另一版风格：</b>Pentagram 信息建筑派 · 象牙白 + 墨黑 + 辛辣红 · 大字号 sans + 12 列网格 + tabular nums
|
||
</span>
|
||
<a href="../demos/v1-pentagram.mp4">查看 MP4 →</a>
|
||
</div>
|
||
|
||
<p class="demo-caption" style="margin-top: 24px; padding: 16px; background: var(--c-paper); border-radius: 8px; border: 1px solid var(--c-line);">
|
||
📌 <b>以上两段动画都是用 <a href="https://github.com/alchaincyf/huashu-design">huashu-design</a> skill 做的</b>——作为本 skill 的宣传短片。同一个产品，两种视觉哲学，差异不来自模板而来自设计语言。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== 4 ABILITIES ============== -->
|
||
<section id="abilities">
|
||
<div class="wrap">
|
||
<span class="section-label">FOUR ABILITIES</span>
|
||
<h2 class="section-title">四个能力 · 一条流水线</h2>
|
||
<p class="section-sub">每个能力都是独立的脚本入口，互相可以组合。决策错了会绕远路——选哪个能力之前先读路由表。</p>
|
||
|
||
<div class="abilities-grid">
|
||
|
||
<div class="ability">
|
||
<div class="ab-num">01</div>
|
||
<div class="ab-route">
|
||
<span class="from">PDF / DOCX / 网页…</span>
|
||
<span class="arrow">→</span>
|
||
<span class="to">md</span>
|
||
</div>
|
||
<h3>万物 → md</h3>
|
||
<p>把任意输入（PDF、DOCX、PPTX、XLSX、EPUB、图片、音频、YouTube、网页 URL）转成干净的 markdown，作为后续加工的源。</p>
|
||
<div class="ab-tools">
|
||
<span class="ab-tool">markitdown</span>
|
||
<span class="ab-tool">scripts/any_to_md.py</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ability">
|
||
<div class="ab-num">02</div>
|
||
<div class="ab-route">
|
||
<span class="from">md</span>
|
||
<span class="arrow">→</span>
|
||
<span class="to">精美 html</span>
|
||
</div>
|
||
<h3>md → 精美 html</h3>
|
||
<p>用 pandoc + 4 套自调主题（article / report / reading / interactive）加工成可发布的 html。自包含单文件，不依赖外部 CDN。</p>
|
||
<div class="ab-tools">
|
||
<span class="ab-tool">pandoc</span>
|
||
<span class="ab-tool">scripts/md_to_html.py</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ability">
|
||
<div class="ab-num">03</div>
|
||
<div class="ab-route">
|
||
<span class="from">本地 html / URL</span>
|
||
<span class="arrow">→</span>
|
||
<span class="to">md</span>
|
||
</div>
|
||
<h3>html → md</h3>
|
||
<p>把已发布的博客文章、新闻、Essay 反向归档成 md。trafilatura 自动去除导航/侧栏/广告，只留正文。</p>
|
||
<div class="ab-tools">
|
||
<span class="ab-tool">html-to-markdown</span>
|
||
<span class="ab-tool">trafilatura</span>
|
||
<span class="ab-tool">scripts/html_to_md.py</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ability featured">
|
||
<div class="ab-num">04</div>
|
||
<div class="ab-route">
|
||
<span class="from">md</span>
|
||
<span class="arrow">→</span>
|
||
<span class="to">出版社级 docx</span>
|
||
</div>
|
||
<h3>md → 精美 docx</h3>
|
||
<p>给出版社、编辑、投稿系统的<b>终极交付物</b>。自动嵌图、加封面、做目录、配页眉页脚。专为纸质书审校 / 投稿 / 出版定稿设计。</p>
|
||
<div class="ab-tools">
|
||
<span class="ab-tool">python-docx</span>
|
||
<span class="ab-tool">scripts/md_to_docx.py</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="principle-box">
|
||
<strong>决策原则</strong>
|
||
<ul>
|
||
<li>能力 1 产出的 md 可以直接喂给能力 2，组成「PDF → 精美阅读 html」<b>一条龙</b></li>
|
||
<li>能力 3 用于<b>反向归档</b>——把已发布的 html 博客文章存回项目源</li>
|
||
<li>能力 4 是<b>出版终点</b>——给人类编辑/出版社审校时用 docx，不要直接给 html 或 md</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 style="font-size: 18px; margin: 40px 0 14px; color: var(--c-ink);">URL 输入的两条路径</h3>
|
||
<table>
|
||
<thead>
|
||
<tr><th>页面类型</th><th>走哪个</th><th>原因</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>结构化页面</strong>（产品详情、技术文档、API doc、证书页、电商商品页）</td>
|
||
<td>能力 1（markitdown）</td>
|
||
<td>保留 metadata、字段值、链接、标题层级</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>正文类页面</strong>（博客、新闻、Essay、长文）</td>
|
||
<td>能力 3（trafilatura）</td>
|
||
<td>自动去导航/侧栏/广告，只留正文</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>不确定</strong></td>
|
||
<td>两个都跑一遍对比</td>
|
||
<td>看哪个对下游用途更合适</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p style="margin-top: 16px; font-size: 14px; color: var(--c-muted); line-height: 1.7;">
|
||
<strong style="color: var(--c-ink);">判断捷径：</strong>URL 里的内容是<em style="color: var(--c-orange); font-style: normal; font-weight: 600;">「读」</em>的还是<em style="color: var(--c-orange); font-style: normal; font-weight: 600;">「查」</em>的？读 → 能力 3（去噪），查 → 能力 1（保信息）。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== 4 THEMES ============== -->
|
||
<section id="themes">
|
||
<div class="wrap">
|
||
<span class="section-label">HTML THEMES</span>
|
||
<h2 class="section-title">4 套 html 主题</h2>
|
||
<p class="section-sub">每套都过了反 AI slop 检查清单。自包含单 CSS，HTML 打开即用，不依赖外部 CDN。</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr><th>主题</th><th>哲学锚点</th><th>适合场景</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>article</strong></td><td>Tufte CSS 启发 · Pentagram 式信息建筑</td><td>essay、博客、深度阅读、独立文章</td></tr>
|
||
<tr><td><strong>report</strong></td><td>出版社白皮书风 · 多表格密度型</td><td>技术报告、调研、白皮书、产品文档</td></tr>
|
||
<tr><td><strong>reading</strong></td><td>Medium 风极简 · 单栏窄体大字</td><td>公众号转接、纯阅读、轻量分发</td></tr>
|
||
<tr><td><strong>interactive</strong></td><td>长文档导航型 · 折叠 + 目录 + 边栏</td><td>橙皮书章节、技术书籍、长教程</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="themes-grid">
|
||
<div class="theme-card">
|
||
<img src="output/article.png" alt="article 主题预览">
|
||
<div class="theme-info">
|
||
<div class="theme-name">article</div>
|
||
<div class="theme-desc">Tufte 风 · 衬线 + 边距笔记</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-card">
|
||
<img src="output/report.png" alt="report 主题预览">
|
||
<div class="theme-info">
|
||
<div class="theme-name">report</div>
|
||
<div class="theme-desc">白皮书风 · 宽体多表格</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-card">
|
||
<img src="output/reading.png" alt="reading 主题预览">
|
||
<div class="theme-info">
|
||
<div class="theme-name">reading</div>
|
||
<div class="theme-desc">Medium 风 · 单栏极简</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-card">
|
||
<img src="output/interactive.png" alt="interactive 主题预览">
|
||
<div class="theme-info">
|
||
<div class="theme-name">interactive</div>
|
||
<div class="theme-desc">长文档 · 侧边栏 + 折叠目录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="font-size: 16px; margin: 36px 0 12px; color: var(--c-ink);">排版底线（所有主题共享）</h3>
|
||
<pre><span class="comment">正文字体（中文）</span> PingFang SC, Source Han Serif, Noto Serif CJK
|
||
<span class="comment">正文字体（英文）</span> Inter, IBM Plex Sans, et-book
|
||
<span class="comment">代码字体</span> JetBrains Mono, Fira Code
|
||
<span class="comment">行高（中文）</span> 1.75 - 1.85
|
||
<span class="comment">字号（桌面）</span> 17 - 18px
|
||
<span class="comment">最大宽度（文章）</span> 680 - 720px
|
||
<span class="comment">代码块底色</span> #F6F8FA（浅模式）/ #1F2428（深模式）
|
||
<span class="comment">引用块</span> 左 4px 色条 + 浅灰底</pre>
|
||
|
||
<p style="margin-top: 14px; font-size: 13px; color: var(--c-muted);">
|
||
<strong style="color: var(--c-orange);">禁用清单：</strong>紫渐变、赛博霓虹、 <code>#0D1117</code> 深蓝底、Comic Sans、emoji 作正式图标。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== DOCX SPOTLIGHT ============== -->
|
||
<section id="docx">
|
||
<div class="wrap">
|
||
<span class="section-label">FEATURED</span>
|
||
<h2 class="section-title">md → 出版社级 docx</h2>
|
||
<p class="section-sub">为什么单独做能力 4？因为 <code>pandoc md -o docx</code> 出来的 docx 默认 Calibri、无表格样式、无封面、章节首页平淡——能给 AI 看，不能给出版社编辑改稿。</p>
|
||
|
||
<div class="docx-spotlight">
|
||
<h3>能力 4 内置了出版社版式预设</h3>
|
||
<p class="docx-why">
|
||
章号小标 + 大字号章名 + 英文副标题 + 橙色分隔线、引用块按类型配色、表格表头底色、代码块左侧色条 + 浅灰底、页眉书名 + 页脚自动页码——这些细节都内置了，<em>单文件或一整本书都能一条命令生成</em>。
|
||
</p>
|
||
|
||
<pre><span class="comment"># 单文件转换</span>
|
||
<span class="cmd">python3</span> scripts/md_to_docx.py article.md
|
||
|
||
<span class="comment"># 整本书（自动加封面 + 目录 + 页眉 + 章节分页）</span>
|
||
<span class="cmd">python3</span> scripts/md_to_docx.py ch*.md postscript.md appendix.md <span class="arg">--book</span> \
|
||
<span class="arg">--title</span> <span class="str">"图解 Agent Skills"</span> \
|
||
<span class="arg">--subtitle</span> <span class="str">"让 AI 记住你的工作方式"</span> \
|
||
<span class="arg">--author</span> <span class="str">"花叔"</span> \
|
||
<span class="arg">--images-dir</span> ./images \
|
||
<span class="arg">-o</span> book.docx</pre>
|
||
|
||
<h3 style="margin-top: 28px; font-size: 18px;">版式特性一览</h3>
|
||
<div class="feature-grid">
|
||
<div class="cell">
|
||
<div class="label">PAGE</div>
|
||
<div class="value">大 32 开（176×240 mm）或 A4</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">CHAPTER TITLE</div>
|
||
<div class="value">章号小标 + 24pt 大字号 + 橙色底分隔线 + 英文副标题</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">CALLOUT</div>
|
||
<div class="value">按 emoji 自动配色：💡 琥珀 / ✅ 青色 / ⚠️ 玫红</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">CODE BLOCK</div>
|
||
<div class="value">浅灰底 + 橙色左侧色边 + JetBrains Mono</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">TABLE</div>
|
||
<div class="value">表头底色 + 灰色边框 + 居中对齐</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">FIGURE</div>
|
||
<div class="value">居中嵌入 + 灰色斜体图说</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">HEADER</div>
|
||
<div class="value">右对齐书名（斜体灰色）</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="label">FOOTER</div>
|
||
<div class="value">居中自动页码字段</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="realworld">
|
||
<b>实战验证。</b>用这个脚本生成《图解 Agent Skills》158 页出版社审校稿（9 章 + 后记 + 附录 + 57 张配图），一条命令搞定。
|
||
</div>
|
||
</div>
|
||
|
||
<p style="margin-top: 24px; font-size: 14px; color: var(--c-muted);">
|
||
完整 cookbook 见 <a href="../references/md-to-docx-cookbook.md"><code>references/md-to-docx-cookbook.md</code></a> · 依赖：<code>python3 -m pip install python-docx Pillow</code>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== WORKFLOW ============== -->
|
||
<section id="workflow">
|
||
<div class="wrap">
|
||
<span class="section-label">WORKFLOW</span>
|
||
<h2 class="section-title">一条龙工作流</h2>
|
||
<p class="section-sub">8 个典型场景——从 PDF 白皮书到出版社审校稿。每个都是真实跑过的命令。</p>
|
||
|
||
<div class="workflow-scenarios">
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 1</span><span class="wf-title">PDF 白皮书 → 精美阅读 html</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/any_to_md.py whitepaper.pdf <span class="arg">-o</span> whitepaper.md
|
||
<span class="cmd">python3</span> scripts/md_to_html.py whitepaper.md <span class="arg">--theme</span> report <span class="arg">-o</span> whitepaper.html</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 2</span><span class="wf-title">YouTube 视频 → 文章博客</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://youtube.com/watch?v=xxx"</span> <span class="arg">-o</span> video.md
|
||
<span class="comment"># 编辑 video.md...</span>
|
||
<span class="cmd">python3</span> scripts/md_to_html.py video.md <span class="arg">--theme</span> article <span class="arg">-o</span> blog.html</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 3</span><span class="wf-title">归档已发布的博客文章 → 项目源 md</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/html_to_md.py <span class="str">"https://example.com/blog/article"</span> <span class="arg">-o</span> article.md</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 4</span><span class="wf-title">抓产品页 / 技术文档 → 完整结构化 md</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://learn.microsoft.com/en-us/some-doc"</span> <span class="arg">-o</span> doc.md</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 5</span><span class="wf-title">橙皮书章节 → 多主题对比</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/md_to_html.py chapter.md <span class="arg">--theme</span> article <span class="arg">-o</span> ch-article.html
|
||
<span class="cmd">python3</span> scripts/md_to_html.py chapter.md <span class="arg">--theme</span> interactive <span class="arg">-o</span> ch-interactive.html</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 6</span><span class="wf-title">URL 不确定走哪条路 → 两个都跑对比</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://example.com/page"</span> <span class="arg">-o</span> page-markitdown.md
|
||
<span class="cmd">python3</span> scripts/html_to_md.py <span class="str">"https://example.com/page"</span> <span class="arg">-o</span> page-trafilatura.md</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 7</span><span class="wf-title">整本书 md → 出版社审校 docx</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/md_to_docx.py md-v2/ch*.md md-v2/postscript.md md-v2/appendix.md <span class="arg">--book</span> \
|
||
<span class="arg">--title</span> <span class="str">"图解 Agent Skills"</span> <span class="arg">--author</span> <span class="str">"花叔"</span> \
|
||
<span class="arg">--subtitle</span> <span class="str">"让 AI 记住你的工作方式"</span> \
|
||
<span class="arg">--images-dir</span> ./images-v2 <span class="arg">-o</span> 出版社审校版.docx</pre>
|
||
</div>
|
||
|
||
<div class="workflow-item">
|
||
<div class="wf-head"><span class="wf-num">SCENE 8</span><span class="wf-title">PDF 论文 → docx 投稿（能力 1 → 能力 4）</span></div>
|
||
<pre><span class="cmd">python3</span> scripts/any_to_md.py paper.pdf <span class="arg">-o</span> paper.md
|
||
<span class="comment"># 编辑 paper.md 修正格式...</span>
|
||
<span class="cmd">python3</span> scripts/md_to_docx.py paper.md <span class="arg">--page-size</span> a4 <span class="arg">-o</span> paper.docx</pre>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== DEPENDENCIES ============== -->
|
||
<section>
|
||
<div class="wrap">
|
||
<span class="section-label">DEPENDENCIES</span>
|
||
<h2 class="section-title">依赖</h2>
|
||
<p class="section-sub">脚本启动时会自检，缺失的依赖会明确提示安装命令，不会静默失败。</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr><th>工具</th><th>用途</th><th>安装</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>markitdown</code></td><td>万物 → md</td><td><code>python3 -m pip install 'markitdown[all]'</code></td></tr>
|
||
<tr><td><code>pandoc</code></td><td>md → html</td><td><code>brew install pandoc</code>（macOS）</td></tr>
|
||
<tr><td><code>html-to-markdown</code></td><td>html → md（高速 Rust 引擎）</td><td><code>python3 -m pip install html-to-markdown</code></td></tr>
|
||
<tr><td><code>trafilatura</code></td><td>URL 正文提取</td><td><code>python3 -m pip install trafilatura</code></td></tr>
|
||
<tr><td><code>python-docx</code> + <code>Pillow</code></td><td>md → 精美 docx</td><td><code>python3 -m pip install python-docx Pillow</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠ macOS Python 环境陷阱：</strong>
|
||
<code>pip</code> 和 <code>python3</code> 可能指向不同的 Python 版本（实测踩过：<code>pip</code> 是 3.11、<code>python3</code> 是 3.14）。安装依赖请用 <code>python3 -m pip install ...</code>，不要直接 <code>pip install</code>。
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== STRUCTURE ============== -->
|
||
<section>
|
||
<div class="wrap">
|
||
<span class="section-label">STRUCTURE</span>
|
||
<h2 class="section-title">仓库结构</h2>
|
||
|
||
<div class="filetree">
|
||
<span class="dir">huashu-md-html/</span>
|
||
├── SKILL.md <span class="cmt"># Agent 主文档（中文）</span>
|
||
├── README.md <span class="cmt"># 本文件</span>
|
||
├── <span class="dir">scripts/</span> <span class="cmt"># 四能力入口</span>
|
||
│ ├── any_to_md.py <span class="cmt"># 能力 1：万物 → md</span>
|
||
│ ├── md_to_html.py <span class="cmt"># 能力 2：md → 精美 html</span>
|
||
│ ├── html_to_md.py <span class="cmt"># 能力 3：html → md</span>
|
||
│ └── md_to_docx.py<span class="new">NEW</span><span class="cmt"> # 能力 4：md → 出版社级 docx</span>
|
||
├── <span class="dir">templates/</span> <span class="cmt"># 4 套精挑 html 主题 + 公众号专用</span>
|
||
│ ├── article/ <span class="cmt"># Tufte 风</span>
|
||
│ ├── report/ <span class="cmt"># 白皮书风</span>
|
||
│ ├── reading/ <span class="cmt"># Medium 极简</span>
|
||
│ ├── interactive/ <span class="cmt"># 长文档导航</span>
|
||
│ └── wechat/ <span class="cmt"># 公众号转接</span>
|
||
├── <span class="dir">references/</span> <span class="cmt"># 按任务深入文档（中文）</span>
|
||
│ ├── markitdown-cookbook.md
|
||
│ ├── md-to-html-themes.md
|
||
│ ├── html-to-md-cookbook.md
|
||
│ ├── md-to-docx-cookbook.md<span class="new">NEW</span>
|
||
│ ├── design-tokens.md
|
||
│ └── anti-ai-slop.md
|
||
├── <span class="dir">examples/</span> <span class="cmt"># 主题预览</span>
|
||
│ ├── input/md-vs-html.md
|
||
│ └── output/{article,report,reading,interactive}.{html,png}
|
||
├── <span class="dir">demos/</span> <span class="cmt"># README 引用的宣传动画</span>
|
||
│ ├── v3-hara-hero.{gif,mp4} <span class="cmt"># Kenya Hara 极简</span>
|
||
│ └── v1-pentagram.{gif,mp4} <span class="cmt"># Pentagram 信息建筑</span>
|
||
└── requirements.txt
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PHILOSOPHY ============== -->
|
||
<section id="philosophy">
|
||
<div class="wrap">
|
||
<span class="section-label">DESIGN PHILOSOPHY</span>
|
||
<h2 class="section-title">设计哲学</h2>
|
||
|
||
<div class="philosophy">
|
||
<p class="lede">这个 skill 的存在源于一个简单观察——<b>AI 时代，文档的「生产格式」和「消费格式」第一次解耦了。</b></p>
|
||
|
||
<p>写作发生在 markdown——可 diff、AI 友好、版本可控。<br>分发发生在 html / docx——排版精致、可分享、可导航、可投稿。<br>来回切换不应该有成本。</p>
|
||
|
||
<p>大多数「转 X 到 Y」工具优化的是「转换保真度」。这个 skill 优化的是<b>写作者的循环</b>：</p>
|
||
|
||
<ul>
|
||
<li><b>一份 md 是源</b>——所有创作和编辑都在 md 里</li>
|
||
<li><b>多套 html 是产物</b>——按场景挑主题，渲染一份精美的 html</li>
|
||
<li><b>docx 是出版终点</b>——给人类编辑/出版社/投稿系统的最终交付物</li>
|
||
<li><b>来回往返不丢结构</b>——把已发布的博客拉回项目源，或者把别人的好内容归档成 md</li>
|
||
</ul>
|
||
|
||
<p>继承自 <a href="https://github.com/alchaincyf/huashu-design">huashu-design</a> 的反 AI slop 审美底线——4 套 html 主题各有一个克制的强调色和一个出版级的排印签名，看起来像出版社做的，不像 SaaS 落地页。docx 模板做了同样的事——奶油底、赤陶橙、章号小标、英文副标题，整套版式语言一脉相承。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== CONTACT ============== -->
|
||
<section>
|
||
<div class="wrap">
|
||
<span class="section-label">CONTACT</span>
|
||
<h2 class="section-title">联系花叔</h2>
|
||
<p class="section-sub">
|
||
花叔是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（App Store 付费榜 Top 1）、《一本书玩转 DeepSeek》、
|
||
<a href="https://github.com/alchaincyf/nuwa-skill">nuwa-skill</a>（GitHub 18k+ stars）、
|
||
<a href="https://github.com/alchaincyf/huashu-design">huashu-design</a>（GitHub 13k+ stars）。全平台累计粉丝 30 万+。
|
||
</p>
|
||
|
||
<div class="contact-grid">
|
||
<a href="https://x.com/AlchainHust" class="contact-card">
|
||
<span class="platform">X / TWITTER</span>
|
||
<span class="handle">@AlchainHust</span>
|
||
</a>
|
||
<a href="https://space.bilibili.com/14097567" class="contact-card">
|
||
<span class="platform">B 站</span>
|
||
<span class="handle">花叔</span>
|
||
</a>
|
||
<a href="https://www.youtube.com/@Alchain" class="contact-card">
|
||
<span class="platform">YOUTUBE</span>
|
||
<span class="handle">花叔</span>
|
||
</a>
|
||
<a href="https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf" class="contact-card">
|
||
<span class="platform">小红书</span>
|
||
<span class="handle">花叔</span>
|
||
</a>
|
||
<a href="https://www.huasheng.ai/" class="contact-card">
|
||
<span class="platform">官网</span>
|
||
<span class="handle">huasheng.ai</span>
|
||
</a>
|
||
<a href="https://bookai.top" class="contact-card">
|
||
<span class="platform">开发者 HUB</span>
|
||
<span class="handle">bookai.top</span>
|
||
</a>
|
||
</div>
|
||
|
||
<p style="margin-top: 28px; font-size: 14px; color: var(--c-muted); text-align: center;">
|
||
公众号：微信搜索<strong style="color: var(--c-ink);">「花叔」</strong> · 商业合作请发邮件到 <a href="mailto:alchaincyf@gmail.com">alchaincyf@gmail.com</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FOOTER ============== -->
|
||
<footer>
|
||
<div class="wrap">
|
||
<p class="sig">md 是源代码，html / docx 是产物。</p>
|
||
<p class="sub">
|
||
MIT License · 个人和商业使用均自由<br>
|
||
如果这个 skill 对你有帮助，欢迎在 <a href="https://github.com/alchaincyf/huashu-md-html">GitHub</a> 上 star 仓库
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|