Hexo添加导航页-阿里云开发者社区

效果

效果演示

新建页面

首先新建页面，执行下面的命令

hexo new page navigate

修改navigate目录下的index.md的格式

---

title: 导航

date: 2020-10-18 15:19:14

type: "navigate"

layout: "navigate"

---

在主题配置文件中添加导航

# main menu navigation url and icon

# 配置菜单导航的名称、路径和图标icon.

menu:

Index:

url: /

icon: fas fa-home

标签:

url: /tags

icon: fas fa-tags

时光轴:

url: /archives

icon: fas fa-hourglass-half

留言板:

url: /contact

icon: fas fa-comments

关于:

url: /about

icon: fas fa-user-circle

友情链接:

url: /friends

icon: fas fa-address-book

Select:

icon: fas fa-life-ring

children:

- name: 导航

url: /navigate

icon: fas fa-location-arrow

- name: 相册

url: /galleries

icon: fas fa-image

添加`navigate.ejs`页面

在 matery/layout 下新建 navigate.ejs

<style>

dd,dl,dt,form,h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0;font-size:14px;font-weight:400}img{border-style:none}li{list-style:none;float:left}a{text-decoration:none}.card{background-color:rgba(25,240,229,0);width:96%;margin-left:2%}.baidu{float:left;margin-left:100px}.baiduform{position:relative}.Select-boxul{height:40px;position:absolute;left:-1px;top:0;z-index:9999;background:#fff;border:1pxsolid#ccc;border-top:none;overflow:hidden}.Select-boxli{width:60px;line-height:40px;font-size:14px;color:#484848;border:0;cursor:pointer}.Select-boxli:hover{background:#3385ff;color:#fff}.Select-box.this_s{color:#317ef3}.Select-box.this_s:hover{background:#fff;color:#317ef3}.qingkong{position:absolute;right:120px;top:12px;width:18px;height:18px;background:rgba(0,0,0,.1);border-radius:18px;line-height:16px;color:#666;cursor:pointer;text-align:center;font-size:14px;display:none}.qingkong:hover{background:rgba(0,0,0,.2)}.qingkong:active{background:rgba(0,0,0,.3)}.baidu-2{width:100%;height:110px;margin:0auto;background:00;padding-top:50px}.baidu-2form{width:520px;margin:0auto}.baidu-2input{padding:13px8px;opacity:.9;font-size:15px}#Select-2{float:left}.Select-box-2{text-align:center;float:left;position:relative}.Select-box-2ul{height:46px;position:absolute;left:0;top:1px;z-index:9999;background:rgba(255,255,255,.9);border:1pxsolid#ccc;border-top:none;overflow:hidden}.Select-box-2li{width:60px;line-height:46px;font-size:15px;color:#484848;border:0;cursor:pointer}.Select-box-2li:hover{background:#3385ff;color:#fff}.Select-box-2.this_s{color:#317ef3}.Select-box-2.this_s:hover{background:00;color:#317ef3}#kw-2{width:335px;outline:0;border:1pxsolid#ccc;background:rgba(255,255,255,.2);color:#000;padding-left:70px;font-weight:700}#su-2{width:90px;background:#00f;border:none;border-top:#3385ff1pxsolid;border-bottom:1pxsolid#2d78f4;color:#fff;cursor:pointer;outline:0}#su-2:hover{background:#00f;border-bottom:1pxsolid#00f}#su-2:active{background:#00f;box-shadow:inset1px1px3px#00f;-webkit-box-shadow:inset1px1px3px#00f}.jj-list-tit{font-size:16px;line-height:25px;color:#fff;width:100%;padding-left:38.5%}.jj-list-con{overflow:hidden;margin:0auto}.jj-list-conli{width:31.333%;margin:1%}.link-3{display:block;background:rgba(0,0,0,.35);color:#fff;font-size:13px;text-align:center;line-height:35px;padding:4px0;border-radius:2px;transition:all.2s}.link-3:hover{background:rgba(0,0,0,.45);font-size:15px;font-weight:700}@mediaonlyscreenand (max-width:584px){.navi-height{height:1300px}.link-box{margin-top:5%}.large-screen{display:none}}@mediaonlyscreenand (min-width:584px) and (max-width:993px){.navi-height{height:800px}.link-box{margin-top:5%}.large-screen{display:none}}@mediaonlyscreenand (min-width:993px){.navi-height{position:absolute;width:100%;height:100%}}.page-footer{display:none}

</style>

<divclass="navi-height bg-cover pd-header">

<divclass="link-box container">

<divclass="baidu baidu-2 large-screen">

<formname="f"action="https://www.baidu.com/"target="_blank">

<divid="Select-2">

<divclass="Select-box-2"id="baidu">

<ulstyle="height:46px">

<liclass="this_s">百 · 度</li>

<liclass="bing_s">必 · 应</li>

<liclass="google_s">谷 · 歌</li>

<liclass="baidu_s">百 · 度</li>

</ul>

</div><inputname="wd"id="kw-2"maxlength="100"autocomplete="off"type="text">

</div>

<divclass="qingkong"id="qingkong"title="清 · 空"style="display:none">x</div><inputvalue="搜 · 索"id="su-2"type="submit">

<ulclass="keylist"></ul>

</form>

</div>

<divclass="row tags-posts">

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">娱乐 · 影视</div>

<ulclass="jj-list-con">

</li><li><ahref="https://www.taobao.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">淘宝</a></li>

<li><ahref="https://music.163.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">网易云音乐</a></li>

</ul>

</div>

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">社区 · Code</div>

<ulclass="jj-list-con">

<li><ahref="https://github.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">GitHub</a></li>

<li><ahref="https://coding.net/"rel="external nofollow noreferrer"class="link-3"target="_blank">Coding</a></li>

</ul>

</div>

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">实用 · 工具</div>

<ulclass="jj-list-con">

<li><ahref="https://mdnice.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">Markdown编辑器</a></li>

<li><ahref="https://cli.im/"rel="external nofollow noreferrer"class="link-3"target="_blank">二维码生成</a></li>

<li><ahref="http://tool.cc/pic-resizer/"rel="external nofollow noreferrer"class="link-3"target="_blank">图片在线压缩</a></li>

<li><ahref="https://www.iconfont.cn/"rel="external nofollow noreferrer"class="link-3"target="_blank">阿里巴巴图标库</a></li>

</ul>

</div>

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">编程 · 学习</div>

<ulclass="jj-list-con">

<li><ahref="https://htmldog.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">HTML狗</a></li>

<li><ahref="https://www.icourse163.org/"rel="external nofollow noreferrer"class="link-3"target="_blank">中国大学慕课</a></li>

<li><ahref="https://spring.io/"rel="external nofollow noreferrer"class="link-3"target="_blank">Spring</a></li>

</ul>

</div>

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">资讯 · 趋势</div>

<ulclass="jj-list-con">

<li><ahref="https://zh.wikihow.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">WikeHom</a></li>

<li><ahref="https://github-trending.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">GitHub趋势</a></li>

<li><ahref="https://trends.google.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">Google趋势</a></li>

</ul>

</div>

<divclass="col s12 m6 l4 friend-div aos-init"data-aos="zoom-in-up">

<divclass="card">

<divclass="jj-list-tit">搜索 · 其他</div>

<ulclass="jj-list-con">

</li>

</ul>

</div>

</div>

预览部署

执行相关命令

预览

hexo cl&&hexo g&&hexo s

部署

hexo cl&&hexo g&&hexo d

Hexo添加导航页

效果

新建页面

在主题配置文件中添加导航

添加`navigate.ejs`页面

预览部署

热门文章

最新文章

相关电子书

Hexo添加导航页

效果

新建页面

在主题配置文件中添加导航

添加navigate.ejs页面

预览部署

热门文章

最新文章

相关电子书

添加`navigate.ejs`页面