npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

p-blog

v0.1.0

Published

only's test version, maybe cause many problems, but imagination is endless!

Downloads

6

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.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?