【手把手】帶你實現一個靜態博客網站框架【pblog】

1、瞭解下pblog（可跳過）

pblog是什麼？

它是什麼？pblog是一個靜態博客生成器，源於做者的一時突發奇想。

Github地址

pblog

靜態博客框器

就是相似於hexo或者是vuepress這類的博客框架，能夠把你寫好的md文件編譯輸出成瀏覽器可識別的html文件，最後串起來生成一個博客網站。

使用

怎麼使用？

你須要全局安裝p-blog

安裝

yarn global add p-blog
or
npm install p-blog -g
複製代碼

命令

• pblog 生成博客
• pblog -s 生成博客後啓動本地web服務預覽（端口默認80，沒作衝突兼容）

pblog命令的背後

哦，也許你想進一步瞭解它作了什麼？

當你輸入pblog，進行回車以後

• 首先它會讀取你當前項目根目錄下的post文件夾下全部md格式的文章
• 以後進行模板渲染
• 最後輸出html文件

哇，是否是很簡單，so easy!

配置文件 pblog.config.js

有時候，你可能須要自定義一些選項，好比網站的標題，還有一些樣式或者腳本等等，它就顯得必要了。(非必需)

你須要在項目根目錄下新建一個pblog.config.js文件，而後使用AMD規範導出一個對象。

module.exports = {
  title: '彭小呆的博客',
  move: '黎明前的黑暗是最深不見底的黑暗',
  css: [],
  script: [],
}
// title: 網頁標題
// move: 主頁顯示的一句話
// css/script: 可放相對於public目錄下的文件或者是外鏈的一個數組，好比你有這樣的一個文件：public/css/my.css， 那你應該寫成'./css/my.css'
// template: 自定義模板的文件夾絕對路徑（首頁名稱爲index.pug, 文章頁面模板名稱爲post.pug）
複製代碼

目前有5大字段能夠配置哦！

• title
• move
• css
• script
• template

特別注意：若是你沒有想改動主題模板的話，請不要配置template字段，由於它可能致使一些意外。

自定義模板

哦，也許你認爲個人主題太過於簡約了，可是大道至簡。

今後刻起你須要配置template字段

提供一個放置模板文件的文件夾路徑（物理絕對路徑）

好比：你寫好了index.pug和post.pug兩個模板，放在了項目的根目錄下的custom-tamplate文件夾下，那麼要怎麼配置這個字段呢？

const { resolve } = require('fs')
module.exports = {
  // 省略其餘字段
  template: resolve(__dirname, `custom-tamplate`)
}
複製代碼

對，你就要這樣配置咯，無論你用什麼方法，總之，你要讓這個template字段的值是這樣的：

D:/項目目錄/custom-tamplate

對的，物理絕對路徑！！

自定義主題

主題相對於比較簡單，覆蓋最後輸出目錄dist/theme/css下的3個文件便可。

• reset.css
• highlight.css
• markdown.css

覆蓋，保持原有的名字，is ok？

2、手摸手一塊兒來實現pblog

2.1 靜態博客框架流程

首先咱們須要明白整個流程是怎麼跑的？

• 1.拿到md文件 ==> 解析 ==> 字符串
• 2.模板渲染，將md字符串插入到html頁面中適合的位置
• 3.輸出html文件和靜態資源到dist目錄

總的來講就是這麼3步走！

2.2 解析md文件

so easy，github上隨便搜一下markdown關鍵詞，找個星星最多的，看一下文檔，而後就能夠來模擬了。

這是我找到：marked.org文檔連接

使用起來仍是比較簡單：

const marked = require('marked');
const markdownString = '# 這是一級標題'
const str = marked(markdownString));
console.log(str)
// <h1>這是一級標題</h1>
複製代碼

就這麼簡單，你們能夠在nodejs在運行一下，so easy！

2.2 模板渲染

模板渲染，可能不少後端的小朋友應該知道了，結合express或者koa去作服務端渲染html頁面

沒錯，就是用的這個，我用的是pug

就是這頭巴哥犬沒錯了。

開玩笑啦，pug模板引擎中文文檔

使用起來也很簡單：

//- template.pug
p #{name}的 Pug 代碼！
複製代碼

const pug = require('pug');

// 編譯這份代碼
const compiledFunction = pug.compileFile('template.pug');

// 渲染一組數據
console.log(compiledFunction({
  name: '李莉'
}));
// "<p>李莉的 Pug 代碼！</p>"

// 渲染另一組數據
console.log(compiledFunction({
  name: '張偉'
}));
// "<p>張偉的 Pug 代碼！</p>"
複製代碼

以上代碼應該是很容易理解的。

2.3 文件讀寫

在nodejs中文件讀寫是一個常規操做，因此咱們必須先掌握一下。

主要就是經過fs模塊導出的相關方法：

• readFile 讀取一個文件
• writeFile 寫入一個文件

若是加上sync就變成了同步讀取：

• readFileSync 同步讀取一個文件
• writeFileSync 異步讀取一個文件

const fs = require('fs')
// 異步讀取
fs.readFile('README.md', 'utf-8', (err, data) => {
  if(err){
    throw new Error(err)
  }else {
    console.log(data)
  }
})
// 同步讀取
const data = fs.readFileSync('README.md', 'utf-8')
複製代碼

有的小夥伴多是一個純前端開發者，你會以爲後端可能很難，其實nodejs就是前端開發者去接觸後端開發最容易上手的語言了。

這樣我們完成了對README.md文件的讀取，寫入一樣也很簡單，同步異步方法看狀況使用（二者取其一，或兼得）。

// 同步寫入
fs.writeFileSync('test.md', '# 我想說你很美麗', 'utf-8')
// 異步寫入
fs.writeFile('test.md', '# 我想說你很美麗', (err) => {
  if(err){
    throw new Error(err)
  }else {
    console.log('寫入完成')
  }
})
複製代碼

更多關於fs模塊方法我就不介紹了，你們查閱nodejs文檔便可。

若是你掌握了以上3個知識點，那麼，恭喜你，能夠進行第一章節的開發了。

3、章節

3.1 第一章節：組裝一個簡單的讀md寫html程序

// index.js
const fs = require('fs')
const marked = require('marked')
// 讀取一個md文件
const markdownString = fs.readFileSync('README.md', 'utf-8')
// markdown --> html
const html = marked(markdownString)
// 寫入index.html
fs.writeFile('index.html', html, (err) => {
  if(err){
    throw new Error(err)
  }else {
    console.log('寫入完成')
  }
})
複製代碼

若是你準備好了，那麼運行它node index.js，若是一切順利，你會看到目錄下多了一個index.html文件，裏面的內容再也不是md語法，而是你熟知的html標籤了。雙擊這個index.html能夠在瀏覽器運行查看效果。

3.2 第二章節：結合pug模板引擎渲染html頁面

// index.pug
doctype html
html(lang="en")
    head
        title #{title}
    body
        .markdown-body !{content}
複製代碼

const fs = require('fs')
const pug = require('pug')
const marked = require('marked')
const markdownString = fs.readFileSync('README.md', 'utf-8')
// 讀取一個模板
const compiledFunction = pug.compileFile('index.pug');
// md --> html
const markdownHtml = marked(markdownString)
// 將mdHtml內容插入到模板中content的位置
const html = compiledFunction({
  title: '第一個pug頁面'
  content: markdownHtml
})
// 輸出文件
fs.writeFile('index.html', html, (err) => {
  if(err){
    throw new Error(err)
  }else {
    console.log('寫入完成')
  }
})
複製代碼

運行以上程序，在生成的index.html中，你就會看到結構比較完整的一個html頁面了。

3.3 未完待續