【手把手】带你实现一个静态博客网站框架【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 未完待续