网站开发的软件,学影视后期的正规学校,网站开发立项申请表,宣传册画册设计公司系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客#xff1f;基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.N… 系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面...前言前一篇博客完成了文章列表的开发现在要来写文章详情页面了这篇更新应该没迟到吧嘿嘿。博客网站最重要的可以说就是文章详情页面了用户来看博客最关心首先是内容其次是阅读体验所以这个文章详情页面的设计不能马虎~思路文章正文是以markdown格式存储的要在网页上展示的话需要把markdown渲染成HTML才行。那么就有两种思路一种是在后端渲染使用C#把markdown转换成HTML然后渲染成网页另一种是后端直接输出markdown使用一些开源的JS库实现markdown渲染一开始我是采用第一种的后端渲染方式用到的C#库是Markdig不过深入使用之后发现有一些想要的功能实现起来比较麻烦特别是这个库几乎没有文档要自定义一些功能全靠看源码猜最后只能放弃转而使用第二种方式。本文对两种方式的实现都会介绍着重介绍第二种前端渲染。后端渲染关于Markdig这个库的我之前写的博客有详细的介绍这里不再重复有兴趣的同学可以看看C#解析Markdown文档实现替换图片链接操作首先Nuget安装Markdig这个库一行代码就可以实现markdown转HTMLMarkdig.Markdown.ToHtml(markdownContent);当然直接渲染出来的页面是很简陋的没有代码高亮、没有引用块、没有列表样式啥的所以单纯这样肯定是不够的。Markdig作为C#目前唯一积极维护的Markdown库自然是考虑到了扩展性它设计了扩展系统本身内置了20多个扩展还可以安装其他人开发的扩展用来实现例如代码高亮的效果。使用扩展也很简单加个pipeline参数就行var pipeline new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
var result Markdown.ToHtml(This is a text with some *emphasis*, pipeline);Markdig本身不自带代码高亮扩展需要使用第三方组件我测试了下面这两个能用Markdig.Prism前端渲染但需要服务端组件配合Markdown.ColorCode服务端渲染前端渲染本项目最终选了前端渲染的方案前端生态有众多的markdown组件看了一圈之后我最终选了Editor.md这个组件。主要看中它可以比较方便的实现文章的TOC目录功能还有不错的高亮效果。使用起来很简单首先把markdown输出到网页里div idtest-editormd-view classpost-contenttextarea idappend-test styledisplay:none;Model.Content/textarea
/div加了display:none不显示这个textarea给用户看markdown代码没用引入edtor.md的样式文件link relstylesheet href~/lib/editormd/css/editormd.preview.min.css引入editor.md的js你没看错就是这么多。静态资源在之前的文章里已经安装好了这里不再重复。详见(5) 开始搭建Web项目script src~/lib/editormd/examples/js/jquery.min.js/script
script src~/lib/editormd/lib/marked.min.js/script
script src~/lib/editormd/lib/prettify.min.js/scriptscript src~/lib/editormd/lib/raphael.min.js/script
script src~/lib/editormd/lib/underscore.min.js/script
script src~/lib/editormd/lib/sequence-diagram.min.js/script
script src~/lib/editormd/lib/flowchart.min.js/script
script src~/lib/editormd/lib/jquery.flowchart.min.js/scriptscript src~/lib/editormd/editormd.min.js/script然后使用js调用editor.md的渲染方法let testEditormdView editormd.markdownToHTML(test-editormd-view, {// htmlDecode: style,script,iframe, // you can filter tags decodehtmlDecode: true,//toc : false,tocm: true, // Using [TOCM]tocContainer: #custom-toc-container, // 自定义 ToC 容器层//gfm : false,//tocDropdown : true,// markdownSourceCode : true, // 是否保留 Markdown 源码即是否删除保存源码的 Textarea 标签emoji: true,taskList: true,tex: true, // 默认不解析flowChart: true, // 默认不解析sequenceDiagram: true, // 默认不解析
})搞定。ViewModelPost模型只是存在数据库中的数据直接展示不能完全满足网页设计的需求所以还是一样需要定义一个ViewModel来用。依然是放在StarBlog.Web/ViewModels代码如下public class PostViewModel {public string Id { get; set; }public string Title { get; set; }public string Summary { get; set; }public string Content { get; set; }public string ContentHtml { get; set; }public string Path { get; set; }public DateTime CreationTime { get; set; }public DateTime LastUpdateTime { get; set; }public Category Category { get; set; }public ListCategory Categories { get; set; }
}相比起Post模型多了ContentHtmlCategories改成列表Service关键的渲染部分介绍完了讲一下一些次要的~Service的作用是把Post模型转换成ViewModel那直接上代码吧public PostViewModel GetPostViewModel(Post post) {var vm new PostViewModel {Id post.Id,Title post.Title,Summary post.Summary,Content post.Content,ContentHtml Markdig.Markdown.ToHtml(post.Content),Path post.Path,CreationTime post.CreationTime,LastUpdateTime post.LastUpdateTime,Category post.Category,Categories new ListCategory()};foreach (var itemId in post.Categories.Split(,).Select(int.Parse)) {var item _categoryRepo.Where(a a.Id itemId).First();if (item ! null) vm.Categories.Add(item);}return vm;
}虽然不用后端渲染方案不过我还是保留了Markdig的后端渲染。ViewPSController部分被我略过了实在是太简单没必要贴代码了这个好像也没啥好介绍的那还是不贴完整代码了详细代码在这https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/Views/Blog/Post.cshtml使用Bootstrap的Grid布局做左右两栏左栏显示文章的TOC目录右栏显示文章的主体内容。页面顶部要展示分类的层级关系不同分类之间用“/”分隔但第一个分类前面不要有斜杠复杂的表述方式这个需求的实现代码是这样div分类foreach (var category in Model.Categories) {if (Model.Categories.IndexOf(category) 0) {span / /span}a asp-controllerBlog asp-actionListasp-route-categoryIdcategory.Idcategory.Name/a}
/div效果大概这样image然后还要优化一下时间的显示Model.LastUpdateTime.ToShortDateString()
Model.LastUpdateTime.ToString(hh:mm)完成之后的效果如下实现效果image大概就是这样后续可能会再优化一下页面。搞定~
