使用Markdown和ASP.NET MVC3创建基于文本的博客

前言：

步骤1：创建初始的Blog应用

本次示例使用Phil Haack's Really Empty MVC Project Template，添加文件夹：App_Data/BlogPosts，Content/BlogPostImages；添加Controller： HomeController；以及相关联的View Views/Home/Index.cshtml；和其他Shared Views，初始的CSS样式。完整的Solution结构和完成后的应用运行截图如下：

placeholder：截图1

步骤2：安装Markdown

Markdown是一个text-to-HTML转化工具，针对人群为网络写手，博主等。Markdown允许你用容易读/写的纯文本格式写文章，然后转变成结构正确的XHTML（或者HTML）。Markdown格式的文本设计目的是允许内容以as-is发布，像纯文本，不需要用tag标记等。Markdown是免费软件，遵循BSD-style开源协议license。

既然我们使用MVC 3(语言为C#)，可以利用MarkdownSharp，也是一个开源的Markdown处理器的C#实现，在Stack Overflow上被featured。使用Nuget Package Manager console安装（添加一个单独文件MarkdownSharp.dll到Bin目录）：

PM> Install-Package MarkdownSharp

步骤3：Blog Post和Summary Data命名约定

Blog post是.txt文件，存储在文件夹AppData/BlogPosts。本次示例，我们对文件blog post和文件blog summary使用如下的命名约定，使用字符分割日期和名称信息：

YYYY-MM-DD[blog-post-name-separated-by-hyphens].txt // blog post markdown syntax content
YYYY-MM-DD[blog-post-name-separated-by-hyphens]_summary.txt // JSON formatted blog summary info
使用两个文件的目的是将Markdown的内容和Blog Post summary。Markdown的目标就是内容的as-is，无须任何额外的标记tag或者指令。YYYY-MM-DD用来表示博客发布时间，[]内为博客标题，使用-字符分开单词。Summary文件使用JSON语法现实blog summary。

步骤4：创建File System Data Model

首先，创建model Models/BlogListing.cs，用来表征创建博客需要的数据。

namespace TxtBasedBlog.Sample.Models { public class BlogListing { public string Url { get; set; } public string Title { get; set; } public string ShortDescription { get; set; } public string Content { get; set; } public string Author { get; set; } public DateTime PostDate { get; set; } public string Image { get; set; } } }

然后，创建model Models/BlogPost.cs负责加载博客文章内容。

namespace TxtBasedBlog.Sample.Models { public class BlogPost : BlogListing { public string Body { get; set; } } }

步骤5：写一个Blog Post示例

遵循上述命名约定，我们创建两个示例文件。Summary文件使用JSON语法，完整的blog post使用Markdown语法。 

{ Title: "ASP.NET MVC Overview", Url: "asp_net_mvc_overview", PostDate: "2012-02-09", Author: "Microsoft ASP.NET Team", ShortDescription: "ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development.", Image: "content/blogpostimages/image001.jpg" }

**ASP.NET MVC** gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. MVC includes many features that enable: * fast, TDD-friendly development for creating sophisticated applications * use the latest web standards. [Learn More About MVC](http://www.asp.net/mvc "Learn more about MVC today!")

步骤6：显示博客列表

在web.config中的appSetting键值中添加BlogPostsDirectory配置，这样可以无需编译修改数据目录。

 

<appSettings> ... <add key="BlogPostsDirectory" value="~/App_Data/BlogPosts"/> ... </appSettings>

 

Models/BlogFileSystemManager.cs用来检查上面配置的数据目录，然后返回博客列表。

 

namespace TxtBasedBlog.Sample.Models { public class BlogFileSystemManager { private string filePathToBlogPosts; public BlogFileSystemManager(string dirPath) { filePathToBlogPosts = dirPath; } public List<BlogListing> GetBlogListings(int limit) { var allFileNames = getBlogPostsFiles(); var blogListings = new List<BlogListing>(); foreach (var fileName in allFileNames.OrderByDescending(i => i).Take(limit)) { var fileData = File.ReadAllText(fileName); var blogListing = new JavaScriptSerializer().Deserialize<BlogListing>(fileData); blogListings.Add(blogListing); } return blogListings; } private IEnumerable<string> getBlogPostsFiles() { return Directory.GetFiles(filePathToBlogPosts, "*summary.txt").ToList(); } } }

 

HomeController 加载BlogListing ，在View中渲染。

 

namespace TxtBasedBlog.Sample.Controllers { public class HomeController : Controller { public ActionResult Index() { var manager = new BlogFileSystemManager(Server.MapPath(ConfigurationManager.AppSettings["BlogPostsDirectory"])); var model = manager.GetBlogListings(5); return View(model); } public ActionResult Error() { return View(); } } }

 

最后，是Views/Home/Index.cshtml的代码，注意我们使用的root级的URL，需要在下步定义一些Routes。

 

@model IEnumerable<TxtBasedBlog.Sample.Models.BlogListing> <h2>Recent Blog Posts</h2> @{ foreach (var item in Model) { <div class="post"> <div class="img-post"> <a href="/@item.Url" title="@item.Title"><img src="../../@item.Image" alt="" /></a> </div> <div class="inline"> <p><a href="@item.Url">@item.PostDate.ToString("MM/dd/yyyy") - @item.Title</a><br />@Html.Raw(item.ShortDescription)</p> </div> </div> } }

 

现在，运行网站，如下图：

placeholder 截图

步骤7：显示博客内容

在Global.asax.cs定义一些Routes：

 

public static void RegisterRoutes(RouteCollection routes) { ... routes.MapRoute( "HomePage", "", new { controller = "Home", action = "Index" } ); routes.MapRoute( "Error", "Oops", new { controller = "Home", action = "Error" } ); routes.MapRoute( "BlogPost", "{postName}", new { controller = "Home", action = "ViewBlogPost", postName = "" } ); ... }

 

当用户点击一个博客链接时，调用Action方法ViewBlogPost ，在HomeController中添加ViewBlogPost 有关的代码。

namespace TxtBasedBlog.Sample.Controllers { public class HomeController : Controller { ... public ActionResult ViewBlogPost(string postName) { var manager = new BlogFileSystemManager(Server.MapPath(ConfigurationManager.AppSettings["BlogPostsDirectory"])); if (!manager.BlogPostFileExistsByTitleForUrl(postName)) { return RedirectToRoute("Error"); } var model = manager.GetBlogPostByTitleForUrl(postName); return View(model); } ... } }

添加BlogFileSystemManager 来确保获得有效的数据文件。

namespace TxtBasedBlog.Sample.Models { public class BlogFileSystemManager { ... public bool BlogPostFileExistsByTitleForUrl(string titleForUrl) { var matchingFiles = getFilesForBlogPostByTitleForUrl(titleForUrl); return (matchingFiles.Count == 2); } public BlogPost GetBlogPostByTitleForUrl(string titleForUrl) { var matchingFiles = getFilesForBlogPostByTitleForUrl(titleForUrl); var summaryFileData = File.ReadAllText(matchingFiles.Where(i => i.Contains("_summary")).FirstOrDefault()); var blogPost = new JavaScriptSerializer().Deserialize(summaryFileData); blogPost.Body = File.ReadAllText(matchingFiles.Where(i => !i.Contains("_summary")).FirstOrDefault()); return blogPost; } private List getFilesForBlogPostByTitleForUrl(string titleForUrl) { // Updated 2012-03-07:  // Richard Fawcett's regex suggestion to prevent titleForUrl subset results. Thanks Richard! var files = Directory.GetFiles(filePathToBlogPosts, string.Format("*{0}*.txt", titleForUrl)); var r = new Regex(@"\d{4}-\d{2}-\d{2}_" + titleForUrl + @"(_summary)?\.txt", RegexOptions.IgnoreCase); return files.Where(f => r.IsMatch(f)).ToList(); } ... } }

然后，Views/Home/ViewBlogPost.cshtml负责渲染博客文章页面，我们使用一个自定义的Helper方法，@Html.Markdown() 来调用之前安装的Markdown库。

@using TxtBasedBlog.Sample.Models @model TxtBasedBlog.Sample.Models.BlogPost @{ ViewBag.Title = Model.Title; } <h2>@Model.Title</h2> <p>Posted on @Convert.ToDateTime(Model.PostDate).ToString("dd MMM, yyyy") by @Model.Author - @Html.ActionLink("Back to Blog List", "Index")</p> @Html.Markdown(Model.Body)

@Html.Markdown()是由 Danny Tuppeny创建，原文见original post。

 

namespace TxtBasedBlog.Sample.Models { public static class MarkdownHelper { static readonly Markdown MarkdownTransformer = new Markdown(); public static IHtmlString Markdown(this HtmlHelper helper, string text) { var html = MarkdownTransformer.Transform(text); return MvcHtmlString.Create(html); } } }

 

最终完成，运行截图如下，注意URL已经优化。

placeholder：截图。