编写你的第一个浏览器脚本
让我们在移动屏幕上添加一个汉堡菜单(Hamburger Menus)以打开和关闭你的导航链接,这需要一些客户端的交互!
准备好…
- 创建一个汉堡菜单组件
- 编写一个
<script>
使你的网站访问者可以打开和关闭导航菜单 - 将你的 JavaScript 移动到
.js
文件中
搭建一个汉堡菜单组件
段落标题 搭建一个汉堡菜单组件创建一个 <Hamburger />
组件,用于打开和关闭移动端菜单。
-
在
src/components/
中创建一个名为Hamburger.astro
的文件。 -
将以下代码复制到你的组件中。这将表示你的三行「汉堡」菜单,在移动设备上打开和关闭导航链接菜单。(稍后你将把新的 CSS 样式添加到
global.css
中。) -
将这个新的
<Hamburger />
组件放置在Header.astro
的<Navigation />
组件之前。给我看看代码!
-
为你的 Hamburger 组件添加以下样式:
编写你的第一个 script 标签
段落标题 编写你的第一个 script 标签你的页眉还不具有交互性,因为它无法响应用户输入,比如点击汉堡菜单来显示或隐藏导航链接菜单。
添加一个 <script>
标签提供客户端 JavaScript,以「监听」用户事件并做出相应的响应。
-
将以下
<script>
标签添加到index.astro
,就在结束的</body>
标签之前。 -
再次在各种尺寸下检查你的浏览器预览,并验证你是否在这个页面上拥有一个能够根据屏幕尺寸响应并对用户输入作出响应的正常运作的汉堡菜单。
导入一个 .js
文件
段落标题 导入一个 .js 文件你可以将你的 JavaScript 直接写在每个页面上,也可以将你的 <script>
标签的内容移动到项目中自己的 .js
文件中。
-
创建
src/scripts/menu.js
(你将不得不创建一个新的/scripts/
文件夹),并将你的 JavaScript 移动到其中。 -
用以下文件导入替换
index.astro
中的<script>
标签的内容: -
再次在较小的尺寸下检查你的浏览器预览,验证汉堡菜单是否仍然可以打开和关闭导航链接菜单。
-
在你的其他两个页面
about.astro
和blog.astro
中添加相同的带有导入的<script>
,并验证每个页面上是否有一个响应式、交互式的页眉。
你之前使用了一些 JavaScript 来构建你网站的部分内容:
- 动态定义页面标题和标题
- 在关于页面上映射技能列表
- 有条件地显示 HTML 元素
这些命令都在构建时执行,为你的网站创建静态 HTML,然后代码被「丢弃」。
<script>
标签中的 JavaScript 被发送到浏览器,并可根据用户的交互(如刷新页面或切换输入)运行。
测试你的知识
段落标题 测试你的知识-
Astro 何时运行在组件的前置数据中编写的任何 JavaScript?
-
可选地,Astro 可以发送 JavaScript 到浏览器以实现:
-
当编写或导入到组件的
<script>
标签中时,客户端 JavaScript 将被发送到用户的浏览器中: