天天看點

用Razor做靜态頁面生成器

本來是用asp.net webpages做的部落格網站,資料庫用了一個陌生的本地資料庫,隻是覺得用起來很爽快,用新鮮的東西有一種刺激。後來資料庫挂了,估計是存某個字段的時候出了問題,可是新鮮的東西,也不知道用什麼工具可以查,隻好怪自己太年輕。費了一番力氣,總算是把資料挽救回來,突然意識到阿裡雲那邊又快到期了。

不打算續租了,備案又麻煩,幹脆就改成靜态,挂GitHub吧。

關于GitHub上建站的方法直接看

這裡

 https://pages.github.com/

建完之後設定CNAME和A Record綁定好域名。

之後就可以用Git來上傳頁面了,還可以使用

Jekyll

來制作部落格。但是我是不懂那些的,技能樹點的不一樣,也懶得為了一個部落格去學另一顆樹上的東西。

追溯當時用webpages的原因,其實也是因為Razor,是以計劃落定,用Razor做模版,Markdown做博文編輯,最後生成html。還需要把博文記錄下來,随便用什麼都可以,就直接存本地檔案了,換言之這檔案就成了我網站的資料庫,為了以後檢查友善就用文本檔案。

1、Razor模闆

2、Markdown編輯

3、Json存檔

這樣定好之後,建立解決方案,WPF項目模闆,NuGet添加RazorEngine、MarkdownSharp、NewtonsoftJson,建立一個窗體,Page導航,兩個Page,分别是目錄頁和内容頁。

用Razor做靜态頁面生成器

目錄頁是一個ListView,列出所有的文章,建立Article類,有屬性Title, Content, Author, Time, Description, Link。Link是生成之後的存放的靜态頁面的路徑,可以帶/符号。

目錄頁上可以建立和删除文章,右下角是導出按鈕,點選生成整站的頁面。因為是部落格站,是以肯定有兩類頁面,也是目錄頁和博文内容頁。目錄頁是根路徑下的index.html, 内容頁将依據編輯時候錄入的Link屬性,生成對應的路徑,并在改路徑下建立index.html,于是你通路的時候可以是這個樣子http://localhost/2015/1/1/link/

輕按兩下ListViewItem,也就是其中一篇文章,Page Navigate到内容頁,在内容頁你可以編輯文章,左邊是編輯界面右邊是預覽界面。編輯采用Markdown文法。

用Razor做靜态頁面生成器

Save儲存,Back按鈕導航回上一頁。

這裡我在Save的時候會序列化成JSON寫入本地檔案,需要妥善儲存此檔案。

在目錄頁進行導出操作的時候,會讀取模闆檔案,模闆檔案有兩個,請看下圖

用Razor做靜态頁面生成器

編譯後使用的時候需要確定Template目錄下有這兩個檔案。字尾是cshtml,雖然可以是任意字尾,但cshtml能得到vs編輯器的幫助,模闆中使用razor文法調用@Model中的屬性,自定義前端标簽來進行布局。在Index.cshtml中,Model就是List<Article>,在Detail.cshtml中,Model是Article。

以文章頁面的導出為例,關鍵代碼如下:

Markdown mk = new Markdown();
string content = mk.Transform(article.Content);//markdown轉換html
var model = new
{
    ID=  article.ID,
    Title = article.Title,
    Content = content,
    Link = article.Link,
    WriteTime = article.WriteTime,
    Description = article.Description,
    Author = article.Author,
};
string text = Engine.Razor.RunCompile(WebSource.Instance.DetailTemplate, "templateDetail", null, model);//razor轉換html
string outputFilePath = string.Format("{0}/output/{1}", AppDomain.CurrentDomain.BaseDirectory, article.Link);
Directory.CreateDirectory(outputFilePath);//建立目錄
File.WriteAllText(outputFilePath + "/index.html", text);//寫入檔案      

最後生成的整站頁面在output目錄下。

工具完成,花了一個多小時的時間。嗯,Razor用來做代碼生成确實很好使。

下面是第一個

試驗品

http://ifchen.com/

繼續閱讀