# Astro

* file based routing
* no JS by default (means the html is from server-side)(MPA)
* component (pass props)
* built-in Markdown Support (code highlighting)
* astro inegration (no need to setup stuff just add it)
* Islands Architecture 這看不是很明白 大概是說網頁 load 超快 有些需要 load JS 的元件會等到他真的進到 viewport 才去 load

## 基本檔案
上面 server 下面 client

---
import dayjs from 'dayjs';
const now = dayjs().year();
---

<footer>
  <small> Copyright &copy; <span></span>{now}</small> | All rights reserved
</footer>

<script> client side js </script>

可以直接對單檔案這樣寫樣式

<style lang='scss'>
h1 {
color: #cac;
span {
color: forestgreen;
}
}
</style>

## style isolated 
定義在 .astro style tag 裡面的樣式有自己的 scope，如此一來就無須擔心重複 class name 相互影響，並且直接用 tag selector 也沒有問題(最後產出 astro 都會替我們添加隨機的 class name)

## async

Astro wraps the frontmatter in an async function automatically so you can use top-level await !

直接在上半部的 JS 可以直接 await Promise

## 文章資訊傳遞
透過```frontmatter```物件將定義在 .md 檔案上的資訊傳遞給 layout.astro 在畫面上使用

## 圖片
[astro imge](https://docs.astro.build/en/guides/integrations-guide/image/)
* 格式轉換 大幅縮減圖檔不失真
* reszie 不用 css 控制

## router dynamic
[astro getStaticPaths](https://docs.astro.build/en/reference/api-reference/#getstaticpaths)

根據所有文章的作者、分類自動產生相對應的路徑

## pagination
[astro pagination](https://docs.astro.build/en/reference/api-reference/#paginate)
Astro build-in function 讚

## SEO

## TBC

* 基本的 .md 與 mdx 比較
* 路徑 alias 設定 
    * A : ([官網教學](https://docs.astro.build/en/guides/aliases/))
* astro image 功能研究
* 共同的 linter 設定
    * 1. import 整理 shift + option + o
* 全站 css 翻新 現在樣式是偷來的還很醜
    * 是否導入 UI library
        * Taiwind integration DONE
    * Shozzle Logo
* dark mode
* 製作 author 頁
* 製作 404 page
* 改寫 category 使能夠多使用多種
* [...xxx] 動態路由 ...
    * 影響第一頁呈現
    * ![](https://i.imgur.com/ZAJeSJD.png)
* 完整分頁功能
* md 搬家到 HackMD
    * API: https://api.hackmd.io/v1/notes
    * token: HP24HAS7UX6I42FCD8C5PZA1UTN9K360JOEUIHOQTQEF2YXLO​
    * quota 2000/month 一下就爆了
* [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)有空再研究 (11204 已研究並提交至 GCS)
* [rss](https://docs.astro.build/zh-tw/guides/rss/)有空再研究
* .md 的 table 顯示錯誤
* 接 github conttributer


| info | description |
| ------- | -------- |
| layout | 文章共用版型 (基本不動) |
| title | 文章標題 |
| date | 日期 (影響排序) |
| author | 作者 (影響分類) |
| image | 首圖 ( TBC: 預設 or 如何呈現 ) |
| description | 文章說明 (影響列表說明以及 SEO meta tag 跟 title) |
| draft | 草稿 (寫一半還沒要發的時候用) |
| category | 文章類型 (影響分類) |