iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

WordPress再進化,用Next.js拆分前端,實現UI完全客製化及優化效能與SEO 系列

教你如何改善現有WordPress網站,作為CMS後端,在保留可視化編輯功能同時,將前端用Next.js拆分出來,前後端溝通使用GraphQL API,提升前端對整個網頁的掌握度,優化開發體驗、UI可客製化程度,以及網站效能及SEO分數。

將以建立個人部落格為主題,從WordPress架設到Next.js調校,研究其中的各種眉眉角角。

此系列將會涵蓋以下主題:
- WordPress架設
- Next.js
- GraphQL API
- TailwindCSS
- SEO優化
- 效能量測與優化
- Progressive Web App

參賽天數 14 天 | 共 14 篇文章 | 14 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 TailwindCSS 介紹,在 Next.js 專案安裝 TailwindCSS

上一篇我們成功安裝完 GraphQL client,並在首頁顯示出文章列表了。功能做完,接下來要來切版美化樣式了! 在這邊我想使用 TailwindCSS 這套...

2021-09-25 ‧ 由 EasonChang 分享
DAY 12

Day12 用 TailwindCSS 切版部落格首頁,顯示 WordPress 文章列表

上一篇我們成功在 Next.js 安裝 TailwindCSS,今天我們要實際來切版首頁,顯示文章列表! 切版目標 這個系列文章主要在呈現用 Next.js 當...

2021-09-26 ‧ 由 EasonChang 分享
DAY 13

Day13 繼續用 TailwindCSS 切版部落格文章內頁樣式

Day13!上一篇我們用 TailwindCSS 切版出了還不錯看的部落格首頁,顯示文章列表。今天讓我們乘勝追擊,繼續切版文章內頁樣式。 文章內頁就比較有趣了,...

2021-09-27 ‧ 由 EasonChang 分享
DAY 14

Day14 實作文章預覽功能

接下來我們會開始實作各個頁面的邏輯,每個頁面需要的資料不一樣,適用的渲染模式也不一樣,於是今天我們會先來介紹 Next.js 支援的各種渲染模式。 Next.j...

2021-09-28 ‧ 由 EasonChang 分享