如何在 Astro 博客文章中使用 HTML 而不是 Markdown

Question

我有一个用 Astro 和 Tailwind 构建的网站，但我不想在博客中使用 Markdown，而是希望博客页面是常规的 .astro 文件。

或者，如果我将博客文章页面保留在 Markdown 中，如何设置它们的样式？

Answer 1

Markdown 支持使用 HTML 语法，因此您应该能够混合语法，甚至在

.md

文件中使用纯 HTML。

---
title: My Markdown Post
---

<p class="special">
This is styled differently via the `special` class
</p>

This is a regular Markdown paragraph.

如果您只是想将一致的样式应用于 Markdown 内容，您可以通过将样式添加到渲染 Markdown 文件的容器来实现。

<div class="content">
  <Content />
</div>

<style>
.content :global(h1) {
  color: red;
}
</style>

请注意使用

:global()

选择器来访问来自 Markdown 文档的元素并为其设置样式。