}</label></li> {/each} </ul> ``` 该代码将导入“notes”变量并循环遍历“notes”数组中的每个笔记。然后，它将为每个笔记创建一个复选框和标签。 ### 部署网站 最后，我们可以通过运行以下命令来部署我们的网站： ```bash npm run build ``` 该命令将构建我们的网站并生成一个“dist”目录，其中包含我们的静态网站文件。然后，我们可以将这些文件部署到我们的网络服务器上。 ### 结论 使用Vite-SSG创建笔记网站是一种快速、简单的过程。通过遵循本指南中的步骤，您可以轻松创建自己的笔记网站，以帮助您整理想法和提高工作效率。Vite-SSG的强大功能使其成为构建静态网站的理想选择。如果您正在寻找一种创建和部署笔记网站的方法，我强烈推荐您使用Vite-SSG。 用Vite-SSG打造你的笔记圣地：快速、高效，尽在指尖

今天，我们深入探讨如何使用Vite-SSG（又称Vite静态站点生成器）创建一个用于存储笔记的精简网站。Vite-SSG是一个强大的工具，可帮助我们快速高效地构建静态网站。准备好迎接一次激动人心的编码之旅！

设置Vite-SSG项目

第一步是设置我们的Vite-SSG项目。通过在终端中运行以下命令，我们可以轻松启动一个新的项目：

npm create vite@latest my-note-app --template ssg

该命令将创建一个新的Vite-SSG项目，其中包含用于构建静态网站所需的所有必要文件和配置。

创建笔记页面

接下来，我们需要创建笔记页面。让我们创建一个名为“notes.md”的文件，并将其放在“src/pages”目录中。在“notes.md”文件中，我们将使用Markdown编写我们的笔记。

例如，我们的“notes.md”文件可能如下所示：

# 我的笔记

- [ ] 完成任务 A
- [ ] 完成任务 B
- [ ] 完成任务 C

处理笔记数据

为了在我们的网站上动态显示笔记，我们需要处理笔记数据。Vite-SSG提供了一种简单的方法来做到这一点，称为“load”。

让我们创建一个名为“load.js”的文件，并将其放在“src/pages”目录中。在“load.js”文件中，我们将编写一个函数来加载我们的笔记数据：

export async function load() {
  const notes = await import.meta.glob('./*.md');
  return { notes };
}

该函数将导入与“./*.md”模式匹配的所有Markdown文件，并将它们存储在“notes”变量中。然后，我们将“notes”变量返回，以便在我们的“notes.md”页面中使用。

显示笔记

在我们的“notes.md”页面中，我们可以使用“load”函数来显示我们的笔记。我们将在“notes.md”文件中添加以下代码：

<script>
  import { notes } from './load.js';
</script>

# 我的笔记

<ul>
  {#each notes as note}
    <li><input type="checkbox" /><label>{note.frontmatter.title}</label></li>
  {/each}
</ul>

该代码将导入“notes”变量并循环遍历“notes”数组中的每个笔记。然后，它将为每个笔记创建一个复选框和标签。

部署网站

最后，我们可以通过运行以下命令来部署我们的网站：

npm run build

该命令将构建我们的网站并生成一个“dist”目录，其中包含我们的静态网站文件。然后，我们可以将这些文件部署到我们的网络服务器上。

结论

使用Vite-SSG创建笔记网站是一种快速、简单的过程。通过遵循本指南中的步骤，您可以轻松创建自己的笔记网站，以帮助您整理想法和提高工作效率。Vite-SSG的强大功能使其成为构建静态网站的理想选择。如果您正在寻找一种创建和部署笔记网站的方法，我强烈推荐您使用Vite-SSG。