引言
本文將介紹建立一個功能齊全、解耦的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頁面以呈現內容。
載入具有不同識別符號的內容項。
在編輯內容時呈現所見即所得預覽螢幕