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

目录
相关文章
|
8月前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
338 0
|
8月前
|
数据采集 搜索推荐 JavaScript
Next.js进阶:静态生成、服务器端渲染与SEO优化
【4月更文挑战第13天】Next.js是现代Web开发的关键框架,以其对静态生成(Static Generation)、服务器端渲染(Server-Side Rendering)和SEO的支持而备受青睐。本文深入解析了这三个核心特性的原理、应用和最佳实践。静态生成在构建时生成HTML,适用于内容更新少的页面,通过`getStaticProps`和`getStaticPaths`获取静态数据。服务器端渲染则在每次请求时生成HTML,适合实时数据,使用`getServerSideProps`获取服务器端数据。
264 0
|
8月前
|
前端开发 JavaScript PHP
|
8月前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
2356 0
|
开发框架 安全 .NET
您是否存在想在浏览器动态编译razor的组件的想法?
您是否存在想在浏览器动态编译razor的组件的想法?
109 1
|
XML JavaScript 前端开发
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
前端开发 程序员
零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
163 0
|
Prometheus 监控 前端开发
本篇还玩“障眼法”,一文解读HTML内联框架Iframes。
本篇还玩“障眼法”,一文解读HTML内联框架Iframes。
138 0
|
存储 Web App开发 缓存
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
|
SQL 开发框架 移动开发
只有20行Javascript代码!手把手教你写一个页面模板引擎
AbsurdJS 作者写的一篇教程,一步步教你怎样用 Javascript 实现一个纯客户端的模板引擎。整个引擎实现只有不到 20 行代码。如果你能从头看到尾的话,还能有不少收获的。你甚至可以跟随大牛的脚步也自己动手写一个引擎。以下是全文。
199 0