Jerry's Blog

Back

编写内容

创建你自己的内容

Astro 帮助你 编写和呈现内容 ↗。你可以直接在 Astro 中使用 Markdown/MDX 编写博客文章，或者从无头 CMS 获取内容。Astro 让你围绕内容构建站点：你可以为页面添加布局、创建文章索引、设置 RSS 订阅源以便读者订阅。

编写内容#

在 Astro 中，你可以通过多种方式编写内容：

对于本主题，默认支持 .md 和 .mdx 文件。

Markdown 编写#

Markdown 是一种方便的语法，用于编写带有基本格式和常见元素（如标题、列表和图像）的富文本。Astro 对项目中的 Markdown 文件有内置支持。

在你的代码编辑器中创建并编写新的 .md 文件，或者导入用你喜欢的 Markdown 编辑器编写的现有文件。一些在线 Markdown 编辑器如 StackEdit ↗ 和 Dillinger ↗ 甚至允许你编辑并与存储在 GitHub 上的 Astro 仓库同步。

这里提供一个 在 Astro 中编写 Markdown 内容 ↗ 的示例：

如果你有很多资源，可以为文章创建一个文件夹，例如 src/content/blog/first-article/，并将所有资源放在里面。当然，你的内容文件应重命名为 index.md 或 index.mdx 并放在此文件夹中。

觉得太复杂？简单的例子只需这些：

src/content/blog/simple-article.md
---
title: 简单文章
description: 只是一篇简单的文章。
publishDate: 2024-07-26
---

我喜欢写简单的文章。
markdown

MDX 编写#

这允许你在文本内容中包含 UI 元素，例如横幅或交互式轮播图。

直接在代码编辑器中编写和编辑 .mdx 文件，与项目文件放在一起。MDX 文件是 Astro 中 支持的页面文件类型 ↗，也可以用作 内容集合条目 ↗。

关于集成组件，请查看 用户组件 和 高级组件。

连接 CMS#

参见 Astro：将 CMS 与 Astro 结合使用 ↗

页面#

Astro 使用 基于文件的路由 来 生成构建 URL ↗，依据的是项目 src/pages/ 目录的文件布局。

路由#

src/pages/ 目录中的 .astro 页面组件 ↗ 以及 Markdown 和 MDX 文件（.md、.mdx）会自动成为你网站上的页面。每个页面的路由对应其在 src/pages/ 目录中的路径和文件名。

# 示例：静态路由
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1
diff

Astro 页面#

Astro 页面使用 .astro 文件扩展名，并支持与 Astro 组件 ↗ 相同的功能。

src/pages/index.astro
---
---

<html lang='zh-CN'>
  <head>
    <title>我的主页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
  </body>
</html>
astro

页面必须生成完整的 HTML 文档。如果未显式包含，Astro 默认会为位于 src/pages/ 内的任何 .astro 组件添加必要的 <!DOCTYPE html> 声明和 <head> 内容。你可以通过将组件标记为 局部页面 来在每个组件上选择退出此行为。

为了避免在每个页面上重复相同的 HTML 元素，你可以将常见的 <head> 和 <body> 元素移到你自己的 布局组件 中。你可以根据需要使用的布局组件数量不限。

在本主题中，幸运的是你可以使用 BaseLayout.astro 作为布局组件。

src/pages/mypage.astro
---
import PageLayout from '@/layouts/BaseLayout.astro'

const meta = {
  title: '我的页面',
  description: '我最喜欢的页面'
}
const highlightColor = '#44AEF6' // 可选
---

<PageLayout {meta} {highlightColor}>
  <p>我的页面内容，被布局包裹！</p>
</PageLayout>
astro

Markdown/MDX 页面#

虽然 .astro 页面具有一些灵活的功能，并且对内联/模块脚本友好，但 .md 和 .mdx 页面更适合内容聚焦的页面。

Astro 也会将 src/pages/ 内的任何 Markdown (.md) 文件视为最终网站中的页面。如果你已 安装 MDX 集成 ↗，它也会同样对待 MDX (.mdx) 文件。

Markdown 文件可以使用特殊的 layout frontmatter 属性来指定一个 布局组件 ↗，该组件会将其 Markdown 内容包裹在完整的 <html>...</html> 页面文档中。

本主题为 .md 和 .mdx 文件提供了良好的布局：

src/pages/terms/privacy.md
---
layout: '@/layouts/IndividualPage.astro'

title: '隐私政策'
description: '生效日期：2024-11-26'
language: '中文' # 可选
back: '/terms/list' # 可选，默认为 '/'
heroImage: { src: './thumbnail.jpg' } # 将用于社交媒体图片
---

## 隐私政策 1

这是隐私政策的第一部分。
markdown

HTML 页面#

扩展名为 .html 的文件可以放在 src/pages/ 目录中，并直接用作你网站上的页面。请注意，一些关键的 Astro 功能在 HTML 组件 ↗ 中不受支持。