Skip to content
Astro学习笔记

Astro官方文档—Tutorials学习笔记

1、astro项目网站的主页文件位置—src/pages/index.astro。

2、与许多框架不同，Astro 使用标准 HTML 元素在页面之间导航（也称为路由），并进行传统的页面刷新。

3、任何 HTML 文件都是有效的 Astro 语言。但是，您可以使用 Astro 做更多事情，而不仅仅是常规 HTML！

4、添加动态内容

  • 定义和使用变量

a.使用 JavaScript 或 TypeScript 表达式在 Astro 脚本中定义变量。 b.Astro 模板中的大括号 { } 内使用这些变量来告诉 Astro 您正在使用一些 JavaScript。

  • 在astro中编写js表达式

a.编写 Astro 模板非常类似于编写 HTML，但您可以在其中包含 JavaScript 表达式。 b.Astro frontmatter 脚本仅包含 JavaScript。 c.您可以在 .astro 文件的任一部分中使用所有现代 JavaScript 逻辑运算符、表达式和函数。但是，大括号（仅）在 HTML 模板主体中是必需的。

  • 有条件地渲染元素

5、Astro 的模板语法与 JSX 语法类似。如果您想知道如何在 HTML 中使用脚本，那么搜索它是如何在 JSX 中完成的可能是一个很好的起点！

6、style标签来美化样式

7、4rem表示字体大小是根元素（通常是html）的字体大小的4倍。例如，如果根元素的字体大小是16px，那么h1的字体大小就是64px。rem是一个相对单位，它可以使元素的字体大小相对于根元素的字体大小进行缩放，这对于响应式设计非常有用。

8、Astro <div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.d6kn2.css"><script type="module" src="/_astro/ec.dy9ns.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre tabindex="0"><code><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">---</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">const skillColor = 'red';</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">---</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--1:#8D46B4"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">style</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3C63B3">define:vars</span><span style="--0:#7FDBCA;--1:#8D46B4">=</span><span style="--0:#ECC48D;--1:#3C63B3">{{skillColor}}</span><span style="--0:#7FDBCA;--1:#8D46B4">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FF6363;--1:#9B504E">h1</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#80CBC4;--1:#097174">color</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#7FDBCA;--1:#097174">purple</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#80CBC4;--1:#097174">font-size</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--1:#AA0982"><span style="--0:#F78C6C">4</span><span style="--0:#FFEB95">rem</span></span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53"> </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C5E478;--1:#3C63B3">.skill</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#80CBC4;--1:#097174">color</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#7FDBCA;--1:#097174">green</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#80CBC4;--1:#097174">color</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#C5E478;--1:#3C63B3">var</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#C5E478;--1:#3C63B3">--skillColor</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#80CBC4;--1:#097174">font-weight</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#FF6363;--1:#9B504E">bold</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53"> </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span style="--1:#8D46B4"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">style</span><span style="--0:#7FDBCA">></span></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="---const skillColor = &#x27;red&#x27;;---<style define:vars={{skillColor}}> h1 { color: purple; font-size: 4rem; } .skill { color: green; color: var(--skillColor); font-weight: bold; }">

9、astro的全局样式文件位置：src/styles/global.css

10、导入全局样式：import '../styles/global.css';

11、当全局样式和页面本地

12、如果您希望在整个站点范围内应用样式，您可以选择使用 global.css 文件。但是，如果您希望样式仅应用于单个 .astro 文件中的 HTML 内容，而不影响网站上的其他元素，则可以选择 <style> 标记。

13、组件文件夹的位置：src/components

14、如果您的 .astro 文件的 frontmatter 中没有任何内容，则无需编写代码围栏。您随时可以在需要时将它们添加回来。

15、当您重构代码但不更改页面在浏览器中的显示方式时，您就是在重构。当您用组件替换部分页面 HTML 时，您将在本单元中进行多次重构。

16、astro脚本文件位置：src/scripts/

17、

18、布局组件的位置：src/layouts/

19、 允许您将在打开和关闭 标记之间编写的子内容注入（或“插入”）任何 Component.astro 文件。

20、使用布局时，您现在可以选择在 Markdown 内容或布局中包含元素（例如页面标题）。请记住目视检查页面预览并进行必要的调整以避免重复的元素。

21、可以进行嵌套布局操作。

22、Astro.glob() 访问项目中文件中的数据。

23、getStaticPaths() 一次创建多个页面（路由）。

24、如果您需要信息来构建页面路由，请将其写入 getStaticPaths() 内。要接收页面路由的 HTML 模板中的信息，请将其写在 getStaticPaths() 之外。

25、在JavaScript中，当你尝试访问一个对象的属性，但该属性并不存在时，通常会抛出一个错误。为了避免这种错误，你可以使用可选链（Optional Chaining）操作符?.。

26、

new Set(): Set是JavaScript的一种数据结构，它类似于数组，但每个元素都必须是唯一的，不会出现重复的元素。new Set()创建了一个新的Set对象。如果你将一个数组传递给new Set()，它将创建一个新的Set对象，其中包含数组中的所有唯一元素，自动去除了重复的元素。

…（扩展运算符）: 扩展运算符可以将一个数组或者对象的所有元素或属性展开。在你的代码中，它被用来将Set对象转换回数组。这是因为Set对象虽然可以去除重复，但它没有数组的一些有用方法，如map，filter等。

flat(): flat()函数用于将嵌套的数组转换为一维数组。你可以指定要展开的深度，如果不指定，flat()默认将数组展开一层。例如，[[1, 2], [3, 4]].flat()将返回[1, 2, 3, 4]。

27、map是JavaScript数组的一个方法，它接收一个函数作为参数，这个函数会被应用到数组的每个元素上，map方法会返回一个新的数组，这个新数组的元素是原数组的元素经过函数处理后的结果。

28、client:load 指令告诉 Astro 在页面加载时发送并在客户端上重新运行其 JavaScript，从而使组件具有交互性。这称为水合成分。

29、还有其他 client: 指令可供探索。每个都在不同的时间将 JavaScript 发送到客户端。例如， client:visible 只会在页面上可见时发送组件的 JavaScript。

30、astro基于文件的路由规则：任何在src/pages/文件夹下的.astro, .md或者.mdx文件都会自动成为网站上的一个网页。

31、即使使用内容集合，您仍将使用各个页面的 src/pages/ 文件夹，例如“关于我”页面。但是，将您的博客文章移至特殊的 src/content/ 文件夹将使您能够使用更强大、性能更佳的 API 来生成您的博客文章索引并显示您的个人博客文章。

32、视图转换是一种控制访问者在网站页面之间导航时发生的情况的方法。 Astro 的视图转换 API 允许您添加可选的导航功能，包括平滑的页面转换和动画、控制浏览器访问页面的历史堆栈以及防止全页面刷新，以便在更新显示的内容时保留某些页面元素和状态。

33、当浏览器刷新并加载新页面时，旧页面和新页面之间不存在连续性。在客户端路由期间，无需刷新整页浏览器即可显示新页面。

34、客户端路由是单页应用程序 (SPA) 站点的一项功能，其中您的整个站点或应用程序是 JavaScript 的“一页”，其内容根据访问者交互进行更新。

35、由于每个新页面不需要完全刷新浏览器，因此客户端路由允许您通过多种方式控制页面转换。持久元素（例如公共页面标题）不必在屏幕上完全重新呈现。从一个页面到另一页面的过渡会显得更加平滑。而且，状态可以被保留，允许您将值从一个页面转移到下一个页面，甚至可以在访问者浏览页面时保持视频播放！

36、有时您会想要或需要刷新整页浏览器。例如，当访问者通过链接访问 .pdf 文档时，您将需要浏览器从服务器加载该新页面。即使在 Astro 项目中启用了视图转换，您也可以指定浏览器在默认情况下和基于每个链接的导航方式，甚至完全选择退出客户端路由。

37、data-astro-reload 仅在从添加的链接转到新页面时触发完整的浏览器刷新。

38、