🌏 An elegant website navigation page generator. Let us call it Navify
.
$ npm install -g navify
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
<script>
window.Navify = {
el: '#app',
json: './nav.json',
title: {
alias: 'FE',
full: 'Web FE checklist',
en: 'FE',
},
author: {
name: 'Cong Min',
link: 'https://congm.in',
},
github: 'https://github.com/whelmin/navify',
// Customized icon
// key is the icon, value is the icon url
icon: {
'share': 'https://.../share.png',
},
favicon: 'https://www.google.cn/s2/favicons?domain=',
// favicon: 'https://api.byi.pw/favicon/?url='
};
</script>
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:
[
{
"heading": "category 1",
"content": [
{
"item": [
{
"name": "item name 2",
"info": "item info 2",
"link": {
"home": "item website links 2",
"github": "item github links 2",
}
}
]
}
]
},
{
"title": "group 1",
"item": [
{
"name": "item name 1",
"link": {
"home": "item website links 1"
}
}
]
}
]
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
.