Illia-sanzh/greenclaw-agent

Astro 站點管理 — 代理人知識

功能

您可以透過以下操作管理 Astro 靜態網站：

• 建立、編輯與刪除部落格文章（content collections 中的 markdown/MDX）
• 匯入文件（.docx、.pdf）並轉換為 markdown
• 在 src/assets/ 中上傳與整理圖片
• 編輯元件（.astro）、版面配置與頁面
• 編輯包含互動元件的 MDX 檔案
• 修改全域及元件層級的樣式
• 推送變更至 git 以自動部署至 Cloudflare Workers（或執行 npx wrangler deploy）
• 執行 npm 指令（建置、開發、安裝套件）

Content Collections

Content collections 使用 src/content/，並在 src/content/config.ts 中定義 schema。

部落格文章

位置：src/content/blog/*.md 或 *.mdx

必要 frontmatter：

---
title: "文章標題"
description: "SEO 描述"
pubDate: 2024-01-15
---

可選欄位：updatedDate、heroImage、draft、tags

建立文章

1. 將包含 frontmatter 的 markdown 檔案寫入 src/content/blog/<slug>.md
2. 將任何圖片放置於 src/assets/<slug>/
3. 引用圖片：![替代文字](~/assets/<slug>/image.jpg)
4. Git add、commit、push 以部署

查詢 Collections

在 .astro 頁面中：

---
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
const sorted = posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

元件模式

基本 .astro 元件

---
const { title, class: className } = Astro.props;
---
<section class:list={["section", className]}>
  <h2>{title}</h2>
  <slot />
</section>

<style>
  .section { padding: 2rem; }
</style>

版面配置模式

---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
const { title, description } = Astro.props;
---
<html lang="zh-TW">
<head><BaseHead title={title} description={description} /></head>
<body>
  <Header />
  <main><slot /></main>
  <Footer />
</body>
</html>

動態路由

檔案：src/pages/blog/[...slug].astro

---
import { getCollection } from "astro:content";
export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({ params: { slug: post.slug }, props: post }));
}
const post = Astro.props;
const { Content } = await post.render();
---
<Content />

安全規則

• 絕對不要刪除 .git 目錄
• 絕對不要刪除 node_modules/ 或 package-lock.json，除非重新安裝
• 絕對不要強制推送（git push --force）
• 絕對不要推送至已設定部署分支以外的分支
• 未經使用者明確要求，請勿修改 astro.config.mjs 或 wrangler.toml
• 絕對不要在專案根目錄執行 rm -rf
• 刪除任何元件或頁面檔案前，務必要求確認

常見任務

新增部落格文章

1. 使用 write_file 在 src/content/blog/<slug>.md 建立包含 frontmatter 與內容的檔案
2. 使用 git_operations status → add → commit → push

匯入文件

1. 使用 convert_document 搭配上傳的檔案路徑
2. 使用 read_file 讀取產生的 markdown 以檢視內容
3. 如有需要，使用 write_file 編輯 frontmatter
4. 使用 git_operations add → commit → push

編輯元件

1. 使用 read_file 讀取元件以了解目前程式碼
2. 使用 write_file 寫入更新後的元件
3. 使用 git_operations add → commit → push

更改網站樣式

1. 使用 read_file 讀取相關的 CSS 檔案或元件
2. 使用 write_file 寫入更新後的樣式
3. 使用 git_operations add → commit → push

上傳圖片

1. 使用 write_file 或 run_command 將圖片儲存至 src/assets/<資料夾>/
2. 在 markdown 中引用：![替代文字](~/assets/<資料夾>/image.jpg)
3. 或在 .astro 中：import img from "~/assets/<資料夾>/image.jpg"