Umbraco 和 Astro

Umbraco CMS 是一个开源的 ASP.NET Core CMS。默认情况下，Umbraco 使用 Razor 页面作为其前端，但也可以用作无头 CMS。

与 Astro 集成

在本节中，你将使用 Umbraco 的原生内容交付 API 为你的 Astro 项目提供内容。

先决条件

要开始，你需要具备以下条件

一个 Astro 项目 - 如果你还没有 Astro 项目，我们的安装指南将帮助你快速启动并运行。
一个 Umbraco (v12+) 项目 - 如果你还没有 Umbraco 项目，请参阅此安装指南。

设置内容交付 API

要启用内容交付 API，请更新你的 Umbraco 项目的 appsettings.json 文件

{
  "Umbraco": {
    "CMS": {
      "DeliveryApi": {
        "Enabled": true,
        "PublicAccess": true
      }
    }
  }
}

你可以根据需要配置其他选项，例如公共访问、API 密钥、允许的内容类型、成员授权等。有关更多信息，请参阅 Umbraco 内容交付 API 文档。

获取数据

使用 fetch() 调用内容交付 API 来访问你的内容，并使其对你的 Astro 组件可用。

以下示例显示了一个获取的文章列表，包括文章日期和内容等属性。

---
const res = await fetch('https:///umbraco/delivery/api/v2/content?filter=contentType:article');
const articles = await res.json();
---
<h1>Astro + Umbraco 🚀</h1>
{
  articles.items.map((article) => (
      <h1>{article.name}</h1>
      <p>{article.properties.articleDate}</p>
      <div set:html={article.properties.content?.markup}></div>
  ))
}

阅读更多关于在 Astro 中获取数据的信息。

使用 Umbraco 和 Astro 构建博客

先决条件

一个 Astro 项目 - 如果你还没有 Astro 项目，我们的安装指南将帮助你快速启动并运行。
一个启用了内容交付 API 的 Umbraco 项目 (v12+) - 按照此安装指南创建一个新项目。

在 Umbraco 中创建博客文章

在 Umbraco 后台，为名为“Article”的简单博客文章创建一个文档类型。

使用以下属性配置你的“Article”文档类型
- 标题 (数据类型: 文本字符串)
- 文章日期 (数据类型: 日期选择器)
- 内容 (数据类型: 富文本编辑器)
在“Article”文档类型上，将“允许作为根”切换为 true。
在 Umbraco 后台的“内容”部分，创建并发布你的第一篇博客文章。根据需要重复此过程。

有关更多信息，请观看有关创建文档类型的视频指南。

在 Astro 中显示博客文章列表

创建一个 src/layouts/ 文件夹，然后添加一个新文件 Layout.astro，其中包含以下代码

---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Blog with Astro and Umbraco</title>
</head>
<body>
    <main>
        <slot />
    </main>
</body>
</html>

你的项目现在应包含以下文件

目录src/
- 目录layouts/
  - Layout.astro
- 目录pages/
  - index.astro

要创建博客文章列表，首先使用 fetch 调用内容交付 API 的 content 端点，并按“article”的 contentType进行筛选。文章对象将包含在 CMS 中设置的属性和内容。然后，你可以遍历这些文章，并显示每篇文章的标题及其链接。

将 index.astro 的默认内容替换为以下代码

---
import Layout from '../layouts/Layout.astro';
const res = await fetch('https:///umbraco/delivery/api/v2/content?filter=contentType:article');
const articles = await res.json();
---
<Layout>
  <h2>Blog Articles</h2>
  {
        articles.items.map((article: any) => (
            <div>
                <h3>{article.properties.title}</h3>
                <p>{article.properties.articleDate}</p>
                <a href={article.route.path}>Read more</a>
            </div>
        ))
    }
</Layout>

生成单篇博客文章

在 /pages/ 目录的根目录下创建文件 [...slug].astro。该文件将用于动态生成单篇博客页面。

请注意，用于生成页面 URL 路径的 params 属性包含从 API 获取的 article.route.path。同样，props 属性必须包含整个 article 对象本身，以便你可以访问 CMS 条目中的所有信息。

将以下代码添加到 [...slug].astro 中，这将创建你的单篇博客文章页面

---
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
    let data = await fetch("https:///umbraco/delivery/api/v2/content?filter=contentType:article");
    let articles = await data.json();

    return articles.items.map((article: any) => ({
        params: { slug: article.route.path },
        props: { article: article },
    }));
}

const { article } = Astro.props;
---

<Layout>
  <h1>{article.properties.title}</h1>
  <p>{article.properties.articleDate}</p>
  <div set:html={article.properties.content?.markup}></div>
</Layout>

你的项目现在应包含以下文件

目录src/
- 目录layouts/
  - Layout.astro
- 目录pages/
  - index.astro
  - […slug].astro

在开发服务器运行的情况下，你现在应该可以在浏览器中预览 Astro 项目中由 Umbraco 创建的内容。恭喜！🚀

发布你的站点

要部署你的站点，请访问我们的部署指南，并按照你首选的托管提供商的说明进行操作。

本地开发、HTTPS 和自签名 SSL 证书

如果你在本地使用 Umbraco HTTPS 端点，任何 fetch 查询都将导致 fetch failed 并返回错误码 DEPTH_ZERO_SELF_SIGNED_CERT。这是因为 Node（Astro 构建于其上）默认不接受自签名证书。为避免此问题，请在本地开发时使用 Umbraco HTTP 端点。

或者，你可以在 env.development 文件中设置 NODE_TLS_REJECT_UNAUTHORIZED=0 并更新 astro.config.js，如下所示

NODE_TLS_REJECT_UNAUTHORIZED=0

import { defineConfig } from 'astro/config';
import { loadEnv } from "vite";

const { NODE_TLS_REJECT_UNAUTHORIZED } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
process.env.NODE_TLS_REJECT_UNAUTHORIZED = NODE_TLS_REJECT_UNAUTHORIZED;
// https://astro.js.cn/config
export default defineConfig({});