Pblog

Pblog -- 基于 Node.js 平台的简约静态博客生成框架
主题-百变渐变色

pblog

它是什么?pblog是一个静态博客生成器,源于作者的一时突发奇想。

使用

怎么使用?

你需要全局安装p-blog

安装

yarn global add p-blog
or
npm install p-blog -g

命令

  • 1.pblog 生成博客
  • 2.pblog -s 生成博客后启动本地web服务预览(端口默认80,没做冲突兼容)

pblog命令的背后

哦,也许你想进一步了解它做了什么?

当你输入pblog,进行回车之后

  • 首先它会读取你当前项目根目录下的post文件夹下所有md格式的文章
  • 之后进行模板渲染
  • 最后输出html文件

哇,是不是很简单,so easy!

配置文件 pblog.config.js

有时候,你可能需要自定义一些选项,比如网站的标题,还有一些样式或者脚本等等,它就显得必要了。

你需要在项目根目录下新建一个pblog.config.js文件,然后使用CommonJs规范导出一个对象。

module.exports = {
  title: '彭小呆的博客',
  move: '黎明前的黑暗是最深不见底的黑暗',
  css: [],
  script: [],
}
// title: 网页标题
// move: 主页显示的一句话
// css/script: 可放相对于public目录下的文件或者是外链的一个数组,比如你有这样的一个文件:public/css/my.css, 那你应该写成'./css/my.css'
// template: 自定义模板的文件夹绝对路径(首页名称为index.pug, 文章页面模板名称为post.pug)

目前有6大字段可以配置哦!

  • title
  • logo
  • move
  • css
  • script
  • template

!> 特别注意:如果你没有想改动主题的话,请不要配置template字段,因为它可能导致一些意外。

自定义模板

哦,也许你认为我的主题太过于简约了,但是大道至简。

从此刻起你需要配置template字段

提供一个放置模板文件的文件夹路径(物理绝对路径)

比如:你写好了index.pugpost.pug两个模板,放在了项目的根目录下的custom-tamplate文件夹下,那么要怎么配置这个字段呢?

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

对,你就要这样配置咯,不管你用什么方法,总之,你要让这个template字段的值是这样的:

D:/项目目录/custom-tamplate

对的,物理绝对路径!!

模板变量

当你开始尝试自定义模板,模板变量变得尤为重要,因为这些是pblog提供的内容变量。

post.pug:

  • link 链接对象
    • prev 上一篇
    • next 下一篇
  • title 标题
  • markdown markdown内容
  • list_css css数组
  • list_script script数组
  • list_doc 文章列表

index.pug:

  • logo 首页显示的Pblog
  • move 一句话
  • readme 根目录下的README.md
  • history 根目录下的history.md
  • title
  • list_doc
  • list_css
  • list_script

这些模板变量,会提供到相应的pug页面,你可以用一个或多个,或者一个不用,都没有问题

自定义主题

主题相对于比较简单,覆盖最后输出目录dist/theme/css下的3个文件即可。

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

覆盖,保持原有的名字,is ok?

更新说明

0.1.0

==========

1.优化主题:

  • 可自动生成目录
  • 主题进阶(百变渐变)

2.更新模板配置说明

0.1.0以下

==========

1.功能点:

  • 提供md ==> html核心功能
  • 提供pblog.config.js配置