創建一個新的解耦的Orchard Core CMS網站

2021 年 9 月 23 日
筆記
Orchard Core, Orchare Core

引言
本文將介紹創建一個功能齊全、解耦的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（別名）部件允許提供自定義的用戶友好文本來標識內容項。

在網站的管理部分，打開內容定義>內容類型>博客帖子。
在頁面底部，選擇Add Parts(添加部件。
選擇別名，然後單擊保存。將別名移動到標題下並保存。
編輯博客帖子後，將顯示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頁面以呈現內容。
加載具有不同標識符的內容項。
在編輯內容時呈現所見即所得預覽屏幕

Tags: Orchard Core Orchare Core