前面部分如果都完成了,首頁進來就會看到條列式的文章標題可以點進首頁連結,就會進入到文章裡面內容頁了。
(紅色圈起來的地方)
這邊是所有工程師最需要的功能,blog裡面有程式碼Highlight(下圖),這邊是用一個第三方套件去做的。直接把連結給你們。
程式碼Highlight的套件。
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
步驟:
step1.ArticleController先加上index 這個action
[HttpGet("Article/{id}")]
public async Task<IActionResult> Index(long id)
{
var model = await _article.GetArticle(id);
var result = new ArticleViewModel();
if (model is not null && model.Count > 0)
{
result = model.Select(x => new ArticleViewModel
{
Id = x.Id,
ArticleContent = x.ArticleContent,
Title = x.Title
}).First();
return View(result);
}
return Redirect("/");
}
step2. 創建出Index.cs 完整程式碼
以下複製到對的位置。
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
@model ArticleViewModel
@section styles {
<link rel="stylesheet" href="~/css/article.css?@DateTime.Now.ToString("yyyyMMddhhmmss")">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css">
}
<div class="mb-2" style="width:700px; margin-left: auto;margin-right: auto;">
<h1 class="text-center display-4 mb-5">@Model.Title</h1>
@Html.Raw(Model.ArticleContent)
</div>
@section Scripts {
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
}
成功以後,新增程式碼相關的訊息就會看到,文章內容會有highlight的效果了。