通过创建旅游网站学习 GatsbyJS -1

在使用 GatsbyJS 创建两个系列（代理网站和博客网站）之后，我想了解有关这项出色技术的更多信息。

我在 udemy 上发现了John Smilga的这个精彩系列，这个庞大的系列是基于他的课程学习而来的。

我将创建一个关于印度令人惊叹的世界遗产地亨比的网站。

让我们前往终端并使用 hello-world 入门套件创建一个名为gatsbyTourism的新 gatsby 项目。

盖茨比开始

接下来，我们将切换到目录并执行 gatsby dev，以在本地主机上启动我们的项目。

盖茨比开发

它将启动我们的基本 hello-world 启动器，它将在http://localhost:8000/上显示 Hello World！

你好世界

我们将在 VSCode 中打开代码。在这里，我们可以看到浏览器中显示的Hello World!来自src->pages中的index.js。

页面文件夹

现在，我们在 pages 文件夹中创建的任何页面都将成为浏览器中的端点。我们不需要在这里实现任何类似 react-router 的东西。

我们将创建项目所需的四个页面——博客、联系信息、地点、404

页面

我们可以将它们制作成任何类型的 React 组件，但为了保持一致性，我们现在将它们制作成功能组件。

index.js和404.js是特殊页面，分别在home和error中显示。

我们将首先创建404.js，然后移动到任何不存在的页面。

错误页面

移动到不存在的页面将显示如下。

预览页面

点击预览自定义 404 页面，我们将得到错误页面。

错误页面

接下来我们将创建博客页面。

博客页面

现在，转到http://localhost:8000/blog我们将看到我们的博客页面

博客页面

我们将以类似的方式创建联系人和地点页面。

联系页面

地点页面

现在，我们来创建一个Navbar和Footer组件。我们将它们放在components文件夹中，该文件夹位于src文件夹中。

Navbar.js

Footer.js

现在，在任何页面上显示这两个组件的最常见 React 方法是导入它们并显示。我们将修改index.js如下。

显示导航栏和页脚

它会在主页上显示它们。

显示组件

现在，我们可以在其他每个页面上都这样做，但 Gatsby 提供了一个更简单的解决方案。我们将创建一个Layout组件，并在其中包含Navbar和Footer组件。我们还会将 children 属性传递给 Layout 组件。在页面中使用 Layout 组件后，您很快就会明白我们为什么要使用它。

因此，在components文件夹中创建一个Layout.js文件。

布局.js

接下来，让我们在index.js文件中使用它。你可能已经注意到，Layout组件包裹了所有其他内容，现在只剩下Hello World!了。这里面只有children，也就是传递给 Layout 组件的 props。

index.js

因此，我们的主页仍然是一样的。

同一主页

现在，我们可以在所有其他页面中使用可重复使用的组件布局，它们将显示导航栏和页脚组件。

blog.js

地点.js

contact.js

404.js

如果我们转到任何其他路径，我们将看到导航栏和页脚。

博客

本系列的第一部分到此结束。希望你学到了一些新东西。你可以在此链接找到相应的代码。

很快在第二部分再见。