p-blog
v0.1.0
Published
only's test version, maybe cause many problems, but imagination is endless!
Downloads
3
Readme
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.pug
和post.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?