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-blog-material

v0.2.3

Published

Material VuePress Blog Theme Powered By Vuetify

Downloads

4

Readme

vuepress-theme-blog-material

Material VuePress Blog Theme Powered By Vuetify.

在线 Demo

目前主题仍处于开发中,近期准备使用 TypeScript + Vue 3 + Vuetify 3 + Vuepress 2 重写,切换到 VuePress 2 后,博客的文件结构可能会有变动。主题稳定以后会使用 v1.0.0 作为版本号。

使用主题

下载

从 release 下载最新的 template。

安装依赖:

yarn

修改 your-blog/blog/.vuepress/config.js

之后会写 GitHub Actions 自动发布 template。

在本地测试运行

yarn dev

构建(以发布到网站上)

yarn build

博客编写

博文路径

本人比较喜欢按文件夹对博客进行分类,URL 呈现博文的路径。如果喜欢使用日期作为 URL,可以进行配置。

使用 Git 做版本管理

由于 @vuepress/plugin-last-updated 插件将博文在 Git 的提交时间作为最后修改时间,不管你是否将博客源代码上传到 GitHub 等 Git 平台,都推荐使用 Git 来管理博客。

图片和文件

Markdown 中的图片和文件可以通过相对路径(形如 ./pic.jpg)或绝对路径(形如 /img/pic.jpg)的形式插入。VuePress 对二者的处理方式不同:

  • 对于绝对路径(以及外链),VuePress 会直接将链接复制到生成的 HTML 中。VuePress 只会将出现在 /blog/.vuepress/public 的文件复制到生成的根目录(如 /img.pic 的图片应当放在 /blog/.vuepress/public/img.pic 中)。
  • 对于相对路径的图片,VuePress 会将相对链接引用的图片交给 webpack 处理。在编译阶段,webpack 会寻找到图片,然后将其复制到生成文件夹,同时修改链接为新的 URL。好处在于只要相对路径正确,图片可以放在自己喜欢的任意一个文件夹,如果相对路径错误还会有显式报错;坏处在于文件路径会被修改。

VuePress 建议对图片使用相对路径,对文件使用绝对路径。但我个人推荐都使用绝对路径,因为 webpack 只会识别 <img>![]() 而忽略其它格式(如普通链接)的图片链接;如果同时使用相对路径和绝对路径引用一个图片也会导致出错。


每篇博客的头图会从19 张 Material 风格照片中随机选择一张。你也可以在 frontmatter 中添加 image 字段(仅支持绝对路径链接)替换。

---
title: Markdown 效果演示
date: 2021-7-7 21:23:36
tags:
- markdown 
image: https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg
---

如果你恰巧也是使用 VS Code 编写 Markdown,你可以使用 Markdown Image 插件来向 Markdown 插入图片,该插件会自动将剪贴板中的图片复制到对应文件夹,然后修改链接使得该主题能够直接加载。

相关配置为:

{
  "markdown-image.base.uploadMethod": "Local",
  "markdown-image.local.path": "/blog/.vuepress/public/images/",
  "markdown-image.local.referencePath": "/images/"
}

代码块染色

使用 Prism 进行代码块染色。支持的语言列表请见 Prism

LaTeX 公式

支持 LaTeX 公式。

行内公式:$a+b$

行间公式:

$$\left\{\begin{aligned}
I_0 &= 1 - e^{-1} \\
I_n &= 1-nI_{n-1} \quad (n=1,2,...)
\end{aligned} \right.$$

开发主题

git clone https://github.com/lyh543/vuepress-theme-blog-material.git vuepress-theme-blog-material
yarn
yarn dev:example

已知问题

  • npm run serve 时不会生成 sitemap.xmlrss.xml,但是 npm run build 会生成。