创建一个新的解耦的Orchard Core CMS网站

引言
本文将介绍创建一个功能齐全、解耦的CMS网站的过程，该网站允许您编辑博客帖子并呈现它们。
解耦是一种开发模型，其中站点的前端和后端(管理)托管在同一个Web应用程序中，但只有后端由CMS驱动。然后，开发人员可以编写他们自己的ASP.NET Razor页面或控制器来完全控制网站生成的内容，同时仍然使用CMS(在本例中是Orchard Core)来创作内容。

先决条件。
您应该：
能够创建新的ASP.NET核心项目。
熟悉C#和HTML。
安装了.NET SDK。
具有Visual Studio.NET或Visual Studio代码

建立一个项目
创建Orchard Core CMS Web应用程序。
方式1-通过Visual Studio.NET。
如果要使用Visual Studio.NET，请遵循此选项。
打开Visual Studio.NET。
新建ASP.NET Core Web应用程序项目。

输入项目名称和位置。在本教程中，我们将使用“OrchardSite”作为名称。然后单击创建。

选择Web应用程序模板，将其他所有内容保留为默认设置，然后单击Create。

方式2-从命令行。
从项目所在的文件夹。
键入 dotnet new webapp-o OrchardSite，其中“OrchardSite”是要创建的项目的名称。
这将使用Razor Pages创建一个Web应用程序。

测试站点

启动项目，项目这时已经可以正常启动。

将Orchard Core CMS 添加到站点

双击或编辑.csproj文件。
修改<PropertyGroup>部分，如下所示：

<PropertyGroup>
  <TargetFramework>net5.0</TargetFramework>
  <PreserveCompilationReferences>true</PreserveCompilationReferences>
</PropertyGroup>

这将允许重新加载Razor页面，而无需重新编译它们。

添加一个 <ItemGroup>片段:

<ItemGroup>
  <PackageReference Include="OrchardCore.Application.Cms.Core.Targets" Version="1.0.0" />
</ItemGroup>

这将从Orchard Core CMS 添加资源包

修改  Startup.cs 文件 ConfigureServices 方法:

public void ConfigureServices(IServiceCollection services)
        {
            //services.AddRazorPages();
            services.AddOrchardCms();
        }

AddRazorPages不能作为服务直接调用。AddOrchardCms()已在内部调用它。

• 修改 Startup.cs 文件 Configure方法
• 移除 app.UseStaticFiles()后面的所有方法，并增加app.UseOrchardCore(); like this:

app.UseHttpsRedirection();
            app.UseStaticFiles();

            //app.UseRouting();

            //app.UseAuthorization();

            //app.UseEndpoints(endpoints =>
            //{
            //    endpoints.MapRazorPages();
            //});
            app.UseOrchardCore();

启动应用程序后，将显示设置界面：

建立一个新站点

设置屏幕需要一些信息，以便创建一个新数据库来存储内容和用户帐户。

输入站点的名称。在本例中，我们将使用“my site”。
在配方下拉菜单中，选择可用于解耦和无头模式的空白站点。
如果检测到的时区不正确，请选择一个时区。默认情况下，所有日期和时间都将相对于此时区输入或呈现。
选择数据库服务器。最简单的开始方式是选择Sqlite，因为它不需要您执行任何其他步骤。
在超级用户部分，输入一些帐户信息或您的选择。在本例中，我们将使用admin作为用户名。
单击Finish Setup(完成设置)。
几秒钟后，应该会显示与原始模板相同的站点，并显示一条“欢迎”消息。
如果选择Sqlite，应用程序的所有状态现在都存储在项目根文件夹内名为App_Data的文件夹中。
如果出现问题，请尝试删除App_Data文件夹(如果存在)，然后重新阅读此部分。

创建博客帖子

本部分介绍Orchard Core CMS的基本内容管理概念，如内容类型和内容项。

内容建模

在Orchard Core CMS中，大多数被管理的内容被称为内容项。内容项目是版本化文档，如页面、文章、博客帖子、新闻项目或您需要编辑的任何内容。这些文档中的每一个都基于一个内容类型，该内容类型定义了它由哪些属性组成。例如，任何文章都会有一个标题和一些文本。博客帖子也可能有标签。Orchard Core CMS允许您以您想要的方式对内容类型建模，这称为内容建模。

对于开发者来说，内容类型类似于类，其中内容项可以被视为内容类型的实例。

创建博客帖子内容类型

Orchard预配置了一组可组合的数据管理元素，称为内容部分，可用于创建像乐高这样的自定义类型。例如，标题部分将提供一个很好的编辑器来输入内容项的标题，并将其设置为默认显示在屏幕上的文本。另一个重要的内容部分是Markdown正文部分，它提供了一种将Markdown存储和呈现为内容项的主要文本的方法。这对于博客帖子也很有用。

对于开发者来说，内容部分类似于部分类，然后聚合每个内容部分以定义内容类型。内容字段类似于添加到内容类型的自定义特性。

让我们创建一个名为blog Post的新内容类型，并向其中添加一些必要的内容部分：
从运行的网站打开url/admin。
在登录屏幕中，输入安装过程中使用的用户凭据。
您将看到该站点的管理端。
在左侧菜单中，选择Content Definition，然后选择Content Types。
单击右上角的创建新类型。
在显示名称中输入Blog Post。技术名称将自动生成，值为blogpost，如下所示：

点击 Create

将显示内容部分列表。选择title和MarkDown，然后单击保存。

在下面的屏幕中，滚动到页面底部，并按如下方式重新排序部件：

然后点击保存。

您可以注意到每个内容部件前面都有一个Edit按钮。这让我们可以定义一些设置，这些设置可能仅适用于此类型的每种类型。

在MarkdownBody部件上，单击编辑。
选择Wysiwyg （所见即所得）编辑器作为要使用的编辑器类型，然后单击保存：

博客帖子内容类型即可使用。

创建一个博客帖子

在左侧菜单中，选择New，然后单击blog Post以显示新创建的blogpost内容类型的编辑器。

用一些内容填写标题和MarkdownBody表单元素，然后单击Publish。对于这个例子，我们将使用This is a new day和一些Lorem Ipsum文本。
在菜单中，单击Content(内容)>Content Items(内容项)以显示所有可用的内容项。

在网站上呈现内容。
下一步是创建一个自定义的Razor Page，它将显示任何带有自定义url的博客帖子。

创建自定义Razor页面。
在编辑器的Pages文件夹中，创建一个名为BlogPost.cshtml的新文件，其中包含以下内容：

@page "/blogpost/{id}"

<h1>This is the blog post: @Id</h1>

@functions
{
    [FromRoute]
    public string Id { get; set; }
}

打开url/blogpost/1以显示上一页。

在路由中，名为{id}的url段将自动分配给使用@ID语法呈现的ID属性。

通过标识符加载博客帖子

Orchard Core中的每个内容项都有一个唯一且不变的内容项标识符。我们可以在我们的Razor页面中使用它来加载博客帖子。

编辑BlogPost.cshtml页面

@page "/blogpost/{id}"
@inject OrchardCore.IOrchardHelper Orchard

@{
    var blogPost = await Orchard.GetContentItemByIdAsync(Id);
}

<h1>This is the blog post: @blogPost.DisplayText</h1>

@functions
{
    [FromRoute]
    public string Id { get; set; }
}

在Content Items页面中，单击我们在上一节中创建的博客帖子。
在以下截图中找到/ContentItems/之后的url部分，即4hbbh2vqnenw33jnhtw8nrwemq：

使用您自己的博客帖子的值替换[YOUR_ID]部分，打开url/blogpost/4hbbh2vqnenw33jnhtw8nrwemq。
该页面应显示博客帖子的实际标题。

访问内容项的其他属性

在前一节中，DisplayText属性用于呈现博客文章的标题。此属性对于每个内容项都是通用的，例如ContentItemId或Author也是如此。但是，每个内容类型都定义了一组唯一的动态属性，就像我们在内容建模部分中添加的Markdown部件一样。

内容项的动态属性以Json文档的形式在Content属性中提供。

通过在标题后添加以下行来编辑Razor页：

...
<h1>This is the blog post: @blogPost.DisplayText</h1>

@Orchard.ConsoleLog(blogPost)
...

重新打开带有内容项id的blog Post页面，然后按F12从浏览器可视化调试工具，然后打开控制台。内容项的状态应该显示如下：

显示当前内容项的所有属性，包括Content属性，该属性包含我们为blog Post内容类型配置的所有动态部分。

展开MarkdownBodyPart节点将显示包含博客帖子内容的Markdown字段。

编辑Razor页以插入此代码：

...
<h1>@blogPost.DisplayText</h1>

<p>@blogPost.Content.MarkdownBodyPart.Markdown</p>

@Orchard.ConsoleLog(blogPost)
...

刷新博客帖子页面以显示Markdown文本。
最后，我们可以处理Markdown内容，并使用以下代码将其转换为HTML：

<p>@await Orchard.MarkdownToHtmlAsync((string) blogPost.Content.MarkdownBodyPart.Markdown)</p>

从自定义插件加载博客帖子

尽管我们可以从博客帖子的内容项ID加载博客帖子，但这对用户不友好，一个很好的SEO优化是在URL中重用标题。

在Orchard Core CMS中，Alias（别名）部件允许提供自定义的用户友好文本来标识内容项。

1. 在网站的管理部分，打开内容定义>内容类型>博客帖子。
2. 在页面底部，选择Add Parts(添加部件。
3. 选择别名，然后单击保存。将别名移动到标题下并保存。
4. 编辑博客帖子后，将显示Alias文本框，您可以在其中输入一些文本。在本例中，我们将使用new-day

我们现在可以更新Razor Page，在URL和加载内容项的方式中使用别名而不是内容项ID。

@page "/blogpost/{slug}"
@inject OrchardCore.IOrchardHelper Orchard

@{
    var blogPost = await Orchard.GetContentItemByHandleAsync($"alias:{Slug}");
}

...

@functions
{
    [FromRoute]
    public string Slug { get; set; }
}

更改在于在路由和本地属性中都使用了插件名称，并且还使用了一种新方法来加载具有别名的内容项。

打开页面/blogpost/new-day，它应该显示完全相同的结果，但使用一个更有利于搜索引擎优化和用户友好的网址。

使用自定义模式生成插件

Alias部件提供了一些自定义设置，以便自动生成。在我们的例子中，我们希望它从标题自动生成。为了提供这样的模式，CMS使用名为Liquid的模板语言，并使用一些自定义函数来操作内容项的属性。Orchard提供了通常合适的默认模式。

编辑blog Post的内容定义，对于Alias部分，单击Edit。
 在图案文本框中，请注意预先填充的图案：

这将动态提取内容项的DisplayText属性(在我们的示例中是标题)，并对该值调用slugify筛选器，这将把标题转换为可以在slug中使用的值。

编辑博客帖子内容项。
清除Alias文本框。这将允许系统使用我们定义的自定义模式生成它。
单击发布(并继续)。
别名现在是我的第二个博客帖子：

 配置博客帖子的预览功能。
对于必须编辑内容的用户来说，一个非常有用的功能叫做预览。如果您尝试编辑博客文章并单击预览按钮，将打开一个新窗口，其中包含当前编辑值的实时预览。

在编辑现有博客帖子的同时，单击Preview，并在侧面捕捉新窗口。
在预览窗口可见时编辑标题，并注意结果是如何自动更新的。

CMS不知道在呈现内容项时使用什么Razor Page，而将使用通用的Razor Page。但是，与我们提供生成别名的模式相同，我们也可以提供一个模式来调用特定页面来预览内容项。

编辑博客帖子的内容定义，单击添加部件，然后选择预览。单击保存。
在部件列表中，对于预览，单击编辑以更改此内容类型的设置。
在Pattern文本框中，输入/blogpost/{{ContentItem.Content.AliasPart.Alias}}，这是生成与Razor页面中配置的路由相同的URL的方法。

如您所见，预览现在使用我们为显示博客帖子设置的特定路线，编辑人员在编辑内容时拥有完全逼真的体验。

总结
在本教程中，我们学习了如何。

启动新的Orchard Core CMS项目。
创建自定义内容类型。
编辑内容项。
创建包含自定义路线的Razor页面以呈现内容。
加载具有不同标识符的内容项。
在编辑内容时呈现所见即所得预览屏幕