一、pblog是什么挂谍？
它是什么叔壤？pblog是一個靜態(tài)博客生成器，源于作者的一時突發(fā)奇想口叙。
Github地址
pblog在線地址
靜態(tài)博客框器
就是類似于
hexo或者是vuepress這類的博客框架炼绘，可以把你寫好的md文件編譯輸出成瀏覽器可識別的html文件，最后串起來生成一個博客網(wǎng)站妄田。
使用
怎么使用俺亮？
你需要全局安裝
p-blog
安裝
yarn global add p-blog
or
npm install p-blog -g
命令
-
pblog生成博客 -
pblog -s生成博客后啟動本地web服務(wù)預(yù)覽（端口默認80驮捍，沒做沖突兼容）
pblog命令的背后
哦，也許你想進一步了解它做了什么铅辞？
當你輸入pblog厌漂，進行回車之后
- 首先它會讀取你當前項目根目錄下的
post文件夾下所有md格式的文章 - 之后進行模板渲染
- 最后輸出html文件
哇，是不是很簡單斟珊，so easy!
配置文件 pblog.config.js
有時候苇倡，你可能需要自定義一些選項，比如網(wǎng)站的標題囤踩，還有一些樣式或者腳本等等旨椒，它就顯得必要了。(非必需)
你需要在項目根目錄下新建一個pblog.config.js文件堵漱，然后使用AMD規(guī)范導(dǎo)出一個對象综慎。
module.exports = {
title: '彭小呆的博客',
move: '黎明前的黑暗是最深不見底的黑暗',
css: [],
script: [],
}
// title: 網(wǎng)頁標題
// move: 主頁顯示的一句話
// css/script: 可放相對于public目錄下的文件或者是外鏈的一個數(shù)組，比如你有這樣的一個文件：public/css/my.css勤庐， 那你應(yīng)該寫成'./css/my.css'
// template: 自定義模板的文件夾絕對路徑（首頁名稱為index.pug, 文章頁面模板名稱為post.pug）
目前有6大字段可以配置哦示惊！
- title
- move
- logo
- css
- script
- template
特別注意：如果你沒有想改動主題模板的話，請不要配置
template字段愉镰，因為它可能導(dǎo)致一些意外米罚。
自定義模板
哦，也許你認為我的主題太過于簡約了丈探，但是大道至簡录择。
從此刻起你需要配置template字段
提供一個放置模板文件的文件夾路徑（物理絕對路徑）
比如：你寫好了index.pug和post.pug兩個模板，放在了項目的根目錄下的custom-tamplate文件夾下碗降，那么要怎么配置這個字段呢隘竭？
const { resolve } = require('fs')
module.exports = {
// 省略其他字段
template: resolve(__dirname, `custom-tamplate`)
}
對，你就要這樣配置咯讼渊，不管你用什么方法动看，總之，你要讓這個template字段的值是這樣的：
D:/項目目錄/custom-tamplate
對的精偿，物理絕對路徑；≡病！
模板變量
當你開始嘗試自定義模板笔咽，模板變量變得尤為重要搔预，因為這些是pblog提供的內(nèi)容變量。
post.pug:
- link 鏈接對象
- prev 上一篇
- next 下一篇
- title 標題
- markdown 內(nèi)容
- list_css css數(shù)組
- list_script script數(shù)組
- list_doc 文章列表
index.pug:
- logo 首頁顯示的Pblog
- move 一句話
- readme 根目錄下的README.md轉(zhuǎn)化后的內(nèi)容
- history 根目錄下的history.md轉(zhuǎn)化后的內(nèi)容
- title
- list_doc
- list_css
- list_script
這些模板變量叶组，會提供到相應(yīng)的pug頁面拯田，你可以用一個或多個，或者一個不用甩十，都沒有問題
自定義主題
主題相對于比較簡單船庇，覆蓋最后輸出目錄
dist/theme/css下的3個文件即可吭产。
- reset.css
- highlight.css
- markdown.css
覆蓋，保持原有的名字鸭轮，is ok臣淤？
二、手摸手一起來實現(xiàn)pblog
2.1 靜態(tài)博客框架流程
首先我們需要明白整個流程是怎么跑的窃爷？
- 1.拿到
md文件 ==> 解析 ==> 字符串 - 2.模板渲染邑蒋，將
md字符串插入到html頁面中適合的位置 - 3.輸出
html文件和靜態(tài)資源到dist目錄
總的來說就是這么3步走！
2.2 解析md文件
so easy按厘，github上隨便搜一下markdown關(guān)鍵詞医吊，找個星星最多的，看一下文檔逮京，然后就可以來模擬了卿堂。
這是我找到：marked.org文檔鏈接
使用起來還是比較簡單：
const marked = require('marked');
const markdownString = '# 這是一級標題'
const str = marked(markdownString));
console.log(str)
// <h1>這是一級標題</h1>
就這么簡單，大家可以在nodejs在運行一下懒棉，so easy草描！
2.2 模板渲染
模板渲染，可能很多后端的小朋友應(yīng)該知道了策严，結(jié)合
express或者koa去做服務(wù)端渲染html頁面
沒錯陶珠，就是用的這個，我用的是pug
就是這頭巴哥犬沒錯了享钞。
開玩笑啦，pug模板引擎中文文檔
使用起來也很簡單：
//- template.pug
p #{name}的 Pug 代碼诀蓉！
const pug = require('pug');
// 編譯這份代碼
const compiledFunction = pug.compileFile('template.pug');
// 渲染一組數(shù)據(jù)
console.log(compiledFunction({
name: '李莉'
}));
// "<p>李莉的 Pug 代碼栗竖！</p>"
// 渲染另外一組數(shù)據(jù)
console.log(compiledFunction({
name: '張偉'
}));
// "<p>張偉的 Pug 代碼！</p>"
以上代碼應(yīng)該是很容易理解的渠啤。
2.3 文件讀寫
在nodejs中文件讀寫是一個常規(guī)操作狐肢，所以我們必須先掌握一下。
主要就是通過fs模塊導(dǎo)出的相關(guān)方法：
- 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')
有的小伙伴可能是一個純前端開發(fā)者份名，你會覺得后端可能很難，其實nodejs就是前端開發(fā)者去接觸后端開發(fā)最容易上手的語言了妓美。
這樣咱們完成了對README.md文件的讀取僵腺，寫入同樣也很簡單，同步異步方法看情況使用（兩者取其一壶栋，或兼得）辰如。
// 同步寫入
fs.writeFileSync('test.md', '# 我想說你很美麗', 'utf-8')
// 異步寫入
fs.writeFile('test.md', '# 我想說你很美麗', (err) => {
if(err){
throw new Error(err)
}else {
console.log('寫入完成')
}
})
更多關(guān)于fs模塊方法我就不介紹了，大家查閱nodejs文檔即可贵试。
如果你掌握了以上3個知識點琉兜，那么凯正，恭喜你，可以進行第一章節(jié)的開發(fā)了豌蟋。
三廊散、章節(jié)
3.1 第一章節(jié)：組裝一個簡單的讀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文件，里面的內(nèi)容不再是md語法往声，而是你熟知的html標簽了擂找。雙擊這個index.html可以在瀏覽器運行查看效果。
3.2 第二章節(jié)：結(jié)合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內(nèi)容插入到模板中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中贯涎，你就會看到結(jié)構(gòu)比較完整的一個html頁面了。
