iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

0

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

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

  1. 然後我希望把所有葉面共同都有的部分,放到一個叫做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

  1. 在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
  1. 接著,藉由觀察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>
     ...

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

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

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

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


上一篇
Day22. 部落格實作 (一)
下一篇
Day24. 部落格實作 (三)
系列文
用Gatsby.js做出一個簡單的部落格28

尚未有邦友留言

立即登入留言