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結合起來~不過咱們將在下一章開始，對咱們的系統進行一個推倒重來，從新規劃的工程，敬請期待！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。