边缘星云

返回

创作内容

制作你自己的内容

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.md
---
title: 'First Article' # （必填，最多60个字符）
description: 'I like writing articles.' # （必填，10到160个字符）
publishDate: '2024-11-30 00:08:00' # （必填，日期）
tags:
  - Markdown # （也可以写成下一行的格式）
heroImage: { src: './thumbnail.jpg', alt: 'an image targetting my article', color: '#B4C6DA' }
# thumbnail.jpg应与文章在同一文件夹中
draft: false # （设为true仅在开发环境中显示）
language: 'English' # （字符串，可自定义）
comment: true # （设为false将禁用评论，即使你在site-config中已启用）
---

## 这是一个标题

这是一个段落。
markdown

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

太复杂了？简单示例只需要这些：

src/content/blog/simple-article.md
---
title: Simple Article
description: Just another simple article.
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='en'>
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</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: 'My Page',
  description: 'My fav page'
}
const highlightColor = '#44AEF6' // 可选
---

<PageLayout {meta} {highlightColor}>

  <p>My page content, wrapped in a layout!</p>
</PageLayout>
astro

Markdown/MDX 页面#

虽然 .astro 页面具有一些灵活的功能，并且对 inline / module 脚本更友好，但 .md 和 .mdx 页面更适合内容导向的页面。

Astro 也会将 src/pages/ 中的任何 Markdown（.md）文件视为最终网站中的页面。如果你安装了 MDX 集成 ↗，它也会以同样方式处理 MDX（.mdx）文件。

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

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

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

title: 'Privacy Policy'
description: 'Effective date: 2024-11-26'
language: 'En' # 可选
back: '/terms/list' # 可选，默认为'/'
heroImage: { src: './thumbnail.jpg' } # 将用于社交图片
---

## Privacy Policy 1

This is the first section of the privacy policy.
markdown

HTML 页面#

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

在GitHub上编辑

文档