<h3>什麼是 SEO</h3>
<p>搜尋引擎最佳化（Search engine optimization），簡稱為 SEO，是藉由調整網站的架構或內容，提高網站在搜尋
引擎內排名的行銷方法。提升網站的能見度與流量能夠打響品牌知名度和創造業績，因此所以不少網站都希望以各
種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。</p>
<h3>為何做 SEO</h3>
<p>SEO 的核心目的是讓網站更容易被搜尋引擎接受。搜尋引擎會將網站間的內容做一些相關性的比對，再由瀏覽器將
這些內容以最快速且接近最完整的方式，呈現給使用者，為其打造更好的使用者體驗。而不少研究指出，使用者在
利用搜尋引擎尋找資料、產品或服務時，多數人只會瀏覽搜尋結果中最前面的幾個連結，因此 SEO 就成了架設網
站的必要工作。否則花費大量時間與心力架設的網站，點閱次數卻寥寥無幾，可說是本末倒置。SEO 有以下幾個優
點：</p>
<ul>
<li>不受付費機制的影響，各個網站間公平競爭</li>
<li>長時間累積的數據，較其他行銷方式更穩定和可信</li>
<li>能夠吸引到相關度高的潛在客戶</li>
</ul>
<p>不過，搜尋引擎的演算法會不斷的更新，網站的排名也會有所動盪，所以如果沒有持續做好 SEO，排名就很有可能
一落千丈。</p>
<h3>如何實作 SEO 優化</h3>
<p>我們必須先了解 Google 搜尋的運作方式，根據
<a href="https://developers.google.com/search/docs/fundamentals/how-search-works?hl=zh-tw">Google 搜尋指南</a>的
說明，主要分為三個階段：</p>
<ol>
<li>檢索(Crawling)：Google 會透過稱為檢索器的自動化程式，從網際網路上找到的網頁下載文字、圖片和影片。
然而 Google 不可能把所有網站的內容一一爬完，因此，讓 Google 爬蟲有效完成網站的檢索，並排入建立索
引的等候階段，即是 SEO 的技術所在。</li>
<li>建立索引(Indexing)：完成檢索後， Google 會嘗試解讀網頁內容，並將相關資訊儲存在大型資料庫—— Google
索引之中，其中解讀的方式包括分析文字內容、關鍵內容標記和屬性，例如 <code>&lt;title&gt;</code> 元素和 alt 屬性、圖
片、影片等等。 Google 也是在這個階段判斷網頁在網際網路上是否有<strong>重複版本或標準網頁</strong>，如果 Google
發現某些網頁有高度重複的內容，會將這些網頁視為重複版本，並從中選出一個網址做為「標準」版本進行檢
索，降低其他網址的檢索頻率。</li>
<li>提供搜尋結果(Serving search results)：Google 面對不同搜尋需求時，會根據該使用者的所在地、語言、使
用裝置、瀏覽紀錄等各種的因素，提供對使用者來說最有幫助的資訊內容。當使用者輸入查詢字詞時， Google
會搜尋索引資料庫並找出符合的網頁，將演算法認為與使用者的查詢內容最相關且品質最佳的結果呈現出來。</li>
</ol>
<p>接下來我們可以開始討論 SEO 優化的方法：</p>
<h4>技術層面：讓網頁符合 SEO 規範</h4>
<p>如上述所提，我們可以透過一些網頁建立的技術，讓網路爬蟲有效率的完成網站檢索：</p>
<ul>
<li>SEO 網址：建立簡短且具描述性的網址是 SEO 優化的好方法，除了方便記憶，也讓使用者看一眼就知道網站的
大致內容。對網頁的相關性提升有正面影響。</li>
<li>麵包屑(Breadcrumb)：是一種常見的網頁導覽列，除了協助訪客了解網站架構，也讓 Google 能在最短的時間內
完成網站檢索。</li>
<li>網站地圖
(<a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=zh-tw">Sitemap</a>)：
收錄整個網站的頁面站點和檔案間的關聯性，主動提供給 Google 搜尋引擎來爬取頁面內容。針對規模較大的網
站可以縮短 Google 的檢索時間。</li>
<li>裝置兼容性：使用 RWD 或 AWD 網頁設計技術來優化使用者體驗，有助於 SEO 排名提升。</li>
<li>連結優化：將網站內部的所有頁面都用連結串聯起來，避免孤兒網頁(Orphan Page)產生，對 SEO 造成不良影響
。一個簡單的解法就是製作 Sitemap ，讓使用者和搜尋引擎都能更清楚網站的架構，也能延長使用者停留在站
內的時間。</li>
<li>結構化資料(Structured Data)：以標準化格式書寫網站內容讓爬蟲爬取，並呈現「複合式搜尋結果」給使用者
。</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/b2c25cc3-c207-4118-b587-6bff0ee4fafd" alt="image"></p>
<p>如上圖所示，這些資料都有助於 SEO 的優化。以下貼出幾個結構化資料標記的範例程式碼：</p>
<ul>
<li><strong>BreadcrumbList</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;網站標題&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org&quot;,
        &quot;@type&quot;: &quot;BreadcrumbList&quot;,
        &quot;itemListElement&quot;: [
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 1,
            &quot;name&quot;: &quot;階層 1&quot;,
            &quot;item&quot;: &quot;https://example.com/layer1&quot;
          },
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 2,
            &quot;name&quot;: &quot;階層 2&quot;,
            &quot;item&quot;: &quot;https://example.com/layer1/layer2&quot;
          },
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 3,
            &quot;name&quot;: &quot;階層 3&quot;
          }
        ]
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li><strong>Product</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;網站標題&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org/&quot;,
        &quot;@type&quot;: &quot;Product&quot;,
        &quot;name&quot;: &quot;產品 1 名稱&quot;,
        &quot;description&quot;: &quot;產品 1 簡介&quot;,
        &quot;review&quot;: {
          &quot;@type&quot;: &quot;Review&quot;,
          &quot;reviewRating&quot;: {
            &quot;@type&quot;: &quot;Rating&quot;,
            // 評分
            &quot;ratingValue&quot;: 4,
            &quot;bestRating&quot;: 5
          },
          &quot;author&quot;: {
            &quot;@type&quot;: &quot;Person&quot;,
            &quot;name&quot;: &quot;作者名稱&quot;
          }
        },
        // 總計評分和評價
        &quot;aggregateRating&quot;: {
          &quot;@type&quot;: &quot;AggregateRating&quot;,
          &quot;ratingValue&quot;: 4.4,
          &quot;reviewCount&quot;: 89
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li><strong>Organization</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;About Us&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org&quot;,
        &quot;@type&quot;: &quot;Organization&quot;,
        &quot;url&quot;: &quot;https://www.example.com&quot;,
        &quot;logo&quot;: &quot;https://www.example.com/images/logo.png&quot;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>更多的結構化資料用法可以參閱
<a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-tw">Google 結構化資料標記指南</a>，
裡面有詳細的步驟說明和可以直接改用的範例。也可以使
用<a href="https://www.google.com/webmasters/markup-helper/u/0/">協助工具</a>或<a href="https://search.google.com/test/rich-results?utm_campaign=devsite&utm_medium=jsonld&utm_source=product">複合式搜尋結果測試</a>，
幫助你新增或驗證各種類型的結構化資料。</p>
<h4>內容層面：做出符合使用者需求的網頁內容</h4>
<p>從使用者體驗的角度切入，提供真正符合需求的優質內容：</p>
<ul>
<li>關鍵字分析：需要思考使用者會透過哪些關鍵字搜尋到網站，其目的又是什麼。針對特定關鍵字來經營，可以帶
來更多目標客群。</li>
<li>Meta Tag：是 HTML 的語法，透過 Meta Title &amp; Meta Description 來描述網頁的概括資訊，吸引使用者點擊
瀏覽。但是注意不要寫過多不相干的內容，否則使用者觀感不佳，搜尋引擎也會判定是無效內容而降低排名。</li>
</ul>
<pre><code class="language-html">//範例來源：https://clinic.careonline.com.tw/
&lt;meta content=&quot;登錄診所｜照護線上&quot; property=&quot;og:title&quot; /&gt;
&lt;meta
  content=&quot;即刻登錄就可使用網路掛號、看診進度、回診提醒等多項便利實用的功能，讓您的診所脫穎而出！&quot;
  property=&quot;og:description&quot;
/&gt;
</code></pre>
<ul>
<li>img alt：當圖片因各種情況無法顯示時，alt 屬性就會代替圖片顯示。由於爬蟲對於圖片檔的解讀能力還不夠
透徹，所以撰寫替代文字可以幫助爬蟲了解圖片內容，進而提高排名。</li>
</ul>
<pre><code class="language-html">&lt;img src=&quot;de_sterrennacht.png&quot; alt=&quot;一幅描繪著黃色月亮、漩渦狀的星雲與藍色夜空的畫作&quot; /&gt;
</code></pre>
<h4>SEO 工具</h4>
<p>Google 有提供一個免費的 SEO 工具，也就是
<a href="https://search.google.com/search-console/about?hl=zh-tw">Google Search Console</a>，從這裡可以查看
Google 供的官方數據，包括曝光和點擊次數、網頁索引狀態等，還有提供分析報表可以下載，讓網站維護者迅速
掌握網站現況與改善方向，是非常實用的工具。</p>
<img width="1418" alt="image" src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/340693ea-32f6-4194-a271-63d04d69237e">

<h3>注意事項</h3>
<ul>
<li>一些會對 SEO 造成致命傷的項目</li>
</ul>
<table>
<thead>
<tr>
<th>項目</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>禁用 robots.txt</td>
<td>這是一個管理網路爬蟲的指令，如果禁用，搜尋引擎將無法取得網頁內容，對 SEO 造成負面影響</td>
</tr>
<tr>
<td>noindex</td>
<td>禁止 Google 搜尋建立索引，用於希望網頁保持私密性</td>
</tr>
<tr>
<td>重複內容</td>
<td>會混淆 Google 演算法導致關鍵字排名下降</td>
</tr>
<tr>
<td>301 轉址</td>
<td>如果移轉網頁的設定不正確，累積的 SEO 將會重置</td>
</tr>
</tbody></table>
<ul>
<li>黑帽法(Black Hat)</li>
</ul>
<p>透過作弊的方式欺騙演算法，例如塞入大量不相關關鍵字或垃圾內容、付費要求其他網站提供自身網站的連結，藉
此偽裝高信任度，讓 SEO 排名提升。但是這種方式對使用者沒有幫助，也違反了 Google 的使用規範。一旦被抓
到， Google 將會移除該網站的索引內容，讓它無法再出現於搜尋引擎中，是不該被宣揚的做法。</p>
<p>反之，以使用者需求和體驗為出發點，使用正規手法的 SEO 優化稱為白帽法，如前面所提的各種方法。耐心仔細
地做好 SEO ，親手為網頁創造更多曝光機會。</p>
<h3>參考來源</h3>
<ul>
<li><a href="https://zh.wikipedia.org/zh-tw/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96">維基百科</a></li>
<li><a href="https://welly.tw/serp-rank-optimization/what-is-seo">SEO 搜尋引擎優化教學</a></li>
<li><a href="https://www.shopjkl.com/pages/seo">初學者 SEO 終極指南</a></li>
<li><a href="https://www.awoo.ai/zh-hant/blog/301-302-redirect/">301/302 轉址如何影響網站 SEO</a></li>
<li><a href="https://developers.google.com/search/docs?hl=zh-tw">Google 搜尋指南</a></li>
<li><a href="https://www.yesharris.com/search-console/search-console-intro/">Google Search Console 教學</a></li>
<li><a href="https://www.seo-panda.tw/structured-data-202112/">結構化資料標記是什麼？會影響 SEO 排名嗎？</a></li>
</ul>


搜尋引擎最佳化（Search engine optimization），簡稱為 SEO，是藉由調整網站的架構或內容，提高網站在搜尋引擎內排名的行銷方法。提升網站的能見度與流量能夠打響品牌知名度和創造業績，因此所以不少網站都希望以各種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。

新手指南 - SEO

<h3>什麼是正規表達式</h3>
<p>正規表達式（Regular expression），簡稱 regex 或 regexp，是一種用來描述字串是否符合<strong>某個語法規則</strong>的
模型，用簡單字串來描述符合文中全部指定格式的字串。正規表達式是由一系列的字符和特殊字符組成，透過正規
表達式可以執行以下操作：</p>
<ul>
<li>在文字中尋找符合格式的部分</li>
<li>判斷一個字串是否完全符合格式</li>
<li>將符合格式的文字部分替換為指定的內容</li>
</ul>
<p>目前很多文字編輯器和程式語言都支援用正規表達式搜尋、比對和替換符合的文字。</p>
<h3>如何使用</h3>
<h4>1. 建立正規表達式</h4>
<p>正規表達式可以透過雙斜線 <code>//</code> 或 <code>new RegExp()</code> 呼叫 RegExp 物件來建立</p>
<pre><code class="language-javascript">// 常見用法
const regex = /[a-z]/;

// 適合用在需要動態產生 pattern 的場合
const name = &#39;Kenny&#39;;
const regex = new RegExp(name);
</code></pre>
<h4>2. 使用正規表達式</h4>
<p>建立完正規表達式，就可以使用 RegExp 物件中的 <code>test</code> 和 <code>exec</code> 方法來比對字串</p>
<ul>
<li><code>test</code> 的回傳值為 boolean</li>
<li><code>exec</code> 會回傳詳細資訊的 array ，如果匹配失敗則會回傳 null ，詳細可以
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">見此</a></li>
</ul>
<pre><code class="language-javascript">const regex = /\d/;

regex.test(&#39;abc&#39;); //false

regex.exec(&#39;123&#39;); //[&#39;1&#39;, index: 0, input: &#39;123&#39;, groups: undefined]
regex.exec(&#39;abc&#39;); //null
</code></pre>
<ul>
<li>除此之外， <code>match</code> 、 <code>replace</code> 、 <code>search</code> 等方法也支援正規表達式</li>
</ul>
<pre><code class="language-javascript">const str = &#39;The quick brown fox jumps over the lazy dog&#39;;

str.search(/\d/); //-1
//search回傳值為指定文字在字串中的起始位置，沒有找到則回傳 -1

str.match(/fox/); //[&#39;fox&#39;, index: 16, input: ..., groups: undefined]
//match方法會回傳第一個匹配成功的詳細資訊

str.replace(/\w*$/, &#39;cat&#39;); //&#39;The quick brown fox jumps over the lazy cat&#39;
</code></pre>
<h3>正規表達式的語法</h3>
<h4>常用特殊規則</h4>
<ul>
<li>跳脫字元：有個好記的規則：小寫邏輯跟大寫邏輯是相對的，小寫代表「是」，大寫代表「否」</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>\d</td>
<td>匹配任意數字</td>
</tr>
<tr>
<td>\D</td>
<td>匹配任意非數字字元</td>
</tr>
<tr>
<td>\w</td>
<td>匹配所有文字字元(a-z、A-Z、0-9、_)</td>
</tr>
<tr>
<td>\W</td>
<td>匹配所有非文字字元(標點符號、特殊字元)</td>
</tr>
<tr>
<td>\s</td>
<td>匹配空白字元</td>
</tr>
<tr>
<td>\S</td>
<td>匹配非空白字元</td>
</tr>
<tr>
<td>\b</td>
<td>匹配字元邊界</td>
</tr>
<tr>
<td>\B</td>
<td>匹配非字元邊界</td>
</tr>
</tbody></table>
<blockquote>
<p>字元邊界：也就是單字與 空格或\ 之間，例如 <code>/er\b/</code> 代表匹配 &#39;never&#39; 或 &#39;ver/sion&#39; ，但不匹配
&#39;verb&#39;</p>
</blockquote>
<ul>
<li>特殊符號</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>\</td>
<td>跳脫字元，例如需要搜尋&#39;/&#39;時，使用<code>\/</code></td>
</tr>
<tr>
<td>.</td>
<td>匹配任意字元</td>
</tr>
<tr>
<td>^</td>
<td>匹配字元開頭</td>
</tr>
<tr>
<td>$</td>
<td>匹配字元結尾</td>
</tr>
<tr>
<td>[]</td>
<td>比對[]中的任一字元，可用於範圍匹配([A-Z]、[0-9])</td>
</tr>
<tr>
<td>[^]</td>
<td>比對[]中以外的任一字元</td>
</tr>
<tr>
<td>|</td>
<td>OR 邏輯</td>
</tr>
<tr>
<td>()</td>
<td>群組</td>
</tr>
</tbody></table>
<ul>
<li>匹配次數次數符號要放在匹配規則的<strong>後面</strong>，例如<code>/c{3}/</code>代表匹配 &#39;c&#39; 字元三次</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>*</td>
<td>0 次以上</td>
</tr>
<tr>
<td>+</td>
<td>1 次以上</td>
</tr>
<tr>
<td>?</td>
<td>0 次或 1 次</td>
</tr>
<tr>
<td>{m}</td>
<td>m 次</td>
</tr>
<tr>
<td>{n,}</td>
<td>最少 n 次</td>
</tr>
<tr>
<td>{m,n}</td>
<td>從 m 次到 n 次</td>
</tr>
<tr>
<td>{m,n}?</td>
<td>從 m 次到 n 次，選到匹配最少次的</td>
</tr>
</tbody></table>
<blockquote>
<p>上述內容引用自
<a href="https://moojing.medium.com/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795">此文章</a></p>
</blockquote>
<h4>1. 簡易模式</h4>
<p>即直接輸入匹配的字元，如：<code>/World/</code> 這條規則將會直接匹配 &#39;World&#39; 這個文字</p>
<pre><code class="language-javascript">const regex = /World/;
const paragraphOne = &#39;Hello World !&#39;;
regex.test(paragraphOne); //true
//匹配成功，因為字串裡含有 &#39;World&#39;字符

const paragraphTwo = &#39;Hello John !&#39;;
regex.test(paragraphTwo); //false
//匹配失敗，因為字串不包含任何 &#39;World&#39; 字符
</code></pre>
<h4>2. 特殊字元</h4>
<p>需要搜尋較複雜的規則時使用，例如中華民國的身分證字號格式為：</p>
<ol>
<li>開頭為一個大寫英文字母 <code>/^[A-Z]/</code></li>
<li>數字第一位為 1 或 2 <code>/[12]/</code></li>
<li>後面為隨機八位數字 <code>/\d{8}/</code></li>
</ol>
<p>根據上述規則整理出以下正規表達式</p>
<pre><code class="language-javascript">const regex = /^[A-Z][12]\d{8}/;
const myId = &#39;A123456789&#39;;
const fakeId = &#39;D029482425&#39;;

regex.test(myId); //true
regex.test(fakeId); //false
</code></pre>
<h3>小技巧</h3>
<h4>線上工具</h4>
<ul>
<li>有許多線上工具和教學可供學習和測試正規表達式，例如 <a href="https://regex101.com/">Regex101</a> 。使用方法也
相當簡單，非常適合練習和複習。</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/68411dd0-91b1-46b9-a282-a0a1917562eb" alt="image"></p>
<h4>電子郵件地址</h4>
<p>正確的 Email 格式會有以下規則：</p>
<ol>
<li>必須以一個以上的文字開頭</li>
<li>@ 之前，可以出現 1 個以上的文字與「-」的組合，例如 -abc-</li>
<li>@ 之前，可以出現 1 個以上的文字與「.」的組合，例如 .abc.</li>
<li>@ 之前，以上兩項以 OR 的關係出現，並且出現 0 次以上</li>
<li>中間一定要出現一個 @</li>
<li>@ 之後，出現一個以上的大小寫英文及數字的組合</li>
<li>@ 之後，只能出現「.」或是「-」，但這兩個字元不能連續時出現</li>
<li>@ 之後，出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合</li>
<li>@ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文</li>
</ol>
<p>因此，我們可以整理出以下電子郵件格式：</p>
<pre><code class="language-javascript">emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;

// ^\w+：@ 之前必須以一個以上的文字&amp;數字開頭，例如 abc
// ((-\w+)：@ 之前可以出現 1 個以上的文字、數字或「-」的組合，例如 -abc-
// (\.\w+))：@ 之前可以出現 1 個以上的文字、數字或「.」的組合，例如 .abc.
// ((-\w+)|(\.\w+))*：以上兩個規則以 or 的關係出現，並且出現 0 次以上 (所以不能 –. 同時出現)
// \@：中間一定要出現一個 @
// [A-Za-z0-9]+：@ 之後出現 1 個以上的大小寫英文及數字的組合
// (\.|-)：@ 之後只能出現「.」或是「-」，但這兩個字元不能連續時出現
// ((\.|-)[A-Za-z0-9]+)*：@ 之後出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合
// \.[A-Za-z]+$/：@ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文
</code></pre>
<blockquote>
<p>上述內容引用自<a href="https://ithelp.ithome.com.tw/articles/10094951">此文章</a></p>
</blockquote>
<h3>參考來源</h3>
<ul>
<li><a href="https://zh.wikipedia.org/zh-tw/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F">維基百科</a></li>
<li><a href="https://5xruby.tw/posts/15min-regular-expression">十五分鐘認識正規表達式</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">MDN Web Docs</a></li>
<li><a href="https://www.minwt.com/webdesign-dev/html/20352.html">RegEx101 正規表示法線上產生器，有沒有選到立馬告訴你</a></li>
<li><a href="https://moojing.medium.com/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795">初探 Regex 正規表達式</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10094951">Email 表單驗證</a></li>
</ul>


正規表達式（Regular expression），簡稱 regex 或 regexp，是一種用來描述字串是否符合某個語法規則的模型，用簡單字串來描述符合文中全部指定格式的字串

新手指南 - 正規表達式

<h2>什麼是嵌入式資料庫</h2>
<p>不需另外安裝，就能和系統程式語言整合到應用程式中的輕量級資料庫。由於資料庫就儲存在應用程式的本地文件
中，無須網路連線，資料的存取可以更快速。嵌入式資料庫通常不需要複雜的配置過程，應用程式在運行時即可自
動創建和管理資料庫。沒有額外的伺服器，所以部署和安裝也相對簡單，通常只須將資料庫文件和應用程式一起打
包即可。而且大多數嵌入式資料庫都支持標準的 SQL 查詢語言，使得資料操作更便利，特別適合使用手機應用程
式、桌面應用程式、嵌入式系統和遊戲開發等。</p>
<h2>常見的嵌入式資料庫</h2>
<ol>
<li>SQLite：輕量級、零配置、支持標準 SQL 查詢語言和跨平台（包括移動設備和桌面應用程式），符合 ACID
(Atomicity, Consistency, Isolation, Durability)。但是 SQLite 在多個使用者同時寫入操作時可能會受到
一些限制，因此不適用於高流量的場景。SQLite 提供了最簡單和高效的本地資料儲存解決方案，如果<strong>應用程
式為單用戶取向，未來也不會需要支援多用戶訪問</strong>，那麼 SQLite 會是最好的嵌入式資料庫選擇。</li>
<li>Firebird：輕量級、支持跨平台和 ACID ，確保資料一致性。與 SQLite 不同的是，Firebird 能支援多個使用
者同時訪問，特別適用於多用戶、伺服器端的場景。另外，Firebird 是完全開源的，可以自由使用和修改。</li>
<li>H2 Database：使用 Java 開發的輕量級嵌入式資料庫，支援 SQL 和 JDBC（Java Database Connectivity，是
Java 語言中用來規範客戶端程式如何來訪問資料庫的應用程式介面）。可以在本地快速啟動，並支援瀏覽器的
Console 介面。但由於其主要針對 Java，所以不太適用於非 Java 的應用程式。</li>
<li>Realm：適用於移動應用程式，特別是需要離線儲存和同步功能的場景，支援 iOS 和 Android，並提供跨平台
的同步功能。Realm 還提供物件映射（ORM）API，避免讓使用者直接接觸 SQL 語法，簡化了程式語言的複雜度
。但缺點是其關聯式查詢需求可能受限，相對不如其他嵌入式資料庫靈活。</li>
</ol>
<h2>SQLite 效能檢測</h2>
<ul>
<li><p>測試內容如下，每項測試 5 次取平均值：</p>
<ol>
<li>Insert：插入多筆 trade 資料，內容為 <code>id</code>、<code>price</code>、<code>amount</code>、<code>timestamp</code></li>
<li>Read：從 1000 筆/1 萬筆/10 萬筆/100 萬筆 的資料表中讀取任一筆 trade 10 萬次</li>
</ol>
</li>
<li><p>根據實驗結果，得到以下結論：</p>
<ol>
<li>SQLite 的 Insert TPS 約為 <code>每秒 527.76 次</code></li>
<li>SQLite 的 Read 10 萬筆 row 的 TPS 約為 <code>每秒 31000 次</code></li>
</ol>
</li>
</ul>
<h3>實驗結果</h3>
<h4>Insert</h4>
<ul>
<li>Insert 1000 筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>2.185s</td>
<td>2.314s</td>
<td>2.187s</td>
<td>2.585s</td>
<td>2.151s</td>
<td><strong>2.284s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Insert 1 萬筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>16.684s</td>
<td>15.433s</td>
<td>15.617s</td>
<td>20.116s</td>
<td>17.027s</td>
<td><strong>17.375s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Insert 10 萬筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>2:45.127</td>
<td>2:46.373</td>
<td>2:56.607</td>
<td>2:47.190</td>
<td>2:55.462</td>
<td><strong>2:50.552(m:ss.mmm)</strong></td>
</tr>
</tbody></table>
<h4>Read</h4>
<ul>
<li>Read 1000 筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>30.104s</td>
<td>29.709s</td>
<td>30.221s</td>
<td>29.890s</td>
<td>34.809s</td>
<td><strong>30.947s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 1 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>31.299s</td>
<td>33.073s</td>
<td>31.359s</td>
<td>30.215s</td>
<td>33.944s</td>
<td><strong>31.978s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 10 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>30.401s</td>
<td>30.367s</td>
<td>30.385s</td>
<td>30.812s</td>
<td>32.621s</td>
<td><strong>30.917s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 100 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>34.572s</td>
<td>35.603s</td>
<td>34.607s</td>
<td>29.824s</td>
<td>39.734s</td>
<td><strong>34.868s</strong></td>
</tr>
</tbody></table>
<h2>連接 SQLite</h2>
<p>以下是提供在 Next.js 中連接 SQLite 資料庫的工具：</p>
<ol>
<li>Prisma：一套可以透過 JavaScript 或 TypeScript 來操作資料庫套件，幫助開發人員更輕鬆地管理資料庫。
能夠串接 <code>PostgreSQL</code>、<code>MySQL</code>、<code>SQLite</code>、<code>MongoDB</code> 等資料庫，並且提供 GUI 介面。Prisma 可以自動
從資料庫結構生成模型，而無需手動定義模型；還提供資料庫遷移功能，模型結構變化時也能輕鬆地同步資料
庫結構，不必手動更新資料庫。相較於其他工具，<strong>Prisma 擁有許多自動化功能，使開發者更高效地操作和管
理資料庫</strong>。</li>
<li>TypeORM：一個支援多種資料庫的 ORM 框架，其中就包括 SQLite，能夠使用 TypeScript 定義模型並進行查詢
。</li>
<li>Sequelize：另一個流行的 Node.js ORM，提供了強大的查詢和模型定義功能，支援多種包括 SQLite 的資料庫
。</li>
<li>SQLite3 NPM Package：如果想以更原生的方式進行 SQLite 連接，可以直接使用 sqlite3 NPM 套件。該套件
提供一個能夠使用 SQL 語句直接與 SQLite 進行互動的簡單介面。</li>
</ol>
<h2>安裝 Prisma</h2>
<ul>
<li>透過 npm 安裝 Prisma</li>
</ul>
<pre><code class="language-shell">npm i -D prisma
</code></pre>
<ul>
<li>安裝 Prisma cilent</li>
</ul>
<pre><code class="language-shell">npm i @prisma/client
</code></pre>
<h2>設置 schema.prisma</h2>
<ul>
<li>初始化 Prisma</li>
</ul>
<pre><code class="language-shell">npx prisma init
</code></pre>
<ul>
<li>完成後可以看到專案裡自動建立好的 <code>prisma/schema.prisma</code>，這個文件將定義資料庫的結構和模型，並通過
Prisma CLI 來生成相關的程式碼和工具</li>
</ul>
<img width="1023" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/b40be2cd-6f2b-4c86-8d9e-69a5e16df66a">

<ul>
<li><p>如果使用的是 VS Code ，可以安裝 <code>Prisma</code> 套件讓文件自動標色，提升可讀性</p>
<img width="984" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/fac794ce-aa94-4aa6-86f2-73926701d7b7">
</li>
<li><p>另外，在 <code>.env</code> 也會出現預設的 database url ，將 DATABASE_URL 改為 <code>file:./dev.db</code></p>
</li>
</ul>
<img width="1014" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/29661cf2-b0cc-40dc-bff9-0df3bf7b7b52">

<h2>撰寫 Prisma Schema</h2>
<h3>設定 Data Source</h3>
<pre><code class="language-prisma">datasource db {
  provider = &quot;sqlite&quot;
  url      = env(&quot;DATABASE_URL&quot;)
}
</code></pre>
<ul>
<li>這裡定義資料庫種類是 SQLite ，並指定 URL 為 <code>.env</code> 中的 DATABASE_URL 參數</li>
</ul>
<h3>設定 Data Modal</h3>
<pre><code class="language-prisma">model Post {
  id          String   @id
  title       String
  description String
  categories  String
  picture     String
  author      String
  content     String
  date        DateTime @default(now())
}
</code></pre>
<ul>
<li>這裡定義資料表的欄位、屬性和關聯。以下為標籤的說明<ul>
<li><code>@id</code>：主鍵</li>
<li><code>@unique</code>：表示欄位不能重覆</li>
<li><code>@default</code>：設定欄位預設值，例如 <code>@default(autoincrement())</code> 自動遞增、<code>@default(now())</code> 預設為
目前時間等...</li>
<li><code>@relation</code>：描述不同 model 的欄位關聯性，詳細的說明可參
考<a href="https://www.prisma.io/docs/concepts/components/prisma-schema/relations">官方文件</a></li>
</ul>
</li>
</ul>
<h2>生成 Migration</h2>
<pre><code class="language-shell">npx prisma migrate dev --name init
</code></pre>
<ul>
<li>在 <code>migration.sql</code> 中記錄了要放入資料庫的 Table 。在本例中只有一個 <code>Post</code> Table<img width="886" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/46b5c0c3-34e1-484c-8392-aa9c3306a5fa"></li>
</ul>
<p>接下來執行 Prisma Studio：</p>
<pre><code class="language-shell">npx prisma studio
</code></pre>
<ul>
<li>執行後就可以在瀏覽器上透過 GUI 操作剛才生成的 Table</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/cb7a3a7b-d1f7-4b6b-bd0a-a85c5ac9d0a7" alt="image"></p>
<h2>連接 Next.js</h2>
<pre><code class="language-jsx">import {PrismaClient} from &#39;@prisma/client&#39;;
const prisma = new PrismaClient();
</code></pre>
<p>完成資料庫的設定後，就可以在 Next.js 中進行 CRUD</p>
<h3>Create</h3>
<pre><code class="language-jsx">const saveContact = await prisma.post.create({
  data: {
    id: &#39;km-20230818001&#39;,
    title: &#39;I am a title&#39;,
    description: &quot;I&#39;m a description&quot;,
    categories: &#39;category&#39;,
    picture: &#39;/picture_src&#39;,
    author: &#39;julian&#39;,
    content: &#39;I am content&#39;,
  },
});
</code></pre>
<h3>Read</h3>
<pre><code class="language-jsx">// Filter by a single value
const post = await prisma.post.findMany({
  where: {
    id: {
      endsWith: &#39;001&#39;,
    },
  },
});

// Get all
const allPosts = await prisma.post.findMany();
</code></pre>
<h3>Update</h3>
<pre><code class="language-jsx">const updatePost = await prisma.post.update({
  where: {
    id: &#39;km-20230818001&#39;,
  },
  data: {
    categories: &#39;newbie&#39;,
  },
});
</code></pre>
<h3>Delete</h3>
<pre><code class="language-jsx">const deletePosts = await prisma.post.deleteMany({
  where: {
    author: {
      contains: &#39;julian&#39;,
    },
  },
});
</code></pre>
<h2>應用實例</h2>
<ul>
<li>API 內容</li>
</ul>
<pre><code class="language-ts">// /api/addPosts.ts
import {NextApiRequest, NextApiResponse} from &#39;next&#39;;
import {PrismaClient} from &#39;@prisma/client&#39;;

const prisma = new PrismaClient();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Info (20230818 - Julian) Check if the method is POST
  if (req.method !== &#39;POST&#39;) {
    return res.status(405).json({message: &#39;Method not allowed&#39;});
  }

  const contactData = JSON.parse(req.body);
  // Info (20230818 - Julian) Create a new contact in the database
  const saveContact = await prisma.post.create({
    data: contactData,
  });

  res.status(200).json(saveContact);
}
</code></pre>
<ul>
<li>Form component (節錄)</li>
</ul>
<pre><code class="language-jsx">const FormComponent  = () =&gt; {
  {...}
  // Info: (20230818 - Julian) Call API to add new post
  const addPost = async (kmData: IKMData) =&gt; {
    const response = await fetch(&#39;/api/addPost&#39;, {
      method: &#39;POST&#39;,
      body: JSON.stringify(kmData),
    });

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    return await response.json();
  };

  // Info: (20230818 - Julian) Click submit button
  const submitHandler = async (event: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
    const newData: IKMData = {
      id: kmId,
      author: inputAuthorId,
      title: inputTitle,
      description: inputDescription,
      picture: inputPicture,
      categories: inputCategory,
      content: inputContent,
    };

    try {
      event.preventDefault();

      await addPost(newData);
      ...
    } catch (error) {
      console.log(error);
    }
  };

  return(...)
}
</code></pre>
<h3>參考來源</h3>
<ul>
<li><a href="https://www.syscom.com.tw/ePaper_Content_EPArticledetail.aspx?id=191&EPID">嵌入式資料庫 SQLite 實務初探</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10309099">在 Spring boot 開發中使用 H2 Database</a></li>
<li><a href="https://zh.wikipedia.org/zh-tw/Java%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5">維基百科 - Java 資料庫連接</a></li>
<li><a href="https://medium.com/appmaster-developers/realm-%E7%B0%A1%E4%BB%8B-ece4c4a76244">Realm 簡介</a></li>
<li><a href="https://www.prisma.io/docs/concepts/components/prisma-schema">Prisma</a></li>
<li><a href="https://javascript.plainenglish.io/using-sqlite-with-next-js-13-cfa270e1d7ba">Using SQLite with Next.js 13</a></li>
<li><a href="https://www.youtube.com/watch?v=FMnlyi60avU">The Easiest Way to Work with a Database in Next.js</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10250424">仿 Trello - Prisma 安裝與 Schema 建立</a></li>
<li><a href="https://izo.tw/prisma/">【Prisma】JavaScript 的資料庫工具 安裝</a></li>
</ul>


本文將著重介紹 SQLite，包含效能檢測、連接 Next.js 以及一些基本的語法，讓讀者對 SQLite 和嵌入式資料庫的概念有初步的認識。

Using SQLite with Next.js

<p>站點地圖（Sitemap）是一個網站的結構圖，收錄整個網站中所有頁面站點間的關聯性。它可以幫助 Google 的搜
尋引擎爬取頁面內容，避免頁面被搜尋引擎遺漏也縮短檢索時間，並且有助於提升網站的搜索引擎優化（SEO）。</p>
<p>本文將說明在 Next.js 中建立動態站點地圖的方法。</p>
<h2>一、建立檔案</h2>
<p>在 <code>/pages</code> 底下建立一個名為 <code>sitemap.xml.tsx</code> 的檔案。<code>.xml</code> 表明這是一個 XML 文件，請注意不要忽略
。</p>
<img width="253" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/99d610fe-2a8a-4a97-85d8-a84ebe40285b">

<p>在 Next.js 中，每個頁面都需要導出一個 React 組件作為預設匯出 (<strong><code>default export</code></strong>)。這裡只需要直接
回傳 null。</p>
<pre><code class="language-tsx">export default function Sitemap() {
  return null;
}
</code></pre>
<h2>二、取得全部頁面</h2>
<p>撰寫一個 function ，將網頁中所有頁面的 URL 和最後更新的日期整理起來。</p>
<p>最後更新日期需要根據專案需求或其他邏輯來決定，也可以由後端提供。如果頁面內容在後端發生變化，則可以由
後端的最後修改時間來設置這個值。</p>
<p>以 MerMer-offcial 為例，這裡是取檔案的最後修改日期，實際作法如下：</p>
<pre><code class="language-tsx">function getLastModifiedDate(filepath: string) {
  const stats = fs.statSync(filepath);

  // 格式化日期
  const formattedMonth =
    stats.mtime.getMonth() + 1 &lt; 10 ? `0${stats.mtime.getMonth() + 1}` : stats.mtime.getMonth() + 1;
  const formattedDay =
    stats.mtime.getDate() &lt; 10 ? `0${stats.mtime.getDate()}` : stats.mtime.getDate();

  const formattedDate = `${stats.mtime.getFullYear()}-${formattedMonth}-${formattedDay}`;
  return formattedDate;
}
</code></pre>
<p>接著是將 URL 和最後更新日期做整理，一樣以 MerMer-offcial 為例：</p>
<pre><code class="language-tsx">// 取得所有頁面
async function getPages() {
  // 取得首頁的最後更新日期
  const indexUpdated = getLastModifiedDate(&#39;./src/pages/index.tsx&#39;);

  // 取得全部 KM 的 URL
  const slugs = (await getSlugs(KM_FOLDER)) ?? [];

  const kmPosts = slugs.map(slug =&gt; {
    // 取得 KM 最後更新日期
    const updated = getLastModifiedDate(`./src/km/${slug}.md`);
    return {
      url: `${MERURL.KM}/${slug}`,
      updated: updated,
    };
  });

  // 整理所有的 URL 項目
  const posts = [
    {
      url: MERURL.INDEX,
      updated: indexUpdated,
    },
    ...kmPosts,
  ];

  return posts;
}
</code></pre>
<h2>三、建立 XML 字串</h2>
<img width="1225" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/fef65c61-e157-4ff1-99cd-378d2ed86ed4">

<p>這是
<a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=zh-tw">Google</a>
提供的 XML sitemap 範例，接下來將根據它建立一個模板，用於生成符合 XML 格式的字串。</p>
<pre><code class="language-tsx">async function generateSitemap(): Promise&lt;string&gt; {
  // 取得所有頁面
  const pages = await getPages();

  //生成 XML 字串
  return `&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
${pages
  // 將每個 URL 項目轉換成 XML 字串
  .map(page =&gt;
    return `&lt;url&gt;
    &lt;loc&gt;${DOMAIN}${page.url}&lt;/loc&gt;
    &lt;lastmod&gt;${page.updated}&lt;/lastmod&gt;
  &lt;/url&gt;`;
  })
  // 將所有 URL 項目拼接成一個完整的 sitemap 文檔
  .join(&#39;&#39;)}
    &lt;/urlset&gt;`;
}
</code></pre>
<h2>四、生成 sitemap.xml</h2>
<p>Next.js 的 <code>getServerSideProps</code> 函數會在每次收到 Server-Side Rendering (SSR) 的請求時生成 sitemap，
然後傳遞給頁面組件。</p>
<p>執行的流程如下：</p>
<ul>
<li>設置 response 的 Content-Type 為 <code>text/xml</code>，表示返回 XML 格式的內容。</li>
<li>調用 <code>generateSitemap</code> 函數以獲取 sitemap 的 XML 內容。</li>
<li>使用 <code>res.write</code> 將 XML 內容寫入 response。</li>
<li>最後 <code>res.end()</code> 結束 response 的處理。</li>
</ul>
<pre><code class="language-tsx">export const getServerSideProps: GetServerSideProps = async ctx =&gt; {
  // 設置 response header 為 XML
  ctx.res.setHeader(&#39;Content-Type&#39;, &#39;text/xml&#39;);

  // 生成 sitemap 內容
  const xml = await generateSitemap();

  // 將 sitemap 寫入到 response 中
  ctx.res.write(xml);

  // 結束 response
  ctx.res.end();

  // 返回一個空的 props 對象，因為在 SSR 中必須返回一個包含數據的對象
  return {
    props: {},
  };
};
</code></pre>
<h2>五、完成</h2>
<p>前往 <code>/sitemap.xml</code> 就可以看到完成的站點地圖了。</p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/41b1242b-e087-4e7a-bc78-ea1535837231" alt="image"></p>
<p>完整 <code>sitemap.xml.tsx</code> 程式碼如下：</p>
<pre><code class="language-tsx">import {GetServerSideProps} from &#39;next&#39;;
import {MERURL} from &#39;../constants/url&#39;;
import {DOMAIN, KM_FOLDER} from &#39;../constants/config&#39;;
import {getSlugs} from &#39;../lib/posts&#39;;
import fs from &#39;fs&#39;;

//預設匯出
export default function Sitemap() {
  return null;
}

// 生成 sitemap.xml
export const getServerSideProps: GetServerSideProps = async ctx =&gt;
  ctx.res.setHeader(&#39;Content-Type&#39;, &#39;text/xml&#39;);

  const xml = await generateSitemap();
  ctx.res.write(xml)
  ctx.res.end();

  return {
    props: {},
  };
};

// (20231205 - Julian) 生成 XML 字串
async function generateSitemap(): Promise&lt;string&gt; {
  const pages = await getPages();

  return `&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
${page
  .map(page =&gt; {
    return `&lt;url&gt;
    &lt;loc&gt;${DOMAIN}${page.url}&lt;/loc&gt;
    &lt;lastmod&gt;${page.updated}&lt;/lastmod&gt;
  &lt;/url&gt;`;
  })
  .join(&#39;&#39;)}
    &lt;/urlset&gt;`;
}

// Info: (20231205 - Julian) 取得檔案的最後修改日期
function getLastModifiedDate(filepath: string) {
  const stats = fs.statSync(filepath);

  const formattedMonth =
    stats.mtime.getMonth() + 1 &lt; 10 ? `0${stats.mtime.getMonth() + 1}` : stats.mtime.getMonth() + 1;
  const formattedDay =
    stats.mtime.getDate() &lt; 10 ? `0${stats.mtime.getDate()}` : stats.mtime.getDate();

  const formattedDate = `${stats.mtime.getFullYear()}-${formattedMonth}-${formattedDay}`;
  return formattedDate;
}

async function getPages() {
  const indexUpdated = getLastModifiedDate(&#39;./src/pages/index.tsx&#39;);

  const slugs = (await getSlugs(KM_FOLDER)) ?? [];

  const kmPosts = slugs.map(slug =&gt; {
    const kmDate = getLastModifiedDate(`./src/km/${slug}.md`);
    return {
      url: `${MERURL.KM}/${slug}`,
      updated: kmDate,
    };
  });

  const posts = [
    {
      url: MERURL.INDEX,
      updated: indexUpdated,
    },
    ...kmPosts,
  ];

  return posts;
}
</code></pre>
<h2>參考來源</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=khYC98faSrg">How to create a Dynamic Sitemap in Next.js</a></li>
<li><a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=zh-tw">Google 搜尋中心</a></li>
<li><a href="https://bobbyhadz.com/blog/get-last-modified-date-of-file-using-node-js">How to get the last modified Date of a File in Node.js</a></li>
</ul>


本文將說明在 Next.js 中建立動態站點地圖的方法。站點地圖（Sitemap）是一個網站的結構圖，收錄整個網站中所有頁面站點間的關聯性。它可以幫助 Google 的搜尋引擎爬取頁面內容，避免頁面被搜尋引擎遺漏也縮短檢索時間，並且有助於提升網站的搜索引擎優化（SEO）。

Language

Language

新手指南 - SEO

新手指南 - 正規表達式

Using SQLite with Next.js

Create a Dynamic Sitemap in Next.js