捨棄 create-react-app 之餘還架了個 astro blog 昭告天下：集中處理 .md
你已經寫好幾篇 .md 文章，現在準備好讓 astro 把這些好棒棒的內容轉成網頁了。
你查看了 astro 的官方文件，知道可以透過 Astro.glob() 取得指定路徑中所有的 .md 內容。這包 MarkdownInstance[] 型態的資料能讓你決定怎麼展示文章，比如在網站首頁列出「最近十篇文章」，或是在「標籤」分頁列出「分類屬於 X 的所有文章」。
但這個方便的功能僅能在 .astro 檔案內使用。如果我想要在部落格專案中建立一個 tools 資料夾，專門收納「讀取所有 .md 檔案」「預處理排序」等通用工具，這時候我們需要換個方式——使用未經 astro 包裝的 import.meta.glob() 來達成在 .astro 以外的地方讀取 .md 的需求。
以下就來介紹個人在自家部落格處理 .md 讀檔以及排序的方式。
本文
取得所有 .md 內容
首先在 ./src/tools 中新增一個檔案 post.ts 並新增第一個功能：
async function getAllPosts() {
const metaAllPosts = import.meta.glob<MarkdownInstance<Post>>(
'../pages/**/*.md'
);
const keys = Object.keys(metaAllPosts);
const allPostsPromises = keys.map((key) => metaAllPosts[key]());
return await Promise.all(allPostsPromises);
}getAllPosts 的任務是透過 import.meta.glob() 讀取位於 ./src/pages 資料夾內「所有的 .md 檔案」。
在這裡傳入型別 MarkdownInstance<Post> 代表指定每一份 .md 檔案中的 frontmatter 會有哪些項目（官分型別定義可參考 astro/packages/astro/src/@types/astro.ts 內容）。比如我的每一篇部落格文章 .md 檔案都有以下開頭：
---
title: 鐵人賽 Modern Web 組「捨棄 create-react-app 之餘還架了個 astro blog 昭告天下」第 1 天
date: 2023-09-01 7:29:09
tag:
- [2023鐵人賽]
banner: /2023/ithome-2023-1/miguel-a-amutio-27QOmh18KDc-unsplash.jpg
summary: 2023 鐵人賽開始了，今年來聊聊前端基礎建設以及如何用 astro 架部落格
draft: true
---
...那麼我的 interface Post 就會長得像下面這樣：
interface Post {
title: string;
date: Date;
tag: string[];
banner?: string;
summary?: string;
draft?: boolean;
}以上列出來的鍵值即是我可以透過 frontmatter 取得的欄位資訊。比如等一下我們就能透過 frontmatter.date 來根據日期排序文章。
（注意 astro 3.0 已經不再支援 draft 功能，如果需要根據特定條件來判定文章是否該在打包過程中被剔除，請參考 Breaking Changes 中的說明）
繼續往下看。根據 vite 官分文件我們可以知道變數 metaAllPosts 會有類似以下結構的內容：
const metaAllPosts = {
'../pages/2023/ithome-2023-1.md': () =>
import('../pages/2023/ithome-2023-1.md'),
'../pages/2023/ithome-2023-2.md': () =>
import('../pages/2023/ithome-2023-2.md'),
// ...
};所以我們先透過 Object.keys(metaAllPosts) 取出所有的鍵值，再透過 keys.map((key) => metaAllPosts[key]()) 執行 metaAllPosts 中的每一筆 import。最後使用 await Promise.all() 來取得「所有位在 ./src/pages 資料夾中的 MarkdownInstance 內容」。
這個功能最後回傳的資料型別會是 MarkdownInstance<Post>[]
依照日期排序
繼續在 ./src/tools/post.ts 中新增以下內容：
import dayjs from 'dayjs';
function sortPostByDate(posts: MarkdownInstance<Post>[]) {
return posts.sort(
(a, b) =>
dayjs(b.frontmatter.date).valueOf() - dayjs(a.frontmatter.date).valueOf()
);
}sortPostByDate 的任務非常單純，即是根據每一篇文章的日期來進行排序。所以當我們執行以下組合：
export const ALL_SORTED_POSTS = sortPostByDate(await getAllPosts());就能得「根據日期從新到舊排序」的所有部落格文章了 (́◉◞౪◟◉‵)
以個人部落格為例，我的首頁會顯示目前最新的十篇文章。達成的方式是：在 src/pages/index.astro 的 Component Script 區塊直接引用處理好的文章內容，分為前五、後五篇。接著再將切好的內容丟到排版專用的 FeaturedPostLayout 與 ListedPostLayout 元件來處理畫面樣式。
---
// Component Script
import FeaturedPostLayout from '@Components/layout/FeaturedPostLayout.astro';
import ListedPostLayout from '@Components/layout/ListedPostLayout.astro';
import { ALL_SORTED_POSTS } from '@Tools/post';
const firstTenPosts = ALL_SORTED_POSTS.slice(0, 10);
const postShouldWithSummary = firstTenPosts.slice(0, 5);
const restOfPost = firstTenPosts.slice(5, firstTenPosts.length);
---
<!-- Component Template (HTML + JS Expressions) -->
<div class="post-container">
<div class="featured-posts-container">
{
postShouldWithSummary.map((post, index) => (
<div class:list={['post', `post-${index}`]}>
<FeaturedPostLayout
title={post.frontmatter.title}
date={post.frontmatter.date}
tag={post.frontmatter.tag}
banner={post.frontmatter.banner}
summary={post.frontmatter.summary || ''}
url={post.url}
/>
</div>
))
}
</div>
<div class="listed-posts-container">
{
restOfPost.map((post) => (
<ListedPostLayout
title={post.frontmatter.title}
date={post.frontmatter.date}
tag={post.frontmatter.tag}
url={post.url}
/>
))
}
</div>
</div>在其他需要用到文章內容的元件，也都是直接引用處理好的 ALL_SORTED_POSTS 即可。集中到 ./src/tools/post.ts 可以避免在各個 .astro 檔案中重複同樣的讀檔、排序邏輯。
總結
現在你知道怎麼把讀檔的邏輯集中到一個檔案裡面了。
而結合讀取與 astro 的渲染，你的 .md 文章們已經順利變化成靜態網頁，只可惜毫無樣式可言。為了解決這個問題，接下來的文章會來簡單介紹一下個人會如何處理部落格樣式，敬請期待 (ง๑ •̀_•́)ง