Astro Theme Pure

Back

撰写内容

创建您自己的内容

Astro 帮助您 编写并展示您的内容 ↗。您可以使用 Markdown/MDX 在 Astro 中直接撰写博客文章，或者从 headless 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: 在 Astro 中使用 CMS ↗

页面#

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

路由#

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> 内容。您可以通过将页面标记为 局部页面 (partial) 来按组件选择退出此行为。

为了避免在每个页面上重复相同的 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/ 目录中，并直接用作您网站上的页面。请注意，HTML 组件 ↗ 不支持某些核心 Astro 功能。

Edit on GitHub

DOCS