https://github.com/whelmin/navify
🌏 An elegant website navigation page generator - 网址导航页生成器
https://github.com/whelmin/navify
cli navify navigation-generator vuejs
Last synced: 8 months ago
JSON representation
🌏 An elegant website navigation page generator - 网址导航页生成器
- Host: GitHub
- URL: https://github.com/whelmin/navify
- Owner: whelmin
- License: mit
- Created: 2016-08-24T12:00:18.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-09-14T07:07:37.000Z (almost 7 years ago)
- Last Synced: 2025-01-31T01:23:50.051Z (over 1 year ago)
- Topics: cli, navify, navigation-generator, vuejs
- Language: Vue
- Homepage: https://whelmin.github.io/navify-example
- Size: 148 KB
- Stars: 23
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh.md
- License: LICENSE
Awesome Lists containing this project
README
# Navify
[](https://www.npmjs.com/package/navify)
[](https://www.npmjs.com/package/navify)
[](https://github.com/whelmin/navify/blob/master/LICENSE)
🌏 一个叫 `Navify` 的网址导航生成器。
## 如何使用
### 1. **全局安装**
```bash
$ npm install -g navify
```
### 2. **用法**
**2.1、创建并自动初始化项目**
```bash
$ navify create
```
在 `` 目录下，会自动生成可进行配置的 `index.html` 和 `nav.json` 文件。
**2.2、实时预览**
```bash
$ cd
$ navify serve
```
修改配置和数据时，项目会实时在本地 Web `8520` 端口中呈现。
**2.3、`index.html` 配置项**
```html
window.Navify = {
el: '#app',
json: './nav.json',
title: {
alias: '前端',
full: 'Web前端导航',
en: 'Front End',
},
author: {
name: 'Cong Min',
link: 'https://congm.in',
},
github: 'https://github.com/whelmin/navify',
icon: {
'share': 'https://.../share.png',
},
favicon: 'https://www.google.cn/s2/favicons?domain=',
// favicon: 'https://api.byi.pw/favicon/?url=' 国内备选
};
```
| 名称 | 类型 | 说明 | 默认值 |
|:---:|:----------:|:---------|:----|
| **el** | `String` | **挂载元素** | `'#app'` |
| **json** | `String` | **json文件来源**。本地相对路径或者网络链接 | `'./nav.json'` |
| **title** | `String/Object` | **站点名称**。若值为对象：可设 **`full`(全称)** / **`alias`(简称)** / **`en`(英文名)** 3个属性；若值为字符串：则解析为站点全称 `title.full` | `'Navify'` |
| **author** | `String/Object` | **站点作者信息**。若值为对象：可设 **`name`(名字)** / **`link`(个人主页)** 2个属性；若值为字符串：则解析为作者名字 `author.name` | `null` |
| **github** | `String` | **Github链接**。设置后页面右上角会出现Github标志 | `null` |
| **icon** | `Object` | **站点链接自定义图标**。一个Key-Value键值对象：`key` 是对应的icon名称(即nav.json内item.link的key)，`value` 是icon地址(可填写本地相对路径或者网络链接)，默认 home/github 已经拥有了内置的icon。无对应icon时将以 key 作为文本链接。 | `{}` |
| **favicon** | `String` | **favicon网站图标地址**。设置获取favicon的API服务商地址，国内可考虑备选: `'https://api.byi.pw/favicon/?url='` | `'https://www.google.cn/s2/favicons?domain='` |
**2.4、`nav.json` 数据格式**
关于 `nav.json` 的数据结构，你应该遵守以下规则格式进行网站的增删改操作。
```js
// nav.json
// List - 分类列表
[
{
"heading": "类别名(必需)",
"info": "类别简介(可无)",
"content": [
...
]
},
{
...
}
]
```
```js
// List[n].content
// Group - 类别分组列表
[
{
"title": "分组名(可无)",
"info": "分组简介(可无)",
"item": [
...
]
}
]
```
```js
// Group[m].item
// Item - 网站列表
[
{
"name": "网站名(必需)",
"info": "网站简介(可无)",
"link": {
"home": "网站主页地址(必需)",
"github": "网站Github地址(可无)"
}
}
]
```
较完整的例子：
```json
[
{
"heading": "类别名A",
"content": [
{
"item": [
{
"name": "网站名1",
"info": "网站名1的简介",
"link": {
"home": "网站名1的主页地址",
"github": "网站名1的Github地址"
}
}
]
}
]
},
{
"title": "分组名a",
"item": [
{
"name": "网站名2",
"link": {
"home": "网站名2的主页地址"
}
}
]
}
]
```
### 3. **部署访问**
**方式一、部署在服务器上**
将你的 `` 目录部署至自己的Web静态服务器，即可直接访问。
**方式二、Github Page**
GitHub Pages 支持从以下代码源读取html文件
* `docs/` 目录
* `master` 或 `gh-pages` 分支
将代码提交到github，在对应的github仓库 **设置选项** 开启 `GitHub Pages` 功能，选择 `master branch` 选项并保存，即可访问。还可以绑定自定义的域名。
---
## 关于
### 联系作者
[@ whelmin](https://whelm.in) & [@ Cong Min](https://congm.in)
### 开源许可证
[MIT License](https://github.com/whelmin/navify/blob/master/LICENSE)