用代码更改一组页面的样式

我们可能需要更改一组页面的样式，比如 ./docs/blog/ 目录下所有页面都采用特定的 Layout 和 CSS，但不希望逐一加在这些 .md 的 frontmatter 中。

这时，我们可以借助于 transformPageData (reference)

更改页面的 CSS 样式

1. 增加 blog-page-bg

增加文件 ./theme/styles/blog-page.css

.blog-page-bg{
    @apply bg-sky-50;
}

在index.ts 中引入blog-page.css

import './styles/custom.css'
import './styles/tailwind.css'
import './styles/blog-page.css'

此后，如果使用缺省主题，我们可以在 frontmatter 中定义

---
pageClass: blog-page-bg
---

2. 使用 transformpagedata

在 config.mts 中增加如下代码：

  transformPageData: (pageData, { siteConfig }) => {
    const col = {
      path: "blog/",
      pageClass: "blog-page-bg",
    }

    if(pageData.filePath.startsWith(col.path) &&
       !pageData.frontmatter.layout //use layout "doc" by default
    ){

      pageData.frontmatter.pageClass = col.pageClass
    }
  },