doknowmi

引言
本文将介绍创建一个功能齐全、解耦的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页面以呈现内容。
加载具有不同标识符的内容项。
在编辑内容时呈现所见即所得预览屏幕

 

分类:

技术点:

相关文章: