node.js + express4 写一个本身的博客网站[2]

时间 2019-12-05

标签 node.js node express4 express 一个本身博客网站栏目 Node.js 繁體版

原文原文链接

上篇连接：node.js + express4 写一个本身的博客网站[1]

0.前言
1.需求
2.技术选型
3.正文，动手
- 3.1 Hello, Express
- 3.2 Express 中的 Routing
- 3.3 认识一下 Middleware
- 3.4 引入markdown解析
- 3.5 模板引擎 Jade

3.4 引入markdown解析

在上一篇的末尾，咱们已经能够给读者们提供全部文章的列表，而且在点击列表项后导航至对应文章的位置。只是在展示页面时咱们简单的使用了css

fs.readFile(filename, 'utf-8', function (err, data) {
  if (err) res.send(err);
  res.send(data);
});

这样的方式，直接将源文件的内容打印了出来。那么接下来的事情也不会很复杂，无非是将readFile()后获得的字符串处理成html格式的内容便可。html

关于markdown转换html的组件网上有很多现成的可用。通过了简单快速的试用后，我暂时敲定使用marked + pygmentize-bundled 的组合。码农么，天然优先关注代码着色高亮的功能。Pygmentize 在此间也算是鼎鼎大名了。node

来看下简单的示例：git

var marked = require('marked');
var pygmentize = require('pygmentize-bundled');

//设置pygmentize-bundled来作代码高亮转换
marked.setOptions({
  highlight: function (code, lang, callback) {
    pygmentize({ lang: lang, format: 'html' }, code, function (err, result) {
      callback(err, result.toString());
    });
  }
});

//自定义方法，接收md文件内容，返回一个包含转换结果的回调函数
function markdown2html(data, callback) {
  marked(data, function (err, content) {
    return callback(err, content);
  });
}

你问我为啥画蛇添足要在marked()方法外面再包装一层，由于我也不知道这玩意儿到底好很差用，之后万一发现有坑，多个中间层替换起来也方便。github

好咧~那么组合一下~express

fs.readFile(filename, 'utf-8', function (err, data) {
  if (err) res.send(err);
  markdown2html(data, function (err, content) {
    if (err) res.send(err);
    res.send(content);
  });
});

打完收工，看看效果吧。segmentfault

啥？你说仍是难看？这...老子也只是个低端后台码农而已，css文件什么的本身去网上抄一份！后端

...markdown

...函数

...

啥？抄回来了可是不会用？不知道往哪儿放？把css文件内容读取出来而后拼接到转换完成的html内容头上而后一股脑的res.send()回去不就行了嘛！...

确实是有点麻烦的感受...

那么是时候给咱们的网站打扮打扮了！

3.5 模板引擎 Jade

所谓模板引擎，能够尝试这样简单的理解：首先回想一下C#中的String.Format()，或是C语言中的printf()，Python中的print()等等相似的字符串格式化函数。咱们提供一个模板参数，而后使用变量依照必定的规则填充模板，最终在运行时获得了格式化的字符串输出。依此继续，把咱们的HTML页面想象成一个巨大的字符串，在其中的某些位置上使用变量填充替换，最终获得一个“动态”的页面：

<html>
  <head></head>
  <body>
    <h1>{这里填写网页的标题}</h1>
    <h2>{这里填写副标题}</h2>
    <p>{这里是文章内容}</p>
    <p>{这里是文章的创做日期与做者}</p>
  </body>
  </html>

这样一来，咱们就能够在必定程度上将逻辑与页面分离，后台负责生成、处理与组织数据，前台则只关心数据如何被呈现。同时也避免了一大部分的手工重复劳动（想一想看在这以前咱们是如何生成页面的？在后台拼接半天的html再send出去，简直累的要死好吗）。上一节中提出的问题也在这里迎刃而解了：CSS这样的静态内容，直接写进模板就好，后端再也不关心这些杂事了！

以此思路，咱们进一步简化HTML中某些冗长的写法，再自创一些别出心裁的语法，而后再写个解释器翻译成HTML，好比

ul>li*(list.length)<-item.name in list
=>

<ul>
  <li>list[0].name</li>
  <li>list[1].name</li>
</ul>

额...随便开了一下脑洞...请勿当真...

总之，要像这样本身实现一个模板引擎也并不是什么难事。

不过固然，要投入实际应用的模板引擎系统不但要考虑语法；效率也是很是重要的一部分，因此仍是中止造轮子的企图，来看看express直接提供支持的模板引擎之一：Jade

...

看完了么？Jade的语法应该还算简单，这里再也不浪费笔墨介绍了~~反正我后头也不打算用=.=~~。感兴趣的同窗能够本身研究一下如何将Jade与Express结合起来~不过咱们将在下一章开始，对咱们的系统进行一个推倒重来，从新规划的工程，敬请期待！