今天的動作比較瑣碎，但還是簡單說一下實作的過程，如果內容不夠清楚，也可以再本文的結尾直接把我推上去的git給抓下來繼續Day24以後的內容。

1. 首先，我的部落格不需要navblar，所以把index跟post-template內的nav標籤整個拿掉。

2. 然後我希望把所有葉面共同都有的部分，放到一個叫做Layout的元件內，這樣不管是哪一個頁面，都會顯示出來，像這樣:

<Layout>
  ...頁面的內容
  ...頁面的內容
<Layout>

不過現在看起來，只有footer是首頁跟文章頁面共通的，所以我們把index跟post-template內的footer標籤整個移到src/components/layout.js內，並刪掉一些我們不需要的部分，並且將原本在index中引入的css跟scss移到這裡，最後變成這樣:
src/components/layout.js

import React from "react"
import 'bootstrap/dist/css/bootstrap.css'
import '../scss/clean-blog.scss'

const Layout = (props) => (
  <>
    {props.children}  //頁面的內容會被塞到這裡
    <footer>
      <div className="container">
        <div className="row">
          <div className="col-lg-8 col-md-10 mx-auto">
            <p className="copyright text-muted">Copyright © Your Website 2019</p>
          </div>
        </div>
      </div>
    </footer>
  </>
)
export default Layout

3. 在index和post-template中，引入Layout，並且把之前的<>...</>給替換成<Layout>...</Layout>。
   src/pages/index.js

import React from "react"
import Layout from "../components/layout"

const IndexPage = () => (
  <Layout>
    <header className="masthead" style={{backgroundImage: "url('../img/home-bg.jpg')"}}>
      ...
    </header>
    
    <div className="container">
      ...
    </div>

    <hr/>
  </Layout>
)
export default IndexPage

以及
src/pages/post-template.js

import React from "react"
import Layout from "../components/layout"

const PostPage = () => (
  <Layout>
    <header className="masthead" style={{backgroundImage: "url('img/post-bg.jpg')"}}>
     ...
    </header>
    
    <article>
     ...
    </article>

    <hr/>

  </Layout>
)
export default PostPage

4. 接著，藉由觀察index.js中間的程式碼的部分，我們可以發現一組div.post-preview的標籤，就是一篇貼文。

<div className="row">
        <div className="col-lg-8 col-md-10 mx-auto">
          <div className="post-preview">
          ...第一篇文章
          </div>
          <hr/>
          <div className="post-preview">
          ...第二篇文章
          </div>
          <hr/>
          <div className="post-preview">
          ...第三篇文章
          </div>
          <hr/>
          <div className="post-preview">
          ...第四篇文章
          </div>
          <hr/>
          <div className="clearfix">
            <a className="btn btn-primary float-right" href="#">Older Posts →</a>
          </div>

因此，我決定把現面這樣切成一個組件:

<div className="post-preview">
...第一篇文章
</div>
<hr/>

因此，在src/components中創建一支新檔案post-preview.js，直接把剛剛的一組文章的標籤給貼上去。

src/components/post-preview.js

import React from "react"

const PostPreview = (props) => (
  <>
    <div className="post-preview">
      <a href="post.html">
          <h2 className="post-title">
          Man must explore, and this is exploration at its greatest
          </h2>
          <h3 className="post-subtitle">
          Problems look mighty small from 150 miles up
          </h3>
      </a>
      <p className="post-meta">Posted by
          <a href="#">Start Bootstrap</a>
          on September 24, 2019</p>
    </div>
    <hr/>
  </>
)
export default PostPreview

並且在index中引入PostPreview並替代原本的文章，如下:
src/pages/index.js

<div className="row">
   <div className="col-lg-8 col-md-10 mx-auto">
     <PostPreview/>
     <PostPreview/>
     <PostPreview/>
     <PostPreview/>
     <div className="clearfix">
        <a className="btn btn-primary float-right" href="#">Older Posts →</a>
     </div>
     ...

5. 最後，因為post-template.js不是一個直接要讓使用者使用的頁面，而是我們用來產生文章頁面的樣板，所以我們可以把它給移動到src/components下(注意路徑相對路徑是否需要修改)。

如此一來，我們就完成了我們所需要的元件和頁面的前置工作了!
雖然現在都是假資料，但之後都會被我們替換成真正的文章資料了。至於目前會在console中顯示很多warn ESLintError，是一些關於語法檢查的問題(例如a標籤的href不能是#，或是有component引入卻沒有使用到之類的)，但都不是程式上的問題，照著它說的一個一個修改就能全部用好了。

如果上述步驟有問題，可以直接到github上抓下來使用。

接下來，我們將回到Contentful來設定我們資料的content model，以及開始一些Gatsby和Contentful串接上的相關設定。