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 🙏

© 2026 – Pkg Stats / Ryan Hefner

vuepress-theme-ic

v1.0.1

Published

:tada::tada::tada: A note-style vuepress blog theme with simple, clear and practical features for the purpose

Readme

:tada::tada::tada: A note-style vuepress blog theme with simple, clear and practical features for the purpose

主题部分样式展示

Loading

Note

Note

使用方式

将vuepress-theme-ic项目下载下来,执行yarn link

然后新建一个博文比较项目,执行yarn link vuepress-theme-ic,将主题引入项目中

然后配置config.js

module.exports = {
  // 博客名
  title: "Narrow road meet, code revere win.",
  // 博客描述
  description: "码,需清心寡欲",
  theme: require.resolve("vuepress-theme-ic/theme/"), // 引入主题
  themeConfig: {
    // 设置logo
    logo: "/ikangxu.jpg",
    author: "IKangXu",
    searchMaxSuggestions: 20,
    repo: "IKangXu/vuepress-theme-ic",
    docsDir: "docs",
    editLinks: true,
    editLinkText: "在 GitHub 上编辑此页",
    lastUpdated: "Last Updated",
    navs: [
      // 默认为左侧底部设计
      { text: "关于", link: "/notes/about", blank: false },
      { text: "友链", link: "/notes/friendLink", blank: false },
      { text: "RSS", link: "http://ikangxu.cn/rss.xml", blank: true }
    ],
    noteConfig: {
      bg: "/bg.jpg",
      // 来创建左侧菜单
      nav: [
        {
          text: "随笔", // 左侧栏名称
          icon: "",
          frontmatter: {
            // 指定frontmatter内容
            id: "other", // 指向vuepress-plugin-blog中的frontmatter
            key: "essay" // Markdown中的frontmatter配置的categories值
          }
        },
        {
          text: "语言",
          icon: "",
          frontmatter: { id: "language" }, // 通过这种方式进行分组设置
          open: true,
          items: [
            {
              text: "Java",
              icon: "",
              frontmatter: { key: "Java" },
              items: [
                {
                  text: "SpringBoot",
                  icon: "",
                  frontmatter: { key: "SpringBoot" }
                },
                {
                  text: "SpringCloud",
                  icon: "",
                  frontmatter: { key: "SpringCloud" }
                }
              ]
            },
            {
              text: "JavaScript",
              icon: "",
              frontmatter: { key: "JavaScript" },
              items: [
                {
                  text: "ECMAScript6",
                  icon: "",
                  frontmatter: { key: "ECMAScript6" }
                },
                {
                  text: "Vue",
                  icon: "",
                  frontmatter: { key: "Vue" }
                },
                {
                  text: "React",
                  icon: "",
                  frontmatter: { key: "React" }
                }
              ]
            }
          ]
        }
      ],
      // 联系我设置内容
      contact: {
        enabled: true,
        items: [
          {
            text: "QQ",
            link: "http://wpa.qq.com/msgrd?v=3&uin=1454900516&site=qq&menu=yes",
            icon: "iconqq"
          },
          {
            text: "GitHub",
            link: "https://github.com/IKangXu",
            icon: "icongithub"
          }
        ]
      }
    },
    comment: {
      choosen: "valine",
      // options选项中的所有参数,会传给Valine的配置
      options: {
        el: "#valine-ic-comment",
        appId: "xxxx",
        appKey: "xxxx",
        notify: false,
        visitor: true,
        placeholder: "just go go"
      },
      container: ".valine-ic-comment" // 默认即可
    },
    sponsor: ["/alipay.jpg", "/Tenpay.png"],
    footer: {
      icp: {
        val: "苏ICP备19025415号",
        link: "http://beian.miit.gov.cn/"
      }, // ICP备案
      startYear: "2019", // 开始日期
      psr: {
        val: "", //"苏公网安备 XXXXX号",
        link:
          "http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=XXXXX&token=62a24040-710d-473b-89b8-26de6e91d20b"
      } // 公安备案
    }
  },
  markdown: {
    lineNumbers: true
  },
  plugins: [
    [
      "@vuepress/plugin-blog",
      {
        frontmatters: [
          {
            id: "other",
            keys: ["other"],
            path: "/other/"
          },
          {
            id: "language",
            keys: ["language"],
            path: "/language/"
          }
        ]
      }
    ],
    "@vuepress/medium-zoom",
    [
      "@ikangxu/vuepress-plugin-rss", // 需要下载仓库中的vuepress-plugin-rss
      {
        base_url: "/", // required
        site_url: "http://www.ikangxu.cn/", // required
        copyright: "2020 IKangXu", // optional
        // filter some post
        filter: frontmatter => {
          return [true | false];
        },
        // How much articles
        count: 20
      }
    ]
  ]
};

首页配置

---
home: true
heroImage: /logo.png
features:
- author: Steve Jobs
  details: The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.
- author: Steve Jobs
  details: Stay hungry, stay foolish.
- author: Werner Vogels
  details: You build it, you run it.
- author: Linus Torvalds
  details: Talk is cheap. Show me the code.
- author: Facebook
  details: Go big or go home.
- author: Facebook
  details: Done is better than perfect.
- author: 马云
  details: Today is cruel. Tomorrow is crueler. And the day after tomorrow is beautiful.
- author: 马云
  details: If you don't give up, you still have a chance. And, when you are small, you have to be very focused and rely on your brain, not your strength.
sponsor: false
---

文章中相关自定义头设置

sponsor: false   ### 赞赏功能的开启操作
comment: true   ### 评论功能的开启
reprint:   ### 文章出处
    author: 程序猿DD-翟永超
    title: Spring Boot属性配置文件详解
    link: http://blog.didispace.com/springbootproperties/

附图本人

目录图