Let's Building a Frontend Portfolio using Astro.js

製作個人前端作品集 - 實作篇

@ Astro

创立专案

本篇文章将会以自己的作品集网站为范例，使用 Astro.js 作为静态生产器，有效率的管理与生成网站中的所有页面，借助这个机会来展示这个框架好用与强大的地方。开始之前你可以先阅读上一篇文章：制作个人前端作品集 - 准备篇 提前为整个作品集规划，或是设置一个合适的开发环境：为 Astro 设置 ESLint 与 Prettier。

首先在终端上使用 Astro 创建工具让它初始化决定你要的设置：

Terminal window
# 创建 Astro 专案
npm create astro@latest


# 询问是否要安装 create-astro 套件，输入 y 确认
Need to install the following packages:
 create-astro@3.1.7
Ok to proceed? (y)


# 你想在哪里创建新专案？ （./专案名称）
Where should we create your new project?
./dangerous-debris


# 你想要怎么开始你的新专案？ （引入范例档案 / 引入部落格模板 / 空白）
# 选择空白
How would you like to start your new project?
- Include sample files (recommended)
- Use blog template
> Empty


# 安装依赖档案？ （是/否）
# 选择是
Install dependencies? (recommended)
- Yes - No


# 打算使用 TypeScript 吗？
# 选择是
Do you plan to write TypeScript?
- Yes - No


# TypeScript 模式？ （严谨/最严谨/松散）
# 选择最严谨
How strict should TypeScript be?
- Strict (recommended)
> Strictest
- Relaxed


# 初始化一个 Git 仓库吗？ （可选）
# 选择是
Initialize a new git repository? (optional)
- Yes - No

待专案都设置创建好之后可以 cd ./专案名称 进入专案，使用 npm run dev 启动开发服务器，并使用 ctrl+c 来关闭。

Astro 基础

在撰写网站之前使用 Astro 还是有一些知识点需要补齐，并不会太复杂，这里我会简单的介绍一下：

专案架构🔗

一个空白的页面，有一个 Astro 的标题

现在启动开发服务器会发现整个画面除了一個「Astro」的标题之外什么都没有，这是因为前面选择的是空白的专案。专案里面有不同的预设产生的档案与资料夹，有着它们各自的用途：

  • src/*： 专案原始码
  • public/*： 未处理资源（与 Vite public🔗 一模一样，静态资源可以放置于此）
  • package.json：记录专案套件资讯
  • astro.config.mjs：Astro 设置档
  • tsconfig.json：TypeScript 设置档

路由🔗

在 Astro.js 中创建页面非常的简单，它是基于档案的路由，可以直接撰写 .astro、.html 、 .mdx 或 .md 档案放置到资料夹中，生成时就会依照档案的名称与位置产生出对应的静态页面，举例来说：

  • 创建一个新档案：src/pages/foobar.astro，等于创建一个新页面在 /foobar 底下。
  • 创建一个新档案到 hello 资料夹中： src/pages/hello/world.astro，等于创建一个新页面在 /hello/world 底下

元件脚本与模板

---
// 元件脚本 Component Script (JavaScript / TypeScript)
---


<!-- 元件模板 Component Template (HTML + JS Expressions) -->

.astro 文件的开头都会有三杠栅栏，称为「组件脚本 Component Script」，当该 Astro 组件创建时就会执行栅栏里面的内容，例如可以在里面：

  • 引入其他 Astro 组件
  • 引入其他框架，像是 React
  • 引入其他资料，像是 JSON
  • 获取第三方的资料
  • 创建变量用于模板中

而在栅栏底下的区块就是「组件模板 Component Template」，可以撰写 HTML 于此。而要把组件脚本的数据使用在组件模板上你可以使用类似于 JSX 的语法，举例来说可以将一个数组使用 map 方法转换成一个 HTML 列表：

---
const items = ['小华', '小明', '小美'];
---


<ul>
  {items.map((item) => <li>{item}</li>)}
</ul>

教学到这里相信你会发现要做的就是撰写基本的 HTML 与 JavaScript，你已经掌握 .astro 文件的威力了！

制作页面

一个网站通常会有许多重复的片段，使用先前学到的方法可以把网页拆分成一块一块的组件文件，要使用的时候再引入就好，这里我创建了用于网站整体的 Base🔗 组件，里面分别再引用了 Navbar🔗 与 Footer🔗 组件，以及还有页面开头的 Banner🔗 组件。

---
import Base from '@/layouts/Base.astro';
import Banner from '@/components/Banner.astro';
---


<Base title="首页">
  <main class="min-h-auto md:min-h-screen">
  <Banner>
  <h1 class="px-4 font-semibold text-3xl md:text-6xl">
  哈啰，我是黄宗玮，<br />
  我撰写超过 50 篇<a class="highlight" href="https://www.webdong.dev/post/">技术文章</a>纪录与传达知识，帮助 800
  位以上的同学消除他们的疑惑。可以观赏<a class="highlight" href="/work">作品集</a>了解我是如何解决真实世界问题的。
  </h1>
  </Banner>


    <section class="mb-16">
      <h2 class="sr-only">最新作品</h2>
      <div style="background-color: black;" class="mx-4 flex aspect-video justify-center rounded-lg">
      <video class="h-full w-full" width="720" height="540" autoplay loop muted playsinline poster="">
      <source src="/assets/global/hero.webm" type="video/webm" />
      <source src="/assets/global/hero.mp4" type="video/mp4" />
      </video>
      </div>
    </section>
  </main>
</Base>

这样一个首页就制作出来了，是不是开发环境很简洁干净呢？接着你可以运用相同的技巧去制作关于🔗与作品🔗甚至是 404 页面🔗，道理是一模一样的！

一个空白的页面，有一个 Astro 的标题