效果
新建页面
首先新建页面，执行下面的命令
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><ahref="https://www.jd.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">京东</a>
</li><li><ahref="https://www.taobao.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">淘宝</a></li>
<li><ahref="https://www.tmall.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">天猫</a></li>
<li><ahref="https://v.qq.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">腾讯视频</a></li>
<li><ahref="http://www.iqiyi.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">爱奇艺</a></li>
<li><ahref="https://www.bilibili.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>
<li><ahref="https://y.qq.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">QQ音乐</a></li>
<li><ahref="http://www.kugou.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">酷狗音乐</a></li>
</ul>
</div>
</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://www.mobaijun.com/contact/"rel="external nofollow noreferrer"class="link-3"target="_blank">留言</a></li>
<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>
<li><ahref="https://juejin.im/"rel="external nofollow noreferrer"class="link-3"target="_blank">掘金</a></li>
<li><ahref="https://gitee.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">码云</a></li>
<li><ahref="https://www.csdn.net/"rel="external nofollow noreferrer"class="link-3"target="_blank">CSDN</a></li>
<li><ahref="https://www.jianshu.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">简书</a></li>
<li><ahref="https://segmentfault.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">思否</a></li>
<li><ahref="https://cloud.tencent.com/developer/"rel="external nofollow noreferrer"class="link-3"target="_blank">云+社区</a></li>
</ul>
</div>
</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://translate.google.cn/"rel="external nofollow noreferrer"class="link-3"target="_blank">谷歌翻译</a></li>
<li><ahref="https://www.uupoop.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">在线PS</a></li>
<li><ahref="https://www.processon.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">思维导图</a></li>
<li><ahref="https://wallhaven.cc/"rel="external nofollow noreferrer"class="link-3"target="_blank">超清壁纸</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>
<li><ahref="https://my.openwrite.cn/"rel="external nofollow noreferrer"class="link-3"target="_blank">OW分发</a></li>
</ul>
</div>
</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://www.oschina.net/"rel="external nofollow noreferrer"class="link-3"target="_blank">开源中国</a></li>
<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://www.imooc.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">慕课网</a></li>
<li><ahref="http://www.wxapp-union.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">小程序</a></li>
<li><ahref="https://www.runoob.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">菜鸟教程</a></li>
<li><ahref="https://blog.51cto.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">51CTO</a></li>
<li><ahref="https://www.shiyanlou.com/library/"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>
</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://www.huxiu.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">虎嗅</a></li>
<li><ahref="https://insights.stackoverflow.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">技术调查</a></li>
<li><ahref="http://www.asciiworld.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">摸鱼</a></li>
<li><ahref="https://sspai.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">少数派</a></li>
<li><ahref="https://zh.wikihow.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">WikeHom</a></li>
<li><ahref="https://www.awesomes.cn/rank?sort=hot"rel="external nofollow noreferrer"class="link-3"target="_blank">前端趋势</a></li>
<li><ahref="https://github-trending.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">GitHub趋势</a></li>
<li><ahref="https://www.tiobe.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">编程趋势</a></li>
<li><ahref="https://trends.google.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">Google趋势</a></li>
</ul>
</div>
</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://ac.scmor.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">谷歌镜像</a></li>
<li><ahref="http://www.pansoso.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">网盘搜索</a></li>
<li><ahref="http://tool.mkblog.cn/music/"rel="external nofollow noreferrer"class="link-3"target="_blank">音乐搜索</a></li>
<li><ahref="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"rel="external nofollow noreferrer"class="link-3"target="_blank">又拍云</a></li>
<li><ahref="https://carbon.now.sh/"rel="external nofollow noreferrer"class="link-3"target="_blank">代码图片</a></li>
<li><ahref="https://www.zhipin.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">Boos</a></li>
<li><ahref="http://www.fontawesome.com.cn/"rel="external nofollow noreferrer"class="link-3"target="_blank">图标库</a></li>
<li><ahref="https://www.qvdv.com/tools/qvdv-guid.html"rel="external nofollow noreferrer"class="link-3"target="_blank">在线工具</a>
</li>
<li><ahref="http://zhongguose.com/"rel="external nofollow noreferrer"class="link-3"target="_blank">中国色</a></li>
</ul>
</div>
</div>
</div>
<script>$(".Select-box ul").hover(function(){$(this).css("height","auto")},function(){$(this).css("height","40px")}),$(".Select-box-2 ul").hover(function(){$(this).css("height","auto")},function(){$(this).css("height","46px")}),$(".Select-box li").click(function(){vart=$(this).attr("class"),s=$(this).html();"baidu_s"==t&&(t="https://www.baidu.com/s",_name="wd"),"google_s"==t&&(t="https://www.google.com/search",_name="q"),"bing_s"==t&&(t="https://www.bing.com/search",_name="q"),$(".baidu form").attr("action",t),$(".this_s").html(s),$("#kw").attr("name",_name),$(".Select-box ul").css("height","40px")}),$(".Select-box-2 li").click(function(){vart=$(this).attr("class"),s=$(this).html();"baidu_s"==t&&(t="https://www.baidu.com/s",_name="wd"),"google_s"==t&&(t="https://www.google.com/search",_name="q"),"bing_s"==t&&(t="https://www.bing.com/search",_name="q"),$(".baidu form").attr("action",t),$(".this_s").html(s),$("#kw-2").attr("name",_name),$(".Select-box-2 ul").css("height","48px")})</script>
</div>
</div>
预览部署
执行相关命令
预览
hexo cl&&hexo g&&hexo s
部署
hexo cl&&hexo g&&hexo d
