iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

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

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

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

文章內頁就比較有趣了,因為我們是用 WPGraphQL 的 GraphQL API 抓取文章內容下來,文章內容要從 post > content 欄位抓下來,抓取下來格式會是 String,裡面會包含一大坨內文 HTML string,內容範例如下(擷取自 cms-wordpress demo site):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit hoc ultimum bonorum, quod nunc a me defenditur; <a href="https://nextjs.org">Vitae autem degendae</a> ratio maxime quidem illis placuit quieta. Duo Reges: constructio interrete. Nam quid possumus facere melius?</p>
<div class="wp-block-buttons">
<div class="wp-block-button"><a class="wp-block-button__link">This is a button block</a></div>
</div>
<p>Left aligned paragraph. <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid dubitas igitur mutare principia naturae?</strong> Ita multo sanguine profuso in laetitia et in victoria est mortuus. Omnia contraria, quos etiam insanos esse vultis. <s>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam.</s> Quis non odit sordidos, vanos, leves, futtiles? Quasi ego id curem, quid ille aiat aut neget. </p>
<p class="has-text-align-center">Center aligned parapgrah. Duo enim genera quae erant, fe...

依照後台編輯器用到的區塊和設定的格式,內文會出現各式各樣 html 像是 h2、h3、p、div、img 等等,並且也包含 WordPress 內建的 wp-block-buttonhas-text-align-center 等 class,對應特定內文 block 或樣式設定。

這部分 Next.js 前端就沒有太大控制權,必須配合 WordPress 吐回來的 html,觀察會出現哪些 html element 和 class,來給予樣式。

幸好 Next.js 官方的 cms-wordpress 範例已經幫我們實作好這部分了,其中 post-body.module.cssindex.css 這兩支檔案已經幫我們列出最常見會出現的 WordPress html element 和 class,並設定好還不錯的樣式了,我們可以基於這兩支檔案修改出理想內文樣式。

實務上建議處理內文樣式時,先在 WordPress 建立一篇範例文章,將你們網站會出現的所有內文元素都加到裡面,包含各類 block、文字和圖片的置左置中置右和各級大小、粗體斜體、連結、項目列表等等,之後再切版時就用 Next.js 抓取這篇文章實際 content 來核對,看樣式是否都有涵蓋到。


上一篇
Day12 用 TailwindCSS 切版部落格首頁,顯示 WordPress 文章列表
下一篇
Day14 實作文章預覽功能
系列文
WordPress再進化,用Next.js拆分前端,實現UI完全客製化及優化效能與SEO14

尚未有邦友留言

立即登入留言