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

使用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配置,这样可以无需编译修改数据目录。

 


    ...
     key="BlogPostsDirectory" value="~/App_Data/BlogPosts"/>
    ...

 

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 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>

Recent Blog Posts</h2> @{ foreach (var item in Model) {
@item.Url" title="@item.Title">../../@item.Image" alt="" />
inline">

@item.Url">@item.PostDate.ToString("MM/dd/yyyy") - @item.Title
@Html.Raw(item.ShortDescription)

} }

 

现在,运行网站,如下图:

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;
}

@Model.Title</h2>

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:截图。

posted on 2012-04-26 12:17 pieux 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/pieux/archive/2012/04/26/2471185.html

你可能感兴趣的:(使用Markdown和ASP.NET MVC3创建基于文本的博客)