Astro知识概览 安装Astrojs第一步，安装 nodejs。然后，输入 npm create astro latest安装完成后，输入 npm run dev项目结构分析public文件夹：①网站标识及图标：favicon.svg②不需要Astro优化的图片③字体文件：设置一个 fonts文件夹 woff2④与爬虫相关： robots.txt/sitemap.xml⑤可直接下载的静态资源src文件夹：放项目源文件①建立blog文件夹，下置markdown文件，里面放文章②建立components文件夹③建立images文件夹，下放需要优化的图片④建立布局组件文件夹，layouts文件夹下 layout.astro⑤建立Pages文件夹，下面放 index.astro⑥css样式文件夹，下面放置相关样式页面及路由静态路由：新建页面：about.astro动态路由：data文件夹下面建一个 xxx.json然后建立一个动态路由去调用 data里面的数据Components创建属于自己的组件，视频示例中放置的是 cart.astrocart.astro的头部有一个类似Markdown当中Frontmatter的头部标签Layout布局Layouts文件夹下 layout.astro包裹页面的公共结构CSS在普通的页面的 xxx.astro当中，就可以写css。 然后如果想变成全局样式，在定义元素前面 + global可以再专门写一个文件，css文件，建一个style文件夹，下面写一个style.css安装TailwindCssFonts字体安装Fontsource, www.fontsource.orgimg图片public文件夹中创建图片src文件夹下建立 images文件夹，放置图片 然后导入项目当中引入 React框架项目中引入Scripts脚本xxx.astro 文件下面写入 inline script 内联脚本Markdown页面之间引入安装其他框架如 react vue等gpt搭配astro建站略过表单提交，GitHub PageSEO设置Head.astro组件将Head.astro组件引入 xxx.astroHead.astro组件下面需要包含的几个配置要素title description robots真实SEO测试制作落地页，设置TDK扩展着陆页文案Astro + 无头CMS下载LocalWP，创建网站。重点：无头如何设置。举例：const response = await fetch("http://myastropage.local/wp-json/wp/v2/pages");const pages = await response.json();const selectedPage = page.find(page => page.slug == "astrojs")xxxxxxxSupabase注册Supabase,项目文件夹下注册一个lib,然后注册一个 Supabase.js