Navify
🌏 An elegant website navigation page generator. Let us call it Navify
.
How to use navify
1. Global install navify with npm
$ npm install -g navify
2. Usage
2.1 Create and initialize a navify project
$ navify create <dir>
Enter the above command, will automatic generated these files, index.html
and nav.json
in your <dir>
directory.
2.2 Development
$ cd <dir>$ navify serve
Browser will open automatically http://localhost:8520
2.3 index.html
Configuration
name | type | description | default |
---|---|---|---|
el | String |
the mounted element | '#app' |
json | String |
json source local relative path or network link | './nav.json' |
title | String/Object |
site info | |
author | String/Object |
author info | null |
github | String |
Github link After setting, the Github logo will appear in the upper right corner of the page. | null |
icon | Object |
customized icon | {} |
favicon | String |
favicon 'https://api.byi.pw/favicon/?url=' or 'https://www.google.cn/s2/favicons?domain=' |
2.4 nav.json
You should follow the below rules and formats to add, delete, and modify the json source.
// nav.json// List - category "heading": "category title" "info": "category info" "content": ... ...
// List[n].content// Group - group "title": "group title" "info": "group info" "item": ...
// Group[m].item// Item - item "name": "item title" "info": "item info" "link": "home": "item website links" "github": "item github links"
the complete example:
3. Deployment
3.1 Web server
set <dir>
folder in Web server or use Github Pages
to deploy.
3.2 Github Pages
There're three places to deploy navify website for your Github repository:
-
docs/
folder -
master
branch -
gh-pages
branch
in your Github repository' settings page
, choose the master branch
and save, and you can bind a custom domain name with CNAME
.