讓每篇 HTML 筆記
看起來像同一個系列一份可重用的設計、寫作與實作指南

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="一句話說清楚讀者可得到什麼">
  <title>主題：讀者可採取的行動</title>
  <!-- 必填佔位：發布前替換 YOUR-SITE、YOUR-SLUG 與所有本篇文案 -->
  <link rel="canonical" href="https://YOUR-SITE.netlify.app/YOUR-SLUG/">
  <meta property="og:title" content="請替換：本篇主標">
  <meta property="og:description" content="請替換：本篇摘要">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://YOUR-SITE.netlify.app/YOUR-SLUG/">
  <meta property="og:image" content="https://YOUR-SITE.netlify.app/YOUR-SLUG/og-card.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="請替換：本篇圖片說明">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="請替換：本篇主標">
  <meta name="twitter:description" content="請替換：本篇摘要">
  <meta name="twitter:image" content="https://YOUR-SITE.netlify.app/YOUR-SLUG/og-card.png">
  <meta name="twitter:image:alt" content="請替換：本篇圖片說明">
  <style>/* 貼入下方原頁 CSS；不引用遠端樣式 */</style>
</head>
<body>
  <header class="hero">
    <p class="eyebrow">PRACTICAL GUIDE</p>
    <h1>一句主標<span>一句定位</span></h1>
    <p class="lead">讀者場景、痛點與短結論。</p>
    <div class="meta">查證日期與範圍</div>
  </header>
  <main>
    <section id="problem"><h2>使用場景與挑戰</h2><p>為何需要這篇？</p></section>
    <nav aria-label="文章目錄"><b>閱讀路線</b><a href="#steps">開始操作</a></nav>
    <section id="steps"><h2>具體步驟</h2><p>內容與就近引用。</p></section>
    <section id="sources"><h2>參考來源</h2><p>可點擊的原始來源。</p></section>
  </main>
  <footer>獨立筆記；限制與未測項目如實標示。</footer>
</body>
</html>
<!-- 同目錄另附本篇專屬 1200×630 og-card.png；正文 CSS/JS 仍自包含。 -->

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:#f2f5f6;color:#203744;font:17px/1.85 system-ui,-apple-system,"Noto Sans TC",sans-serif}a{color:#076d68;text-underline-offset:4px}a:hover{color:#b45a1b}button,a,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #c27c21;outline-offset:4px}header,main,footer{max-width:1000px;margin:auto}.hero{background:#102d40;color:#f6fbfc;padding:60px 56px 40px;border-radius:0 0 28px 28px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:750;color:#087c73}.hero .eyebrow{color:#7de0c7}h1{font-size:clamp(29px,5vw,46px);line-height:1.3;letter-spacing:-.035em;margin:15px 0 24px}h1 span{display:block;color:#a3e6d4;font-size:.74em;margin-top:12px}.lead{font-size:20px;max-width:720px;color:#d8e5ed}.meta{font-size:13px;color:#afc6d4}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.choices a{color:#fff;border:1px solid #4d7484;border-radius:12px;padding:16px 20px;text-decoration:none;background:#183d50}.choices b,.choices span{display:block}.choices span{font-size:14px;color:#bfe1e5}main{padding:20px 40px}nav{display:flex;flex-wrap:wrap;gap:9px 18px;padding:18px 10px;border-bottom:1px solid #cfdddf;font-size:14px}section{margin:28px 0;background:#fff;border:1px solid #dce6e7;border-radius:18px;padding:36px}h2{font-size:28px;line-height:1.4;margin:5px 0 22px;letter-spacing:-.025em}h3{font-size:20px;margin-top:30px}p{margin:14px 0}li{margin:12px 0}ol,ul{padding-left:25px}strong{color:#123f50}.small{font-size:14px;color:#536976}.tablewrap{max-width:100%;overflow-x:auto;border:1px solid #d7e4e6;border-radius:10px}table{border-collapse:collapse;width:100%;min-width:580px;font-size:15px}caption{text-align:left;padding:12px 18px;font-weight:bold;background:#edf5f4}th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid #dce6e7}thead th{background:#163f50;color:#fff}tbody th{white-space:nowrap;background:#f3f7f7}.notice{background:#eef8f5;border-left:4px solid #138675;padding:20px 22px;margin:24px 0;border-radius:0 10px 10px 0}.notice p{margin-bottom:0}.danger{background:#fff7e9;border-color:#c0842d}.snippet{margin:20px 0;border:1px solid #315165;border-radius:12px;overflow:hidden;min-width:0;background:#102b3b;color:#e0f2f3}.codebar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#1d4254;padding:10px 14px;font-size:13px}.codebar button{border:1px solid #78a8ad;color:#fff;background:#245868;padding:6px 13px;border-radius:6px;font:inherit;cursor:pointer;flex-shrink:0}.codebar button:hover{background:#087b72}pre{font:14px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;margin:0;padding:20px;overflow-x:auto;tab-size:2}p code,li code{font-size:.85em;background:#eaf1f2;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}pre code{background:none}.ref{font-size:12px;margin-left:4px;white-space:nowrap}.closing{margin-top:30px;padding:22px;background:#143d4e;color:white;border-radius:10px}.sources{font-size:15px;overflow-wrap:anywhere}details{border:1px solid #d7e4e6;border-radius:10px;padding:15px}summary{cursor:pointer;font-weight:650}.checklist{list-style:"✓  ";padding-left:26px}.checklist li::marker{color:#087c73}footer{text-align:center;padding:25px 25px 50px;color:#5c7180;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){body{font-size:16px}.hero{padding:36px 24px;border-radius:0 0 20px 20px}.lead{font-size:18px}.choices{grid-template-columns:1fr}main{padding:10px 12px}section{padding:25px 19px;margin:20px 0}h2{font-size:24px}.notice{padding:16px}pre{padding:15px;font-size:13px}nav{gap:10px 15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{body{background:#fff;color:#111;font-size:11pt}.hero{background:#fff;color:#111;padding:20px}.hero .eyebrow,h1 span,.lead,.meta{color:#333}main{padding:0}section{border:0;padding:10px 15px;break-inside:auto}.choices,nav,button,footer{display:none}h2,h3{break-after:avoid}.snippet{color:#111;background:#f5f5f5;border-color:#aaa}.codebar{background:#eee;color:#111}pre{white-space:pre-wrap;overflow-wrap:anywhere}table{min-width:0}thead th{background:#eee;color:#111}a{color:#111}details{display:block}.notice,.closing{background:#f5f5f5;color:#111}.tablewrap{overflow:visible}}

/* 建議補充：將原頁實際色值抽成變數；原頁本身未用 CSS variables */
:root {
  --page: #f2f5f6;
  --ink: #203744;
  --navy: #102d40;
  --link: #076d68;
  --surface: #ffffff;
  --border: #dce6e7;
  --focus: #c27c21;
  --content-max: 1000px;
  --card-radius: 18px;
}
/* 新文章採用時逐步替換，勿誤稱原頁已使用這些 token 名稱。 */

document.querySelectorAll('[data-copy]').forEach(function(button){button.addEventListener('click',async function(){const text=document.getElementById(button.dataset.copy).textContent;let ok=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(text);ok=true;}}catch(error){}if(!ok){const area=document.createElement('textarea');area.value=text;area.style.position='fixed';area.style.opacity='0';document.body.appendChild(area);area.focus();area.select();try{ok=document.execCommand('copy');}catch(error){}area.remove();button.focus();}button.textContent=ok?'已複製':'請手動選取複製';document.getElementById('copy-status').textContent=ok?'內容已複製到剪貼簿。':'瀏覽器未允許複製，請選取程式碼區內容手動複製。';window.setTimeout(function(){button.textContent='複製';},2500);});});