title | description | type | stub | service | i18nReady |
---|---|---|---|---|---|
Umbraco & Astro |
使用 Umbraco 作为 CMS 向你的 Astro 项目添加内容 |
cms |
false |
Umbraco |
true |
import { FileTree, Steps } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro';
Umbraco CMS 是一个开源的 ASP.NET Core CMS。默认情况下,Umbraco 使用 Razor 页面作为其前端,但也可以作为无头 CMS 使用。
在本节中,你将使用 Umbraco 的原生 Content Delivery API 为你的 Astro 项目提供内容。
要开始,你需要具备以下条件:
- 一个 Astro 项目 - 如果你还没有 Astro 项目,我们的 安装指南 将帮助你快速启动和运行。
- 一个 Umbraco (v12+)项目 - 如果你还没有 Umbraco 项目,请参阅这个 安装指南。
要启用 Content Delivery API,请更新你的 Umbraco 项目的 appsettings.json
文件:
{
"Umbraco": {
"CMS": {
"DeliveryApi": {
"Enabled": true,
"PublicAccess": true
}
}
}
}
你可以根据需要配置额外的选项,如公共访问、API 密钥、允许的内容类型、会员授权等。更多信息请参见 Umbraco Content Delivery API 文档。
使用 fetch()
调用 Content Delivery API 来访问你的内容,并使其可用于你的 Astro 组件。
下面的示例展示了获取的文章列表,包括文章日期和内容等属性。
---
const res = await fetch('http://localhost/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 中获取数据 的信息。
-
一个 Astro 项目 - 如果你还没有 Astro 项目,我们的 安装指南 将帮助你快速启动和运行。
-
一个启用了 Content Delivery API 的 Umbraco 项目(v12+) - 遵循这个 安装指南 来创建一个新项目。
从 Umbraco 后台 创建一个简单博客文章的文档类型,命名为 'Article'。
1. 为你的 'Article' 文档类型配置以下属性: - Title (DataType: Textstring)
- Article Date (DataType: Date Picker)
- Content (DataType: Richtext Editor)
-
将 'Article' 文档类型的 "Allow as root" 选项设置为
true
。 -
在 Umbraco 后台的 "Content" 部分,创建并发布你的第一篇博客文章。你可以重复这个过程多次。
想了解更多信息,请观看创建文档类型的视频指南。
创建一个 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
调用 Content Delivery API 的 content
端点,并按 'article' 的 contentType 进行筛选。文章对象将包括在 CMS 中设置的属性和内容。然后,你可以遍历这些文章,并显示每个标题及其文章的链接。
将 index.astro
的默认内容替换为以下代码:
---
import Layout from '../layouts/Layout.astro';
const res = await fetch('http://localhost/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("http://localhost/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 创建的内容。恭喜你!🚀
要部署你的网站,请访问我们的部署指南并按照你选择的托管提供商的指示进行操作。
如果你在本地使用 Umbraco 的 HTTPS 端点,任何 fetch
查询都会因为代码 DEPTH_ZERO_SELF_SIGNED_CERT
而导致 fetch failed
。这是因为 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.build/config
export default defineConfig({});