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-button、has-text-align-center 等 class，对应特定内文 block 或样式设定。

这部分 Next.js 前端就没有太大控制权，必须配合 WordPress 吐回来的 html，观察会出现哪些 html element 和 class，来给予样式。

幸好 Next.js 官方的 cms-wordpress 范例已经帮我们实作好这部分了，其中 post-body.module.css 和 index.css 这两支档案已经帮我们列出最常见会出现的 WordPress html element 和 class，并设定好还不错的样式了，我们可以基於这两支档案修改出理想内文样式。

实务上建议处理内文样式时，先在 WordPress 建立一篇范例文章，将你们网站会出现的所有内文元素都加到里面，包含各类 block、文字和图片的置左置中置右和各级大小、粗体斜体、连结、项目列表等等，之後再切版时就用 Next.js 抓取这篇文章实际 content 来核对，看样式是否都有涵盖到。