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

vuepress-theme-ibank

v1.0.17

Published

v1.0.12

Downloads

232

Readme

当前文档版本

v1.0.12

主题配置

本主题遵循约定优于配置原则,遵循以下约定,你只需要配置你的个人信息即可使用该主题。

config.js中支持的配置项:

// config.js
const config = {
  title: "柒月流火's blog", // 博客名称,会出现在导航栏中
  themeConfig: {
    logo: "/img/logo.png", // required: false // 你的logo,如果选择不设置,则导航栏中不会有logo
    title: "title", // required: false // 覆盖config.title
    // index: false, // default: true // 是否生成首页
    // categories: false, // default: true // 是否生成目录索引
    // tags: false, // default: true // 是否生成标签索引
    // archives: false, // default: true // 是否生成时间索引
    author: { // default: undefined
      name: "柒月流火",
      link: "https://github.com/WilfredShen",
    },
    avatar: { // default: undefined
      img: "/img/avatar.png",
      name: "柒月流火",
      slogan: "slogan",
      icons: [
        {
          title: "邮箱",
          link: "mailto:[email protected]",
          icon: "email",
        },
        {
          title: "GitHub",
          link: "https://github.com/WilfredShen",
          icon: "github",
        },
      ],
    },
  },
};
module.exports = config;

或者使用typescript以获取更详细的类型提示:

import { defineUserConfig } from "vuepress-vite";
import { IconType } from "vuepress-theme-ibank/types";
import type { ThemeConfig } from "vuepress-theme-ibank/types";

export default defineUserConfig<ThemeConfig>({
  title: "柒月流火's blog", // 博客名称,会出现在导航栏中
  themeConfig: {
    logo: "/img/logo.png", // required: false // 你的logo,如果选择不设置,则导航栏中不会有logo
    title: "title", // required: false // 覆盖config.title
    // index: false, // default: true // 是否生成首页
    // categories: false, // default: true // 是否生成目录索引
    // tags: false, // default: true // 是否生成标签索引
    // archives: false, // default: true // 是否生成时间索引
    author: {
      name: "柒月流火",
      link: "https://github.com/WilfredShen",
    },
    avatar: {
      img: "/img/avatar.png",
      name: "柒月流火",
      slogan: "slogan",
      icons: [
        {
          title: "邮箱",
          link: "mailto:[email protected]",
          icon: IconType.email,
        },
        {
          title: "GitHub",
          link: "https://github.com/WilfredShen",
          icon: IconType.github,
        },
      ],
    },
  },
});

目录约定

docs
├── 一级目录
│   ├── 二级文件
│   └── 二级目录
│       └── 三级文件
└── 一级文件

docs为顶级目录,其下为一级文件/目录、二级文件/目录、三级文件/目录,以此类推,不限层数

在导航栏中一级文件/目录会直接显示在其中,如果是一级目录,则会添加下拉框。下拉框中最多可以显示到三级,其中二级文件/目录之间有行线分隔,三级文件会列在对应的二级目录下方。

readme.md是描述其父目录的文件,即导航栏中文件名指向的链接即为其frontmatterpermalink的值,目录名指向的链接为其目录下readme.md文件中的frontmatter.permalink

在没有文件指定其链接为/的情况下,/的路由会被重定向至docs/readme.md中指定的链接。如果docs/readme.md不存在,则访问/会提示404

命名约定

目录以及Markdown文件分别需要遵循以下命名规范:

  • 目录:[order].[name]
  • Markdown:readme.md[order].[name].[md],其中readme和后缀md不区分大小写。

文件和目录在导航栏处的排序均按照order的字典序进行升序排序,建议使用相同位数的数字作为order

排除的文件

有时你并不希望所有的文件都被加载,你可以借助以下的规则来排除文件:

  • .开头的文件/目录会被vuepress的引擎忽略,不会被解析,你可以借此存放草稿等文件。例:
    • 创建一个目录.draft,并在目录下撰写草稿,发布时移动到合适的目录下就会被解析
    • 创建一个目录.recyclebin,可以将废弃的文章移动到此处,避免下次发布时被解析
  • _开头的文件/目录会被本主题的格式化工具忽略,其下Markdown文件的frontmatter不会被格式化,也不会出现在导航栏和索引中,但它依旧会被引擎加载并渲染,因此你依旧可以直接输入其网址访问它。例:
    • 如果你有一些界面希望发布上去,但不希望任何人都能轻易访问它,你可以给它添加_前缀,这样只有知道这个网址的人才能够访问它
  • @开头的文件/目录会被本主题的格式化工具忽略,但依旧会被引擎加载并渲染成网页,并出现在导航栏和索引中;其order值会去除开头的@,有多个则只会去除第一个。例:
    • 本主题在@pages目录下存放导航栏中“索引”栏的界面,不过我设置其frontmatter.navbar=false点击查看详情),导航栏中的“索引”是我手动添加的
  • readme.md不能添加@_,否则不会被认为是readme文件

参考以下样例:

docs
├── 00.前端
│   ├── .排除测试1.md
│   ├── 12.测试e35c229e.md
│   ├── @08.排除测试2.md
│   ├── readme.md
│   ├── _14.排除测试3.md
│   └── @05.子目录2
│       ├── 01.测试.md
│       └── readme.md
└── README.md

在以上的目录结构中,如果你使用devbuild指令,你将得到如下输出:

info Initializing VuePress and preparing data...
info 格式化frontmatter: [success]   /README.md
info 格式化frontmatter: [success]   /00.前端/12.测试e35c229e.md
info 格式化frontmatter: [excluded]  /00.前端/@08.排除测试2.md
info 格式化frontmatter: [success]   /00.前端/readme.md
info 格式化frontmatter: [excluded]  /00.前端/_14.排除测试3.md
info 格式化frontmatter: [excluded]  /00.前端/@05.子目录2/01.测试.md
info 格式化frontmatter: [excluded]  /00.前端/@05.子目录2/readme.md

你可以看到,在格式化工具的输出中,不存在“.排除测试1.md”文件,即该文件没有被引擎加载;而“@05.子目录2”目录下的文件和“@排除测试2.md”、“_排除测试3.md”文件的状态都是[excluded],即没有被格式化。

frontmatter

本主题会自动对未排除的Markdown文件进行格式化,一般情况下不需要任何手动的配置

frontmatter格式

---
title: 测试d83cbf9d
permalink: /article/d83cbf9d
date: '2021-11-17 19:15:29'
type: article
navbar: true
categories:
  - 前端
  - 前端文章
tags:
  - math
  - JavaScript
author:
  name: 柒月流火
  link: 'https://github.com/WilfredShen'
---

自动生成

| key | 生成规则 | | ------------ | ------------------------------------------------------------------------ | | title | [order].[name].[md]中的name;若文件为readme.md,则取父目录的name | | permalink | "/article/[hash]"hash根据文件内容生成 | | date | 执行格式化的时间,格式为yyyy-MM-dd HH:mm:ss,例:2021-01-23 14:30:55 | | type | "article" | | categories | Array:所有父目录(从一级目录开始)的name,依次排列 | | author | themeConfig.author |

手动添加

| key | 数据规范 | | -------- | ------------------------------------------------------------ | | tags | Array | | navbar | Boolean:默认为true,设置为false时不会被添加到导航栏中 |