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

@packy-tang/navi-maker

v2.0.3

Published

配一次导航生成路由、面包屑、网站地图数据

Downloads

7

Readme

navi-maker

配一次导航生成路由、面包屑、网站地图数据

功能(Features)

一次配置可生成导航、路由、面包屑或网站地图等数据。解决零散的配置内容,用于辅佐项目的长期维护。

安装(Install)

# 安装依赖
$ npm i @packy-tang/navi-maker

使用(How to Use)

使用例子

import VueRouter from "vue-router";
import {stuff,findNode,getRoute,getNavi,getSitemap,getCrumb} from "@packy-tang/navi-maker"

//网站节点树
const tree = [
  {
    "name": "home",
    "route":{
      "path": "/",
      "meta": {
        "title": "首页",
      },
      "component": "../pages/commons/Layout.vue",
    },
    "children": [
      {
        "name": "dashboard",
        "route": {
          "path": "dashboard",
          "meta": {
            "title": "仪表盘",
          },
          "component": "../pages/Dashboard.vue",
        },
        "navi": {
          "title": "仪表盘",
          "path": "/dashboard?query=111"
        }
      },
      {
        "name":"+posts",
        "navi": {
          "title": "文章库",
          "path": "/posts/draf"
        },
        "children": [
          {
            "name":"posts/draf",
            "route": {
              "path": "/posts/draf",
              "meta": {
                "title": "草稿箱",
              },
              "component": "../pages/Dashboard.vue",
            },
            "navi": {
              "title": "草稿箱",
            }
          },
          {
            "name":"posts/publish",
            "route":{
              "path": "/posts/publish",
              "meta": {
                "title": "发布库",
              },
              "component": "../pages/Dashboard.vue",
            },
            "navi": {
              "title": "发布库",
            },
          },
          {
            "name":"+other",
            "navi": {
              "title": "其他",
            },
            "children": [
              {
                "name":"posts/trash",
                "route": {
                  "path": "/posts/trash",
                  "meta": {
                    "title": "垃圾桶",
                  },
                  "component": "../pages/Dashboard.vue"
                },
                "navi": {
                  "title": "垃圾桶",
                },
              },
            ]
          },
        ]
      },
    ]
  },
  {
    "name": "login",
    "route": {
      "path": "/auth/login",
      "meta": {
        "title": "登录",
      },
      "component": "../pages/Login.vue",
    }
  },
]

//获取路由配置
const routes = stuff(getRoute(nodes), [], { handler:({node},{handler,stuff})=>{
  //输出Vue-Router的数据格式
  const rotue = (node.route||{})
  return {
    name: node.name,
    ...route,
    children: stuff(node.children, [], {handler,stuff})
  }
} })

//创建Vue路由
const router = new VueRouter({
  routes,
  strict: conf.debug
});

//获取导航配置
const navi = stuff(getNavi(nodes), [], { handler:({node,level},{handler,stuff})=>{
  //输出导航组件使用的数据格式
  const navi = node.navi||{}
  const route = router.getRoutes().find(i=>i.name==node.name)
  const routeNode = router.resolve({ name: node.name })

  return {
    name: node.name,
    title: navi.title,
    path: navi.path || (route?routeNode.route.path:''),
    shown: typeof navi.shown == 'undefined' ? true : navi.shown,
    children: stuff(node.children, [], {handler,stuff})
  }
} })

//获取全站节点
const sitemap = getSitemap(nodes)

//获取
const crumb = getCrumb("posts/trash", navi)

配置的树节点说明,以下是包含的字段:

| 字段 | 类型 | 描述 | | -------- | ------ | ------------------------------------ | | name | String | 必要,路由或是导航的标记(请用英文) | | route | Object | 可选,路由字段。getRoute()方法根据此字段存在与否来获取节点。 | | navi | Object | 可选,导航字段。getNavi()方法根据此字段存在与否来获取节点。 | | level | Number | 保留字段,内部使用。记录和计算节点所在层级。 | | children | Array | 保留字段,内部使用。子节点集合。 |

获取路由

import {getRoute} from "@packy-tang/navi-maker"

const routes = getRoute(tree)

获取路由树,输入网站节点树,返回只包含路由属性的树。

获取导航

import {getNavi} from "@packy-tang/navi-maker"

const navi = getNavi(tree)

获取导航树,输入网站节点树,返回只包含导航属性的树。

获取面包屑

import {getCrumb} from "@packy-tang/navi-maker"

const crumb = getCrumb("posts/trash", navi)

console.log(crumb)
/**
 * 输出结果:
[
  {
    name: '+posts',
    meta: { title: '文章库' },
    level: 0,
    title: '文章库',
    path: undefined,
    children: [ [Object], [Object], [Object] ]
  },
  {
    name: '+other',
    meta: { title: '其他' },
    level: 1,
    title: '其他',
    path: undefined,
    children: [ [Object] ]
  },
  {
    name: 'posts/trash',
    level: 2,
    path: undefined,
    meta: { title: '垃圾桶', nav: [Object] },
    component: '../pages/Dashboard.vue',
    title: '垃圾桶'
  }
]
*/

获取面包屑,根据导航层级规则获取某节点至顶节点的路径。

| 变量名称 | 类型 | 描述 | | -------- | ------ | ------------------------------------ | | nodeName | String | 必须,节点名称,对应节点集合中的节点名称 | | tree | Array | 必须,节点树,用于在节点树中查找内容。 |

获取网站地图

import {getSitemap} from "@packy-tang/navi-maker"

const sitemap = getSitemap(tree)

获取所有节点内容。

| 变量名称 | 类型 | 描述 | | -------- | ------ | ------------------------------------ | | tree | Array | 必须,节点树,所有输出节点均来自这棵树。 |

其他函数

  • stuff(tree, nodes, {handler()}) 遍历并填充内容的函数,可递归使用。
  • flat(tree) 扁平树状结构,将树状结构压平为数组。
  • combo(nodes, tree) 组合函数,根据父级节点的离散数据再组合。
  • findNode() 根据名称获得树中的节点。
  • findNodePath() 根据名称获得节点至顶节点完整路径。

stuff 使用例子

import { stuff, getRoute } from "@packy-tang/navi-maker"
function handler({
  targetName,      //节点名称,用于搜索节点
  nodes,           //节点集合,用于搜索节点
  level,           //节点层级,
  type,            //层级结构的节点描述类型,0为字符串;1为数组,例如:`['+posts', ['posts/draf','posts/publish']]`;2为对象,例如:`{name:'dashboard'}`;
  node,            //节点内容,目前只有type为2时,这个才会有值,内容与层级结构节点一致,如:`{name:'dashboard'}`
}={},{
  handler,         //填充函数,用于递归处理
  stuff            //函数,用于递归处理
}){
  const rotue = (node.route||{})
  return {
    name: node.name,
    ...route,
    children: stuff(node.children, [], {handler,stuff})
  }
}

const routes = stuff(getRoute(nodes), [], {handler})

console.log(navi)

数据定义

节点定义

{
  "name": "dashboard",
  "route": {...},
  "navi": {...},
  "parentName": "",
  "level": 2,
  "children": [...],
}

| 字段 | 类型 | 描述 | | -------- | ------ | ------------------------------------ | | name | String | 必要,路由或是导航的标记(请用英文) | | route | Object | 可选,路由字段。getRoute()方法根据此字段存在与否来获取节点。 | | navi | Object | 可选,导航字段。getNavi()方法根据此字段存在与否来获取节点。 | | parentName | String | 可选,用于配合父级节点使用。一般情况下通过层级自动匹配。自定义设置后,将按配置优先。| | level | Number | 保留字段,内部使用。记录和计算节点所在层级。 | | children | Array | 保留字段,内部使用。子节点集合。 |

开发(Develop)

本地开发

# 安装依赖
$ npm ci

# 本地构建
$ npm run build
# 本地构建并检测文件变化
$ npm run watch
# 运行测试
$ npm run test

来自(From)

本仓库是由 lpreterite/sao-esm 模板化生成。

License

MIT © lpreterite