用Razor做静态页面生成器-阿里云开发者社区

开发者社区> 陈惊蛰> 正文

用Razor做静态页面生成器

简介: 本来是用asp.net webpages做的博客网站,数据库用了一个陌生的本地数据库,只是觉得用起来很爽快,用新鲜的东西有一种刺激。后来数据库挂了,估计是存某个字段的时候出了问题,可是新鲜的东西,也不知道用什么工具可以查,只好怪自己太年轻。
+关注继续查看

本来是用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,分别是目录页和内容页。

目录页是一个ListView,列出所有的文章,创建Article类,有属性Title, Content, Author, Time, Description, Link。Link是生成之后的存放的静态页面的路径,可以带/符号。

目录页上可以新建和删除文章,右下角是导出按钮,点击生成整站的页面。因为是博客站,所以肯定有两类页面,也是目录页和博文内容页。目录页是根路径下的index.html, 内容页将依据编辑时候录入的Link属性,生成对应的路径,并在改路径下创建index.html,于是你访问的时候可以是这个样子http://localhost/2015/1/1/link/

双击ListViewItem,也就是其中一篇文章,Page Navigate到内容页,在内容页你可以编辑文章,左边是编辑界面右边是预览界面。编辑采用Markdown语法。

Save保存,Back按钮导航回上一页。

这里我在Save的时候会序列化成JSON写入本地文件,需要妥善保存此文件。

在目录页进行导出操作的时候,会读取模板文件,模板文件有两个,请看下图

编译后使用的时候需要确保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/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
生成lua的静态库.动态库.lua.exe和luac.exe
前些日子准备学习下关于lua coroutine更为强大的功能,然而发现根据lua 5.1.4版本来运行一段代码的话也会导致 “lua: attempt to yield across metamethod/C-call boundary”的错误(据悉主线程中调用yield也会如此)。
891 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7238 0
nginx部署多个静态页面
首先把你的html页面(或者其它格式)上传到服务器,随便建个目录 我这里目录是 /usr/development/static/pages
9 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8920 0
怎么将aspx网站改为静态页面?
首先思路是在后台点击“生成静态页面” 转换为静态页面 protected void Button2_Click(object sender, EventArgs e) { DataSet ds = Getyuqian().
1447 0
JSP-讲解(生成java类、静态导入与动态导入)
一、JSP技术简介 JSP是Java Server Page的缩写,它是Servlet的扩展,它的作用是简化网站的创建和维护。 JSP是HTML代码与Java代码的混合体。 JSP文件通常以JSP或JSPX的扩展名。
1133 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10522 0
+关注
陈惊蛰
从业7年, 参与过几款市场反应不太好的游戏开发, 主要领域为服务端, 酷爱.net语言
33
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载