<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="atom.xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://www.hikari-dev.com/zh-TW/blog</id>
    <title>Hikari's Notebook Blog</title>
    <updated>2026-04-19T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://www.hikari-dev.com/zh-TW/blog"/>
    <subtitle>Hikari's Notebook Blog</subtitle>
    <icon>https://www.hikari-dev.com/zh-TW/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[從 AWS S3 移轉到 Cloudflare Pages]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages"/>
        <updated>2026-04-19T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我將這個部落格從 AWS S3 移轉到 Cloudflare Pages。過去是用 S3 做靜態網站托管，透過 CloudFront 發佈，但為了簡化管理及提升效能，決定採用 Cloudflare Pages。]]></summary>
        <content type="html"><![CDATA[<p>我將這個部落格從 AWS S3 移轉到 Cloudflare Pages。過去是用 S3 做靜態網站托管，透過 CloudFront 發佈，但為了簡化管理及提升效能，決定採用 Cloudflare Pages。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="為什麼選擇-cloudflare-pages">為什麼選擇 Cloudflare Pages<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#%E7%82%BA%E4%BB%80%E9%BA%BC%E9%81%B8%E6%93%87-cloudflare-pages" class="hash-link" aria-label="為什麼選擇 Cloudflare Pages 的直接連結" title="為什麼選擇 Cloudflare Pages 的直接連結" translate="no">​</a></h2>
<p>之前是用 AWS 標準架構 S3 + CloudFront + Route53 運作，因下列原因決定移轉到 Cloudflare Pages。</p>
<ol>
<li class=""><strong>管理成本低</strong>：內建 SSL 證書自動更新，還有全球邊緣部署。</li>
<li class=""><strong>免費配額大</strong>：個人部落格流量大多數功能都能免費使用。</li>
<li class=""><strong>部署彈性</strong>：不只支援 GitHub 整合，還能直接從 GitHub Actions 上傳，複雜的建置流程也能維持。</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="移轉步驟">移轉步驟<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#%E7%A7%BB%E8%BD%89%E6%AD%A5%E9%A9%9F" class="hash-link" aria-label="移轉步驟 的直接連結" title="移轉步驟 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-建立-github-actions-工作流程">1. 建立 GitHub Actions 工作流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#1-%E5%BB%BA%E7%AB%8B-github-actions-%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="1. 建立 GitHub Actions 工作流程 的直接連結" title="1. 建立 GitHub Actions 工作流程 的直接連結" translate="no">​</a></h3>
<p>將原本用於 S3 部署的工作流程改寫為 Cloudflare Pages 用，這次使用 <code>cloudflare/pages-action</code>。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-建立-cloudflare-pages-專案">2. 建立 Cloudflare Pages 專案<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#2-%E5%BB%BA%E7%AB%8B-cloudflare-pages-%E5%B0%88%E6%A1%88" class="hash-link" aria-label="2. 建立 Cloudflare Pages 專案 的直接連結" title="2. 建立 Cloudflare Pages 專案 的直接連結" translate="no">​</a></h3>
<p>透過 Cloudflare 控制台或 CLI（Wrangler）建立專案。這次為確實指定分支，使用了 Wrangler。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-切換-dns">3. 切換 DNS<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#3-%E5%88%87%E6%8F%9B-dns" class="hash-link" aria-label="3. 切換 DNS 的直接連結" title="3. 切換 DNS 的直接連結" translate="no">​</a></h3>
<p>將原本指向 S3 的 <code>www.hikari-dev.com</code> DNS 紀錄更新成指向 Cloudflare Pages 的端點（<code>xxx.pages.dev</code>）。</p>
<p>在 Cloudflare Pages 側加入自訂網域時，會自動驗證並發行 SSL 證書。若舊有紀錄還在，驗證可能會失敗，所以先刪除再重新設定網域，才能順利生效。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="移轉後感想">移轉後感想<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/19/migrate-to-cloudflare-pages#%E7%A7%BB%E8%BD%89%E5%BE%8C%E6%84%9F%E6%83%B3" class="hash-link" aria-label="移轉後感想 的直接連結" title="移轉後感想 的直接連結" translate="no">​</a></h2>
<p>整個移轉過程非常順利，部署速度跟直接上傳到 S3 差不多。最棒的是將 AWS 上多個資源（S3 儲存桶、CloudFront 發佈、ACM 證書）整合到單一 Cloudflare Pages 專案，感覺非常方便。</p>
<p>未來也想嘗試利用 Cloudflare Workers 增加動態功能。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Cloudflare" term="Cloudflare"/>
        <category label="Docusaurus" term="Docusaurus"/>
        <category label="CI/CD" term="CI/CD"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[GPT-5.4 / GPT-5.4 mini / GPT-5.4 nano / GPT-4o / GPT-4o mini 費用・效能比較]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison"/>
        <updated>2026-04-18T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[本文比較 OpenAI 目前可用的 API 模型——GPT-5.4、GPT-5.4 nano、GPT-5.4 mini、GPT-4o、GPT-4o mini 的費用、規格與效能，並整理各使用情境下的選擇建議。]]></summary>
        <content type="html"><![CDATA[<p>本文比較 OpenAI 目前可用的 API 模型——GPT-5.4、GPT-5.4 nano、GPT-5.4 mini、GPT-4o、GPT-4o mini 的費用、規格與效能，並整理各使用情境下的選擇建議。</p>
<!-- -->
<blockquote>
<p>單位：USD / 100 萬 Token（MTok）。資訊以 2026 年 4 月為準。</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="費用比較">費用比較<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E8%B2%BB%E7%94%A8%E6%AF%94%E8%BC%83" class="hash-link" aria-label="費用比較 的直接連結" title="費用比較 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>模型</th><th style="text-align:right">輸入</th><th style="text-align:right">快取輸入</th><th style="text-align:right">輸出</th></tr></thead><tbody><tr><td><strong>GPT-5.4</strong></td><td style="text-align:right">$2.50</td><td style="text-align:right">$1.25</td><td style="text-align:right">$15.00</td></tr><tr><td><strong>GPT-5.4 mini</strong></td><td style="text-align:right">$0.75</td><td style="text-align:right">$0.075</td><td style="text-align:right">$4.50</td></tr><tr><td><strong>GPT-5.4 nano</strong></td><td style="text-align:right">$0.20</td><td style="text-align:right">$0.02</td><td style="text-align:right">$1.25</td></tr><tr><td><strong>GPT-4o</strong></td><td style="text-align:right">$2.50</td><td style="text-align:right">$1.25</td><td style="text-align:right">$10.00</td></tr><tr><td><strong>GPT-4o mini</strong></td><td style="text-align:right">$0.15</td><td style="text-align:right">$0.075</td><td style="text-align:right">$0.60</td></tr></tbody></table>
<p>GPT-4o mini 的輸入與輸出費用均為最低，但知識截止日期為 2023 年 10 月，不適合需要最新資訊的任務。GPT-5.4 nano 的輸入費用與 GPT-4o mini 相近，同時具備 GPT-5.4 系列的品質及 2025 年 8 月為止的最新知識。GPT-5.4（旗艦）的輸入費用與 GPT-4o 相同，但輸出費用高達 $15.00/MTok，適合需要最高品質推理的場景。</p>
<p>使用區域處理端點時，GPT-5.4 系列將額外收取 <strong>10% 加成費用</strong>。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="規格比較">規格比較<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E8%A6%8F%E6%A0%BC%E6%AF%94%E8%BC%83" class="hash-link" aria-label="規格比較 的直接連結" title="規格比較 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>模型</th><th style="text-align:center">Context</th><th style="text-align:center">最大輸出</th><th style="text-align:center">圖片輸入</th><th style="text-align:center">知識截止日期</th></tr></thead><tbody><tr><td><strong>GPT-5.4</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">○</td><td style="text-align:center">2025 年 8 月</td></tr><tr><td><strong>GPT-5.4 mini</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">○</td><td style="text-align:center">2025 年 8 月</td></tr><tr><td><strong>GPT-5.4 nano</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">○</td><td style="text-align:center">2025 年 8 月</td></tr><tr><td><strong>GPT-4o</strong></td><td style="text-align:center">128K</td><td style="text-align:center">16,384</td><td style="text-align:center">○</td><td style="text-align:center">2023 年 10 月</td></tr><tr><td><strong>GPT-4o mini</strong></td><td style="text-align:center">128K</td><td style="text-align:center">16,384</td><td style="text-align:center">○</td><td style="text-align:center">2023 年 10 月</td></tr></tbody></table>
<p>GPT-5.4 系列的 Context 視窗大幅擴展至 <strong>400K Token</strong>，最大輸出也支援 128K Token。GPT-4o / GPT-4o mini 則分別限制在 128K / 16K。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="效能比較">效能比較<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E6%95%88%E8%83%BD%E6%AF%94%E8%BC%83" class="hash-link" aria-label="效能比較 的直接連結" title="效能比較 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54">GPT-5.4<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54" class="hash-link" aria-label="GPT-5.4 的直接連結" title="GPT-5.4 的直接連結" translate="no">​</a></h3>
<p>GPT-5.4 系列的旗艦模型。代表 OpenAI 當前世代的最高智能，在複雜推理、長文生成、進階程式開發等方面均大幅超越 GPT-5.4 mini。支援所有原生工具（電腦操作、MCP、網路搜尋等），並完整支援多模態輸入輸出。由於輸出費用高達 $15.00/MTok，建議限定在必須取得最高品質輸出的場景使用。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54-mini">GPT-5.4 mini<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54-mini" class="hash-link" aria-label="GPT-5.4 mini 的直接連結" title="GPT-5.4 mini 的直接連結" translate="no">​</a></h3>
<p>GPT-5.4 系列的中階模型，針對程式開發、電腦操作及子代理任務進行最佳化。效能穩定超越 GPT-5 mini，並以更快的速度實現接近旗艦 GPT-5.4 的通過率。與 GPT-5 mini 相比，速度提升確認達 <strong>2 倍以上</strong>，在程式開發工作流程中提供頂級的效能/延遲權衡。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54-nano">GPT-5.4 nano<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54-nano" class="hash-link" aria-label="GPT-5.4 nano 的直接連結" title="GPT-5.4 nano 的直接連結" translate="no">​</a></h3>
<p>GPT-5.4 系列中體積最小、費用最低的模型。針對速度與成本為首要考量的大量處理使用情境最佳化，例如分類、資料萃取、排序及程式開發子代理。不適合需要深度推理的複雜任務。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-4o">GPT-4o<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#gpt-4o" class="hash-link" aria-label="GPT-4o 的直接連結" title="GPT-4o 的直接連結" translate="no">​</a></h3>
<p>以通用旗艦模型之姿登場，兼具文字與圖片處理的高智能。目前已被 GPT-5.4 系列取代，定位為舊版模型。雖於 2026 年 2 月從 ChatGPT 退役，但 API 存取仍持續提供。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-4o-mini">GPT-4o mini<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#gpt-4o-mini" class="hash-link" aria-label="GPT-4o mini 的直接連結" title="GPT-4o mini 的直接連結" translate="no">​</a></h3>
<p>設計定位為「最適合微調的小型模型」。透過蒸餾大型模型（GPT-4o）的輸出，以低成本、低延遲實現同等效果。MMLU 分數為 <strong>82.0%</strong>。適合希望降低簡單任務推理成本的情境。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="該選哪個模型">該選哪個模型？<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E8%A9%B2%E9%81%B8%E5%93%AA%E5%80%8B%E6%A8%A1%E5%9E%8B" class="hash-link" aria-label="該選哪個模型？ 的直接連結" title="該選哪個模型？ 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><strong>大量處理・優先考量成本</strong>：GPT-5.4 nano 或 GPT-4o mini。若需要最新知識則選 GPT-5.4 nano，若需要微調則選 GPT-4o mini。</li>
<li class=""><strong>程式開發・代理任務</strong>：GPT-5.4 mini。速度與精確度的平衡最佳。</li>
<li class=""><strong>複雜推理・高品質輸出</strong>：GPT-5.4。費用為輸入 $2.50、輸出 $15.00/MTok，雖然高成本，但可獲得當代最高品質的輸出。</li>
<li class=""><strong>與舊有系統相容</strong>：GPT-4o。API 持續提供，可維持現有的系統整合。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="性價比最佳選擇">性價比最佳選擇<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E6%80%A7%E5%83%B9%E6%AF%94%E6%9C%80%E4%BD%B3%E9%81%B8%E6%93%87" class="hash-link" aria-label="性價比最佳選擇 的直接連結" title="性價比最佳選擇 的直接連結" translate="no">​</a></h2>
<p>從性價比角度特別值得關注的是 <strong>GPT-5.4 nano</strong> 和 <strong>GPT-5.4 mini</strong> 這兩個模型。</p>
<p><strong>GPT-5.4 nano</strong> 的輸入費用與 GPT-4o mini 相近（$0.20 vs $0.15），但可使用 400K Context、2025 年 8 月為止的知識，以及網路搜尋、檔案搜尋、MCP 等所有原生工具。除知識截止日期外，幾乎在所有方面都優於 GPT-4o mini，因此只要不需要微調，遷移至 GPT-5.4 nano 是合理的選擇。</p>
<p><strong>GPT-5.4 mini</strong> 的輸入費用（$0.75）低於 GPT-4o（$2.50/MTok），且在程式開發與代理工作流程中的效能超越 GPT-4o。若日常使用 GPT-4o，切換至 GPT-5.4 mini 很可能同時實現降低成本與提升效能的目標。</p>
<p>另一方面，<strong>GPT-4o</strong> 目前的性價比偏低。輸入費用與 GPT-5.4 相同（$2.50/MTok），在 Context 大小、知識新鮮度及工具支援方面卻全面落後於 GPT-5.4 系列。除非需要微調或與現有系統相容，否則主動選擇 GPT-4o 的理由並不充分。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="參考資料">參考資料<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/18/gpt-54-pricing-comparison#%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99" class="hash-link" aria-label="參考資料 的直接連結" title="參考資料 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://developers.openai.com/api/docs/pricing" target="_blank" rel="noopener noreferrer" class="">OpenAI API 費用</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4-mini" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 mini 模型詳細說明</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4-nano" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 nano 模型詳細說明</a></li>
<li class=""><a href="https://openai.com/index/introducing-gpt-5-4-mini-and-nano/" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 mini 與 nano 介紹 – OpenAI</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 模型詳細說明</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-4o-mini" target="_blank" rel="noopener noreferrer" class="">GPT-4o mini 模型詳細說明</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="OpenAI" term="OpenAI"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[CSS 為什麼「8 的倍數」成為邊距的標準]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule"/>
        <updated>2026-04-12T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[現代的 UI 設計中，「邊距設定為 8 的倍數」的規則被廣泛使用。這不僅僅是慣例，而是基於 螢幕密度、排版和比例的數學一致性所支持的經驗法則。]]></summary>
        <content type="html"><![CDATA[<p>現代的 UI 設計中，「邊距設定為 8 的倍數」的規則被廣泛使用。這不僅僅是慣例，而是基於 <strong>螢幕密度、排版和比例的數學一致性</strong>所支持的經驗法則。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="針對多種螢幕密度的應對">針對多種螢幕密度的應對<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule#%E9%87%9D%E5%B0%8D%E5%A4%9A%E7%A8%AE%E8%9E%A2%E5%B9%95%E5%AF%86%E5%BA%A6%E7%9A%84%E6%87%89%E5%B0%8D" class="hash-link" aria-label="針對多種螢幕密度的應對 的直接連結" title="針對多種螢幕密度的應對 的直接連結" translate="no">​</a></h2>
<p>現代顯示器具有 <strong>1x、1.5x、2x、3x、4x</strong> 等像素比率。</p>
<table><thead><tr><th>值</th><th>1x</th><th>1.5x</th><th>2x</th><th>3x</th><th>4x</th></tr></thead><tbody><tr><td><strong>8 px</strong></td><td>8</td><td>12</td><td>16</td><td>24</td><td>32</td></tr><tr><td>5 px</td><td>5</td><td>7.5 ⚠️</td><td>10</td><td>15</td><td>20</td></tr></tbody></table>
<p>8 可以在多種倍率下<strong>整除</strong>，因此不容易發生次像素渲染的模糊效果。如果使用像 5 px 這樣的值，在 1.5x 環境中會導致 7.5 px 的尾數，渲染會變得不準確。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="與排版的相容性">與排版的相容性<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule#%E8%88%87%E6%8E%92%E7%89%88%E7%9A%84%E7%9B%B8%E5%AE%B9%E6%80%A7" class="hash-link" aria-label="與排版的相容性 的直接連結" title="與排版的相容性 的直接連結" translate="no">​</a></h2>
<p>瀏覽器的預設字體大小為 <strong>16 px (= 8 × 2)</strong>。行距通常也為 1.5 倍 = 24 px (= 8 × 3)。</p>
<p>使用 8 的倍數設置邊距，可以讓文本的節奏視覺上更一致。因為標題和正文的高度與邊距網格相一致，從而產生<strong>整齊的垂直節奏</strong>。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="便於設計標記的創建">便於設計標記的創建<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule#%E4%BE%BF%E6%96%BC%E8%A8%AD%E8%A8%88%E6%A8%99%E8%A8%98%E7%9A%84%E5%89%B5%E5%BB%BA" class="hash-link" aria-label="便於設計標記的創建 的直接連結" title="便於設計標記的創建 的直接連結" translate="no">​</a></h2>
<div class="language-css codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-css codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token variable" style="color:#36acaa">--space-1</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-2</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">16</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-3</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">24</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-4</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">32</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>這樣的比例簡單，使設計師和工程師能更易於使用<strong>共同語言</strong>。Material Design 和 Tailwind CSS 也採用了這一思路。</p>
<p>設計師只需指定「這裡是 space-3」，工程師便能毫不猶豫地使用 <code>24px</code>。命名規則的統一降低了代碼評審時的溝通成本。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="4-px-基礎的選擇">4 px 基礎的選擇<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule#4-px-%E5%9F%BA%E7%A4%8E%E7%9A%84%E9%81%B8%E6%93%87" class="hash-link" aria-label="4 px 基礎的選擇 的直接連結" title="4 px 基礎的選擇 的直接連結" translate="no">​</a></h2>
<p>對於需要更細微調整的 UI，<strong>4 px 基礎</strong> (4、8、12、16...) 也很常見。Tailwind CSS 預設採用 4 px 基礎 (<code>p-1 = 4px</code>)。</p>
<p>4 px 基礎也是 8 px 基礎的子集，因此兩者並不矛盾。可以在組件內部等細微的邊距使用 4 px 單位，在不同區域間等較大的邊距使用 8 px 單位進行區分，這樣的運用也很有效。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/12/8px-spacing-rule#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>8 px 的倍數作為邊距標準的原因可以歸納為三點。</p>
<ol>
<li class=""><strong>應對螢幕密度</strong>: 在多種像素比率下能整除，防止次像素模糊。</li>
<li class=""><strong>與排版的一致性</strong>: 與預設字體大小 (16 px) 和行距 (24 px) 一致，產生垂直節奏。</li>
<li class=""><strong>比例的一致性</strong>: 簡單的標記體系成為設計師和工程師的共同語言。</li>
</ol>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="設計" term="設計"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[新功能 Amazon S3 Files 讓 S3 桶可以掛載到 EC2]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files"/>
        <updated>2026-04-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Amazon S3 Files 是一項可以將 S3 桶直接掛載到 EC2 等計算資源的服務，並且以 NFS 檔案系統的形式運行。資料保持在 S3 中，可以使用一般的檔案操作（ls、cp、cat 等）進行讀寫。]]></summary>
        <content type="html"><![CDATA[<p>Amazon S3 Files 是一項可以將 S3 桶直接掛載到 EC2 等計算資源的服務，並且以 NFS 檔案系統的形式運行。資料保持在 S3 中，可以使用一般的檔案操作（<code>ls</code>、<code>cp</code>、<code>cat</code> 等）進行讀寫。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="s3-files-是什麼">S3 Files 是什麼<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#s3-files-%E6%98%AF%E4%BB%80%E9%BA%BC" class="hash-link" aria-label="S3 Files 是什麼 的直接連結" title="S3 Files 是什麼 的直接連結" translate="no">​</a></h2>
<p>S3 Files 是基於 Amazon EFS 建立的共享檔案系統，讓使用者能以檔案系統的形式存取 S3 桶中的數據。</p>
<p>主要特點如下：</p>
<table><thead><tr><th>項目</th><th>內容</th></tr></thead><tbody><tr><td>協定</td><td>NFS 4.1 / 4.2</td></tr><tr><td>支援的計算資源</td><td>EC2、Lambda、ECS、EKS</td></tr><tr><td>同時連接數量</td><td>最多 25,000 個計算資源</td></tr><tr><td>讀取吞吐量</td><td>最大 TB/秒</td></tr><tr><td>IOPS</td><td>超過 1,000 萬/桶</td></tr><tr><td>加密</td><td>TLS（傳輸中）+ AWS KMS（儲存時）</td></tr><tr><td>檔案系統功能</td><td>POSIX 權限、檔案鎖定、讀取後寫入一致性</td></tr></tbody></table>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="運作原理">運作原理<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86" class="hash-link" aria-label="運作原理 的直接連結" title="運作原理 的直接連結" translate="no">​</a></h3>
<p>S3 Files 將被訪問的資料自動載入高效能儲存系統，並以低延遲的方式提供服務。</p>
<ul>
<li class=""><strong>小檔案</strong>（預設小於 128 KB）：直接從高效能儲存中讀取</li>
<li class=""><strong>大檔案</strong>（1 MB 以上）：直接從 S3 流式傳輸</li>
<li class=""><strong>寫入</strong>：在高效能儲存中寫入後，自動同步到 S3</li>
</ul>
<p>高效能儲存中的資料，如果在一定時間內（預設 30 天，可設置為 1 - 365 天）未被訪問，將自動刪除。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="前提條件">前提條件<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E5%89%8D%E6%8F%90%E6%A2%9D%E4%BB%B6" class="hash-link" aria-label="前提條件 的直接連結" title="前提條件 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">AWS 帳戶</li>
<li class="">EC2 實例（Linux）</li>
<li class="">S3 桶（與 EC2 相同區域）</li>
<li class="">兩個 IAM 角色<!-- -->
<ul>
<li class="">建立檔案系統用：對 S3 桶的讀寫權限</li>
<li class="">EC2 實例用：附加 <code>AmazonS3FilesClientFullAccess</code> 管理策略</li>
</ul>
</li>
<li class="">安全群組：允許 NFS 的 2049 端口通訊</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="iam-角色的建立">IAM 角色的建立<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#iam-%E8%A7%92%E8%89%B2%E7%9A%84%E5%BB%BA%E7%AB%8B" class="hash-link" aria-label="IAM 角色的建立 的直接連結" title="IAM 角色的建立 的直接連結" translate="no">​</a></h3>
<p>S3 Files 需要兩個 IAM 角色。</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="1-用於建立檔案系統的角色">1. 用於建立檔案系統的角色<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#1-%E7%94%A8%E6%96%BC%E5%BB%BA%E7%AB%8B%E6%AA%94%E6%A1%88%E7%B3%BB%E7%B5%B1%E7%9A%84%E8%A7%92%E8%89%B2" class="hash-link" aria-label="1. 用於建立檔案系統的角色 的直接連結" title="1. 用於建立檔案系統的角色 的直接連結" translate="no">​</a></h4>
<p><strong>使用管理控制台時會自動創建，因此不需要手動創建</strong></p>
<p>此角色用於讓 S3 Files 存取桶。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># 創建角色</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name S3Files-FileSystem-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --assume-role-policy-document </span><span class="token string" style="color:#e3116c">'{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Version": "2012-10-17",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Statement": [</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Effect": "Allow",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Principal": { "Service": "s3files.amazonaws.com" },</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Action": "sts:AssumeRole"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    ]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">  }'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 附加 S3 Files 客戶端策略</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam attach-role-policy </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name S3Files-FileSystem-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --policy-arn arn:aws:iam::aws:policy/AmazonS3FilesClientFullAccess</span></span><br></div></code></pre></div></div>
<p>在創建檔案系統時用 <code>--role-arn</code> 指定此角色。</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="2-用於-ec2-實例的角色">2. 用於 EC2 實例的角色<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#2-%E7%94%A8%E6%96%BC-ec2-%E5%AF%A6%E4%BE%8B%E7%9A%84%E8%A7%92%E8%89%B2" class="hash-link" aria-label="2. 用於 EC2 實例的角色 的直接連結" title="2. 用於 EC2 實例的角色 的直接連結" translate="no">​</a></h4>
<p><strong>未附加 IAM 角色會導致掛載失敗</strong></p>
<p>在 CloudShell 中創建以下角色。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># 創建角色</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --assume-role-policy-document </span><span class="token string" style="color:#e3116c">'{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Version": "2012-10-17",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Statement": [</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Effect": "Allow",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Principal": { "Service": "ec2.amazonaws.com" },</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Action": "sts:AssumeRole"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    ]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">  }'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 附加 S3 Files 客戶端策略</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam attach-role-policy </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --policy-arn arn:aws:iam::aws:policy/AmazonS3FilesClientFullAccess</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 創建並附加實例檔案配置</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-instance-profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --instance-profile-name EC2-S3Files-Profile</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam add-role-to-instance-profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --instance-profile-name EC2-S3Files-Profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role</span></span><br></div></code></pre></div></div>
<p>將此角色附加到實例上。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="設定步驟">設定步驟<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E8%A8%AD%E5%AE%9A%E6%AD%A5%E9%A9%9F" class="hash-link" aria-label="設定步驟 的直接連結" title="設定步驟 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-準備-s3-桶">1. 準備 S3 桶<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#1-%E6%BA%96%E5%82%99-s3-%E6%A1%B6" class="hash-link" aria-label="1. 準備 S3 桶 的直接連結" title="1. 準備 S3 桶 的直接連結" translate="no">​</a></h3>
<p>在 S3 控制台中創建通用桶，也可以使用現有的桶。</p>
<p>需要特別注意的是，<strong>必須啟用桶的版本控制設定</strong></p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-創建檔案系統">2. 創建檔案系統<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#2-%E5%89%B5%E5%BB%BA%E6%AA%94%E6%A1%88%E7%B3%BB%E7%B5%B1" class="hash-link" aria-label="2. 創建檔案系統 的直接連結" title="2. 創建檔案系統 的直接連結" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="從控制台創建">從控制台創建<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E5%BE%9E%E6%8E%A7%E5%88%B6%E5%8F%B0%E5%89%B5%E5%BB%BA" class="hash-link" aria-label="從控制台創建 的直接連結" title="從控制台創建 的直接連結" translate="no">​</a></h4>
<p><img decoding="async" loading="lazy" alt="alt text" src="https://www.hikari-dev.com/zh-TW/assets/images/image-94187530abfe3f668203ae1aedd9bcb6.webp" width="1884" height="1434" class="img_y1Im"></p>
<ol>
<li class="">在 S3 控制台中選擇桶</li>
<li class="">點擊「檔案系統」標籤 → 「創建檔案系統」</li>
</ol>
<p>從控制台創建後，所有可用區會自動創建掛載目標和存取點。</p>
<p><img decoding="async" loading="lazy" alt="alt text" src="https://www.hikari-dev.com/zh-TW/assets/images/image-2-87b383a4e6c713f047b8b9576f6e79a1.webp" width="1876" height="1118" class="img_y1Im"></p>
<ol start="3">
<li class="">指定前綴和 VPC，然後點擊「創建檔案系統」。</li>
</ol>
<p>記錄下輸出的檔案系統 ID（例如：fs-0123456789abcdef0）。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-在實例中掛載">3. 在實例中掛載<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#3-%E5%9C%A8%E5%AF%A6%E4%BE%8B%E4%B8%AD%E6%8E%9B%E8%BC%89" class="hash-link" aria-label="3. 在實例中掛載 的直接連結" title="3. 在實例中掛載 的直接連結" translate="no">​</a></h3>
<p>在終端中執行以下命令。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># 創建掛載點</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> /mnt/s3files</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 挂載</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mount</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-t</span><span class="token plain"> s3files fs-0123456789abcdef0:/ /mnt/s3files</span></span><br></div></code></pre></div></div>
<div class="theme-admonition theme-admonition-note admonition_fOhH alert alert--secondary"><div class="admonitionHeading_XaF5"><span class="admonitionIcon_zgRW"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>備註</div><div class="admonitionContent_KaOa"><p>如果無法掛載，請執行以下命令再試一次：</p><div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> dnf </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-y</span><span class="token plain"> amazon-efs-utils </span><span class="token comment" style="color:#999988;font-style:italic"># Amazon Linux, RHEL</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># sudo apt install -y amazon-efs-utils (Ubuntu, Debian)</span></span><br></div></code></pre></div></div></div></div>
<div class="theme-admonition theme-admonition-note admonition_fOhH alert alert--secondary"><div class="admonitionHeading_XaF5"><span class="admonitionIcon_zgRW"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>備註</div><div class="admonitionContent_KaOa"><p>如果在執行 dnf 命令時通訊出現問題，請設置 S3 端點（網關），並指定與實例相同的可用區。</p><p>但要注意，S3 端點的路由表應與實例所在的子網相同。</p></div></div>
<p>確認掛載情況：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">df</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> /mnt/s3files</span></span><br></div></code></pre></div></div>
<p>應顯示類似以下內容：</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Filesystem      Size  Used Avail Use% Mounted on</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">&lt;s3files-dns&gt;   8.0E  129M  8.0E   1% /mnt/s3files</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="4-確認運行">4. 確認運行<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#4-%E7%A2%BA%E8%AA%8D%E9%81%8B%E8%A1%8C" class="hash-link" aria-label="4. 確認運行 的直接連結" title="4. 確認運行 的直接連結" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"> /mnt/s3files</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 創建檔案</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'echo "Hello, s3 Files!" &gt; test.txt'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 讀取檔案</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">cat</span><span class="token plain"> test.txt</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 創建目錄</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> test-directory</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-la</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 複製檔案</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">cp</span><span class="token plain"> test.txt test-directory/</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> test-directory/</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 確認檔案列表</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-la</span></span><br></div></code></pre></div></div>
<p>寫入的檔案會在約 1 分鐘內與 S3 桶同步。可以在 S3 控制台確認對象已創建。</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws s3 </span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> s3://</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">bucket-name</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">/</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="自動掛載設定">自動掛載設定<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E8%87%AA%E5%8B%95%E6%8E%9B%E8%BC%89%E8%A8%AD%E5%AE%9A" class="hash-link" aria-label="自動掛載設定 的直接連結" title="自動掛載設定 的直接連結" translate="no">​</a></h2>
<p>為了在重啟後保持掛載，需要將以下內容添加到 <code>/etc/fstab</code>。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># 添加到 /etc/fstab</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">fs-0123456789abcdef0:/ /mnt/s3files s3files _netdev,nofail </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span></span><br></div></code></pre></div></div>
<p><code>_netdev</code> 是一個選項，確保在網路連接後再進行掛載，這是必需的。加入 <code>nofail</code> 可以防止掛載失敗時導致實例無法啟動。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="收費">收費<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E6%94%B6%E8%B2%BB" class="hash-link" aria-label="收費 的直接連結" title="收費 的直接連結" translate="no">​</a></h2>
<p>S3 Files 的收費如下：</p>
<ul>
<li class=""><strong>高效能儲存使用量</strong>：檔案系統中數據的儲存費用</li>
<li class=""><strong>檔案系統存取費用</strong>：對高效能儲存進行讀寫操作的費用</li>
<li class=""><strong>S3 請求費用</strong>：對於直接從 S3 讀取大於 1 MB 的檔案，僅收取 S3 GET 費用</li>
</ul>
<p>為按量計費的無需配置模式，根據 AWS 的說法，與傳統 S3 和檔案系統間數據複製相比可減少最多 90% 的成本。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">使用 S3 Files 可以將 S3 桶掛載為 NFS 檔案系統在 EC2 上</li>
<li class="">數據保留在 S3 中，可以使用 <code>ls</code>、<code>cat</code>、<code>cp</code> 等正常的檔案操作</li>
<li class="">透過高效能儲存提供低延遲，未被訪問的數據會自動退避</li>
<li class="">通過 <code>/etc/fstab</code> 設定自動掛載，即使重啟後也能維持</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="參考">參考<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/08/s3-files#%E5%8F%83%E8%80%83" class="hash-link" aria-label="參考 的直接連結" title="參考 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://aws.amazon.com/jp/s3/features/files/" target="_blank" rel="noopener noreferrer" class="">Amazon S3 Files - Amazon Web Services</a></li>
<li class=""><a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-files.html" target="_blank" rel="noopener noreferrer" class="">S3 Files 使用者指南 - AWS 文件</a></li>
<li class=""><a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-files-getting-started.html" target="_blank" rel="noopener noreferrer" class="">教學：開始使用 S3 Files - AWS 文件</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Linux" term="Linux"/>
        <category label="S3" term="S3"/>
        <category label="S3 Files" term="S3 Files"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[使用 mitmproxy 查看 AI 程式碼工具的網路通訊]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy"/>
        <updated>2026-04-05T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[透過將 mitmproxy 設定為中間人代理，可以即時查看 AI 程式碼工具在背後進行的 API 通訊內容。]]></summary>
        <content type="html"><![CDATA[<p>透過將 mitmproxy 設定為中間人代理，可以即時查看 AI 程式碼工具在背後進行的 API 通訊內容。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="運作原理">運作原理<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86" class="hash-link" aria-label="運作原理 的直接連結" title="運作原理 的直接連結" translate="no">​</a></h2>
<p>許多 AI 程式碼工具是以 Node.js 開發的應用程式，透過 HTTPS 與外部 API 進行通訊。將 mitmproxy 作為中間人代理插入，並讓 Node.js 信任 mitmproxy 的 CA 憑證，即可解密加密的通訊內容並即時查看。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="安裝">安裝<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E5%AE%89%E8%A3%9D" class="hash-link" aria-label="安裝 的直接連結" title="安裝 的直接連結" translate="no">​</a></h2>
<p>使用 <code>uv</code> 安裝 mitmproxy 最為方便。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uv tool install mitmproxy</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="代理設定">代理設定<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E4%BB%A3%E7%90%86%E8%A8%AD%E5%AE%9A" class="hash-link" aria-label="代理設定 的直接連結" title="代理設定 的直接連結" translate="no">​</a></h2>
<p>在啟動工具之前，先設定以下環境變數。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:HTTPS_PROXY = "http://127.0.0.1:8080"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:HTTP_PROXY  = "http://127.0.0.1:8080"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:NODE_EXTRA_CA_CERTS = "$env:USERPROFILE\.mitmproxy\mitmproxy-ca-cert.pem"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="關於-node_extra_ca_certs">關於 NODE_EXTRA_CA_CERTS<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E9%97%9C%E6%96%BC-node_extra_ca_certs" class="hash-link" aria-label="關於 NODE_EXTRA_CA_CERTS 的直接連結" title="關於 NODE_EXTRA_CA_CERTS 的直接連結" translate="no">​</a></h3>
<p>只設定 <code>HTTPS_PROXY</code> 和 <code>HTTP_PROXY</code> 會導致 Node.js 的 TLS 驗證失敗而無法通訊。mitmproxy 在中繼 HTTPS 時使用自簽憑證，而 Node.js 預設會拒絕該憑證。</p>
<p>在 <code>NODE_EXTRA_CA_CERTS</code> 中指定 mitmproxy CA 憑證的路徑後，Node.js 便會信任該憑證，通訊也就能順利建立。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="產生-ca-憑證">產生 CA 憑證<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E7%94%A2%E7%94%9F-ca-%E6%86%91%E8%AD%89" class="hash-link" aria-label="產生 CA 憑證 的直接連結" title="產生 CA 憑證 的直接連結" translate="no">​</a></h3>
<p>mitmproxy 在首次啟動時會自動產生 CA 憑證，並儲存至 <code>~\.mitmproxy\</code>。若尚未產生，啟動一次即可。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">mitmweb</span></span><br></div></code></pre></div></div>
<p>瀏覽器會自動開啟，在 <code>http://127.0.0.1:8081</code> 顯示代理管理介面。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="啟動工具">啟動工具<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E5%95%9F%E5%8B%95%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="啟動工具 的直接連結" title="啟動工具 的直接連結" translate="no">​</a></h2>
<p>在另一個已設定環境變數的終端機中啟動工具。</p>
<p>開始操作工具後，mitmweb 畫面上就會出現請求流量。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="擷取到的通訊內容">擷取到的通訊內容<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E6%93%B7%E5%8F%96%E5%88%B0%E7%9A%84%E9%80%9A%E8%A8%8A%E5%85%A7%E5%AE%B9" class="hash-link" aria-label="擷取到的通訊內容 的直接連結" title="擷取到的通訊內容 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="端點">端點<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E7%AB%AF%E9%BB%9E" class="hash-link" aria-label="端點 的直接連結" title="端點 的直接連結" translate="no">​</a></h3>
<p>工具會向以下端點發送請求。</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">POST https://api.example.com/v1/messages</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="請求標頭">請求標頭<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E8%AB%8B%E6%B1%82%E6%A8%99%E9%A0%AD" class="hash-link" aria-label="請求標頭 的直接連結" title="請求標頭 的直接連結" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">x-service-version: ...</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">content-type: application/json</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">x-api-key: sk-...</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="請求本文">請求本文<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E8%AB%8B%E6%B1%82%E6%9C%AC%E6%96%87" class="hash-link" aria-label="請求本文 的直接連結" title="請求本文 的直接連結" translate="no">​</a></h3>
<div class="language-json codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-json codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"model"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"model-name"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"max_tokens"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">16000</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"stream"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"system"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"text"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"text"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"messages"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"role"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"user"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"content"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"tools"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Read"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"input_schema"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>設定 <code>stream: true</code> 後，會以 Server-Sent Events (SSE) 格式接收串流回應。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="回應">回應<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E5%9B%9E%E6%87%89" class="hash-link" aria-label="回應 的直接連結" title="回應 的直接連結" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"content_block_start","index":0,"content_block":{"type":"text","text":""}}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"Hello"}}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">...</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"message_stop"}</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="可以了解到的資訊">可以了解到的資訊<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E5%8F%AF%E4%BB%A5%E4%BA%86%E8%A7%A3%E5%88%B0%E7%9A%84%E8%B3%87%E8%A8%8A" class="hash-link" aria-label="可以了解到的資訊 的直接連結" title="可以了解到的資訊 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>項目</th><th>內容</th></tr></thead><tbody><tr><td>API 端點</td><td><code>api.example.com/v1/messages</code></td></tr><tr><td>認證方式</td><td>API 金鑰 (<code>x-api-key</code> 標頭)</td></tr><tr><td>串流方式</td><td>SSE 格式</td></tr><tr><td>工具定義</td><td>每次請求都包含</td></tr><tr><td>系統提示詞</td><td>數千至數萬 token 規模</td></tr></tbody></table>
<p>系統提示詞中包含 AI 程式碼工具的運作原則、可用工具的說明及注意事項等內容。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/ai-agent-mitmproxy#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">關鍵在於透過 <code>NODE_EXTRA_CA_CERTS</code> 讓 Node.js 信任 mitmproxy 的 CA 憑證</li>
<li class="">API 通訊採用 SSE 串流格式</li>
<li class="">可以查看工具定義和系統提示詞等 AI 程式碼工具的內部結構</li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="API" term="API"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 Amazon Cognito 設定密碼金鑰 (WebAuthn)]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey"/>
        <updated>2026-04-05T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在使用 AWS SAM 建立的檔案儲存 API 的使用者認證中，我使用了 Amazon Cognito。最近我新增了透過密碼金鑰 (WebAuthn) 登入的功能，因此總結一下設定內容。]]></summary>
        <content type="html"><![CDATA[<p>在使用 AWS SAM 建立的檔案儲存 API 的使用者認證中，我使用了 Amazon Cognito。最近我新增了透過密碼金鑰 (WebAuthn) 登入的功能，因此總結一下設定內容。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="前提條件使用密碼金鑰所需的-cognito-設定">前提條件：使用密碼金鑰所需的 Cognito 設定<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E5%89%8D%E6%8F%90%E6%A2%9D%E4%BB%B6%E4%BD%BF%E7%94%A8%E5%AF%86%E7%A2%BC%E9%87%91%E9%91%B0%E6%89%80%E9%9C%80%E7%9A%84-cognito-%E8%A8%AD%E5%AE%9A" class="hash-link" aria-label="前提條件：使用密碼金鑰所需的 Cognito 設定 的直接連結" title="前提條件：使用密碼金鑰所需的 Cognito 設定 的直接連結" translate="no">​</a></h2>
<p>要在 Cognito 中使用密碼金鑰，必須具備以下所有條件。</p>
<table><thead><tr><th>要件</th><th>本次的架構</th></tr></thead><tbody><tr><td>UserPool 層級</td><td><strong>ESSENTIALS</strong> 以上</td></tr><tr><td>管理式登入</td><td><strong>v2</strong> (新的登入 UI)</td></tr><tr><td>自訂網域</td><td><code>login.example.com</code> (用於 Relying Party ID)</td></tr></tbody></table>
<p>Cognito 的密碼金鑰必須從管理式登入 v2 UI 中註冊及使用。在 LITE 層級 (免費) 中無法使用 WebAuthn，因此需要 ESSENTIALS 層級。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="認證流程">認證流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E8%AA%8D%E8%AD%89%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="認證流程 的直接連結" title="認證流程 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="密碼金鑰註冊流程">密碼金鑰註冊流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E5%AF%86%E7%A2%BC%E9%87%91%E9%91%B0%E8%A8%BB%E5%86%8A%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="密碼金鑰註冊流程 的直接連結" title="密碼金鑰註冊流程 的直接連結" translate="no">​</a></h3>
<p>第一次登入時使用密碼，然後從帳戶設定中註冊密碼金鑰。</p>
<!-- -->
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="密碼金鑰登入流程">密碼金鑰登入流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E5%AF%86%E7%A2%BC%E9%87%91%E9%91%B0%E7%99%BB%E5%85%A5%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="密碼金鑰登入流程 的直接連結" title="密碼金鑰登入流程 的直接連結" translate="no">​</a></h3>
<p>註冊後，可以透過「使用密碼金鑰登入」按鈕直接認證。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="設定內容">設定內容<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E8%A8%AD%E5%AE%9A%E5%85%A7%E5%AE%B9" class="hash-link" aria-label="設定內容 的直接連結" title="設定內容 的直接連結" translate="no">​</a></h2>
<p>為了新增密碼金鑰，我在 <code>template.yaml</code> (SAM 模板) 上進行了僅 6 行的變更。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="變更前">變更前<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E8%AE%8A%E6%9B%B4%E5%89%8D" class="hash-link" aria-label="變更前 的直接連結" title="變更前 的直接連結" translate="no">​</a></h3>
<div class="language-yaml codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-yaml codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token key atrule" style="color:#00a4db">UserPool</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> AWS</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">Cognito</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">UserPool</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Properties</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">Policies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">PasswordPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">MinimumLength</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">MfaConfiguration</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"OFF"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="變更後">變更後<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E8%AE%8A%E6%9B%B4%E5%BE%8C" class="hash-link" aria-label="變更後 的直接連結" title="變更後 的直接連結" translate="no">​</a></h3>
<div class="language-yaml codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-yaml codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token key atrule" style="color:#00a4db">UserPool</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> AWS</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">Cognito</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">UserPool</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Properties</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">Policies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">PasswordPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">MinimumLength</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">SignInPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">AllowedFirstAuthFactors</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> PASSWORD</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> WEB_AUTHN       </span><span class="token comment" style="color:#999988;font-style:italic"># ← 新增密碼金鑰</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">MfaConfiguration</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"OFF"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">WebAuthnRelyingPartyID</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> login.example.com   </span><span class="token comment" style="color:#999988;font-style:italic"># ← 指定 RP ID</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">WebAuthnUserVerification</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> required              </span><span class="token comment" style="color:#999988;font-style:italic"># ← 強制要求生物認證</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="各參數的意義">各參數的意義<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E5%90%84%E5%8F%83%E6%95%B8%E7%9A%84%E6%84%8F%E7%BE%A9" class="hash-link" aria-label="各參數的意義 的直接連結" title="各參數的意義 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="signinpolicyallowedfirstauthfactors"><code>SignInPolicy.AllowedFirstAuthFactors</code><a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#signinpolicyallowedfirstauthfactors" class="hash-link" aria-label="signinpolicyallowedfirstauthfactors 的直接連結" title="signinpolicyallowedfirstauthfactors 的直接連結" translate="no">​</a></h3>
<p>初步認證步驟中可用的認證方式列表。只有 <code>PASSWORD</code> 時僅能使用密碼，若加上 <code>WEB_AUTHN</code> 則能選擇密碼金鑰。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="webauthnrelyingpartyid"><code>WebAuthnRelyingPartyID</code><a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#webauthnrelyingpartyid" class="hash-link" aria-label="webauthnrelyingpartyid 的直接連結" title="webauthnrelyingpartyid 的直接連結" translate="no">​</a></h3>
<p>WebAuthn 的 <strong>Relying Party ID (RP ID)</strong>。密碼金鑰將綁定到此網域生成和儲存，因此必須與 <strong>實際提供登入頁面的網域一致</strong>。</p>
<p>本次直接使用自訂網域 <code>login.example.com</code>。若使用 Cognito 的預設網域 (<code>xxx.auth.ap-northeast-1.amazoncognito.com</code>)，則需指定該網域。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="webauthnuserverification"><code>WebAuthnUserVerification</code><a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#webauthnuserverification" class="hash-link" aria-label="webauthnuserverification 的直接連結" title="webauthnuserverification 的直接連結" translate="no">​</a></h3>
<p>使用密碼金鑰時的用戶確認等級。</p>
<table><thead><tr><th>值</th><th>說明</th></tr></thead><tbody><tr><td><code>required</code></td><td>強制要求生物認證或 PIN 等的身份確認</td></tr><tr><td><code>preferred</code></td><td>儘可能要求身份確認，但可不要求</td></tr><tr><td><code>discouraged</code></td><td>省略身份確認 (不使用生物認證等)</td></tr></tbody></table>
<p>為了提高安全性，選擇了 <code>required</code>。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="管理式登入的-ui">管理式登入的 UI<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E7%AE%A1%E7%90%86%E5%BC%8F%E7%99%BB%E5%85%A5%E7%9A%84-ui" class="hash-link" aria-label="管理式登入的 UI 的直接連結" title="管理式登入的 UI 的直接連結" translate="no">​</a></h2>
<p>在管理式登入 v2 的界面中，密碼金鑰設定後，登入畫面將自動新增「使用密碼金鑰登入」按鈕。第一次註冊時需先使用密碼登入，然後可在帳戶設定中新增密碼金鑰。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="部署">部署<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E9%83%A8%E7%BD%B2" class="hash-link" aria-label="部署 的直接連結" title="部署 的直接連結" translate="no">​</a></h2>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sam build</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sam deploy --no-confirm-changeset</span></span><br></div></code></pre></div></div>
<p>由於 <code>samconfig.toml</code> 中已定義堆疊名稱、區域及參數，因此每次部署時不需要指定選項。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/05/cognito-passkey#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>啟用 Cognito 密碼金鑰的重點總結如下：</p>
<ol>
<li class="">設定為 <strong>ESSENTIALS 層級</strong> (LITE 不支持 WebAuthn)</li>
<li class="">使用 <strong>管理式登入 v2</strong></li>
<li class="">指定自訂網域 (或 Cognito 預設網域) 為 RP ID</li>
<li class="">在 <code>SignInPolicy.AllowedFirstAuthFactors</code> 中增加 <code>WEB_AUTHN</code></li>
<li class="">使用 <code>WebAuthnUserVerification: required</code> 強制要求生物認證</li>
</ol>
<p>僅透過 6 行的變更，即可使用密碼金鑰登入。此時仍保留密碼，逐步向密碼金鑰過渡，這正是 Cognito 的便利之處。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Cognito" term="Cognito"/>
        <category label="WebAuthn" term="WebAuthn"/>
        <category label="安全性" term="安全性"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 PowerShell 中呼叫 Vertex AI Gemini API]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell"/>
        <updated>2026-04-03T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[介紹如何從 PowerShell 經由 Google Cloud 的 Vertex AI 呼叫 Gemini 模型。涵蓋 OpenAI 相容端點與原生 Gemini 端點兩種方式。]]></summary>
        <content type="html"><![CDATA[<p>介紹如何從 PowerShell 經由 Google Cloud 的 Vertex AI 呼叫 Gemini 模型。涵蓋 OpenAI 相容端點與原生 Gemini 端點兩種方式。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="認證方式">認證方式<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E8%AA%8D%E8%AD%89%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="認證方式 的直接連結" title="認證方式 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gcloud-auth推薦">gcloud auth（推薦）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#gcloud-auth%E6%8E%A8%E8%96%A6" class="hash-link" aria-label="gcloud auth（推薦） 的直接連結" title="gcloud auth（推薦） 的直接連結" translate="no">​</a></h3>
<p>不需要 API 金鑰，可直接使用現有的 Google Cloud 認證資訊。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$accessToken = (gcloud auth print-access-token)</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="api-金鑰">API 金鑰<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#api-%E9%87%91%E9%91%B0" class="hash-link" aria-label="API 金鑰 的直接連結" title="API 金鑰 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$apiKey = $env:VERTEX_API_KEY</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="端點">端點<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E7%AB%AF%E9%BB%9E" class="hash-link" aria-label="端點 的直接連結" title="端點 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-相容端點gcloud-auth-認證">OpenAI 相容端點（gcloud auth 認證）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#openai-%E7%9B%B8%E5%AE%B9%E7%AB%AF%E9%BB%9Egcloud-auth-%E8%AA%8D%E8%AD%89" class="hash-link" aria-label="OpenAI 相容端點（gcloud auth 認證） 的直接連結" title="OpenAI 相容端點（gcloud auth 認證） 的直接連結" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">https://{region}-aiplatform.googleapis.com/v1beta1/projects/{projectId}/locations/{region}/endpoints/openapi/chat/completions</span></span><br></div></code></pre></div></div>
<p>請求與回應格式與 OpenAI API 相同。模型名稱需加上 <code>google/</code> 前綴（例：<code>google/gemini-2.5-flash-lite</code>）。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="原生-gemini-端點api-金鑰認證">原生 Gemini 端點（API 金鑰認證）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8E%9F%E7%94%9F-gemini-%E7%AB%AF%E9%BB%9Eapi-%E9%87%91%E9%91%B0%E8%AA%8D%E8%AD%89" class="hash-link" aria-label="原生 Gemini 端點（API 金鑰認證） 的直接連結" title="原生 Gemini 端點（API 金鑰認證） 的直接連結" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">https://{region}-aiplatform.googleapis.com/v1/projects/{projectId}/locations/{region}/publishers/google/models/{model}:generateContent</span></span><br></div></code></pre></div></div>
<p>若需要串流請使用 <code>:streamGenerateContent</code>。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="基本呼叫範例">基本呼叫範例<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%9F%BA%E6%9C%AC%E5%91%BC%E5%8F%AB%E7%AF%84%E4%BE%8B" class="hash-link" aria-label="基本呼叫範例 的直接連結" title="基本呼叫範例 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-相容gcloud-auth">OpenAI 相容（gcloud auth）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#openai-%E7%9B%B8%E5%AE%B9gcloud-auth" class="hash-link" aria-label="OpenAI 相容（gcloud auth） 的直接連結" title="OpenAI 相容（gcloud auth） 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$projectId   = "your-project-id"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$region      = "us-central1"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$model       = "google/gemini-2.5-flash-lite"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$accessToken = (gcloud auth print-access-token)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "東京的人口是多少？"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$uri = "https://$region-aiplatform.googleapis.com/v1beta1/projects/$projectId/locations/$region/endpoints/openapi/chat/completions"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response = Invoke-RestMethod `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Uri         $uri `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Method      Post `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -ContentType "application/json" `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Headers     @{ Authorization = "Bearer $accessToken" } `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Body        $body</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.choices[0].message.content</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="原生-geminiapi-金鑰">原生 Gemini（API 金鑰）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8E%9F%E7%94%9F-geminiapi-%E9%87%91%E9%91%B0" class="hash-link" aria-label="原生 Gemini（API 金鑰） 的直接連結" title="原生 Gemini（API 金鑰） 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$projectId = "your-project-id"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$region    = "us-central1"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$model     = "gemini-2.5-flash-lite"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$apiKey    = $env:VERTEX_API_KEY</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">                @{ text = "東京的人口是多少？" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$uri = "https://$region-aiplatform.googleapis.com/v1/projects/$projectId/locations/$region/publishers/google/models/${model}:generateContent?key=$apiKey"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response = Invoke-RestMethod `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Uri         $uri `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Method      Post `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -ContentType "application/json" `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Body        $body</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.candidates[0].content.parts[0].text</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="回應結構">回應結構<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%9B%9E%E6%87%89%E7%B5%90%E6%A7%8B" class="hash-link" aria-label="回應結構 的直接連結" title="回應結構 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-相容">OpenAI 相容<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#openai-%E7%9B%B8%E5%AE%B9" class="hash-link" aria-label="OpenAI 相容 的直接連結" title="OpenAI 相容 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.choices[0].message.content  # 產生的文字</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.usage.total_tokens           # 總 Token 數</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.model                        # 使用的模型</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="原生-gemini">原生 Gemini<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8E%9F%E7%94%9F-gemini" class="hash-link" aria-label="原生 Gemini 的直接連結" title="原生 Gemini 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.candidates[0].content.parts[0].text  # 產生的文字</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.usageMetadata.totalTokenCount         # 總 Token 數</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.modelVersion                          # 使用的模型版本</span></span><br></div></code></pre></div></div>
<p>串流（<code>streamGenerateContent</code>）會回傳多個 chunk 的陣列，需將文字串接取出。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$fullText = ($response | ForEach-Object {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    $_.candidates[0].content.parts[0].text</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">}) -join ""</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="加入系統提示">加入系統提示<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8A%A0%E5%85%A5%E7%B3%BB%E7%B5%B1%E6%8F%90%E7%A4%BA" class="hash-link" aria-label="加入系統提示 的直接連結" title="加入系統提示 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-相容-1">OpenAI 相容<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#openai-%E7%9B%B8%E5%AE%B9-1" class="hash-link" aria-label="OpenAI 相容 的直接連結" title="OpenAI 相容 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "system"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "您是用日語回答的 AI 助理，請簡潔回覆。"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "光速是多少？"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="原生-gemini-1">原生 Gemini<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8E%9F%E7%94%9F-gemini-1" class="hash-link" aria-label="原生 Gemini 的直接連結" title="原生 Gemini 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    system_instruction = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        parts = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            @{ text = "您是用日語回答的 AI 助理，請簡潔回覆。" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "光速是多少？" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="多回合對話">多回合對話<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%A4%9A%E5%9B%9E%E5%90%88%E5%B0%8D%E8%A9%B1" class="hash-link" aria-label="多回合對話 的直接連結" title="多回合對話 的直接連結" translate="no">​</a></h2>
<p>將歷史對話依序放入陣列即可實現多回合對話。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-相容-2">OpenAI 相容<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#openai-%E7%9B%B8%E5%AE%B9-2" class="hash-link" aria-label="OpenAI 相容 的直接連結" title="OpenAI 相容 的直接連結" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "user";      content = "你比較喜歡貓還是狗？" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "assistant"; content = "我喜歡貓。" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "user";      content = "為什麼？" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="原生-gemini-2">原生 Gemini<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8E%9F%E7%94%9F-gemini-2" class="hash-link" aria-label="原生 Gemini 的直接連結" title="原生 Gemini 的直接連結" translate="no">​</a></h3>
<p>助理的角色需指定為 <code>"model"</code>。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "你比較喜歡貓還是狗？" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "model"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "我喜歡貓。" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "為什麼？" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="可用模型">可用模型<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E5%8F%AF%E7%94%A8%E6%A8%A1%E5%9E%8B" class="hash-link" aria-label="可用模型 的直接連結" title="可用模型 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>模型</th><th>OpenAI 相容名稱</th><th>特性</th></tr></thead><tbody><tr><td><code>gemini-2.5-flash-lite</code></td><td><code>google/gemini-2.5-flash-lite</code></td><td>輕量、快速、低成本</td></tr><tr><td><code>gemini-2.5-flash</code></td><td><code>google/gemini-2.5-flash</code></td><td>平衡型</td></tr><tr><td><code>gemini-2.5-pro</code></td><td><code>google/gemini-2.5-pro</code></td><td>高精度，適合複雜任務</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="選擇方式的判斷基準">選擇方式的判斷基準<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E9%81%B8%E6%93%87%E6%96%B9%E5%BC%8F%E7%9A%84%E5%88%A4%E6%96%B7%E5%9F%BA%E6%BA%96" class="hash-link" aria-label="選擇方式的判斷基準 的直接連結" title="選擇方式的判斷基準 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>情況</th><th>推薦方式</th></tr></thead><tbody><tr><td>已有 GCP 認證的環境（開發、CI 等）</td><td>OpenAI 相容 + gcloud auth</td></tr><tr><td>只能使用 API 金鑰</td><td>原生 Gemini</td></tr><tr><td>從 OpenAI 移轉中</td><td>OpenAI 相容（最小化程式碼變更）</td></tr><tr><td>需要串流</td><td>原生 Gemini</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="注意事項">注意事項<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/03/vertex-ai-gemini-powershell#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85" class="hash-link" aria-label="注意事項 的直接連結" title="注意事項 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">請勿將 API 金鑰硬寫在腳本中，應從環境變數（<code>$env:VERTEX_API_KEY</code>）讀取。</li>
<li class="">gcloud auth 的 token 有效期限約為 1 小時，長時間執行的腳本需要定期重新取得。</li>
<li class="">每個專案有各自的速率限制與配額，大量發送請求前請事先確認。</li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="PowerShell" term="PowerShell"/>
        <category label="GCP" term="GCP"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[什麼是 CORS？從安全性角度為初學者解說]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security"/>
        <updated>2026-04-02T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[説明 Web 瀏覽器的安全功能 CORS (Cross-Origin Resource Sharing)，涵蓋「為什麼需要」和「有什麼風險」，為初學者量身打造的解説。正確理解 CORS 能夠實現安全的 Web 開發。]]></summary>
        <content type="html"><![CDATA[<p>説明 Web 瀏覽器的安全功能 <strong>CORS (Cross-Origin Resource Sharing)</strong>，涵蓋「為什麼需要」和「有什麼風險」，為初學者量身打造的解説。正確理解 CORS 能夠實現安全的 Web 開發。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cors-出現的背景同源政策-same-origin-policy">CORS 出現的背景：同源政策 (Same-Origin Policy)<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#cors-%E5%87%BA%E7%8F%BE%E7%9A%84%E8%83%8C%E6%99%AF%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-same-origin-policy" class="hash-link" aria-label="CORS 出現的背景：同源政策 (Same-Origin Policy) 的直接連結" title="CORS 出現的背景：同源政策 (Same-Origin Policy) 的直接連結" translate="no">​</a></h2>
<p>在 1990 年代初期，JavaScript 被引入瀏覽器時，Web 安全的概念幾乎不存在。當時，惡意網站可以自由存取其他網站的資料，容易導致工作階段劫持 (Session Hijacking) 和資料竊取。</p>
<p>為了解決這個問題，引入了一項稱為<strong>同源政策 (Same-Origin Policy)</strong> 的限制。這是一個簡單而強大的規則：「從網頁加載的 JavaScript 無法存取該網頁不同源的資料」。</p>
<p>例如，從 <code>https://www.example.com</code> 加載的 JavaScript 無法存取 <code>https://www.bank.com</code> 的資料。這樣，即使使用者登入銀行網站後訪問惡意網站，銀行資訊也不會被盜取。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="什麼是源-origin">什麼是源 (Origin)<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E4%BB%80%E9%BA%BC%E6%98%AF%E6%BA%90-origin" class="hash-link" aria-label="什麼是源 (Origin) 的直接連結" title="什麼是源 (Origin) 的直接連結" translate="no">​</a></h3>
<p><strong>源 (Origin)</strong> 由以下三個要素決定：</p>
<ul>
<li class=""><strong>協議 (Protocol)</strong>：<code>http://</code> 或 <code>https://</code></li>
<li class=""><strong>主機 (Host/網域)</strong>：<code>example.com</code> 或 <code>api.example.com</code></li>
<li class=""><strong>連接埠 (Port)</strong>：<code>80</code> 或 <code>8080</code></li>
</ul>
<p>例如，</p>
<table><thead><tr><th>URL</th><th>協議</th><th>主機</th><th>連接埠</th><th>源</th></tr></thead><tbody><tr><td><code>https://www.example.com/page</code></td><td>HTTPS</td><td><a href="http://www.example.com/" target="_blank" rel="noopener noreferrer" class="">www.example.com</a></td><td>443 (預設)</td><td><code>https://www.example.com</code></td></tr><tr><td><code>https://api.example.com/data</code></td><td>HTTPS</td><td>api.example.com</td><td>443 (預設)</td><td><code>https://api.example.com</code></td></tr></tbody></table>
<p>由於主機不同，它們被視為<strong>不同的源</strong>。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="同源政策防止的事項">同源政策防止的事項<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96%E9%98%B2%E6%AD%A2%E7%9A%84%E4%BA%8B%E9%A0%85" class="hash-link" aria-label="同源政策防止的事項 的直接連結" title="同源政策防止的事項 的直接連結" translate="no">​</a></h3>
<p>JavaScript 的 <strong>XHR (XMLHttpRequest)</strong> 或 <strong>Fetch API</strong> 對不同源的請求受到限制。</p>
<p>例：evil.com 上的惡意指令碼</p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://bank.example.com/api/transfer'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'POST'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">body</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">JSON</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">stringify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">amount</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1000000</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>沒有同源政策的話，惡意網站 (<code>evil.com</code>) 的 JavaScript 可以在使用者登入銀行網站的狀態下發送轉帳請求。<strong>防止這種情況就是同源政策的目的</strong>。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="為什麼需要-cors">為什麼需要 CORS<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81-cors" class="hash-link" aria-label="為什麼需要 CORS 的直接連結" title="為什麼需要 CORS 的直接連結" translate="no">​</a></h2>
<p>然而，現代 Web 開發經常涉及多個源的協作。</p>
<ul>
<li class=""><strong>前端</strong>：<code>https://www.example.com</code></li>
<li class=""><strong>API 伺服器</strong>：<code>https://api.example.com</code></li>
<li class=""><strong>CDN / 靜態文件</strong>：<code>https://cdn.example.com</code></li>
</ul>
<p>這些是<strong>由同一公司營運的正當通訊</strong>。但如果受到同源政策限制，應用程式就無法運作。</p>
<p>這時候 CORS (Cross-Origin Resource Sharing) 就派上用場了。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="什麼是-cors明確允許存取">什麼是 CORS：明確允許存取<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E4%BB%80%E9%BA%BC%E6%98%AF-cors%E6%98%8E%E7%A2%BA%E5%85%81%E8%A8%B1%E5%AD%98%E5%8F%96" class="hash-link" aria-label="什麼是 CORS：明確允許存取 的直接連結" title="什麼是 CORS：明確允許存取 的直接連結" translate="no">​</a></h2>
<p><strong>CORS 是伺服器明確聲明「允許來自此源的請求」的機制</strong>。</p>
<p>伺服器只需返回以下回應標頭，瀏覽器就會放寬限制。</p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Methods: GET, POST, PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: Content-Type, Authorization</span></span><br></div></code></pre></div></div>
<p><strong>除非伺服器表示「允許」，否則瀏覽器不會將請求結果傳回 JavaScript</strong>。這樣既能實現跨源存取，又能保持安全性。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cors-的安全風險常見的設定錯誤">CORS 的安全風險：常見的設定錯誤<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#cors-%E7%9A%84%E5%AE%89%E5%85%A8%E9%A2%A8%E9%9A%AA%E5%B8%B8%E8%A6%8B%E7%9A%84%E8%A8%AD%E5%AE%9A%E9%8C%AF%E8%AA%A4" class="hash-link" aria-label="CORS 的安全風險：常見的設定錯誤 的直接連結" title="CORS 的安全風險：常見的設定錯誤 的直接連結" translate="no">​</a></h2>
<p>雖然 CORS 很便利，但設定不當會造成安全漏洞。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="錯誤允許所有源">錯誤：允許所有源<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E9%8C%AF%E8%AA%A4%E5%85%81%E8%A8%B1%E6%89%80%E6%9C%89%E6%BA%90" class="hash-link" aria-label="錯誤：允許所有源 的直接連結" title="錯誤：允許所有源 的直接連結" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: *</span></span><br></div></code></pre></div></div>
<p>這表示「世界上任何人都可以存取此伺服器」。</p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">// https://evil.com 的 JavaScript</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://api.example.com/user/profile'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">r</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> r</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">json</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">data</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// 竊取使用者個人資料的處理</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>對於包含認證憑證（如 Cookie）的請求特別危險，使用者在登入 <code>api.example.com</code> 後訪問 <code>evil.com</code> 時，個人資訊可能被盜取。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="半危險包含-cookie-時禁止使用-">半危險：包含 Cookie 時禁止使用 <code>*</code><a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E5%8D%8A%E5%8D%B1%E9%9A%AA%E5%8C%85%E5%90%AB-cookie-%E6%99%82%E7%A6%81%E6%AD%A2%E4%BD%BF%E7%94%A8-" class="hash-link" aria-label="半危險包含-cookie-時禁止使用- 的直接連結" title="半危險包含-cookie-時禁止使用- 的直接連結" translate="no">​</a></h3>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://api.example.com/user/profile'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">credentials</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'include'</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 包含 Cookie</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span></span><br></div></code></pre></div></div>
<p>包含認證資訊時，不能使用 <code>Access-Control-Allow-Origin: *</code>。必須<strong>明確指定特定的源</strong>。</p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Credentials: true</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="錯誤直接允許使用者指定的-url">錯誤：直接允許使用者指定的 URL<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E9%8C%AF%E8%AA%A4%E7%9B%B4%E6%8E%A5%E5%85%81%E8%A8%B1%E4%BD%BF%E7%94%A8%E8%80%85%E6%8C%87%E5%AE%9A%E7%9A%84-url" class="hash-link" aria-label="錯誤：直接允許使用者指定的 URL 的直接連結" title="錯誤：直接允許使用者指定的 URL 的直接連結" translate="no">​</a></h3>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">// 危險的實現範例（伺服器端）</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> origin </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> request</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Origin'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">response</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 原樣返回！</span></span><br></div></code></pre></div></div>
<p>這樣做會允許來自 <code>https://evil.com</code> 的請求，回應會帶有 <code>Access-Control-Allow-Origin: https://evil.com</code>，容易被濫用。</p>
<p><strong>正確做法是準備白名單，只允許列表中的源</strong>。</p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> allowedOrigins </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'https://www.example.com'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'https://admin.example.com'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">allowedOrigins</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">includes</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  response</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="錯誤允許所有標頭">錯誤：允許所有標頭<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E9%8C%AF%E8%AA%A4%E5%85%81%E8%A8%B1%E6%89%80%E6%9C%89%E6%A8%99%E9%A0%AD" class="hash-link" aria-label="錯誤：允許所有標頭 的直接連結" title="錯誤：允許所有標頭 的直接連結" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: *</span></span><br></div></code></pre></div></div>
<p>這表示「接受任何標頭」，允許透過自訂標頭注入惡意資料的攻擊。</p>
<p><strong>只列出必要的標頭</strong>。</p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: Content-Type, Authorization</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cors-預檢請求瀏覽器的事前確認">CORS 預檢請求：瀏覽器的事前確認<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#cors-%E9%A0%90%E6%AA%A2%E8%AB%8B%E6%B1%82%E7%80%8F%E8%A6%BD%E5%99%A8%E7%9A%84%E4%BA%8B%E5%89%8D%E7%A2%BA%E8%AA%8D" class="hash-link" aria-label="CORS 預檢請求：瀏覽器的事前確認 的直接連結" title="CORS 預檢請求：瀏覽器的事前確認 的直接連結" translate="no">​</a></h2>
<p>對於簡單請求以外的請求（GET、HEAD、POST），瀏覽器會自動發送 <strong>OPTIONS 方法</strong>的請求來確認「這樣可以嗎？」這被稱為預檢請求 (Preflight Request)。</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">1. JavaScript 嘗試發送 PUT 請求</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">2. 瀏覽器自動發送 OPTIONS 預檢請求</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    OPTIONS /api/resource HTTP/1.1</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Request-Method: PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Request-Headers: Content-Type</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">3. 伺服器回應「OK」</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    HTTP 200 OK</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Methods: PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Headers: Content-Type</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">4. 瀏覽器發送實際的 PUT 請求</span></span><br></div></code></pre></div></div>
<p>如果伺服器不支援 <code>OPTIONS</code> 方法，預檢就會失敗，實際請求也不會被發送。</p>
<p><strong>要點：</strong></p>
<ul>
<li class="">在白名單中明確指定允許的源</li>
<li class="">使用 <code>credentials: true</code> 處理包含 Cookie 認證的請求</li>
<li class="">只允許必要的方法和標頭</li>
<li class="">OPTIONS 預檢請求</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="常見疑問">常見疑問<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E5%B8%B8%E8%A6%8B%E7%96%91%E5%95%8F" class="hash-link" aria-label="常見疑問 的直接連結" title="常見疑問 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-遇到-cors-錯誤可以允許所有源來解決嗎">Q. 遇到 CORS 錯誤。可以允許所有源來解決嗎？<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#q-%E9%81%87%E5%88%B0-cors-%E9%8C%AF%E8%AA%A4%E5%8F%AF%E4%BB%A5%E5%85%81%E8%A8%B1%E6%89%80%E6%9C%89%E6%BA%90%E4%BE%86%E8%A7%A3%E6%B1%BA%E5%97%8E" class="hash-link" aria-label="Q. 遇到 CORS 錯誤。可以允許所有源來解決嗎？ 的直接連結" title="Q. 遇到 CORS 錯誤。可以允許所有源來解決嗎？ 的直接連結" translate="no">​</a></h3>
<p><strong>A：</strong> 不可以。可能會暫時有效，但在生產環境中允許 <code>*</code> 是安全風險。需要重新檢查伺服器端設定或重新設計 API。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-想在本地開發時存取不同連接埠的源可以嗎">Q. 想在本地開發時存取不同連接埠的源。可以嗎？<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#q-%E6%83%B3%E5%9C%A8%E6%9C%AC%E5%9C%B0%E9%96%8B%E7%99%BC%E6%99%82%E5%AD%98%E5%8F%96%E4%B8%8D%E5%90%8C%E9%80%A3%E6%8E%A5%E5%9F%A0%E7%9A%84%E6%BA%90%E5%8F%AF%E4%BB%A5%E5%97%8E" class="hash-link" aria-label="Q. 想在本地開發時存取不同連接埠的源。可以嗎？ 的直接連結" title="Q. 想在本地開發時存取不同連接埠的源。可以嗎？ 的直接連結" translate="no">​</a></h3>
<p><strong>A：</strong> 在本地開發環境中只停用 CORS 是可以的。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-從行動應用程式呼叫-api-時cors-有影響嗎">Q. 從行動應用程式呼叫 API 時，CORS 有影響嗎？<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#q-%E5%BE%9E%E8%A1%8C%E5%8B%95%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F%E5%91%BC%E5%8F%AB-api-%E6%99%82cors-%E6%9C%89%E5%BD%B1%E9%9F%BF%E5%97%8E" class="hash-link" aria-label="Q. 從行動應用程式呼叫 API 時，CORS 有影響嗎？ 的直接連結" title="Q. 從行動應用程式呼叫 API 時，CORS 有影響嗎？ 的直接連結" translate="no">​</a></h3>
<p><strong>A：</strong> CORS 是瀏覽器的安全功能，所以<strong>對行動應用程式沒有影響</strong>。取而代之，需要使用 API 金鑰或 OAuth 實作認證和授權。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>重點</th><th>說明</th></tr></thead><tbody><tr><td><strong>CORS 的目的</strong></td><td>在保持瀏覽器安全性的同時允許跨源存取</td></tr><tr><td><strong>危險的設定</strong></td><td>對需要認證的 API 使用 <code>Access-Control-Allow-Origin: *</code></td></tr><tr><td><strong>正確的設定</strong></td><td>在白名單中明確指定允許的源</td></tr><tr><td><strong>包含 Cookie 時</strong></td><td>必須指定 <code>Access-Control-Allow-Credentials: true</code> 和具體的源</td></tr><tr><td><strong>預檢</strong></td><td>PUT/DELETE 等複雜請求需要瀏覽器用 OPTIONS 進行事前確認</td></tr></tbody></table>
<p>CORS 不只是「導致錯誤的原因」，而是 Web 安全的重要機制。設定錯誤可能導致安全事故，因此需要謹慎處理。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="參考資料">參考資料<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/cors-security#%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99" class="hash-link" aria-label="參考資料 的直接連結" title="參考資料 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS" target="_blank" rel="noopener noreferrer" class="">MDN Web Docs - CORS (Cross-Origin Resource Sharing)</a></li>
<li class=""><a href="https://developer.mozilla.org/zh-TW/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener noreferrer" class="">同源政策 - MDN Web Docs</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Web" term="Web"/>
        <category label="安全性" term="安全性"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[使用 OpenAI API 開發支援多語言的翻譯 CLI 工具 translate-mcp]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp"/>
        <updated>2026-04-02T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[translate-mcp 是一個使用 OpenAI API 的翻譯工具。它支援 CLI 模式和 MCP 伺服器的兩種使用方式，能夠應對從想要翻譯整個文件到希望與 AI 工具整合的各種場合。]]></summary>
        <content type="html"><![CDATA[<p>translate-mcp 是一個使用 OpenAI API 的翻譯工具。它支援 CLI 模式和 MCP 伺服器的兩種使用方式，能夠應對從想要翻譯整個文件到希望與 AI 工具整合的各種場合。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="translate-mcp-是什麼">translate-mcp 是什麼<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#translate-mcp-%E6%98%AF%E4%BB%80%E9%BA%BC" class="hash-link" aria-label="translate-mcp 是什麼 的直接連結" title="translate-mcp 是什麼 的直接連結" translate="no">​</a></h2>
<p><a href="https://github.com/Himeyama/translate-mcp" target="_blank" rel="noopener noreferrer" class="">translate-mcp</a> 是一款 <strong>專為翻譯而設的工具</strong>，使用 OpenAI API。它是用 Python 實現的，具有以下兩種使用方法。</p>
<ol>
<li class=""><strong>CLI 模式</strong>: 可以直接從命令行翻譯文件</li>
<li class=""><strong>MCP 伺服器模式</strong>: 充當 Model Context Protocol (MCP) 伺服器，整合到 AI 工具中</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="特徵">特徵<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E7%89%B9%E5%BE%B5" class="hash-link" aria-label="特徵 的直接連結" title="特徵 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><strong>多語言支援</strong>: 支援多種語言</li>
<li class=""><strong>簡單易用</strong>: 只需一個 API 金鑰便可開始</li>
<li class=""><strong>兩種使用方式</strong>: 既可作為 CLI 腳本，也能作為 MCP 伺服器運行</li>
<li class=""><strong>輕量級</strong>: 無需依賴外部庫，僅依賴 OpenAI API</li>
<li class=""><strong>錯誤處理</strong>: CLI 模式以 stderr 輸出，MCP 模式以 JSON 格式回傳</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="安裝">安裝<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%AE%89%E8%A3%9D" class="hash-link" aria-label="安裝 的直接連結" title="安裝 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="前提條件">前提條件<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%89%8D%E6%8F%90%E6%A2%9D%E4%BB%B6" class="hash-link" aria-label="前提條件 的直接連結" title="前提條件 的直接連結" translate="no">​</a></h3>
<ul>
<li class="">已安裝 Python</li>
<li class="">已獲取 OpenAI API 金鑰</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="安裝-uv">安裝 uv<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%AE%89%E8%A3%9D-uv" class="hash-link" aria-label="安裝 uv 的直接連結" title="安裝 uv 的直接連結" translate="no">​</a></h3>
<p>由於 translate-mcp 由 <code>uv</code> 管理，因此需要先安裝 <code>uv</code>。</p>
<p>安裝 <code>uv</code> 的方法參見 <a href="https://docs.astral.sh/uv/getting-started/installation/" target="_blank" rel="noopener noreferrer" class="">Installation | uv</a>。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># macOS / Linux</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-LsSf</span><span class="token plain"> https://astral.sh/uv/install.sh </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Windows (PowerShell)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">powershell </span><span class="token parameter variable" style="color:#36acaa">-ExecutionPolicy</span><span class="token plain"> ByPass </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"irm https://astral.sh/uv/install.ps1 | iex"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="安裝-translate-mcp">安裝 translate-mcp<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%AE%89%E8%A3%9D-translate-mcp" class="hash-link" aria-label="安裝 translate-mcp 的直接連結" title="安裝 translate-mcp 的直接連結" translate="no">​</a></h3>
<p>如果使用 <code>uv</code>，可以使用以下命令進行安裝。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uv tool </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> git+https://github.com/Himeyama/translate-mcp</span></span><br></div></code></pre></div></div>
<p>如果使用 <code>uvx</code>，則無需安裝，直接執行即可。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uvx git+https://github.com/Himeyama/translate-mcp </span><span class="token parameter variable" style="color:#36acaa">--help</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="使用方法">使用方法<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" class="hash-link" aria-label="使用方法 的直接連結" title="使用方法 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="cli-模式">CLI 模式<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#cli-%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="CLI 模式 的直接連結" title="CLI 模式 的直接連結" translate="no">​</a></h3>
<p>翻譯文件時，可以使用以下命令執行。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English</span></span><br></div></code></pre></div></div>
<p>結果將輸出至標準輸出，並可透過重定向保存到文件中。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--output</span><span class="token plain"> i18n/en/blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="參數">參數<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%8F%83%E6%95%B8" class="hash-link" aria-label="參數 的直接連結" title="參數 的直接連結" translate="no">​</a></h4>
<ul>
<li class=""><code>--mcp</code>: MCP 模式</li>
<li class=""><code>--input</code>: 待翻譯文件的路徑</li>
<li class=""><code>--from</code>: 原始語言（例如: Japanese、English）</li>
<li class=""><code>--to</code>: 目標語言（例如: English、Taiwanese）</li>
<li class=""><code>--output</code> (可選): 儲存翻譯後文本的位置</li>
<li class=""><code>--model</code> (可選): OpenAI 模型（例如: gpt-5-mini）</li>
<li class=""><code>--debug</code> (可選): 調試模式</li>
</ul>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="錯誤處理">錯誤處理<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E9%8C%AF%E8%AA%A4%E8%99%95%E7%90%86" class="hash-link" aria-label="錯誤處理 的直接連結" title="錯誤處理 的直接連結" translate="no">​</a></h4>
<p>若發生錯誤，將輸出至 stderr。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mcp-伺服器模式">MCP 伺服器模式<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#mcp-%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="MCP 伺服器模式 的直接連結" title="MCP 伺服器模式 的直接連結" translate="no">​</a></h3>
<p>啟動為 MCP 伺服器，並可供 Claude Code 或其他 AI 工具使用。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token parameter variable" style="color:#36acaa">--mcp</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="實例">實例<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%AF%A6%E4%BE%8B" class="hash-link" aria-label="實例 的直接連結" title="實例 的直接連結" translate="no">​</a></h2>
<p>以下說明如何將部落格文章從日文翻譯成英文和繁體中文（台灣）。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="日文版本原文">日文版本（原文）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E6%97%A5%E6%96%87%E7%89%88%E6%9C%AC%E5%8E%9F%E6%96%87" class="hash-link" aria-label="日文版本（原文） 的直接連結" title="日文版本（原文） 的直接連結" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># blog/2026-04-02-example.md 中有日文的文章</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="生成英文版本">生成英文版本<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E7%94%9F%E6%88%90%E8%8B%B1%E6%96%87%E7%89%88%E6%9C%AC" class="hash-link" aria-label="生成英文版本 的直接連結" title="生成英文版本 的直接連結" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> i18n/en/docusaurus-plugin-content-blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="生成台灣版本繁體中文">生成台灣版本（繁體中文）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E7%94%9F%E6%88%90%E5%8F%B0%E7%81%A3%E7%89%88%E6%9C%AC%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87" class="hash-link" aria-label="生成台灣版本（繁體中文） 的直接連結" title="生成台灣版本（繁體中文） 的直接連結" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> Taiwanese </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> i18n/zh-TW/docusaurus-plugin-content-blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="優缺點">優缺點<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%84%AA%E7%BC%BA%E9%BB%9E" class="hash-link" aria-label="優缺點 的直接連結" title="優缺點 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="優點">優點<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%84%AA%E9%BB%9E" class="hash-link" aria-label="優點 的直接連結" title="優點 的直接連結" translate="no">​</a></h3>
<ul>
<li class=""><strong>高精度</strong>: 使用 OpenAI 的高品質模型（如 GPT-4）</li>
<li class=""><strong>技能支援</strong>: 可整合至 ChatGPT 和 Claude 的多種工具</li>
<li class=""><strong>簡單</strong>: 設置和使用都非常簡單</li>
<li class=""><strong>可定制</strong>: 由於源代碼公開，因此可進行自定義</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="缺點">缺點<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E7%BC%BA%E9%BB%9E" class="hash-link" aria-label="缺點 的直接連結" title="缺點 的直接連結" translate="no">​</a></h3>
<ul>
<li class=""><strong>需支付 API 費用</strong>: 根據翻譯量，OpenAI API 需要收費</li>
<li class=""><strong>必須連網</strong>: 需調用 API，因此無法離線使用</li>
<li class=""><strong>速率限制</strong>: 受限於 OpenAI API 的速率限制</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>translate-mcp 是一個 <strong>簡單且高品質的翻譯工具</strong>，利用 OpenAI API 開發。它在部落格文章的多語言支援、文件翻譯以及與 AI 工具整合等多種場合中均能發揮作用。</p>
<p>特別是在想要使用 Docusaurus 等靜態網站生成器支援多語言時，作為自動化腳本的用途效果顯著。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="參考資料">參考資料<a href="https://www.hikari-dev.com/zh-TW/blog/2026/04/02/translate-mcp#%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99" class="hash-link" aria-label="參考資料 的直接連結" title="參考資料 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://github.com/Himeyama/translate-mcp" target="_blank" rel="noopener noreferrer" class="">GitHub - Himeyama/translate-mcp</a></li>
<li class=""><a href="https://platform.openai.com/docs" target="_blank" rel="noopener noreferrer" class="">OpenAI API 文檔</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="MCP" term="MCP"/>
        <category label="翻譯" term="翻譯"/>
        <category label="OpenAI" term="OpenAI"/>
        <category label="Python" term="Python"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[比較 Anthropic API 與 AWS Bedrock 的費用]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price"/>
        <updated>2026-03-30T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Claude 若要透過 API 使用，除了直接使用 Anthropic API 外，也能經由 AWS Bedrock、Google Vertex AI、Microsoft Azure (Azure AI Foundry) 使用。基本價格各路徑幾乎相同，但在批次處理與與雲端生態系統整合面會有差異。]]></summary>
        <content type="html"><![CDATA[<p>Claude 若要透過 API 使用，除了直接使用 Anthropic API 外，也能經由 <strong>AWS Bedrock</strong>、<strong>Google Vertex AI</strong>、<strong>Microsoft Azure (Azure AI Foundry)</strong> 使用。基本價格各路徑幾乎相同，但在批次處理與與雲端生態系統整合面會有差異。</p>
<!-- -->
<blockquote>
<p>單位：USD / 1M 代幣 (MTok)。資料截至 2026 年 3 月。</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="基本價格按需">基本價格（按需）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E5%9F%BA%E6%9C%AC%E5%83%B9%E6%A0%BC%E6%8C%89%E9%9C%80" class="hash-link" aria-label="基本價格（按需） 的直接連結" title="基本價格（按需） 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>模型</th><th>項目</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td><strong>Claude Opus 4.6</strong></td><td>輸入</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td></tr><tr><td></td><td>輸出</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td></tr><tr><td><strong>Claude Sonnet 4.6</strong></td><td>輸入</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td></tr><tr><td></td><td>輸出</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td></tr><tr><td><strong>Claude Haiku 4.5</strong></td><td>輸入</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td></tr><tr><td></td><td>輸出</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td></tr><tr><td><strong>Claude Sonnet 4.5</strong></td><td>輸入</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td></tr><tr><td></td><td>輸出</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td></tr></tbody></table>
<p><strong>基本價格在各路徑相同。</strong></p>
<p>不過在 Vertex AI 若不是使用全球端點而指定區域端點（regional endpoint），標準價格會額外加收 <strong>10%</strong>。Bedrock 有 Long Context 變體（另有 SKU），但價格相同。Anthropic API 則已將 Long Context 整合在一般模型中。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="快取費用">快取費用<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E5%BF%AB%E5%8F%96%E8%B2%BB%E7%94%A8" class="hash-link" aria-label="快取費用 的直接連結" title="快取費用 的直接連結" translate="no">​</a></h2>
<p>Prompt 快取（Prompt Caching）的費用在各路徑也相同。</p>
<table><thead><tr><th style="text-align:center">模型</th><th style="text-align:center">快取類型</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td style="text-align:center"><strong>Claude Opus 4.6</strong></td><td style="text-align:center">5 分快取寫入</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">1 小時快取寫入</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">快取讀取</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td></tr><tr><td style="text-align:center"><strong>Claude Sonnet 4.6</strong></td><td style="text-align:center">5 分快取寫入</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">1 小時快取寫入</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">快取讀取</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td></tr><tr><td style="text-align:center"><strong>Claude Haiku 4.5</strong></td><td style="text-align:center">5 分快取寫入</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">1 小時快取寫入</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td></tr><tr><td style="text-align:center"></td><td style="text-align:center">快取讀取</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td></tr></tbody></table>
<p>快取寫入依 TTL 分為 5 分（短期）和 1 小時（長期）兩種。長期快取的寫入成本較高，但如果系統提示（system prompt）很長且會被重複參考，透過節省讀取費用通常是划得來的。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="批次處理費用">批次處理費用<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E6%89%B9%E6%AC%A1%E8%99%95%E7%90%86%E8%B2%BB%E7%94%A8" class="hash-link" aria-label="批次處理費用 的直接連結" title="批次處理費用 的直接連結" translate="no">​</a></h2>
<p>Bedrock、Vertex AI、Anthropic API 三者的非同步批次 API 可享按需價格的 <strong>50% 折扣</strong>。Azure 目前未明示。</p>
<table><thead><tr><th>模型</th><th style="text-align:center">批次輸入</th><th style="text-align:center">批次輸出</th></tr></thead><tbody><tr><td><strong>Claude Opus 4.6</strong></td><td style="text-align:center">$2.50</td><td style="text-align:center">$12.50</td></tr><tr><td><strong>Claude Sonnet 4.6</strong></td><td style="text-align:center">$1.50</td><td style="text-align:center">$7.50</td></tr><tr><td><strong>Claude Haiku 4.5</strong></td><td style="text-align:center">$0.50</td><td style="text-align:center">$2.50</td></tr><tr><td><strong>Claude Sonnet 4.5</strong></td><td style="text-align:center">$1.50</td><td style="text-align:center">$7.50</td></tr></tbody></table>
<p>若要大量處理資料（例如日誌分析、向量嵌入生成等）並頻繁使用批次處理，無論走哪個路徑都能把成本砍半。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="生態系比較">生態系比較<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E7%94%9F%E6%85%8B%E7%B3%BB%E6%AF%94%E8%BC%83" class="hash-link" aria-label="生態系比較 的直接連結" title="生態系比較 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>比較重點</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td>基本價格</td><td style="text-align:center">相同</td><td style="text-align:center">相同</td><td style="text-align:center">相同</td><td style="text-align:center">相同</td></tr><tr><td>區域加價</td><td style="text-align:center">—</td><td style="text-align:center">—</td><td style="text-align:center">+10%（區域端點）</td><td style="text-align:center">—</td></tr><tr><td>批次處理（50% OFF）</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">未明示</td></tr><tr><td>東京區域</td><td style="text-align:center">—</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">—</td></tr><tr><td>IAM / 審計日誌整合</td><td style="text-align:center">—</td><td style="text-align:center">AWS</td><td style="text-align:center">Google Cloud</td><td style="text-align:center">Azure</td></tr><tr><td>VPC / PrivateLink</td><td style="text-align:center">—</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">○</td></tr><tr><td>計費整合</td><td style="text-align:center">Anthropic 直接</td><td style="text-align:center">AWS</td><td style="text-align:center">Google Cloud</td><td style="text-align:center">Azure</td></tr><tr><td>新功能推出速度</td><td style="text-align:center">最快</td><td style="text-align:center">會延遲</td><td style="text-align:center">會延遲</td><td style="text-align:center">會延遲</td></tr></tbody></table>
<p>新功能（例如 Extended Thinking）通常會先在 Anthropic API 上推出，向 Vertex AI、Bedrock、Azure 的推展有時會晚幾週。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="如何選擇">如何選擇<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E5%A6%82%E4%BD%95%E9%81%B8%E6%93%87" class="hash-link" aria-label="如何選擇 的直接連結" title="如何選擇 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">單純使用／原型開發：Anthropic API，只要一組 API 金鑰即可啟動，新功能也能最先使用。</li>
<li class="">已整合到 AWS：若需 IAM、CloudWatch、VPC，選 Bedrock。支援東京區域。</li>
<li class="">已整合到 Google Cloud：Vertex AI 是自然的選擇，但注意區域端點會加收 10%。</li>
<li class="">已整合到 Azure：可透過 Azure AI Foundry 使用，能整合到 Azure 的計費與管理。</li>
<li class="">大量使用批次以節省成本：Bedrock、Vertex AI、Anthropic API 都有 50% OFF 的批次 API 可用。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="參考">參考<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/30/anthropic-api-vs-bedrock-price#%E5%8F%83%E8%80%83" class="hash-link" aria-label="參考 的直接連結" title="參考 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://www.anthropic.com/pricing#anthropic-api" target="_blank" rel="noopener noreferrer" class="">Anthropic API 料金 – Claude API Docs</a></li>
<li class=""><a href="https://aws.amazon.com/jp/bedrock/pricing/" target="_blank" rel="noopener noreferrer" class="">AWS Bedrock 料金 – Amazon Web Services</a></li>
<li class=""><a href="https://cloud.google.com/vertex-ai/generative-ai/pricing" target="_blank" rel="noopener noreferrer" class="">Vertex AI 料金 – Google Cloud</a></li>
<li class=""><a href="https://platform.claude.com/docs/en/build-with-claude/claude-in-microsoft-foundry" target="_blank" rel="noopener noreferrer" class="">Claude in Microsoft Azure AI Foundry – Claude API Docs</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="AWS" term="AWS"/>
        <category label="Claude" term="Claude"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[即使是明朝體的文章，加粗常會變成黑體的理由]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic"/>
        <updated>2026-03-29T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[即使是以明朝體或襯線字體書寫的文章，加粗時常以黑體（無襯線字體）呈現。這是設計上刻意的選擇，主要有可讀性、視認性、與歷史慣習三個理由。]]></summary>
        <content type="html"><![CDATA[<p>即使是以明朝體或襯線字體書寫的文章，<strong>加粗時常以黑體（無襯線字體）呈現</strong>。這是設計上刻意的選擇，主要有可讀性、視認性、與歷史慣習三個理由。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="維持可讀性">維持可讀性<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic#%E7%B6%AD%E6%8C%81%E5%8F%AF%E8%AE%80%E6%80%A7" class="hash-link" aria-label="維持可讀性 的直接連結" title="維持可讀性 的直接連結" translate="no">​</a></h2>
<p>若單純把明朝體加粗，襯線（裝飾筆畫）與主筆畫的對比會變得過大，字形內部的空白（counter）容易消失。這在 Web 或螢幕上的小尺寸顯示尤其明顯，字形會潰掉而難以辨認。</p>
<p>黑體本身沒有襯線，因此即使提高字重也能保留字形內的空白，不會明顯降低可讀性。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="明確傳達強調意圖">明確傳達強調意圖<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic#%E6%98%8E%E7%A2%BA%E5%82%B3%E9%81%94%E5%BC%B7%E8%AA%BF%E6%84%8F%E5%9C%96" class="hash-link" aria-label="明確傳達強調意圖 的直接連結" title="明確傳達強調意圖 的直接連結" translate="no">​</a></h2>
<p>直接改變字體家族，可以讓「這裡是強調」的意圖在視覺上被更即刻地傳達。與單純把明朝體變粗相比，切換到黑體更容易被人眼當作「不同資訊」來處理，強調效果更明確。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="歷史與文化背景">歷史與文化背景<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic#%E6%AD%B7%E5%8F%B2%E8%88%87%E6%96%87%E5%8C%96%E8%83%8C%E6%99%AF" class="hash-link" aria-label="歷史與文化背景 的直接連結" title="歷史與文化背景 的直接連結" translate="no">​</a></h2>
<p>自日本活字印刷時代起，就有「強調使用不同字體」的慣例。將明朝體做得更粗在活字鑄造上會產生問題，因此會用完全不同的黑體來表示強調。這個慣習被沿用到數位排版與 Web。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="在-css-中的實作">在 CSS 中的實作<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic#%E5%9C%A8-css-%E4%B8%AD%E7%9A%84%E5%AF%A6%E4%BD%9C" class="hash-link" aria-label="在 CSS 中的實作 的直接連結" title="在 CSS 中的實作 的直接連結" translate="no">​</a></h2>
<p>若在 Web 以明朝體作為基底字體，可以用以下樣式將加粗切換為黑體。</p>
<div class="language-css codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-css codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token selector" style="color:#00009f">body</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-family</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Noto Serif JP"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> serif</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token selector" style="color:#00009f">strong</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> b</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h1</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h2</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h3</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h4</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h5</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h6</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-family</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Noto Sans JP"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> sans-serif</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-weight</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">700</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>這個做法也有實作上的優點。無須載入明朝體的多個字重，只要為本文提供 Regular，以及為強調提供黑體的 Bold，就能減少頁面載入成本。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/29/japanese-bold-serif-gothic#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>日文（以及台灣中文排版時常類比的情況）中，加粗時使用黑體的理由可歸納為三點：</p>
<ol>
<li class=""><strong>可讀性</strong>：黑體提高字重仍能保留字形內部空白，維持可讀性</li>
<li class=""><strong>視認性</strong>：改變字體家族比單純加粗更清楚地傳達強調</li>
<li class=""><strong>慣習</strong>：自活字印刷時代起的「強調用別書體」的做法被沿用</li>
</ol>
<p>在 Web 上也因為相同理由採用這種組合，是設計與實作上都合理的選擇。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="設計" term="設計"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 Docusaurus 部落格把 PageSpeed Insights 幾乎做滿分的方法 — SEO、效能、可及性]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance"/>
        <updated>2026-03-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我把這個部落格的行動版 PageSpeed Insights 分數改善到 Performance 99、Accessibility 100、Best Practices 100、SEO 100。從 SEO、效能、可及性 三個面向整理我做過的改動。]]></summary>
        <content type="html"><![CDATA[<p>我把這個部落格的行動版 PageSpeed Insights 分數改善到 <strong>Performance 99、Accessibility 100、Best Practices 100、SEO 100</strong>。從 SEO、效能、可及性 三個面向整理我做過的改動。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="改善前的問題">改善前的問題<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E6%94%B9%E5%96%84%E5%89%8D%E7%9A%84%E5%95%8F%E9%A1%8C" class="hash-link" aria-label="改善前的問題 的直接連結" title="改善前的問題 的直接連結" translate="no">​</a></h2>
<p>在原生的 Docusaurus 部落格跑 PageSpeed Insights 時，發現了幾個問題。</p>
<ul>
<li class=""><strong>SEO</strong>：沒有 meta description、沒有 OGP/Twitter Cards、沒有結構化資料、網站地圖的 priority 未設定</li>
<li class=""><strong>效能</strong>：因為 Google Tag Manager (GTM) 同步載入導致未使用的 JS 過大、從外部 CDN 取得 avatar 成為瓶頸</li>
<li class=""><strong>可及性</strong>：主要顏色的對比度未達 WCAG AA 標準</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="seo-的改善">SEO 的改善<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#seo-%E7%9A%84%E6%94%B9%E5%96%84" class="hash-link" aria-label="SEO 的改善 的直接連結" title="SEO 的改善 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="新增-meta-descriptionogptwitter-cards">新增 meta description、OGP、Twitter Cards<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E6%96%B0%E5%A2%9E-meta-descriptionogptwitter-cards" class="hash-link" aria-label="新增 meta description、OGP、Twitter Cards 的直接連結" title="新增 meta description、OGP、Twitter Cards 的直接連結" translate="no">​</a></h3>
<p>在 <code>docusaurus.config.ts</code> 的 <code>themeConfig.metadata</code> 中加入站點共通的 meta 資訊。</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">themeConfig</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  metadata</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'description'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"ひかりの技術メモ..."</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> property</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'og:locale'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'ja_JP'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'twitter:card'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'summary_large_image'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'twitter:site'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@ptrqr'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>另外，透過 Swizzle 覆寫 <code>src/theme/Layout/index.tsx</code>，為沒有自訂 description 的頁面（例如部落格列表、標籤頁）設定以語系為單位的備用 description。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="新增-robotstxt">新增 robots.txt<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E6%96%B0%E5%A2%9E-robotstxt" class="hash-link" aria-label="新增 robots.txt 的直接連結" title="新增 robots.txt 的直接連結" translate="no">​</a></h3>
<p>加入 <code>static/robots.txt</code>，明確告訴爬蟲網站地圖的位置。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="blogposting-json-ld結構化資料">BlogPosting JSON-LD（結構化資料）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#blogposting-json-ld%E7%B5%90%E6%A7%8B%E5%8C%96%E8%B3%87%E6%96%99" class="hash-link" aria-label="BlogPosting JSON-LD（結構化資料） 的直接連結" title="BlogPosting JSON-LD（結構化資料） 的直接連結" translate="no">​</a></h3>
<p>透過 Swizzle 覆寫 <code>src/theme/BlogPostItem/index.tsx</code>，在文章頁輸出包含 <code>headline</code>、<code>datePublished</code>、<code>dateModified</code>、<code>author</code> 的 <code>BlogPosting</code> JSON-LD。</p>
<p>不過後來發現 Docusaurus 內建的 <code>BlogPostPage/StructuredData</code> 已經會輸出相同的資料。把自訂的 JSON-LD 移除，改為在內建元件上加上 <code>keywords</code> 的備援（<code>frontMatter.keywords</code> → <code>tags</code>）。結構化資料重複會對 SEO 造成負面影響，整理這點相當重要。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="website-json-ld">WebSite JSON-LD<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#website-json-ld" class="hash-link" aria-label="WebSite JSON-LD 的直接連結" title="WebSite JSON-LD 的直接連結" translate="no">​</a></h3>
<p>在 <code>docusaurus.config.ts</code> 的 <code>headTags</code> 加入 <code>WebSite</code> 類型的 JSON-LD，讓 Google 能正確辨識站名。</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">headTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    tagName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'script'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    attributes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'application/ld+json'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    innerHTML</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">JSON</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">stringify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token string-property property" style="color:#36acaa">'@context'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'https://schema.org'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token string-property property" style="color:#36acaa">'@type'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'WebSite'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'ひかりの備忘録'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'https://www.hikari-dev.com/'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="自動為所有文章生成-ogp-圖片">自動為所有文章生成 OGP 圖片<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E8%87%AA%E5%8B%95%E7%82%BA%E6%89%80%E6%9C%89%E6%96%87%E7%AB%A0%E7%94%9F%E6%88%90-ogp-%E5%9C%96%E7%89%87" class="hash-link" aria-label="自動為所有文章生成 OGP 圖片 的直接連結" title="自動為所有文章生成 OGP 圖片 的直接連結" translate="no">​</a></h3>
<p>建立 <code>scripts/generate-ogp.js</code>，自動根據標籤產生漸層背景的 OGP 圖片。如此一來，所有文章在社群分享時都會帶有吸睛的圖片。為每篇文章的 frontMatter 設定 <code>image:</code> 欄位，若文章已有專屬圖片則優先使用。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="改善網站地圖">改善網站地圖<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E6%94%B9%E5%96%84%E7%B6%B2%E7%AB%99%E5%9C%B0%E5%9C%96" class="hash-link" aria-label="改善網站地圖 的直接連結" title="改善網站地圖 的直接連結" translate="no">​</a></h3>
<p>使用 <code>createSitemapItems</code> 回呼把首頁 priority 設為 <code>1.0</code>、部落格文章設為 <code>0.8</code>。另外從 URL 含有的日期自動抽出 <code>lastmod</code>。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="hreflang-x-default">hreflang x-default<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#hreflang-x-default" class="hash-link" aria-label="hreflang x-default 的直接連結" title="hreflang x-default 的直接連結" translate="no">​</a></h3>
<p>在 <code>src/theme/Root.tsx</code> 注入帶有 <code>hreflang="x-default"</code> 的 <code>&lt;link&gt;</code>，將英文頁面（<code>/en/...</code>）對應到預設（日文） URL，讓搜尋引擎能正確辨識語言變體。</p>
<div class="language-tsx codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-tsx codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> defaultPath </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> pathname</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex escape" style="color:#36acaa">\/</span><span class="token regex regex-source language-regex" style="color:#36acaa">en</span><span class="token regex regex-source language-regex group punctuation" style="color:#393A34">(?=</span><span class="token regex regex-source language-regex escape" style="color:#36acaa">\/</span><span class="token regex regex-source language-regex alternation keyword" style="color:#00009f">|</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-source language-regex group punctuation" style="color:#393A34">)</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> xDefaultUrl </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">siteConfig</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation">url</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">defaultPath</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">link</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">rel</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">alternate</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">hreflang</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">x-default</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">xDefaultUrl</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain-text"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="效能的改善">效能的改善<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E6%95%88%E8%83%BD%E7%9A%84%E6%94%B9%E5%96%84" class="hash-link" aria-label="效能的改善 的直接連結" title="效能的改善 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gtm-延遲載入">GTM 延遲載入<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#gtm-%E5%BB%B6%E9%81%B2%E8%BC%89%E5%85%A5" class="hash-link" aria-label="GTM 延遲載入 的直接連結" title="GTM 延遲載入 的直接連結" translate="no">​</a></h3>
<p>移除 <code>@docusaurus/plugin-google-gtag</code>，改在 <code>src/clientModules/gtag.js</code> 裡於 <code>window.load</code> 事件之後動態注入 GTM 腳本。如此一來，可大幅減少阻塞初始渲染的未使用 JS。</p>
<div class="language-js codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-js codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">loadGtag</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> script </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">createElement</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'script'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  script</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">async</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  script</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">src</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">https://www.googletagmanager.com/gtag/js?id=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation constant" style="color:#36acaa">GA_ID</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">head</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">appendChild</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">script</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">addEventListener</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'load'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> loadGtag</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">once</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>在 SPA 的頁面切換時使用 Docusaurus 的 <code>onRouteDidUpdate</code> hook 手動呼叫 <code>window.gtag</code>。另外也使用 <code>requestIdleCallback</code> 在閒置時載入加以優化。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="將-avatar-自行託管並轉為-webp">將 avatar 自行託管並轉為 WebP<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%B0%87-avatar-%E8%87%AA%E8%A1%8C%E8%A8%97%E7%AE%A1%E4%B8%A6%E8%BD%89%E7%82%BA-webp" class="hash-link" aria-label="將 avatar 自行託管並轉為 WebP 的直接連結" title="將 avatar 自行託管並轉為 WebP 的直接連結" translate="no">​</a></h3>
<p>把 avatar 圖片從 GitHub CDN（<code>avatars.githubusercontent.com</code>）移到自行託管。GitHub CDN 的快取 TTL 很短（5 分鐘），在 PageSpeed Insights 上每次都會被視為外部請求。</p>
<p>把 avatar 轉為 WebP，檔案從 34 KB（PNG）降到 3.5 KB，約減少 90%。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="圖片尺寸優化與修正-cls">圖片尺寸優化與修正 CLS<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%9C%96%E7%89%87%E5%B0%BA%E5%AF%B8%E5%84%AA%E5%8C%96%E8%88%87%E4%BF%AE%E6%AD%A3-cls" class="hash-link" aria-label="圖片尺寸優化與修正 CLS 的直接連結" title="圖片尺寸優化與修正 CLS 的直接連結" translate="no">​</a></h3>
<ul>
<li class="">在 GitHub avatar URL 加上 <code>?size=64</code>，把 460 px 縮到 64 px（減少 33 KB）</li>
<li class="">在導航列 logo 加上 <code>width</code>/<code>height</code> 屬性以修正 CLS（Cumulative Layout Shift）</li>
<li class="">在 <code>&lt;img&gt;</code> 標籤加入 <code>loading="lazy"</code></li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="導入-rspack--swc">導入 rspack / SWC<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%B0%8E%E5%85%A5-rspack--swc" class="hash-link" aria-label="導入 rspack / SWC 的直接連結" title="導入 rspack / SWC 的直接連結" translate="no">​</a></h3>
<p>安裝 <code>@docusaurus/faster</code>，把 webpack 換成 rspack + SWC + lightningCSS。</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">future</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  v4</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  experimental_faster</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span></span><br></div></code></pre></div></div>
<p>如此一來，建置速度和打包體積都改善了。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="停用未使用的插件">停用未使用的插件<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%81%9C%E7%94%A8%E6%9C%AA%E4%BD%BF%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="停用未使用的插件 的直接連結" title="停用未使用的插件 的直接連結" translate="no">​</a></h3>
<p>停用未使用的 docs 外掛，避免不必要的 JS 被傳到用戶端。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="僅在行動裝置載入-google-fonts">僅在行動裝置載入 Google Fonts<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%83%85%E5%9C%A8%E8%A1%8C%E5%8B%95%E8%A3%9D%E7%BD%AE%E8%BC%89%E5%85%A5-google-fonts" class="hash-link" aria-label="僅在行動裝置載入 Google Fonts 的直接連結" title="僅在行動裝置載入 Google Fonts 的直接連結" translate="no">​</a></h3>
<p>Noto Sans JP 在我的站只在行動版需要。利用 <code>matchMedia</code> 判斷行動裝置，僅在行動裝置動態注入字型樣式表，桌面版因此減少約 130 KB 的未使用 CSS。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="可及性的改善">可及性的改善<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E5%8F%AF%E5%8F%8A%E6%80%A7%E7%9A%84%E6%94%B9%E5%96%84" class="hash-link" aria-label="可及性的改善 的直接連結" title="可及性的改善 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="修正對比度">修正對比度<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E4%BF%AE%E6%AD%A3%E5%B0%8D%E6%AF%94%E5%BA%A6" class="hash-link" aria-label="修正對比度 的直接連結" title="修正對比度 的直接連結" translate="no">​</a></h3>
<p>把主要色從 <code>#F15EB4</code> 改為 <code>#C82273</code>，在白底下達到對比度 5.3:1（符合 WCAG AA）。深色模式則使用 <code>#F36AB2</code>（在暗底下為 7.0:1）。</p>
<p>文章日期文字的顏色改用 CSS 變數 <code>--post-date-color</code> 管理，淺色模式為 <code>#595959</code>（7.0:1），深色模式為 <code>#9e9e9e</code>。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="統一字型">統一字型<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E7%B5%B1%E4%B8%80%E5%AD%97%E5%9E%8B" class="hash-link" aria-label="統一字型 的直接連結" title="統一字型 的直接連結" translate="no">​</a></h3>
<p>把標題與 <code>&lt;strong&gt;</code> 的字型從 Noto Serif JP 改為 Noto Sans JP，以與內文保持一致性。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="結果">結果<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E7%B5%90%E6%9E%9C" class="hash-link" aria-label="結果 的直接連結" title="結果 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>類別</th><th>分數</th></tr></thead><tbody><tr><td>Performance</td><td><strong>99</strong></td></tr><tr><td>Accessibility</td><td><strong>100</strong></td></tr><tr><td>Best Practices</td><td><strong>100</strong></td></tr><tr><td>SEO</td><td><strong>100</strong></td></tr></tbody></table>
<p>在行動裝置上幾乎達到滿分。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/lighthouse-seo-performance#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>對我影響最大的三項變更如下：</p>
<ol>
<li class=""><strong>GTM 的延遲載入</strong>：大幅減少未使用的 JS，效能分數大幅提升</li>
<li class=""><strong>OGP 與結構化資料的整理</strong>：達成 SEO 100，社群分享時的呈現也改善</li>
<li class=""><strong>修正對比度</strong>：符合 WCAG AA 讓可及性達到 100</li>
</ol>
<p>Docusaurus 預設就能生成高品質網站，但要在 PageSpeed Insights 上追求幾乎滿分，仍需針對 GTM 的載入策略、meta 資訊與可及性的細節做調整。希望對也在做同類改善的人有所幫助。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Web" term="Web"/>
        <category label="SEO" term="SEO"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[使用 pLaTeX 製作日文 PDF 的方法]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex"/>
        <updated>2026-03-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[整理了使用 pLaTeX 製作日文 PDF 文件的步驟。從範本的構成到編譯，以及常見錯誤的處理都會說明。]]></summary>
        <content type="html"><![CDATA[<p>整理了使用 pLaTeX 製作日文 PDF 文件的步驟。從範本的構成到編譯，以及常見錯誤的處理都會說明。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="platex-是什麼">pLaTeX 是什麼<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#platex-%E6%98%AF%E4%BB%80%E9%BA%BC" class="hash-link" aria-label="pLaTeX 是什麼 的直接連結" title="pLaTeX 是什麼 的直接連結" translate="no">​</a></h2>
<p>pLaTeX 是支援日文組版的 LaTeX 實作。使用 <code>platex</code> 指令編譯 <code>.tex</code> 檔，然後用 <code>dvipdfmx</code> 轉成 PDF。</p>
<p>因為包含在 TeX Live 中，如果已安裝 TeX Live 就可以立即使用。TeX Live 的安裝步驟請參考「<a class="" href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux">在 Linux 上安裝 TeX Live 2026</a>」。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="選擇文件類別">選擇文件類別<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E9%81%B8%E6%93%87%E6%96%87%E4%BB%B6%E9%A1%9E%E5%88%A5" class="hash-link" aria-label="選擇文件類別 的直接連結" title="選擇文件類別 的直接連結" translate="no">​</a></h2>
<p>在日文文件中可使用以下類別。</p>
<table><thead><tr><th>類別</th><th>用途</th></tr></thead><tbody><tr><td><code>jarticle</code></td><td>論文、報告等短篇文件</td></tr><tr><td><code>jbook</code></td><td>書籍、有章節的長篇文件</td></tr><tr><td><code>jreport</code></td><td>技術報告（含 abstract + chapter 結構）</td></tr><tr><td><code>beamer</code></td><td>投影片（簡報）</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="範本jarticle">範本（jarticle）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E7%AF%84%E6%9C%ACjarticle" class="hash-link" aria-label="範本（jarticle） 的直接連結" title="範本（jarticle） 的直接連結" translate="no">​</a></h2>
<p>使用 <code>jarticle</code> 的基本範例如下。</p>
<details class="details_rvcR alert alert--info details_Kt6x" data-collapsed="true"><summary>顯示範例程式碼</summary><div><div class="collapsibleContent_IDV4"><div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">% pLaTeX 範例文件 — 主要功能概覽</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\documentclass</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">a4paper,12pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== 套件 ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">amsmath, amssymb</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">% 數學式強化</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">graphicx</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 插入圖像</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">color</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                 </span><span class="token comment" style="color:#999988;font-style:italic">% 顏色設定</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">fancyhdr</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 頁首/頁尾</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">geometry</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 頁面版面</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">             </span><span class="token comment" style="color:#999988;font-style:italic">% 列舉自訂</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">url</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                   </span><span class="token comment" style="color:#999988;font-style:italic">% URL 顯示</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicol</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 分欄</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">booktabs</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 高品質表格線</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">array</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                 </span><span class="token comment" style="color:#999988;font-style:italic">% 表格欄格式擴充</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% verbatim 環境</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">ascmac</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                </span><span class="token comment" style="color:#999988;font-style:italic">% 框線環境（screen, itembox 等）</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Ruby・圓點等（pLaTeX 常用）</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">setspace</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 行距調整</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">listings</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% 原始碼清單</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">xcolor</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                </span><span class="token comment" style="color:#999988;font-style:italic">% 顏色（listings 用）</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">caption</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">               </span><span class="token comment" style="color:#999988;font-style:italic">% 標題樣式</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== 頁面版面 ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\geometry</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">top=25mm, bottom=25mm, left=25mm, right=25mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\setlength</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\headheight</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">17pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\addtolength</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\topmargin</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">-5pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== 頁首/頁尾 ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\pagestyle</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">fancy</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\fancyhf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\lhead</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pLaTeX 範例文件</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\rhead</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\today</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\cfoot</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\thepage</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\renewcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\headrulewidth</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">0.4pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== listings 設定 ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\lstset</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  basicstyle=</span><span class="token function selector" style="color:#00009f">\ttfamily</span><span class="token function selector" style="color:#00009f">\small</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  keywordstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">blue</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\bfseries</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  commentstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">green!50!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  stringstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">red!70!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  numbers=left,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  numberstyle=</span><span class="token function selector" style="color:#00009f">\tiny</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">gray</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  frame=single,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  breaklines=true,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  tabsize=4,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== 標題資訊 ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\title</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pLaTeX 主要功能範例</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\\</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">5pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">       </span><span class="token function selector" style="color:#00009f">\large</span><span class="token plain"> --- 日文 </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> 的典型用法 ---</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\author</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">範例太郎</span><span class="token function selector" style="color:#00009f">\thanks</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">範例大學 資訊工程系</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token function selector" style="color:#00009f">\and</span><span class="token plain"> 範例花子</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\date</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\today</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">document</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\maketitle</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\thispagestyle</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">fancy</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">abstract</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">本文檔是示範 pLaTeX 主要功能的範例。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">依序說明文件類別與套件的讀入、日文組版特有的功能、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">數學式、表格、圖形、交叉參照、腳註、Ruby、圓點、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">原始碼清單、分欄、自訂指令等內容。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">abstract</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\tableofcontents</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newpage</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">日文組版的基本</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">和文・歐文的混合</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">pLaTeX 可以自然地混合日文與歐文。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">例如「Hello, World!」或 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">LaTeX2e</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 類的</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ASCII 文字會自動插入適當的空白。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">全形字與半形字之間的間距調整由 pLaTeX 自動處理：</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">日本語English日本語、數字123日本語、記號\</span><span class="token comment" style="color:#999988;font-style:italic">%日本語。</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Ruby（振假名）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">使用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 套件的 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token plain">| 指令可以加上 Ruby（振假名）。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">漢字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">かんじ</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">、</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">情報処理</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">じょうほうしょり</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">自然言語</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">しぜんげんご</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">処理</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">しょり</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">圓點（傍點）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">使用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 的 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\kenten</span><span class="token plain">| 可以加上圓點（傍點）。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\kenten</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">重要な箇所</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">には圏点を打つことができる。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">字體大小</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\tiny</span><span class="token plain"> 極小</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\scriptsize</span><span class="token plain"> 腳註</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\footnotesize</span><span class="token plain"> 小</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\small</span><span class="token plain"> 稍小</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\normalsize</span><span class="token plain"> 標準</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\large</span><span class="token plain"> 稍大</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\Large</span><span class="token plain"> 大</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\LARGE</span><span class="token plain"> 很大</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\huge</span><span class="token plain"> 超大</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\Huge</span><span class="token plain"> 最大</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">文字裝飾</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">粗體（Bold）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">斜體（英文字）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textsl</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">斜向</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textsc</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Small Caps</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">等寬字體（Typewriter）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\underline</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">底線文字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textcolor</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">red</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">紅色文字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textcolor</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">blue!70!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">藍色文字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\colorbox</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">yellow</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">標示底色</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">文件結構</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">標題層級</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">在 pLaTeX（</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">）中可以使用以下標題層級：</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\section</span><span class="token plain">|、</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token plain">|、</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subsubsection</span><span class="token plain">|、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\paragraph</span><span class="token plain">|、</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subparagraph</span><span class="token plain">|。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsubsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">子子節範例</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">這是子子節的範例。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\paragraph</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">段落標題</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">這是段落標題的範例。接續的內文沒有縮排。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">腳註</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">可以在內文中加入腳註</span><span class="token function selector" style="color:#00009f">\footnote</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">這是腳註的文字。會自動配置在頁底。</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">也可以使用多個腳註</span><span class="token function selector" style="color:#00009f">\footnote</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">第二個腳註。編號會自動遞增。</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">交叉參照</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">加上 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\label</span><span class="token plain">| 之後，</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">可以用 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token plain">| 或 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\pageref</span><span class="token plain">| 來參照。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">例：下一節是第~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">~節（第~</span><span class="token function selector" style="color:#00009f">\pageref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">~頁）。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">數學式環境</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">行內數學式與顯示數學式</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">行內數學式：</span><span class="token equation string" style="color:#e3116c">$E = mc^2$</span><span class="token plain">、</span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\alpha</span><span class="token equation string" style="color:#e3116c"> + </span><span class="token equation string equation-command regex" style="color:#36acaa">\beta</span><span class="token equation string" style="color:#e3116c"> = </span><span class="token equation string equation-command regex" style="color:#36acaa">\gamma</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain">、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\sum</span><span class="token equation string" style="color:#e3116c">_{i=1}^{n} i = </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{n(n+1)}{2}$</span><span class="token plain">。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">顯示數學式：</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token equation string" style="color:#e3116c">\[</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\int</span><span class="token equation string" style="color:#e3116c">_{-</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">}^{</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">} e^{-x^2}</span><span class="token equation string equation-command regex" style="color:#36acaa">\,</span><span class="token equation string" style="color:#e3116c">dx = </span><span class="token equation string equation-command regex" style="color:#36acaa">\sqrt</span><span class="token equation string" style="color:#e3116c">{</span><span class="token equation string equation-command regex" style="color:#36acaa">\pi</span><span class="token equation string" style="color:#e3116c">}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">\]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">equation・align 環境</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">帶編號的數學式（</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">）：</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\label</span><span class="token equation string" style="color:#e3116c">{eq:euler}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  e^{i</span><span class="token equation string equation-command regex" style="color:#36acaa">\pi</span><span class="token equation string" style="color:#e3116c">} + 1 = 0</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">式~</span><span class="token function selector" style="color:#00009f">\eqref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">eq:euler</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 為歐拉恆等式。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">多行對齊（</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">）：</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a+b)^2 &amp;= a^2 + 2ab + b^2 </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a-b)^2 &amp;= a^2 - 2ab + b^2 </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a+b)(a-b) &amp;= a^2 - b^2</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">矩陣・向量</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  A = </span><span class="token equation string equation-command regex" style="color:#36acaa">\begin</span><span class="token equation string" style="color:#e3116c">{pmatrix} a_{11} &amp; a_{12} </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"> a_{21} &amp; a_{22} </span><span class="token equation string equation-command regex" style="color:#36acaa">\end</span><span class="token equation string" style="color:#e3116c">{pmatrix},</span><span class="token equation string equation-command regex" style="color:#36acaa">\quad</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\det</span><span class="token equation string" style="color:#e3116c">(A) = a_{11}a_{22} - a_{12}a_{21}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">分段、分數、極限</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  f(x) = </span><span class="token equation string equation-command regex" style="color:#36acaa">\begin</span><span class="token equation string" style="color:#e3116c">{cases}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">    x^2       &amp; (x </span><span class="token equation string equation-command regex" style="color:#36acaa">\geq</span><span class="token equation string" style="color:#e3116c"> 0) </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">    -x^2      &amp; (x &lt; 0)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\end</span><span class="token equation string" style="color:#e3116c">{cases}, </span><span class="token equation string equation-command regex" style="color:#36acaa">\qquad</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\lim</span><span class="token equation string" style="color:#e3116c">_{n</span><span class="token equation string equation-command regex" style="color:#36acaa">\to</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">} </span><span class="token equation string equation-command regex" style="color:#36acaa">\left</span><span class="token equation string" style="color:#e3116c">(1 + </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{1}{n}</span><span class="token equation string equation-command regex" style="color:#36acaa">\right</span><span class="token equation string" style="color:#e3116c">)^n = e</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">表格（tabular 環境）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">基本表格</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">h</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\centering</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\caption</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">各城市氣溫資料（示意）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:temp</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">lrrr</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\toprule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    城市   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 最高氣溫 (°C) </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 最低氣溫 (°C) </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 平均氣溫 (°C) </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\midrule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    東京   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 35.2 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 25.1 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 29.8 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    大阪   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 36.4 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 26.3 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 31.0 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    札幌   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 28.7 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 19.5 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 23.9 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    那覇   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 32.1 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 27.4 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 29.8 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\bottomrule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">複雜表格（\texttt{array</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 擴充・儲存格合併）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">h</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\centering</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\caption</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">程式語言比較</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:lang</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">|l|c|c|c|</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    語言       </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 型別     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 範式             </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 主要用途 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Python     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 動態     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 多範式           </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> AI/資料分析 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Rust       </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 靜態     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 系統程式         </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 系統開發 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Haskell    </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 靜態     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 函數式           </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 研究/金融 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    JavaScript </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 動態     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 多範式           </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Web 前端 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">像表~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:temp</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 與表~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:lang</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 可以透過 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\label</span><span class="token plain">/</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token plain">| 進行參照。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">列表環境</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">項目符號列表（itemize）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 第一個項目</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 第二個項目</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 嵌套項目 A</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 嵌套項目 B</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 第三個項目</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">編號列表（enumerate）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">(1)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain">   </span><span class="token comment" style="color:#999988;font-style:italic">% enumerate 套件指定格式</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 最初的步驟</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 下一個步驟</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 最後的步驟</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">說明列表（description）</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">description</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">pLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> 支援日文的 </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> 系統</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">upLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> 支援 Unicode 的 pLaTeX 後繼版</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">LuaLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> 可使用 Lua 腳本的 </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> 系統</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">description</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">verbatim・原始碼</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">verbatim 環境</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token cdata" style="color:#999988;font-style:italic"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">#include &lt;stdio.h&gt;</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">int main(void) {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    printf("Hello, pLaTeX!\n");</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    return 0;</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">用 listings 做語法高亮</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">lstlisting</span><span class="token punctuation" style="color:#393A34">}</span><span class="token cdata" style="color:#999988;font-style:italic">[language=Python, caption={費波那契數列（Python）}]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">def fibonacci(n: int) -&gt; int:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    """使用遞迴計算費波那契數列"""</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    if n &lt;= 1:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">        return n</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    return fibonacci(n - 1) + fibonacci(n - 2)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"># 輸出前 10 項</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">for i in range(10):</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    print(f"F({i}) = {fibonacci(i)}")</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">lstlisting</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">框線・強調框</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">可以使用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">ascmac</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 套件的 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">、</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 等。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">l</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">重要要點</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> pLaTeX 使用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> / </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jbook</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 文件類別</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 使用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 可以用 Ruby 與圓點</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> 以 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">platex + dvipdfmx</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 產生 PDF</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 環境：終端機風格的框線。用來顯示原始碼範例或輸出範例。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">分欄</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">可用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">multicol</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 套件從某處開始切成兩欄。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicols</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">2</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\noindent</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  這是兩欄版面的左欄。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  pLaTeX 也能自然處理日文的分欄。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  即使是長文也會自動均分，</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  適合做報章雜誌風格的排版。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\columnbreak</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\noindent</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  這是右欄。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  可以用 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\columnbreak</span><span class="token plain">| 強制換欄。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  數學式 </span><span class="token equation string" style="color:#e3116c">$x = </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{-b </span><span class="token equation string equation-command regex" style="color:#36acaa">\pm</span><span class="token equation string" style="color:#e3116c"> </span><span class="token equation string equation-command regex" style="color:#36acaa">\sqrt</span><span class="token equation string" style="color:#e3116c">{b^2 - 4ac}}{2a}$</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  也可以行內使用。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicols</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">行距・間距調整</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">水平間距</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">字與字之間的空格：a</span><span class="token function selector" style="color:#00009f">\,</span><span class="token plain">b（</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\,</span><span class="token plain">| 細空白）、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\enspace</span><span class="token plain"> b（</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\enspace</span><span class="token plain">|）、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\quad</span><span class="token plain"> b（</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\quad</span><span class="token plain">|）、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\qquad</span><span class="token plain"> b（</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\qquad</span><span class="token plain">|）。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">垂直間距</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">可以用 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token plain">| 新增垂直間距。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">在此插入自上方 5mm 的垂直間距後的文字。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">行距</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\setstretch</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">1.8</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">此段落用 </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">setspace</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 套件的</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">setstretch</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> 將行距設為 1.8 倍。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">在日文文件中，行距約 1.5〜2.0 較為易讀。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">自訂指令與環境</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">自訂指令定義</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\R</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\mathbb</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">R</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\N</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\mathbb</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">N</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\highlight</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\colorbox</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">yellow!60</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\term</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">% 用語強調</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">範例：</span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\R</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain">（實數集）、</span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\N</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain">（自然數）。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\highlight</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">被標示的文字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\term</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">機器學習</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">（Machine Learning）是人工智慧的一個領域。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">自訂環境定義</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newenvironment</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">%</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">|p</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">0.85</span><span class="token function selector" style="color:#00009f">\linewidth</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">|</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">1pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\\</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">2pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">%</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\\</span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">自製的框線</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  使用 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\newenvironment</span><span class="token plain">| 可以定義自訂環境。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  可以接受參數以利彈性重複使用。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">參考文獻</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">文獻引用可用 </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\cite</span><span class="token plain">| 指令進行~</span><span class="token function selector" style="color:#00009f">\cite</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">knuth1984,lamport1994,okumura2020</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">文件末會輸出參考文獻清單。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% 參考文獻清單（thebibliography 環境）</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">thebibliography</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">99</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">knuth1984</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  D.~E. Knuth,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\TeX</span><span class="token plain"> book</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Addison-Wesley, 1984.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">lamport1994</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  L.~Lamport,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain">: A Document Preparation System</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">, 2nd ed.,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Addison-Wesley, 1994.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumura2020</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  奥村晴彦・黒木裕介,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  『</span><span class="token function selector" style="color:#00009f">\LaTeXe</span><span class="token plain"> 美文書作成入門』第 8 版,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  技術評論社, 2020.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">thebibliography</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">document</span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div></div></div></details>
<iframe src="/img/blog/2026-03-28-platex/sample.pdf" width="100%" height="600px" style="border:none"></iframe>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="編譯流程">編譯流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E7%B7%A8%E8%AD%AF%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="編譯流程 的直接連結" title="編譯流程 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="基本platex--dvipdfmx">基本（platex + dvipdfmx）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E5%9F%BA%E6%9C%ACplatex--dvipdfmx" class="hash-link" aria-label="基本（platex + dvipdfmx） 的直接連結" title="基本（platex + dvipdfmx） 的直接連結" translate="no">​</a></h3>
<p>為了正確解決交叉參照與目錄，請先執行 <code>platex</code> 兩次，然後用 <code>dvipdfmx</code> 轉成 PDF。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">-interaction</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">nonstopmode </span><span class="token parameter variable" style="color:#36acaa">-kanji</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">utf8 document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">-interaction</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">nonstopmode </span><span class="token parameter variable" style="color:#36acaa">-kanji</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">utf8 document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">dvipdfmx document.dvi</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="ptex2pdf">ptex2pdf<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#ptex2pdf" class="hash-link" aria-label="ptex2pdf 的直接連結" title="ptex2pdf 的直接連結" translate="no">​</a></h3>
<p>也可以用將 <code>platex</code> + <code>dvipdfmx</code> 二步驟合併成一個指令的 <code>ptex2pdf</code>。</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="基本指令">基本指令<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4" class="hash-link" aria-label="基本指令 的直接連結" title="基本指令 的直接連結" translate="no">​</a></h4>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
<table><thead><tr><th>選項</th><th>含意</th></tr></thead><tbody><tr><td><code>-l</code></td><td>使用以 latex 為基礎的引擎（platex）</td></tr><tr><td><code>-ot "..."</code></td><td>傳給 platex 的選項</td></tr><tr><td><code>-kanji=utf8</code></td><td>指定輸入編碼為 UTF-8</td></tr><tr><td><code>-interaction=nonstopmode</code></td><td>發生錯誤時不停止繼續處理</td></tr></tbody></table>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="步驟">步驟<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E6%AD%A5%E9%A9%9F" class="hash-link" aria-label="步驟 的直接連結" title="步驟 的直接連結" translate="no">​</a></h4>
<ol>
<li class="">
<p><strong>執行 ptex2pdf 兩次</strong>（為了解決交叉參照與目錄）</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
</li>
<li class="">
<p><strong>確認結果</strong></p>
<ul>
<li class="">成功：會產生 <code>document.pdf</code></li>
<li class="">發生錯誤：檢查 <code>.log</code> 中以 <code>!</code> 開頭的行及其前後 3 行</li>
<li class="">只有警告：檢查 Overfull/Underfull hbox、未定義參照等</li>
</ul>
</li>
<li class="">
<p><strong>若需要 BibTeX</strong>（當有 <code>.bib</code> 檔或包含 <code>\bibliography</code> 指令時）</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">bibtex document</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
<p>在執行 <code>bibtex</code> 後再次執行 <code>ptex2pdf</code> 兩次是為了解決參考文獻清單與內文引用編號的交叉參照。</p>
</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="常見錯誤與處理">常見錯誤與處理<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E5%B8%B8%E8%A6%8B%E9%8C%AF%E8%AA%A4%E8%88%87%E8%99%95%E7%90%86" class="hash-link" aria-label="常見錯誤與處理 的直接連結" title="常見錯誤與處理 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="undefined-control-sequence">Undefined control sequence<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#undefined-control-sequence" class="hash-link" aria-label="Undefined control sequence 的直接連結" title="Undefined control sequence 的直接連結" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! Undefined control sequence.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">l.42 </span><span class="token function selector" style="color:#00009f">\somecommand</span></span><br></div></code></pre></div></div>
<p>代表使用了未定義的指令。通常是忘了載入某個套件或是打錯字造成的。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="missing--inserted">Missing $ inserted<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#missing--inserted" class="hash-link" aria-label="Missing $ inserted 的直接連結" title="Missing $ inserted 的直接連結" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! Missing $ inserted.</span></span><br></div></code></pre></div></div>
<p>表示在數學模式外使用了 <code>_</code>（下標）或 <code>^</code>（上標）等數學符號。請用 <code>$...$</code> 將其包起來。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="file-not-found">File not found<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#file-not-found" class="hash-link" aria-label="File not found 的直接連結" title="File not found 的直接連結" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! LaTeX Error: File `image.png' not found.</span></span><br></div></code></pre></div></div>
<p>表示 <code>\includegraphics</code> 指定的檔案路徑錯誤。請確認相對於 <code>.tex</code> 的路徑是否正確。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="overfull-hbox">Overfull \hbox<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#overfull-hbox" class="hash-link" aria-label="Overfull \hbox 的直接連結" title="Overfull \hbox 的直接連結" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Overfull </span><span class="token function selector" style="color:#00009f">\hbox</span><span class="token plain"> (12.3pt too wide) in paragraph at lines 55--60</span></span><br></div></code></pre></div></div>
<p>這是警告不是錯誤。表示行超出指定寬度。常見原因為長 URL 或長英文字，通常可用 <code>\allowbreak</code> 或用 <code>\url{}</code>（url 套件）來解決。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="檢查日誌">檢查日誌<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E6%AA%A2%E6%9F%A5%E6%97%A5%E8%AA%8C" class="hash-link" aria-label="檢查日誌 的直接連結" title="檢查日誌 的直接連結" translate="no">​</a></h2>
<p>編譯後產生的 <code>.log</code> 檔會記錄錯誤與警告的詳細資訊。錯誤行通常以 <code>!</code> 開頭，警告則包含 <code>Warning</code> 字樣。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">grep</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-n</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^!"</span><span class="token plain"> document.log        </span><span class="token comment" style="color:#999988;font-style:italic"># 抽出錯誤行</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">grep</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-n</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Warning"</span><span class="token plain"> document.log   </span><span class="token comment" style="color:#999988;font-style:italic"># 抽出警告行</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="刪除中間檔案">刪除中間檔案<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/28/platex#%E5%88%AA%E9%99%A4%E4%B8%AD%E9%96%93%E6%AA%94%E6%A1%88" class="hash-link" aria-label="刪除中間檔案 的直接連結" title="刪除中間檔案 的直接連結" translate="no">​</a></h2>
<p>編譯會產生許多中間檔。若想保留 PDF 並清理其他檔案，可執行下列指令。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-f</span><span class="token plain"> document.aux document.log document.dvi </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.toc document.lof document.lot </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.out document.bbl document.blg </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.synctex.gz</span></span><br></div></code></pre></div></div>
<p>若要全部刪除（包含 PDF），請再加上 <code>.pdf</code>。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="LaTeX" term="LaTeX"/>
        <category label="TeX" term="TeX"/>
        <category label="Linux" term="Linux"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 Linux 安裝 TeX Live 2026]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux"/>
        <updated>2026-03-27T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[將使用 ISO 映像在 Linux（RHEL 系）上安裝 TeX Live 2026 的步驟整理如下，適用於 RHEL 系統。]]></summary>
        <content type="html"><![CDATA[<p>將使用 ISO 映像在 Linux（RHEL 系）上安裝 TeX Live 2026 的步驟整理如下，適用於 RHEL 系統。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="前置條件">前置條件<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#%E5%89%8D%E7%BD%AE%E6%A2%9D%E4%BB%B6" class="hash-link" aria-label="前置條件 的直接連結" title="前置條件 的直接連結" translate="no">​</a></h2>
<ul>
<li class="">具有 <code>sudo</code> 權限</li>
<li class="">磁碟空間至少 10 GB（ISO 約 6.4 GB + 安裝目標約 8 GB）</li>
<li class="">有網路連線</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-1-下載-iso-映像檔">Step 1: 下載 ISO 映像檔<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-1-%E4%B8%8B%E8%BC%89-iso-%E6%98%A0%E5%83%8F%E6%AA%94" class="hash-link" aria-label="Step 1: 下載 ISO 映像檔 的直接連結" title="Step 1: 下載 ISO 映像檔 的直接連結" translate="no">​</a></h2>
<p>從理化學研究所的鏡像站下載 ISO。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-C</span><span class="token plain"> - </span><span class="token parameter variable" style="color:#36acaa">-O</span><span class="token plain"> --progress-bar https://ftp.riken.jp/CTAN/systems/texlive/Images/texlive2026.iso</span></span><br></div></code></pre></div></div>
<p><code>-C -</code> 是在下載中斷時繼續下載的選項。</p>
<p>下載完成後，確認檔案大小（約 6.4 GiB）：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-lh</span><span class="token plain"> ~/texlive2026.iso</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-2-掛載-iso-映像">Step 2: 掛載 ISO 映像<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-2-%E6%8E%9B%E8%BC%89-iso-%E6%98%A0%E5%83%8F" class="hash-link" aria-label="Step 2: 掛載 ISO 映像 的直接連結" title="Step 2: 掛載 ISO 映像 的直接連結" translate="no">​</a></h2>
<p>建立掛載點，並將 ISO 以 loop 裝置掛載為唯讀：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-p</span><span class="token plain"> /mnt/texlive</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mount</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-o</span><span class="token plain"> loop,ro ~/texlive2026.iso /mnt/texlive</span></span><br></div></code></pre></div></div>
<p>確認是否掛載：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> /mnt/texlive</span></span><br></div></code></pre></div></div>
<p>出現如下檔案即可視為成功：</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">install-tl  archive  tlpkg  README  ...</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-3-執行安裝程式">Step 3: 執行安裝程式<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-3-%E5%9F%B7%E8%A1%8C%E5%AE%89%E8%A3%9D%E7%A8%8B%E5%BC%8F" class="hash-link" aria-label="Step 3: 執行安裝程式 的直接連結" title="Step 3: 執行安裝程式 的直接連結" translate="no">​</a></h2>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> /mnt/texlive/install-tl</span></span><br></div></code></pre></div></div>
<p>會啟動文字介面互動選單。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="主要操作按鍵">主要操作按鍵<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#%E4%B8%BB%E8%A6%81%E6%93%8D%E4%BD%9C%E6%8C%89%E9%8D%B5" class="hash-link" aria-label="主要操作按鍵 的直接連結" title="主要操作按鍵 的直接連結" translate="no">​</a></h3>
<table><thead><tr><th>鍵</th><th>操作</th></tr></thead><tbody><tr><td><code>S</code></td><td>選擇安裝方案</td></tr><tr><td><code>D</code></td><td>變更安裝目錄</td></tr><tr><td><code>I</code></td><td>開始安裝</td></tr><tr><td><code>Q</code></td><td>結束（取消）</td></tr></tbody></table>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="建議設定">建議設定<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#%E5%BB%BA%E8%AD%B0%E8%A8%AD%E5%AE%9A" class="hash-link" aria-label="建議設定 的直接連結" title="建議設定 的直接連結" translate="no">​</a></h3>
<ul>
<li class="">方案: <code>scheme-full</code>（全部套件，包含日本語 LaTeX 所需的 <code>collection-langjapanese</code>）</li>
<li class="">安裝路徑: <code>/usr/local/texlive/2026</code>（預設）</li>
</ul>
<p>確認設定後輸入 <code>I</code> 開始安裝。安裝需時數十分鐘。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-4-設定-path">Step 4: 設定 PATH<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-4-%E8%A8%AD%E5%AE%9A-path" class="hash-link" aria-label="Step 4: 設定 PATH 的直接連結" title="Step 4: 設定 PATH 的直接連結" translate="no">​</a></h2>
<p>將 TeX Live 的執行檔路徑加入 <code>~/.bashrc</code>：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'export PATH="/usr/local/texlive/2026/bin/x86_64-linux:$PATH"'</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;&gt;</span><span class="token plain"> ~/.bashrc</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">source</span><span class="token plain"> ~/.bashrc</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-5-修正語系-rhel-系">Step 5: 修正語系 (RHEL 系)<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-5-%E4%BF%AE%E6%AD%A3%E8%AA%9E%E7%B3%BB-rhel-%E7%B3%BB" class="hash-link" aria-label="Step 5: 修正語系 (RHEL 系) 的直接連結" title="Step 5: 修正語系 (RHEL 系) 的直接連結" translate="no">​</a></h2>
<p>在 RHEL 系統若未設定 locale，執行 <code>lualatex</code> 時會發生錯誤。請執行：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> dnf </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-y</span><span class="token plain"> glibc-langpack-en</span></span><br></div></code></pre></div></div>
<p>另外，在 shell 啟動時設定 locale：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'export LANG=C.UTF-8'</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;&gt;</span><span class="token plain"> ~/.bashrc</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">source</span><span class="token plain"> ~/.bashrc</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-6-檢查是否可正常執行">Step 6: 檢查是否可正常執行<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-6-%E6%AA%A2%E6%9F%A5%E6%98%AF%E5%90%A6%E5%8F%AF%E6%AD%A3%E5%B8%B8%E5%9F%B7%E8%A1%8C" class="hash-link" aria-label="Step 6: 檢查是否可正常執行 的直接連結" title="Step 6: 檢查是否可正常執行 的直接連結" translate="no">​</a></h2>
<p>確認各指令的版本：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">tex </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">lualatex </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">--version</span></span><br></div></code></pre></div></div>
<p>預期輸出範例：</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">TeX 3.141592653 (TeX Live 2026)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">LuaHBTeX, Version 1.24.0 (TeX Live 2026)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">e-upTeX 3.141592653-p4.1.2-u2.02 (TeX Live 2026)</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-7-測試日文編譯">Step 7: 測試日文編譯<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-7-%E6%B8%AC%E8%A9%A6%E6%97%A5%E6%96%87%E7%B7%A8%E8%AD%AF" class="hash-link" aria-label="Step 7: 測試日文編譯 的直接連結" title="Step 7: 測試日文編譯 的直接連結" translate="no">​</a></h2>
<p>建立測試檔案：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">cat</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> /tmp/test.tex </span><span class="token operator" style="color:#393A34">&lt;&lt;</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'EOF'</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\documentclass{jlreq}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\begin{document}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">日本語のテスト。TeX Live 2026 による日本語組版のサンプルです。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\end{document}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">EOF</span></span><br></div></code></pre></div></div>
<p>編譯：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"> /tmp </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> lualatex test.tex</span></span><br></div></code></pre></div></div>
<p>若生成 <code>test.pdf</code> 即為成功。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-8-清理可選">Step 8: 清理（可選）<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#step-8-%E6%B8%85%E7%90%86%E5%8F%AF%E9%81%B8" class="hash-link" aria-label="Step 8: 清理（可選） 的直接連結" title="Step 8: 清理（可選） 的直接連結" translate="no">​</a></h2>
<p>安裝完成後，可刪除 ISO 與掛載點：</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">umount</span><span class="token plain"> /mnt/texlive</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> ~/texlive2026.iso</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="鏡像站列表">鏡像站列表<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/27/install-texlive-2026-rocky-linux#%E9%8F%A1%E5%83%8F%E7%AB%99%E5%88%97%E8%A1%A8" class="hash-link" aria-label="鏡像站列表 的直接連結" title="鏡像站列表 的直接連結" translate="no">​</a></h2>
<p>若下載速度慢，可嘗試其他鏡像站：</p>
<table><thead><tr><th>鏡像站</th><th>URL</th></tr></thead><tbody><tr><td>理化學研究所（建議）</td><td><a href="https://ftp.riken.jp/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.riken.jp/CTAN/systems/texlive/Images/</a></td></tr><tr><td>JAIST</td><td><a href="https://ftp.jaist.ac.jp/pub/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.jaist.ac.jp/pub/CTAN/systems/texlive/Images/</a></td></tr><tr><td>山形大學</td><td><a href="https://ftp.yz.yamagata-u.ac.jp/pub/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.yz.yamagata-u.ac.jp/pub/CTAN/systems/texlive/Images/</a></td></tr><tr><td>CTAN 鏡像</td><td><a href="https://mirror.ctan.org/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://mirror.ctan.org/systems/texlive/Images/</a></td></tr></tbody></table>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Linux" term="Linux"/>
        <category label="TeX" term="TeX"/>
        <category label="LaTeX" term="LaTeX"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[AI 代理人的「技能」是什麼？淺顯說明其運作原理]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills"/>
        <updated>2026-03-26T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[將「技能」加入 AI 代理人，就像在應用程式安裝功能擴充一樣，可以增加它能做的事情。本文解說 Agent Skills 的運作方式，以及代理人在內部如何處理任務。]]></summary>
        <content type="html"><![CDATA[<p>將「技能」加入 AI 代理人，就像在應用程式安裝功能擴充一樣，可以增加它能做的事情。本文解說 Agent Skills 的運作方式，以及代理人在內部如何處理任務。</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="ai-代理人是什麼">AI 代理人是什麼<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#ai-%E4%BB%A3%E7%90%86%E4%BA%BA%E6%98%AF%E4%BB%80%E9%BA%BC" class="hash-link" aria-label="AI 代理人是什麼 的直接連結" title="AI 代理人是什麼 的直接連結" translate="no">​</a></h2>
<p>首先作為前提，AI 代理人是指「接受指示並能自主執行任務的 AI 程式」。</p>
<p>與像 ChatGPT 那種「問了就回答」的 AI 不同，代理人可以做以下事情：</p>
<ul>
<li class="">讀寫檔案</li>
<li class="">執行程式碼並檢查結果</li>
<li class="">呼叫外部 API 或工具</li>
<li class="">自行判斷並執行多步驟流程</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="技能是什麼">技能是什麼<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E6%8A%80%E8%83%BD%E6%98%AF%E4%BB%80%E9%BA%BC" class="hash-link" aria-label="技能是什麼 的直接連結" title="技能是什麼 的直接連結" translate="no">​</a></h2>
<p><a href="https://agentskills.io/home" target="_blank" rel="noopener noreferrer" class="">Agent Skills</a> 是一種「用來為代理人新增能力或專業知識的機制」。</p>
<p>比喻成人類的話，就像把「新的工作手冊」交給對方一樣。閱讀了手冊（技能）的代理人就能理解該任務應如何進行，並據此行動。</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">無技能: 「寫一篇部落格」→ 代理人隨便寫</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">有技能: 「寫一篇部落格」→ 按照手冊步驟，以一定品質寫出文章</span></span><br></div></code></pre></div></div>
<p>技能主要以 Markdown 檔案（<code>SKILL.md</code>）描述，通常包含以下要素：</p>
<ul>
<li class=""><strong>步驟說明</strong>：要做哪些事、按什麼順序做</li>
<li class=""><strong>腳本</strong>：想自動化的處理流程</li>
<li class=""><strong>範例與設定</strong>：代理人會參考的資源</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="為什麼需要技能">為什麼需要技能<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81%E6%8A%80%E8%83%BD" class="hash-link" aria-label="為什麼需要技能 的直接連結" title="為什麼需要技能 的直接連結" translate="no">​</a></h2>
<p>AI 代理人能力很強，但<strong>不會預先具備你專案特有的知識</strong>。</p>
<p>例如：</p>
<ul>
<li class="">「這個團隊要如何撰寫提交訊息」</li>
<li class="">「這個部落格的 front matter 要如何寫」</li>
<li class="">「部署流程要用哪個指令」</li>
</ul>
<p>這類資訊如果不以技能方式提供，代理人無從得知。有了技能，代理人就能在知道「正確做法」的前提下執行任務。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="代理人使用技能時的處理流程">代理人使用技能時的處理流程<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E4%BB%A3%E7%90%86%E4%BA%BA%E4%BD%BF%E7%94%A8%E6%8A%80%E8%83%BD%E6%99%82%E7%9A%84%E8%99%95%E7%90%86%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="代理人使用技能時的處理流程 的直接連結" title="代理人使用技能時的處理流程 的直接連結" translate="no">​</a></h2>
<p>接下來看看代理人在內部如何運作。</p>
<!-- -->
<p>重點如下：</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-載入技能">1. 載入技能<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#1-%E8%BC%89%E5%85%A5%E6%8A%80%E8%83%BD" class="hash-link" aria-label="1. 載入技能 的直接連結" title="1. 載入技能 的直接連結" translate="no">​</a></h3>
<p>代理人一開始會載入技能。技能內容成為輸入給 LLM 的一部分（提示）。LLM 讀到後會理解「這個任務的正確做法」。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-任務拆解">2. 任務拆解<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#2-%E4%BB%BB%E5%8B%99%E6%8B%86%E8%A7%A3" class="hash-link" aria-label="2. 任務拆解 的直接連結" title="2. 任務拆解 的直接連結" translate="no">​</a></h3>
<p>LLM 根據收到的步驟，將任務拆成小步驟。例如「先閱讀既有文章 3 篇」「接著決定檔名」「寫 front matter」等。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-呼叫工具">3. 呼叫工具<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#3-%E5%91%BC%E5%8F%AB%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="3. 呼叫工具 的直接連結" title="3. 呼叫工具 的直接連結" translate="no">​</a></h3>
<p>在每個步驟中，視需要呼叫工具：讀檔、搜尋網路、執行程式碼等，依照技能定義的流程執行。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="4-結果回饋">4. 結果回饋<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#4-%E7%B5%90%E6%9E%9C%E5%9B%9E%E9%A5%8B" class="hash-link" aria-label="4. 結果回饋 的直接連結" title="4. 結果回饋 的直接連結" translate="no">​</a></h3>
<p>工具執行的結果會再次傳回給 LLM。LLM 根據結果判斷「下一步要做什麼」，並持續迴圈直到任務完成。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="技能指令">技能指令<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E6%8A%80%E8%83%BD%E6%8C%87%E4%BB%A4" class="hash-link" aria-label="技能指令 的直接連結" title="技能指令 的直接連結" translate="no">​</a></h2>
<p>技能可以透過斜線指令（/命令名）來呼叫。</p>
<p>呼叫指令時，對應的 Markdown 檔內容會被展開為提示，代理人就會開始依該步驟執行。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="技能的應用範圍">技能的應用範圍<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E6%8A%80%E8%83%BD%E7%9A%84%E6%87%89%E7%94%A8%E7%AF%84%E5%9C%8D" class="hash-link" aria-label="技能的應用範圍 的直接連結" title="技能的應用範圍 的直接連結" translate="no">​</a></h2>
<p>Agent Skills 的格式是 <a href="https://agentskills.io/home" target="_blank" rel="noopener noreferrer" class="">由 Anthropic 開發並開放的</a>，目前支援許多工具。</p>
<table><thead><tr><th>工具</th><th>是否支援</th></tr></thead><tbody><tr><td>Claude Code</td><td>✅</td></tr><tr><td>GitHub Copilot</td><td>✅</td></tr><tr><td>Cursor</td><td>✅</td></tr><tr><td>Gemini CLI</td><td>✅</td></tr><tr><td>OpenAI Codex</td><td>✅</td></tr><tr><td>VS Code</td><td>✅</td></tr></tbody></table>
<p>同一套技能能在多個工具間重複使用，這是很大的優勢。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/26/agent-skills#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<ul>
<li class=""><strong>技能</strong>是把專業知識或操作步驟傳給代理人的機制</li>
<li class="">只要撰寫 Markdown 檔（<code>SKILL.md</code>）描述步驟與規則，就能建立技能</li>
<li class="">代理人把技能當成提示給 LLM，LLM 會解讀並按步驟執行</li>
<li class="">這是個開放且跨工具的標準格式，如 Claude Code、Cursor、GitHub Copilot 等均可共用</li>
</ul>
<p>善用技能可以省去「每次都要向 AI 解釋同一件事」的麻煩，讓代理人以一致的品質完成任務。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="Claude" term="Claude"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 AWS 無伺服器環境下自建部落格留言 API]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service"/>
        <updated>2026-03-21T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[想要在這個部落格加入留言功能，因此在 AWS 無伺服器架構下自建了一個 API。介紹其設計與實作。]]></summary>
        <content type="html"><![CDATA[<p>想要在這個部落格加入留言功能，因此在 AWS 無伺服器架構下自建了一個 API。介紹其設計與實作。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="架構">架構<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E6%9E%B6%E6%A7%8B" class="hash-link" aria-label="架構 的直接連結" title="架構 的直接連結" translate="no">​</a></h2>
<p>請求以以下流程處理。</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">瀏覽器 (www.hikari-dev.com)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓ HTTPS</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">API Gateway</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ├── GET  /comment?postId=...    → 取得留言</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ├── POST /comment               → 發表留言</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  └── PATCH /comment/{id}         → 管理（切換隱藏）</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Lambda (Node.js 20 / arm64)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">DynamoDB（儲存留言）</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  + SES v2（通知管理者）</span></span><br></div></code></pre></div></div>
<p>程式碼以 TypeScript 撰寫，並以 SAM（Serverless Application Model）管理基礎設施即程式碼（IaC）。Lambda 採用 arm64（Graviton2）以稍微節省成本。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="dynamodb-的資料表設計">DynamoDB 的資料表設計<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#dynamodb-%E7%9A%84%E8%B3%87%E6%96%99%E8%A1%A8%E8%A8%AD%E8%A8%88" class="hash-link" aria-label="DynamoDB 的資料表設計 的直接連結" title="DynamoDB 的資料表設計 的直接連結" translate="no">​</a></h2>
<p>資料表名稱為 <code>blog-comments</code>，分區鍵為 <code>postId</code>，排序鍵為 <code>commentId</code>。</p>
<table><thead><tr><th>鍵</th><th>型別</th><th>說明</th></tr></thead><tbody><tr><td><code>postId</code></td><td>String</td><td>文章的識別值（例: <code>/blog/2026/03/20/hime</code>）</td></tr><tr><td><code>commentId</code></td><td>String</td><td>ULID（可時序排序的 ID）</td></tr></tbody></table>
<p>因為在排序鍵使用 ULID，使用 <code>QueryCommand</code> 取得的留言會自動按發表順序排列。這也是為什麼沒有使用 UUID 的原因。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="垃圾留言過濾">垃圾留言過濾<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E5%9E%83%E5%9C%BE%E7%95%99%E8%A8%80%E9%81%8E%E6%BF%BE" class="hash-link" aria-label="垃圾留言過濾 的直接連結" title="垃圾留言過濾 的直接連結" translate="no">​</a></h2>
<p>在將留言寫入 DynamoDB 之前，會與 <code>keywords.json</code> 中定義的關鍵字比對。</p>
<p>若命中關鍵字，會以 <code>isHidden: true</code> 自動隱藏，並附加 <code>isFlagged: "1"</code>。若未命中則立即公開。</p>
<p><code>isFlagged</code> 作為稀疏 GSI（Sparse GSI）的鍵使用。未命中的留言不會帶入此屬性，因此不會在 GSI 中增加多餘的分區，對成本與效能都有利。只要在 DynamoDB Document Client 設定 <code>removeUndefinedValues: true</code> 就能達成。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="通知管理者的郵件">通知管理者的郵件<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E9%80%9A%E7%9F%A5%E7%AE%A1%E7%90%86%E8%80%85%E7%9A%84%E9%83%B5%E4%BB%B6" class="hash-link" aria-label="通知管理者的郵件 的直接連結" title="通知管理者的郵件 的直接連結" translate="no">​</a></h2>
<p>每次有留言發表時，會用 SES v2 發信通知自己。郵件內容包含發言者名稱、內容、評分、IP 位址以及是否被標記（flag）等資訊。</p>
<p>郵件發送採非同步進行，即使發送失敗也會忽略錯誤（不影響使用者流程）。這是為了避免影響留言發表的回應速度。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="隱私考量">隱私考量<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E9%9A%B1%E7%A7%81%E8%80%83%E9%87%8F" class="hash-link" aria-label="隱私考量 的直接連結" title="隱私考量 的直接連結" translate="no">​</a></h2>
<p>雖然會在 DynamoDB 中儲存 IP 位址與 User-Agent，但不會把它們包含在 GET 端點的回應中。我們在型別定義層就進行分離。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="安全性">安全性<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E5%AE%89%E5%85%A8%E6%80%A7" class="hash-link" aria-label="安全性 的直接連結" title="安全性 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>層級</th><th>對策</th></tr></thead><tbody><tr><td>網路</td><td>使用 AWS WAF 設定每個 IP 每 5 分鐘 100 次的速率限制</td></tr><tr><td>CORS</td><td>僅允許 <code>https://www.hikari-dev.com</code></td></tr><tr><td>管理 API</td><td>API Gateway 的 API Key 認證（<code>X-Api-Key</code> 標頭）</td></tr><tr><td>垃圾留言</td><td>關鍵字過濾自動隱藏</td></tr></tbody></table>
<p>管理端點（<code>PATCH /comment/{id}</code>）只要在 SAM 模板設定 <code>ApiKeyRequired: true</code> 即可啟用 API 金鑰認證。無需自行實作 Lambda Authorizer，較為簡單。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/21/blog-comment-service#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>採用無伺服器架構後不需管理伺服器，DynamoDB 的按需付費讓流量低的個人部落格也能把成本降到最低。</p>
<p>程式碼以 SAM + TypeScript + esbuild 打包，僅需執行 <code>sam build &amp;&amp; sam deploy</code> 即可部署。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Web" term="Web"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[製作可使用多個生成式 AI 代理人的 VSCode 聊天擴充套件 Hime]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime"/>
        <updated>2026-03-20T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我做了一個可以和多個 AI 供應商聊天的 VSCode 擴充套件 Hime (HikariMessage)。]]></summary>
        <content type="html"><![CDATA[<p>我做了一個可以和多個 AI 供應商聊天的 VSCode 擴充套件 <strong>Hime (HikariMessage)</strong>。</p>
<p>採用 BYOK（Bring Your Own Key），只要有各 API 提供者的 API 金鑰即可使用。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="什麼是-hime">什麼是 Hime<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E4%BB%80%E9%BA%BC%E6%98%AF-hime" class="hash-link" aria-label="什麼是 Hime 的直接連結" title="什麼是 Hime 的直接連結" translate="no">​</a></h2>
<p><a href="https://github.com/Himeyama/hime" target="_blank" rel="noopener noreferrer" class="">Hime</a> 是一個整合在 VSCode 側邊欄的生成式 AI 聊天擴充套件。支援 Anthropic、OpenAI、Azure OpenAI、OpenRouter、Ollama，並可透過下拉選單輕鬆切換提供者。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="主要功能">主要功能<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="主要功能 的直接連結" title="主要功能 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="支援多個-ai-提供者">支援多個 AI 提供者<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E6%94%AF%E6%8F%B4%E5%A4%9A%E5%80%8B-ai-%E6%8F%90%E4%BE%9B%E8%80%85" class="hash-link" aria-label="支援多個 AI 提供者 的直接連結" title="支援多個 AI 提供者 的直接連結" translate="no">​</a></h3>
<p>支援以下提供者：</p>
<ul>
<li class="">Anthropic (Claude)</li>
<li class="">OpenAI</li>
<li class="">Azure OpenAI</li>
<li class="">OpenRouter</li>
<li class="">Ollama</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="即時串流顯示">即時串流顯示<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E5%8D%B3%E6%99%82%E4%B8%B2%E6%B5%81%E9%A1%AF%E7%A4%BA" class="hash-link" aria-label="即時串流顯示 的直接連結" title="即時串流顯示 的直接連結" translate="no">​</a></h3>
<p>回應會即時串流顯示，因此即使回覆很長也不會感覺到太久的等待。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mcp">MCP<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#mcp" class="hash-link" aria-label="MCP 的直接連結" title="MCP 的直接連結" translate="no">​</a></h3>
<p>透過設定以 JSON 格式指定以下參數即可使用 MCP。</p>
<blockquote>
<p>範例</p>
</blockquote>
<div class="language-json codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-json codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"filesystem"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"command"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"npx"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"args"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"-y"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"@modelcontextprotocol/server-filesystem"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"C:\\Users"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="豐富的-ui">豐富的 UI<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E8%B1%90%E5%AF%8C%E7%9A%84-ui" class="hash-link" aria-label="豐富的 UI 的直接連結" title="豐富的 UI 的直接連結" translate="no">​</a></h3>
<ul>
<li class="">Markdown 呈現</li>
<li class="">程式碼區塊語法高亮</li>
<li class="">程式碼區塊複製按鈕</li>
<li class="">顯示 MCP 的輸出結果</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="聊天記錄持久化">聊天記錄持久化<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E8%81%8A%E5%A4%A9%E8%A8%98%E9%8C%84%E6%8C%81%E4%B9%85%E5%8C%96" class="hash-link" aria-label="聊天記錄持久化 的直接連結" title="聊天記錄持久化 的直接連結" translate="no">​</a></h3>
<p>對話記錄會以 JSON 格式儲存在 <code>~/.hime/chats/</code>。即使重新啟動 VSCode 也能從上次繼續對話。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="自動系統提示">自動系統提示<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E8%87%AA%E5%8B%95%E7%B3%BB%E7%B5%B1%E6%8F%90%E7%A4%BA" class="hash-link" aria-label="自動系統提示 的直接連結" title="自動系統提示 的直接連結" translate="no">​</a></h3>
<p>工作區資訊、作業系統資訊與目前開啟的編輯器上下文會自動包含在系統提示中。只要說「請修正這個檔案」，AI 就能知道你正在查看哪個檔案。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="安裝">安裝<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E5%AE%89%E8%A3%9D" class="hash-link" aria-label="安裝 的直接連結" title="安裝 的直接連結" translate="no">​</a></h2>
<p>需要 Node.js 20 以上與 VSCode 1.96 以上。</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">git</span><span class="token plain"> clone https://github.com/Himeyama/hime</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> hime</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> run </span><span class="token function" style="color:#d73a49">watch</span><span class="token plain">   </span><span class="token comment" style="color:#999988;font-style:italic"># 開發時: Extension Host 與 Webview 同時監控</span></span><br></div></code></pre></div></div>
<p>之後在 VSCode 按 F5 即可啟動擴充套件主機。API 金鑰可從側邊欄的設定面板輸入，並會使用 VSCode 的 SecretStorage 加密儲存。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="總結">總結<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/20/hime#%E7%B8%BD%E7%B5%90" class="hash-link" aria-label="總結 的直接連結" title="總結 的直接連結" translate="no">​</a></h2>
<p>Hime 的強項是在不離開編輯器的情況下即可與 AI 互動，並且可透過 MCP 執行工具。歡迎試用。</p>
<p>程式碼倉庫: <a href="https://github.com/Himeyama/hime" target="_blank" rel="noopener noreferrer" class="">https://github.com/Himeyama/hime</a></p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="VoiceVox" term="VoiceVox"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[用 AWS 無伺服器打造雲端儲存服務]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage"/>
        <updated>2026-03-18T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[はじめに]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="はじめに">はじめに<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" class="hash-link" aria-label="はじめに 的直接連結" title="はじめに 的直接連結" translate="no">​</a></h2>
<p>自分専用のファイル共有システムが欲しいと思い、AWS のサーバーレスサービスだけでファイルストレージサービスを作りました。</p>
<p>この記事では、設計で意識したポイントと、実際のアーキテクチャを紹介します。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="何を作ったか">何を作ったか<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E4%BD%95%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%8B" class="hash-link" aria-label="何を作ったか 的直接連結" title="何を作ったか 的直接連結" translate="no">​</a></h2>
<p>制作した Web システムは、Web ブラウザからファイルのアップロード・ダウンロード・フォルダ管理ができるクラウドストレージサービスです。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="主な機能">主な機能<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" class="hash-link" aria-label="主な機能 的直接連結" title="主な機能 的直接連結" translate="no">​</a></h3>
<ul>
<li class="">ファイルのアップロード / ダウンロード</li>
<li class="">フォルダの作成・階層管理</li>
<li class="">複数ファイル / フォルダの一括 ZIP ダウンロード</li>
<li class="">ユーザー認証（サインアップ・ログイン・パスワードリセット）</li>
<li class="">ユーザープロフィール管理</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="アーキテクチャ">アーキテクチャ<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" class="hash-link" aria-label="アーキテクチャ 的直接連結" title="アーキテクチャ 的直接連結" translate="no">​</a></h2>
<p>以下、構成図です。</p>
<p><img decoding="async" loading="lazy" src="https://www.hikari-dev.com/zh-TW/assets/images/structure.drawio-ebc5ae4a7d9232039795235391695759.png" width="1204" height="858" class="img_y1Im"></p>
<p>認証の大部分は Cognito で行い、
ファイル転送は S3 の Presigned URL を Lambda で発行してクライアントと S3 が直接やり取りする仕組みです。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="技術スタック">技術スタック<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" class="hash-link" aria-label="技術スタック 的直接連結" title="技術スタック 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>レイヤー</th><th>技術</th></tr></thead><tbody><tr><td>バックエンド</td><td>C# (.NET 8) / AWS Lambda</td></tr><tr><td>認証</td><td>Amazon Cognito + Managed Login v2</td></tr><tr><td>API</td><td>API Gateway (REST) + Cognito Authorizer</td></tr><tr><td>ストレージ</td><td>Amazon S3</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="設計判断とその理由">設計判断とその理由<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E8%A8%AD%E8%A8%88%E5%88%A4%E6%96%AD%E3%81%A8%E3%81%9D%E3%81%AE%E7%90%86%E7%94%B1" class="hash-link" aria-label="設計判断とその理由 的直接連結" title="設計判断とその理由 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="認証を-cognito-で行う">認証を Cognito で行う<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E8%AA%8D%E8%A8%BC%E3%82%92-cognito-%E3%81%A7%E8%A1%8C%E3%81%86" class="hash-link" aria-label="認証を Cognito で行う 的直接連結" title="認証を Cognito で行う 的直接連結" translate="no">​</a></h3>
<p>Cognito の OAuth 2.0 エンドポイントと Managed Login を活用し、認証機能を実現しました。</p>
<p>最終的に認証系の Lambda は <code>TokenFunction</code> 1 つだけになりました。</p>
<p>機能的にもセキュリティ的にも減らせるコードは減らすのが吉です。</p>
<p>AWS のサービスがやってくれることを自前で書く必要はありません。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="presigned-url-によるファイル転送">Presigned URL によるファイル転送<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#presigned-url-%E3%81%AB%E3%82%88%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%BB%A2%E9%80%81" class="hash-link" aria-label="Presigned URL によるファイル転送 的直接連結" title="Presigned URL によるファイル転送 的直接連結" translate="no">​</a></h3>
<p>ファイルのアップロード・ダウンロードで Lambda を経由すると、いくつかの問題が生じます：</p>
<ul>
<li class="">Lambda のペイロード上限に引っかかる</li>
<li class="">大きなファイルを Lambda のメモリに載せるとコストがかかる</li>
<li class="">転送時間が Lambda の実行時間としてカウントされる</li>
</ul>
<p>Presigned URL なら、Lambda は URL を発行するだけで、実際のファイル転送はブラウザと S3 が直接行います。</p>
<p>Lambda の実行時間は数十ミリ秒で済み、ファイルサイズの制約も S3 の上限までとなります。</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">アップロードの流れ:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">1. ブラウザ → Lambda: 「file.pdf をアップロードしたい！アップロード先の URL を送れ～」</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">2. Lambda → ブラウザ: 「アップロード先の Presigned URL だよ。ここに PUT してね～」</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">3. ブラウザ → S3: 「S3 に PUT するよ～」</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">4. ブラウザ → Lambda: 「アップロード完了したよ～」</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="4-フォルダの-zip-ダウンロード">4. フォルダの ZIP ダウンロード<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#4-%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AE-zip-%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" class="hash-link" aria-label="4. フォルダの ZIP ダウンロード 的直接連結" title="4. フォルダの ZIP ダウンロード 的直接連結" translate="no">​</a></h3>
<p>S3 にはフォルダごとダウンロードする機能がありません。</p>
<p>複数ファイルの一括ダウンロードは、Lambda 上で ZIP を生成して一時的に S3 に置き、その Presigned URL を返す方式にしました。</p>
<p>一時 ZIP ファイルは S3 のライフサイクルルールで 1 日後に自動削除されるので、ゴミが溜まることはありません。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="セキュリティ">セキュリティ<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" class="hash-link" aria-label="セキュリティ 的直接連結" title="セキュリティ 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>対策</th><th>実装</th></tr></thead><tbody><tr><td>ブルートフォース防止</td><td>Cognito 標準のロック機能 (5 回失敗: 15 分ロック)</td></tr><tr><td>API 保護</td><td>Cognito Authorizer による JWT 検証</td></tr><tr><td>CORS</td><td><code>AllowedOrigin</code> を特定のドメインに限定</td></tr><tr><td>一時ファイル管理</td><td>S3 ライフサイクルで不要なファイルを 1 日で自動削除</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="コスト">コスト<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E3%82%B3%E3%82%B9%E3%83%88" class="hash-link" aria-label="コスト 的直接連結" title="コスト 的直接連結" translate="no">​</a></h2>
<p>サーバーレス構成なので、利用がなければコストはほぼゼロです。</p>
<ul>
<li class=""><strong>Cognito</strong>: ESSENTIALS Tier は MAU 10,000 まで無料</li>
<li class=""><strong>Lambda</strong>: 月 100 万リクエストまで無料</li>
<li class=""><strong>S3</strong>: 保存量に応じた従量課金（GB あたり約 $0.025/月）</li>
<li class=""><strong>API Gateway</strong>: 100 万リクエストあたり $3.50</li>
</ul>
<p>個人利用なら月額数十円〜数百円程度に収まります。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="インフラのコード化">インフラのコード化<a href="https://www.hikari-dev.com/zh-TW/blog/2026/03/18/storage#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E5%8C%96" class="hash-link" aria-label="インフラのコード化 的直接連結" title="インフラのコード化 的直接連結" translate="no">​</a></h2>
<p>インフラ全体を 1 つの <code>template.yaml</code> (AWS SAM) で定義しています。</p>
<p>Cognito User Pool、API Gateway、Lambda 3 関数、S3 バケット、CloudWatch アラーム、SNS — すべてのリソースを 600 行程度の YAML で定義しています。</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="硬體" term="硬體"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[在 WSL 2 上安裝 Rocky Linux 8.10]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8"/>
        <updated>2026-02-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[下載 WSL 2 映像檔]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="下載-wsl-2-映像檔">下載 WSL 2 映像檔<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E4%B8%8B%E8%BC%89-wsl-2-%E6%98%A0%E5%83%8F%E6%AA%94" class="hash-link" aria-label="下載 WSL 2 映像檔 的直接連結" title="下載 WSL 2 映像檔 的直接連結" translate="no">​</a></h2>
<p><a href="https://dl.rockylinux.org/pub/rocky/8/images/x86_64/Rocky-8-Container-Base.latest.x86_64.tar.xz" target="_blank" rel="noopener noreferrer" class="">https://dl.rockylinux.org/pub/rocky/8/images/x86_64/Rocky-8-Container-Base.latest.x86_64.tar.xz</a></p>
<p>從這裡下載。</p>
<p>參考: <a href="https://docs.rockylinux.org/8/guides/interoperability/import_rocky_to_wsl/" target="_blank" rel="noopener noreferrer" class="">https://docs.rockylinux.org/8/guides/interoperability/import_rocky_to_wsl/</a></p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓映像檔">解壓映像檔<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E8%A7%A3%E5%A3%93%E6%98%A0%E5%83%8F%E6%AA%94" class="hash-link" aria-label="解壓映像檔 的直接連結" title="解壓映像檔 的直接連結" translate="no">​</a></h2>
<p>將 tar.xz 解壓成 tar 檔。轉成 tar 後即可匯入到 WSL2。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">cd ~/Downloads</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">xz -d Rocky-8-Container-Base.latest.x86_64.tar.xz</span></span><br></div></code></pre></div></div>
<p>※Windows 上預裝的 bsdtar 無法解壓此檔。<br>
<!-- -->※若沒有 xz 指令，可在 Cygwin64 安裝，或使用其他 WSL 發行版來解壓。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="匯入映像至-wsl2">匯入映像至 WSL2<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E5%8C%AF%E5%85%A5%E6%98%A0%E5%83%8F%E8%87%B3-wsl2" class="hash-link" aria-label="匯入映像至 WSL2 的直接連結" title="匯入映像至 WSL2 的直接連結" translate="no">​</a></h2>
<p>將映像匯入到 WSL2。</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl --import RockyLinux-8.10 $HOME .\Rocky-8-Container-Base.latest.x86_64.tar --version 2</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="確認映像">確認映像<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E7%A2%BA%E8%AA%8D%E6%98%A0%E5%83%8F" class="hash-link" aria-label="確認映像 的直接連結" title="確認映像 的直接連結" translate="no">​</a></h2>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -l -v</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="新增使用者並設定預設使用者">新增使用者並設定預設使用者<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E6%96%B0%E5%A2%9E%E4%BD%BF%E7%94%A8%E8%80%85%E4%B8%A6%E8%A8%AD%E5%AE%9A%E9%A0%90%E8%A8%AD%E4%BD%BF%E7%94%A8%E8%80%85" class="hash-link" aria-label="新增使用者並設定預設使用者 的直接連結" title="新增使用者並設定預設使用者 的直接連結" translate="no">​</a></h2>
<p>以使用者名稱 hikari 為例：</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- dnf install sudo passwd -y</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- adduser hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- passwd -d hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- usermod -aG wheel hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- sed -i 's/^# %wheel/%wheel/' /etc/sudoers</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- echo -e "[user]\\ndefault=hikari" `| tee -a /etc/wsl.conf</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="啟動映像">啟動映像<a href="https://www.hikari-dev.com/zh-TW/blog/2026/02/11/wsl-rocky8#%E5%95%9F%E5%8B%95%E6%98%A0%E5%83%8F" class="hash-link" aria-label="啟動映像 的直接連結" title="啟動映像 的直接連結" translate="no">​</a></h2>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10</span></span><br></div></code></pre></div></div>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Linux" term="Linux"/>
        <category label="WSL" term="WSL"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[關於最強壓縮方式的調查]]></title>
        <id>https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x</id>
        <link href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x"/>
        <updated>2026-01-17T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[結論]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="結論">結論<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E7%B5%90%E8%AB%96" class="hash-link" aria-label="結論 的直接連結" title="結論 的直接連結" translate="no">​</a></h2>
<p>先說結論。</p>
<p>調查了對總計 34 GiB 的大量檔案進行壓縮與解壓時的時間與大小。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮建立封存檔">壓縮・建立封存檔<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE%E5%BB%BA%E7%AB%8B%E5%B0%81%E5%AD%98%E6%AA%94" class="hash-link" aria-label="壓縮・建立封存檔 的直接連結" title="壓縮・建立封存檔 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>方式</th><th>指令</th><th>real</th><th>user</th><th>sys</th><th>壓縮後大小</th></tr></thead><tbody><tr><td><strong>tar</strong></td><td><code>tar cf large-pkg.tar large-pkg</code></td><td>1m19.449s</td><td>0m6.702s</td><td>0m48.121s</td><td>26 GiB</td></tr><tr><td><strong>tar.gz</strong></td><td><code>tar czf large-pkg.tar.gz large-pkg</code></td><td>11m33.942s</td><td>11m18.811s</td><td>0m55.573s</td><td>5.5 GiB</td></tr><tr><td><strong>LZ4</strong></td><td><code>tar cf - large-pkg | lz4 &gt; large-pkg.tar.lz4</code></td><td>3m33.187s</td><td>0m53.958s</td><td>2m57.122s</td><td>8.6 GiB</td></tr><tr><td><strong>zstd</strong></td><td><code>tar cf - large-pkg | zstd -T0 -o large-pkg.tar.zst</code></td><td>9m13.819s</td><td>1m45.049s</td><td>2m43.609s</td><td>4.8 GiB</td></tr><tr><td><strong>bzip2</strong></td><td><code>tar cf - large-pkg.1 | bzip2 &gt; large-pkg.tar.bz2</code></td><td>37m22.743s</td><td>28m40.329s</td><td>3m31.000s</td><td>4.3 GiB</td></tr><tr><td><strong>xz</strong></td><td><code>tar cf - large-pkg | xz &gt; large-pkg.tar.xz</code></td><td>125m31.447s</td><td>124m10.523s</td><td>5m18.330s</td><td>3.3 GiB</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="展開-解壓">展開 (解壓)<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%B1%95%E9%96%8B-%E8%A7%A3%E5%A3%93" class="hash-link" aria-label="展開 (解壓) 的直接連結" title="展開 (解壓) 的直接連結" translate="no">​</a></h2>
<table><thead><tr><th>方式</th><th>指令</th><th>real</th><th>user</th><th>sys</th></tr></thead><tbody><tr><td><strong>tar</strong></td><td><code>tar xf large-pkg.tar</code></td><td>2m11.793s</td><td>0m6.906s</td><td>2m4.183s</td></tr><tr><td><strong>tar.gz</strong></td><td><code>tar xf large-pkg.tar.gz</code></td><td>3m39.544s</td><td>2m1.189s</td><td>2m58.317s</td></tr><tr><td><strong>tar.gz（gzip）</strong></td><td><code>gzip -dc large-pkg.tar.gz | tar xf -</code></td><td>3m40.416s</td><td>2m0.272s</td><td>3m0.043s</td></tr><tr><td><strong>tar.gz（pigz）</strong></td><td><code>pigz -dc large-pkg.tar.gz | tar xf -</code></td><td>3m53.711s</td><td>1m38.147s</td><td>4m42.893s</td></tr><tr><td><strong>LZ4</strong></td><td><code>lz4 -dc large-pkg.tar.lz4 | tar xf -</code></td><td>4m46.576s</td><td>0m32.174s</td><td>4m36.055s</td></tr><tr><td><strong>zstd</strong></td><td><code>zstd -dc large-pkg.tar.zst | tar xf -</code></td><td>3m46.419s</td><td>0m46.533s</td><td>3m34.668s</td></tr><tr><td><strong>bzip2</strong></td><td><code>bzip2 -dc large-pkg.tar.bz2 | tar xf -</code></td><td>11m31.287s</td><td>9m52.644s</td><td>4m17.974s</td></tr><tr><td><strong>xz</strong></td><td><code>xz -dc large-pkg.tar.xz | tar xf -</code></td><td>8m11.527s</td><td>3m45.562s</td><td>7m15.109s</td></tr></tbody></table>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="準備大量小型檔案">準備大量小型檔案<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E6%BA%96%E5%82%99%E5%A4%A7%E9%87%8F%E5%B0%8F%E5%9E%8B%E6%AA%94%E6%A1%88" class="hash-link" aria-label="準備大量小型檔案 的直接連結" title="準備大量小型檔案 的直接連結" translate="no">​</a></h2>
<p>首先，作為大量小型檔案，使用 node_modules。</p>
<p>把 <code>package.json</code> 設成如下。套件隨意挑選。</p>
<details class="details_rvcR alert alert--info details_Kt6x" data-collapsed="true"><summary>package.json</summary><div><div class="collapsibleContent_IDV4"><div class="language-js codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-js codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"large-pkg"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"1.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">""</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"author"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">""</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"commonjs"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"main"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"index.js"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"scripts"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"test"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"dependencies"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"async"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.2.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"axios"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.13.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"bcryptjs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"bluebird"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.7.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"body-parser"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chalk"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.6.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chalk-template"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cheerio"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chokidar"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"commander"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^14.0.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cookie"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"core-js"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.47.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cors"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.8.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"debug"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.4.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"dotenv"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^17.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"express"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.2.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"fast-glob"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.3.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"form-data"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"glob"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"got"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^14.6.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"inquirer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.2.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"jsonwebtoken"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"lodash"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.17.21"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"minimist"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.2.8"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mkdirp"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mkdirp-classic"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.5.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mongoose"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.1.4"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ms"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.1.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"node-fetch"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.3.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ora"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"passport"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.7.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"prop-types"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^15.8.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"qs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.14.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"react"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^19.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"react-dom"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^19.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"request"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.88.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rimraf"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"semver"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.7.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sharp"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.34.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"socket.io"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.8.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"supports-color"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"tslib"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.8.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"uuid"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ws"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.19.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"xml2js"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.6.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"yargs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^18.0.0"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"devDependencies"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/cli"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/plugin-transform-runtime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/preset-env"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/runtime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"autoprefixer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.4.23"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ava"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.4.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"babel-core"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.26.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"babel-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chai"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"commitlint"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^20.3.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"concurrently"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.2.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"conventional-changelog"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.1.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cross-env"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"css-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"dotenv-expand"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^12.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.57.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-config-prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.1.8"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-config-standard"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^17.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.32.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-jsx-a11y"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.10.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-node"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^11.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.5.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-react"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.37.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"husky"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.1.7"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"jest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^30.2.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"less"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.5.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"lint-staged"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^16.2.7"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mocha"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^11.7.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"nodemon"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.1.11"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"playwright"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.57.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"pm2"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.0.14"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"postcss"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.5.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.8.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"puppeteer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^24.35.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rollup"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.55.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rxjs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.8.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sass"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.97.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"semantic-release"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^25.0.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sinon"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^21.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"style-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"stylus"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.64.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"supertest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"tailwindcss"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.1.18"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ts-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.5.4"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ts-node"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.9.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"typescript"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.9.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"vite"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.3.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"vitest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.17"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.104.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack-cli"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack-dev-server"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"zx"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.8.5"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div></div></div></details>
<p>接著用以下指令建立 node_modules。</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i</span></span><br></div></code></pre></div></div>
<p>來看看容量。</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">du</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-d1</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">566M    ./node_modules</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">567M    </span><span class="token builtin class-name">.</span></span><br></div></code></pre></div></div>
<p>這樣就知道已建立大量小型檔案。</p>
<p>複製 node_modules 以建立更多檔案。</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">for</span><span class="token plain"> </span><span class="token for-or-select variable" style="color:#36acaa">i</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">in</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">..</span><span class="token number" style="color:#36acaa">59</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">do</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"node_modules.</span><span class="token string variable" style="color:#36acaa">${i}</span><span class="token string" style="color:#e3116c"> をコピー中..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function" style="color:#d73a49">cp</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-r</span><span class="token plain"> node_modules </span><span class="token string" style="color:#e3116c">"node_modules.</span><span class="token string variable" style="color:#36acaa">${i}</span><span class="token string" style="color:#e3116c">"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">done</span></span><br></div></code></pre></div></div>
<p>再看一次容量。</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">du</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-d1</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">..</span><span class="token plain">.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">34G     </span><span class="token builtin class-name">.</span></span><br></div></code></pre></div></div>
<p>變成相當大的容量。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="tarball">tarball<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#tarball" class="hash-link" aria-label="tarball 的直接連結" title="tarball 的直接連結" translate="no">​</a></h2>
<p>看看製作 tarball 的速度。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="建立檔案">建立檔案<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%BB%BA%E7%AB%8B%E6%AA%94%E6%A1%88" class="hash-link" aria-label="建立檔案 的直接連結" title="建立檔案 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> cf large-pkg.tar large-pkg</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    1m19.449s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m6.702s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     0m48.121s</span></span><br></div></code></pre></div></div>
<p>建立後 26 GiB</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> xf large-pkg.tar</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    2m11.793s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m6.906s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m4.183s</span></span><br></div></code></pre></div></div>
<p>打包與解壓都算快。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="targz">tar.gz<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#targz" class="hash-link" aria-label="tar.gz 的直接連結" title="tar.gz 的直接連結" translate="no">​</a></h2>
<p>接著用 tar.gz 測試。</p>
<p>tar 指令是用來打包的命令，gzip 是壓縮單一檔案的命令。把兩者結合所產生的就是 tar.gz 檔。現在 tar 指令本身就能壓縮與解壓 tar.gz（其他壓縮格式也同理）。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮">壓縮<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE" class="hash-link" aria-label="壓縮 的直接連結" title="壓縮 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> czf large-pkg.tar.gz large-pkg</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    11m33.942s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    11m18.811s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     0m55.573s</span></span><br></div></code></pre></div></div>
<p>壓縮後：5.5 GiB</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓-1">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93-1" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> xf large-pkg.tar.gz</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m39.544s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    2m1.189s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m58.317s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="用-tar-與-gzip-解壓">用 tar 與 gzip 解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E7%94%A8-tar-%E8%88%87-gzip-%E8%A7%A3%E5%A3%93" class="hash-link" aria-label="用 tar 與 gzip 解壓 的直接連結" title="用 tar 與 gzip 解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'gzip -dc large-pkg.tar.gz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m40.416s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    2m0.272s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m0.043s</span></span><br></div></code></pre></div></div>
<p>速度幾乎沒差。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="並行解壓-pigz">並行解壓 (pigz)<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E4%B8%A6%E8%A1%8C%E8%A7%A3%E5%A3%93-pigz" class="hash-link" aria-label="並行解壓 (pigz) 的直接連結" title="並行解壓 (pigz) 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'pigz -dc large-pkg.tar.gz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m53.711s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    1m38.147s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m42.893s</span></span><br></div></code></pre></div></div>
<p>速度沒有太大改變。看起來檔案讀寫速度成為瓶頸。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="bzip2">bzip2<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#bzip2" class="hash-link" aria-label="bzip2 的直接連結" title="bzip2 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮-1">壓縮<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE-1" class="hash-link" aria-label="壓縮 的直接連結" title="壓縮 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg.1 | bzip2 &gt; large-pkg.tar.bz2'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    37m22.743s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    28m40.329s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m31.000s</span></span><br></div></code></pre></div></div>
<p>壓縮後：4.3 GiB</p>
<p>壓縮花了比較多時間，但壓縮率還不錯。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓-2">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93-2" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'bzip2 -dc large-pkg.tar.bz2 | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    11m31.287s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    9m52.644s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m17.974s</span></span><br></div></code></pre></div></div>
<p>解壓也花不少時間，但解壓率還不錯。</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="xz">xz<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#xz" class="hash-link" aria-label="xz 的直接連結" title="xz 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮-2">壓縮<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE-2" class="hash-link" aria-label="壓縮 的直接連結" title="壓縮 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | xz &gt; large-pkg.tar.xz'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    125m31.447s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    124m10.523s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     5m18.330s</span></span><br></div></code></pre></div></div>
<p>壓縮後：3.3 GiB</p>
<p>壓縮率極為優秀，但花的時間太多。</p>
<p>如果網路極度慢、儲存成本高、且多年才用一次的罕見情境，或許可以考慮。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓-3">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93-3" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'xz -dc large-pkg.tar.xz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    8m11.527s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    3m45.562s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     7m15.109s</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="lz4">LZ4<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#lz4" class="hash-link" aria-label="LZ4 的直接連結" title="LZ4 的直接連結" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮-3">壓縮<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE-3" class="hash-link" aria-label="壓縮 的直接連結" title="壓縮 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | lz4 &gt; large-pkg.tar.lz4'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m33.187s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m53.958s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m57.122s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓-4">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93-4" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'lz4 -dc large-pkg.tar.lz4 | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    4m46.576s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m32.174s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m36.055s</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="zstd">zstd<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#zstd" class="hash-link" aria-label="zstd 的直接連結" title="zstd 的直接連結" translate="no">​</a></h2>
<p>Meta（前 Facebook）開發的高速壓縮方式。</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="壓縮-4">壓縮<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E5%A3%93%E7%B8%AE-4" class="hash-link" aria-label="壓縮 的直接連結" title="壓縮 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | zstd -T0 -o large-pkg.tar.zst'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">/*stdin*</span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain">            </span><span class="token builtin class-name">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">18.57</span><span class="token plain">%   </span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">27492075520</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">5106239218</span><span class="token plain"> bytes, large-pkg.tar.zst</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    9m13.819s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    1m45.049s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m43.609s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="解壓-5">解壓<a href="https://www.hikari-dev.com/zh-TW/blog/2026/01/17/x#%E8%A7%A3%E5%A3%93-5" class="hash-link" aria-label="解壓 的直接連結" title="解壓 的直接連結" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'zstd -dc large-pkg.tar.zst | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">large-pkg.tar.zst   </span><span class="token builtin class-name">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">27492075520</span><span class="token plain"> bytes</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m46.419s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m46.533s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m34.668s</span></span><br></div></code></pre></div></div>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
    </entry>
</feed>