效果
效果示範建立頁面
首先建立頁面，執行下面的指令
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
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}.baidu form{position:relative}.Select-box ul{height:40px;position:absolute;left:-1px;top:0;z-index:9999;background:#fff;border:1px solid #ccc;border-top:none;overflow:hidden}.Select-box li{width:60px;line-height:40px;font-size:14px;color:#484848;border:0;cursor:pointer}.Select-box li: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:0 auto;background:0 0;padding-top:50px}.baidu-2 form{width:520px;margin:0 auto}.baidu-2 input{padding:13px 8px;opacity:.9;font-size:15px}#Select-2{float:left}.Select-box-2{text-align:center;float:left;position:relative}.Select-box-2 ul{height:46px;position:absolute;left:0;top:1px;z-index:9999;background:rgba(255,255,255,.9);border:1px solid #ccc;border-top:none;overflow:hidden}.Select-box-2 li{width:60px;line-height:46px;font-size:15px;color:#484848;border:0;cursor:pointer}.Select-box-2 li:hover{background:#3385ff;color:#fff}.Select-box-2 .this_s{color:#317ef3}.Select-box-2 .this_s:hover{background:0 0;color:#317ef3}#kw-2{width:335px;outline:0;border:1px solid #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:#3385ff 1px solid;border-bottom:1px solid #2d78f4;color:#fff;cursor:pointer;outline:0}#su-2:hover{background:#00f;border-bottom:1px solid #00f}#su-2:active{background:#00f;box-shadow:inset 1px 1px 3px #00f;-webkit-box-shadow:inset 1px 1px 3px #00f}.jj-list-tit{font-size:16px;line-height:25px;color:#fff;width:100%;padding-left:38.5%}.jj-list-con{overflow:hidden;margin:0 auto}.jj-list-con li{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:4px 0;border-radius:2px;transition:all .2s}.link-3:hover{background:rgba(0,0,0,.45);font-size:15px;font-weight:700}@media only screen and (max-width:584px){.navi-height{height:1300px}.link-box{margin-top:5%}.large-screen{display:none}}@media only screen and (min-width:584px) and (max-width:993px){.navi-height{height:800px}.link-box{margin-top:5%}.large-screen{display:none}}@media only screen and (min-width:993px){.navi-height{position:absolute;width:100%;height:100%}}.page-footer{display:none}
</style>
<div class="navi-height bg-cover pd-header">
<div class="link-box container">
<div class="baidu baidu-2 large-screen">
<form name="f" action="https://www.baidu.com/" target="_blank">
<div id="Select-2">
<div class="Select-box-2" id="baidu">
<ul style="height:46px">
<li class="this_s">百 · 度</li>
<li class="bing_s">必 · 應</li>
<li class="google_s">谷 · 歌</li>
<li class="baidu_s">百 · 度</li>
</ul>
</div> <input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text">
</div>
<div class="qingkong" id="qingkong" title="清 · 空" style="display:none">x</div> <input value="搜 · 索" id="su-2" type="submit">
<ul class="keylist"></ul>
</form>
</div>
<div class="row tags-posts">
<div class="col s12 m6 l4 friend-div aos-init" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">娛樂 · 影視</div>
<ul class="jj-list-con">
<li><a href="https://www.jd.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">京東</a>
</li><li><a href="https://www.taobao.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">淘寶</a></li>
<li><a href="https://www.tmall.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">天貓</a></li>
<li><a href="https://v.qq.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">騰訊視訊</a></li>
<li><a href="http://www.iqiyi.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">愛奇藝</a></li>
<li><a href="https://www.bilibili.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">哔哩哔哩</a> </li>
<li><a href="https://music.163.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">網易雲音樂</a></li>
<li><a href="https://y.qq.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">QQ音樂</a></li>
<li><a href="http://www.kugou.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">酷狗音樂</a></li>
</ul>
</div>
<div class="jj-list-tit">社群 · Code</div>
<li><a href="https://www.mobaijun.com/contact/" rel="external nofollow noreferrer" class="link-3" target="_blank">留言</a></li>
<li><a href="https://github.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">GitHub</a></li>
<li><a href="https://coding.net/" rel="external nofollow noreferrer" class="link-3" target="_blank">Coding</a></li>
<li><a href="https://juejin.im/" rel="external nofollow noreferrer" class="link-3" target="_blank">掘金</a></li>
<li><a href="https://gitee.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">碼雲</a></li>
<li><a href="https://www.csdn.net/" rel="external nofollow noreferrer" class="link-3" target="_blank">CSDN</a></li>
<li><a href="https://www.jianshu.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">簡書</a></li>
<li><a href="https://segmentfault.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">思否</a></li>
<li><a href="https://cloud.tencent.com/developer/" rel="external nofollow noreferrer" class="link-3" target="_blank">雲+社群</a></li>
<div class="jj-list-tit">實用 · 工具</div>
<li><a href="https://mdnice.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">Markdown編輯器</a></li>
<li><a href="https://translate.google.cn/" rel="external nofollow noreferrer" class="link-3" target="_blank">谷歌翻譯</a></li>
<li><a href="https://www.uupoop.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">線上PS</a></li>
<li><a href="https://www.processon.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">思維導圖</a></li>
<li><a href="https://wallhaven.cc/" rel="external nofollow noreferrer" class="link-3" target="_blank">超清桌面</a></li>
<li><a href="https://cli.im/" rel="external nofollow noreferrer" class="link-3" target="_blank">二維碼生成</a></li>
<li><a href="http://tool.cc/pic-resizer/" rel="external nofollow noreferrer" class="link-3" target="_blank">圖檔線上壓縮</a></li>
<li><a href="https://www.iconfont.cn/" rel="external nofollow noreferrer" class="link-3" target="_blank">阿裡巴巴圖示庫</a></li>
<li><a href="https://my.openwrite.cn/" rel="external nofollow noreferrer" class="link-3" target="_blank">OW分發</a></li>
<div class="jj-list-tit">程式設計 · 學習</div>
<li><a href="https://www.oschina.net/" rel="external nofollow noreferrer" class="link-3" target="_blank">開源中國</a></li>
<li><a href="https://htmldog.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">HTML狗</a></li>
<li><a href="https://www.icourse163.org/" rel="external nofollow noreferrer" class="link-3" target="_blank">中國大學慕課</a></li>
<li><a href="https://www.imooc.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">慕課網</a></li>
<li><a href="http://www.wxapp-union.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">小程式</a></li>
<li><a href="https://www.runoob.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">菜鳥教程</a></li>
<li><a href="https://blog.51cto.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">51CTO</a></li>
<li><a href="https://www.shiyanlou.com/library/" rel="external nofollow noreferrer" class="link-3" target="_blank">實驗樓</a></li>
<li><a href="https://spring.io/" rel="external nofollow noreferrer" class="link-3" target="_blank">Spring</a></li>
<div class="jj-list-tit">資訊 · 趨勢</div>
<li><a href="https://www.huxiu.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">虎嗅</a></li>
<li><a href="https://insights.stackoverflow.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">技術調查</a></li>
<li><a href="http://www.asciiworld.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">摸魚</a></li>
<li><a href="https://sspai.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">少數派</a></li>
<li><a href="https://zh.wikihow.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">WikeHom</a></li>
<li><a href="https://www.awesomes.cn/rank?sort=hot" rel="external nofollow noreferrer" class="link-3" target="_blank">前端趨勢</a></li>
<li><a href="https://github-trending.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">GitHub趨勢</a></li>
<li><a href="https://www.tiobe.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">程式設計趨勢</a></li>
<li><a href="https://trends.google.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">Google趨勢</a></li>
<div class="jj-list-tit">搜尋 · 其他</div>
<li><a href="https://ac.scmor.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">谷歌鏡像</a></li>
<li><a href="http://www.pansoso.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">網盤搜尋</a></li>
<li><a href="http://tool.mkblog.cn/music/" rel="external nofollow noreferrer" class="link-3" target="_blank">音樂搜尋</a></li>
<li><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" rel="external nofollow noreferrer" class="link-3" target="_blank">又拍雲</a></li>
<li><a href="https://carbon.now.sh/" rel="external nofollow noreferrer" class="link-3" target="_blank">代碼圖檔</a></li>
<li><a href="https://www.zhipin.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">Boos</a></li>
<li><a href="http://www.fontawesome.com.cn/" rel="external nofollow noreferrer" class="link-3" target="_blank">圖示庫</a></li>
<li><a href="https://www.qvdv.com/tools/qvdv-guid.html" rel="external nofollow noreferrer" class="link-3" target="_blank">線上工具</a>
</li>
<li><a href="http://zhongguose.com/" rel="external nofollow noreferrer" class="link-3" target="_blank">中國色</a></li>
<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(){var t=$(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(){var t=$(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
![Android中Webview使用經驗總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)