iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

1

在之前,我們透過了Contentful提供的starter,快速的幫我們完成了"架好部落格"這件事。
然而卻讓我們有點知其然而不知其所以然。

因此,從版面開始,我們來慢慢地加入需要的功能。

要完成部落格的排版,我們有幾個方式:

  • 使用別人做好的Starter。
    優點: 速度快。
    缺點: 如果Starter預先抓取資料的方式跟你設計的方式不同,要花時間修改,比較麻煩,所以最好挑選功能跟方法相近的。

  • 自己刻元件跟樣式
    優點: 若是有客製化需求,較為方便。
    缺點: 審美智障硬傷。

  • 直接套現有的樣板來切出元件 (例如: Bootstrap官網提供的樣板 https://startbootstrap.com/themes/)

這邊,為了方便與著重在資料跟流程又不失成品的美感,所以我選擇第三種方式
對於客製化及自訂css樣式有興趣深入了解,可參考官方文件Introduction to Styling in Gatsby


If 你選擇使用Starter

  • 進到https://www.gatsbyjs.org/starters/?v=2,挑選一個自己喜歡的starter。
  • Starter分別會自帶一些預設的樣板以及外掛和套件,分別是對應不同的開發情境,如果不想要那麼多功能,可以在挑選喜歡的starter後,用git clone [starter 的儲存庫]的方式,來下載starter,再拿掉相關套件設定後,執行npm install
  • 若不需做上述修改,直接用gatsby new [starter url]來安裝,他便會幫你下載以及完成安裝相關套件的工作。

在你想創建專案的地方,執行Command Line:

gatsby new [專案名稱] [starter url]

實作從這裡開始

  1. 建立gatsby應用程式
gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-default

  1. 我挑選了這個樣板https://startbootstrap.com/themes/clean-blog/來使用,請先下載下來。

  1. 將樣板內的index.html中的body內的內容複製下來(除了script標籤),全部先貼上到專案的index.js的中回傳的的組件內容,並用<></>標籤包住。接著依序:
  • 關住沒關住的標籤(例如<hr>=><hr/>)
  • class改成className
  • style屬性改成大括號+js物件的寫法,並且樣式屬性改成駝峰式寫法,屬性值改成字串(例如style="background-image: url('img/home-bg.jpg')"=>style={{backgroundImage: "url('../img/home-bg.jpg')"}})

大概會長得像這樣:



const IndexPage = () => (
  <>
    <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    ...
    ...
    ...
      </div>
    </footer>
  </>
)

  1. 執行gatsby develop後,我們應該可以看到這樣的畫面:
    https://ithelp.ithome.com.tw/upload/images/20191028/20111629kteEePY1RR.png

初步我們已經讓畫面正常顯示了,但還缺乏樣式,這時候,回到terminal,我們需要gatsby-plugin-sass以及bootstrap,前者是因為要將這個樣板的scss檔做預處理,轉成css檔(當然我們也可以直接使用這個樣板本身編譯完成的css檔,但就會比較不容易修改,這種情況下就不需要安裝。)

安裝gatsby-plugin-sass
npm執行:

npm install --save node-sass gatsby-plugin-sass

然後在gatsby-config.js的plugins中增加 `gatsby-plugin-sass`
安裝bootstrap

npm install bootstrap

  1. 將樣板網頁startbootstrap-clean-blog-gh-pages中的scss資料夾,直接copy一份到我們專案目錄中的/src下。

  1. 利用react的import css的功能,將我們的bootstrap跟sass檔引入。
import React from "react"
import 'bootstrap/dist/css/bootstrap.css'
import '../scss/clean-blog.scss'

沒用到的import就先拿掉。
這樣,我們的頁面就獲得樣式了!!


  1. 完成!!

127.0.0.1:8000
https://ithelp.ithome.com.tw/upload/images/20191028/20111629qCmac5kIEG.png

根據同樣的方法處理,我們也把template專案中的post.html移植到我們page底下的一支名為post-template.js的檔案下,可以得到第二個頁面。
127.0.0.1:8000/post-template
https://ithelp.ithome.com.tw/upload/images/20191028/20111629dINsdp8ZaT.png

今天我們完成了把我們未來所需要的兩種頁面(首頁and文章內頁)變成react組件的形式。
初步樣貌有了,但我們接下來,會把它會細分成更小的組件,一來方便管理,二來方便我們根據資料來進行渲染。
如果不喜歡今天這個樣板,或想自己做的,其實只要做出功能相似的兩種組件(首頁and文章內頁),一樣可以完成之後的功能。


Day23,我們將進一步的整理我們的頁面跟組件,讓它變成我們之後可以直接使用的樣貌,而不單單是靜態的頁面。

/images/emoticon/emoticon37.gif

Github程式碼: https://github.com/linsheng24/gatsby-blog


上一篇
Day21. 部落格功能規劃
下一篇
Day23. 部落格實作 (二)
系列文
用Gatsby.js做出一個簡單的部落格28

尚未有邦友留言

立即登入留言