Florilegium

基于 VS Code 调试 Astro

7分钟阅读

好的，没问题！从 GitHub Fork 下来的代码在 VS Code 中进行初始化和调试，流程非常直接。下面是为你量身定制的分步指南，让你快速跑起来。

整体流程概览

  1. 环境准备：确保你的电脑上安装了 Node.js。
  2. 项目初始化：在终端（命令行）中安装项目依赖。
  3. 启动开发服务器：运行一个命令，让网站在你的本地电脑上跑起来。
  4. VS Code 配置：安装推荐的插件，获得最佳的编码体验。
  5. 开始开发/调试：修改代码并立即在浏览器中看到变化。

详细步骤

第 1 步：环境准备 (Node.js)

Astro 是基于 Node.js 的。你需要确保你的电脑上已经安装了它。

  1. 打开你的终端（在 VS Code 中可以通过 Terminal → New Terminal 打开）。
  2. 输入以下命令并回车： 
    node -v
  3. 如果你看到了一个版本号（比如 v18.18.0 或更高），那说明已经安装好了。如果没有，请先去 Node.js 官网 下载并安装 LTS 版本。

第 2 步：克隆代码并安装依赖

你已经 fork 了代码，现在需要把它下载到你的本地电脑上。

  1. 克隆你的仓库： 在 GitHub 上你 fork 后的仓库页面，点击绿色的 “Code” 按钮，复制 HTTPS 或 SSH链接。然后在你的终端里，进入一个你希望存放代码的文件夹，运行：

    # 把 URL 换成你自己的 fork 仓库链接
git clone https://github.com/your-username/astro-theme-pure.git

  2. 进入项目目录：

    cd astro-theme-pure

  3. 安装项目依赖： 这是最关键的一步。项目依赖了许多第三方的代码包（比如 Astro 框架本身），这些都定义在 package.json 文件里。你需要把它们全部下载下来。

    npm install

    （这个命令会读取 package.json 并把所有需要的包下载到项目下的 node_modules 文件夹里。这个过程可能需要一两分钟。）

    提示：如果你习惯使用 pnpm 或 yarn，也可以使用 pnpm install 或 yarn install。对于新项目，推荐使用 npm。

第 3 步：启动本地开发服务器

现在项目已经准备好了，让我们把它运行起来。

  1. 在项目根目录的终端中，运行：

    npm run dev

  2. 稍等片刻，你会看到类似下面的输出：

      🚀  astro  v3.5.3 started in 1.17s

  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose

  3. 大功告成！ 这说明你的网站已经在本地成功运行了。现在，打开你的浏览器（Chrome, Firefox 等），访问 http://localhost:4321，你就能看到 Astro Pure 主题的默认页面了。

    最棒的部分：这个开发服务器支持热重载 (Hot Reloading)。也就是说，你在 VS Code 中修改并保存任何代码，浏览器里的页面都会自动刷新，让你立刻看到效果，无需手动刷新。

第 4 步：配置 VS Code 以获得最佳体验

为了让 VS Code 完美支持 Astro 项目，强烈建议你安装官方推荐的插件。

  1. 在 VS Code 中打开项目文件夹 (File → Open Folder...，然后选择 astro-theme-pure 文件夹)。
  2. 点击左侧边栏的扩展 (Extensions) 图标（四个方块的图标）。
  3. 在搜索框中搜索并安装以下插件：

    • Astro (astro-build.astro-vscode)：【必装】 这个是 Astro 官方插件，提供了对 .astro 文件的语法高亮、代码提示、格式化等所有关键支持。

    • Prettier - Code Formatter (esbenp.prettier-vscode)：【强烈推荐】 用于自动格式化你的代码，保持代码风格统一整洁。

    • MDX (mdx-js.mdx): 【强烈推荐】 যেহেতু আমরা MDX নিয়ে কথা বলেছি, এটি .mdx ফাইলের জন্য সিনট্যাক্স হাইলাইটিং এবং ভাষার সমর্থন উন্নত করে। যেহেতু我们之前讨论了 MDX，这个插件能极大地改善 .mdx 文件的语法高亮和语言支持。

    便捷提示：这个主题项目可能已经在 .vscode/extensions.json 文件中为你推荐了这些插件。如果是这样，当你打开项目时，VS Code 的右下角可能会弹出一个提示，询问你是否要“安装推荐的扩展”。直接点击 “Install” 即可一键安装所有需要的插件。

第 5 步：开始你的开发工作流

现在，你的开发环境已经完全就绪。一个典型的开发流程是：

  1. 保持 npm run dev 终端运行：不要关闭那个正在运行开发服务器的终端窗口。你可以让它在后台运行。
  2. 在 VS Code 中修改文件：
    • 想修改文章内容？去 src/content/posts/ 目录下找到 .mdx 文件进行编辑。
    • 想修改页面布局或组件（比如导航栏）？去 src/layouts/ 或 src/components/ 目录下找到对应的 .astro 文件进行修改。
    • 想添加我们之前创建的加密组件？把 EncryptedContent.astro 文件放到 src/components/ 目录下，然后在 .mdx 文章中引用它。
  3. 保存文件 (Ctrl + S 或 Cmd + S)。
  4. 查看浏览器：浏览器中的页面会自动更新，显示你的修改结果。

总结一下你需要记住的命令

  • npm install：只需在项目初次设置或依赖更新时运行一次。
  • npm run dev：开发时一直运行着它。
  • npm run build：当你开发完成，准备把网站部署到服务器上时，运行这个命令。它会在 dist/ 文件夹下生成最终的静态网站文件。
  • npm run preview：在本地预览 build 之后生成的最终网站效果。

现在，你已经完全准备好在 VS Code 中对这个 Astro 主题进行任何你想要的修改了！

关系图谱