将Bootstrap网站转换为快速的盖茨比网站的24个步骤

那里有很多文件夹。 但是,我们将专注于文件夹“ src”,在该文件夹中我们将进行更多工作。 在源代码下,有三个文件夹:

  • 组件:保存为此站点构建的所有自定义组件。
  • 图片:保存所有图片
  • 页面:此网站的所有页面都保存在这里。 Gatsby编译器将在此文件夹中查找JS文件,并将其编译为可访问的页面链接。

/pages/index.js页面中,您可以看到包装该页面内容的包装器组件

如果分析page-2.js,您将看到相同的组件将page2内容包装在其中。 请记住这一点,稍后我们将详细介绍。

大。 所以现在怎么办? 好了,现在开始的主要开发工作就是将Bootstrap网站转换为Gatsby支持的网站。 请按照以下步骤操作:

第2步

我从网站startbootstrap.com中选择了一个简单的Bootstrap主题。 将源代码下载为“即将推出”主题。

解压缩后的文件夹如下图所示:

步骤-3

现在,打开Gatsby站点文件夹(即Comesoon文件夹),并在/ src文件夹下与“ components ”文件夹创建一个名为“ dist ”的新文件夹。

步骤4

将以下文件夹从Bootstrap文件夹复制到Gatsby网站的/ src / dist文件夹:

  • 的CSS
  • img
  • mp4
  • 供应商

步骤-5(CSS集成)

让我们打开Bootstrap主题的index.html文件,看看那里集成了什么CSS: