51工具盒子hexo 博客添加导航功能 {#hexo 博客添加导航功能}
效果图如下 :传送门
如果你需要新建一个页面, 前提是你需要有一个博客, 我用的是 matery 主题, 参考了 洪卫的博客搭建教程, 和闪烁之狐的搭建教程, 如果没有博客也可以参考我写的 教程搭建一个自己的博客, 话不多说, 下面开始操作
新建导航页面 {#新建导航页面}
hexo new page 'navigate'
这时候我们发现 sources/navigate/ 多了一个目录和 index.md 文件, 这个时候就不用管了, 下面开始编写导航相关代码
添加导航栏页面 {#添加导航栏页面}
进入\themes\matery\_config.yml
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Contact:
url: /contact
icon: fas fa-comments
Friends:
url: /friends
icon: fas fa-address-book
# 添加导航栏页面
Navigate:
url: /navigate
icon: fas fa-location-arrow
图标请在 https://fontawesome.com 这个网站获取, 因为这是 matery 主题源码指定的图标库, 修改起来很麻烦, 搜索需要使用对应的英文, 中文无法获取搜索结果;
添加 navigate.ejs {#添加 navigate-ejs}
定位到 \themes\matery\layout\ 新建 navigate.ejs 文件, 复制以下代码
<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>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 链接 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row tags-posts"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>娱乐 · 影视<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.jd.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>京东<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.taobao.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>淘宝<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.tmall.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>天猫<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://v.qq.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>腾讯视频<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.iqiyi.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>爱奇艺<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.bilibili.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>哔哩哔哩<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://music.163.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>网易云音乐<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://y.qq.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span><span class="token constant">QQ</span>音乐<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.kugou.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>酷狗音乐<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>社区 · Code<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.mobaijun.com/contact/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>留言<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://github.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>GitHub<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://coding.net/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>Coding<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://juejin.im/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>掘金<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://gitee.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>码云<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.csdn.net/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span><span class="token constant">CSDN</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.jianshu.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>简书<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://segmentfault.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>思否<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://cloud.tencent.com/developer/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>云 <span class="token operator">+</span> 社区<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>实用 · 工具<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://mdnice.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>Nice 编辑器<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://translate.google.cn/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>谷歌翻译<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.uupoop.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>在线<span class="token constant">PS</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.processon.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>思维导图<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://wallhaven.cc/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>超清壁纸<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://cli.im/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>二维码<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.yinfans.me/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>音范思<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.52pojie.cn/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>吾爱破解<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://my.openwrite.cn/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span><span class="token constant">OW</span>分发<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>编程 · 学习<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.oschina.net/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>开源中国<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://htmldog.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span><span class="token constant">HTML</span>狗<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.icourse163.org/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>中国大学慕课<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.imooc.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>慕课网<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.wxapp-union.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>小程序<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.runoob.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>菜鸟教程<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://blog.51cto.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>51CTO<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.shiyanlou.com/library/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>实验楼<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://spring.io/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>Spring<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>资讯 · 趋势<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.huxiu.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>虎嗅<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://insights.stackoverflow.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>技术调查<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.asciiworld.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>摸鱼<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://sspai.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>少数派<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://zh.wikihow.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>WikeHom<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.awesomes.cn/rank?sort=hot"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>前端趋势<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://github-trending.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>GitHub 趋势<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.tiobe.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>编程趋势<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://trends.google.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>Google 趋势<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col s12 m6 l4 friend-div"</span> data<span class="token operator">-</span>aos<span class="token operator">=</span><span class="token string">"zoom-in-up"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-tit"</span><span class="token operator">></span>搜索 · 其他<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"jj-list-con"</span><span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://ac.scmor.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>谷歌镜像<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://www.pansoso.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>网盘搜索<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://tool.mkblog.cn/music/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>音乐搜索<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.dytt8.net/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>电影天堂<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://carbon.now.sh/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>代码图片<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.zhipin.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>Boos<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://fontawesome.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>图标库<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.qvdv.com/tools/qvdv-guid.html"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>在线工具<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"http://zhongguose.com/"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"link-3"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>中国色<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token comment">/* 选择搜索引擎 */</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hover</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'auto'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'40px'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box-2 ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hover</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'auto'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'46px'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> _tihs <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> _html <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'baidu_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.baidu.com/s'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'wd'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'google_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.google.com/search'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'q'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'bing_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.bing.com/search'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'q'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.baidu form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'action'</span><span class="token punctuation">,</span> _tihs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.this_s'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>_html<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#kw'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> _name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'40px'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box-2 li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> _tihs <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> _html <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'baidu_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.baidu.com/s'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'wd'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'google_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.google.com/search'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'q'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>_tihs <span class="token operator">==</span> <span class="token string">'bing_s'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
_tihs <span class="token operator">=</span> <span class="token string">'https://www.bing.com/search'</span><span class="token punctuation">;</span>
_name <span class="token operator">=</span> <span class="token string">'q'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.baidu form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'action'</span><span class="token punctuation">,</span> _tihs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.this_s'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>_html<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#kw-2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> _name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.Select-box-2 ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'48px'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 清空输入框内容</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.qingkong'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">cls</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'display'</span><span class="token punctuation">,</span> <span class="token string">'none'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">cls</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> t <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"INPUT"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> t<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">++</span>sum<span class="token punctuation">;</span>
t<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><span class="token comment">// 清空</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 清空输入框按钮的显示和隐藏</span>
<span class="token keyword">function</span> <span class="token function">if_btn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> btn_obj <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"kw"</span><span class="token punctuation">)</span> <span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"kw-2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> cls_btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"qingkong"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> btn_obj_val<span class="token punctuation">;</span>
<span class="token keyword">var</span> times<span class="token punctuation">;</span>
<span class="token comment">// 当元素获得焦点时</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>btn_obj <span class="token operator">==</span> <span class="token string">''</span> <span class="token operator">||</span> btn_obj <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// 如果没有找到这个元素，则将函数返回，不继续执行</span>
<span class="token punctuation">}</span>
btn_obj<span class="token punctuation">.</span><span class="token function-variable function">onfocus</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
times <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
btn_obj_val <span class="token operator">=</span> btn_obj<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>btn_obj_val <span class="token operator">!=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
cls_btn<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
cls_btn<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 元素失去焦点时</span>
btn_obj<span class="token punctuation">.</span><span class="token function-variable function">onblur</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">clearInterval</span><span class="token punctuation">(</span>times<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</div>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑"
}
ul<span class="token punctuation">,</span>
li<span class="token punctuation">,</span>
h1<span class="token punctuation">,</span>
h2<span class="token punctuation">,</span>
h3<span class="token punctuation">,</span>
h4<span class="token punctuation">,</span>
h5<span class="token punctuation">,</span>
h6<span class="token punctuation">,</span>
p<span class="token punctuation">,</span>
form<span class="token punctuation">,</span>
dl<span class="token punctuation">,</span>
dt<span class="token punctuation">,</span>
dd <span class="token punctuation">{</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> 0px<span class="token punctuation">;</span>
<span class="token literal-property property">padding</span><span class="token operator">:</span> 0px<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 14px<span class="token punctuation">;</span>
font<span class="token operator">-</span>weight<span class="token operator">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
img <span class="token punctuation">{</span>
border<span class="token operator">-</span>style<span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
li <span class="token punctuation">{</span>
list<span class="token operator">-</span>style<span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token literal-property property">float</span><span class="token operator">:</span> left
<span class="token punctuation">}</span>
a <span class="token punctuation">{</span>
text<span class="token operator">-</span>decoration<span class="token operator">:</span> none
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>card <span class="token punctuation">{</span>
background<span class="token operator">-</span>color<span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">240</span><span class="token punctuation">,</span> <span class="token number">229</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">96</span><span class="token operator">%</span><span class="token punctuation">;</span>
margin<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">2</span><span class="token operator">%</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>baidu <span class="token punctuation">{</span>
<span class="token literal-property property">float</span><span class="token operator">:</span> left<span class="token punctuation">;</span>
margin<span class="token operator">-</span>left<span class="token operator">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>baidu form <span class="token punctuation">{</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> relative
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box ul <span class="token punctuation">{</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 40px<span class="token punctuation">;</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> absolute<span class="token punctuation">;</span>
<span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token operator">-</span>1px<span class="token punctuation">;</span>
<span class="token literal-property property">top</span><span class="token operator">:</span> 0px<span class="token punctuation">;</span>
z<span class="token operator">-</span>index<span class="token operator">:</span> <span class="token number">9999</span><span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> 1px solid #ccc<span class="token punctuation">;</span>
border<span class="token operator">-</span>top<span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token literal-property property">overflow</span><span class="token operator">:</span> hidden
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box li <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 60px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 40px<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 14px<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token number">484848</span><span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">cursor</span><span class="token operator">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box li<span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> #3385ff<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box <span class="token punctuation">.</span>this_s <span class="token punctuation">{</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #317ef3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box <span class="token punctuation">.</span>this_s<span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #317ef3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>qingkong <span class="token punctuation">{</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> absolute<span class="token punctuation">;</span>
<span class="token literal-property property">right</span><span class="token operator">:</span> 120px<span class="token punctuation">;</span>
<span class="token literal-property property">top</span><span class="token operator">:</span> 12px<span class="token punctuation">;</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 18px<span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 18px<span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
border<span class="token operator">-</span>radius<span class="token operator">:</span> 18px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 16px<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token number">666666</span><span class="token punctuation">;</span>
<span class="token literal-property property">cursor</span><span class="token operator">:</span> pointer<span class="token punctuation">;</span>
text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 14px<span class="token punctuation">;</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>qingkong<span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>qingkong<span class="token operator">:</span>active <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>baidu<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 110px<span class="token punctuation">;</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
padding<span class="token operator">-</span>top<span class="token operator">:</span> 50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>baidu<span class="token operator">-</span><span class="token number">2</span> form <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 520px<span class="token punctuation">;</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>baidu<span class="token operator">-</span><span class="token number">2</span> input <span class="token punctuation">{</span>
<span class="token literal-property property">padding</span><span class="token operator">:</span> 13px 8px<span class="token punctuation">;</span>
<span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0.9</span><span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#Select<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">{</span>
<span class="token literal-property property">float</span><span class="token operator">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">{</span>
text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
<span class="token literal-property property">float</span><span class="token operator">:</span> left<span class="token punctuation">;</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> ul <span class="token punctuation">{</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 46px<span class="token punctuation">;</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> absolute<span class="token punctuation">;</span>
<span class="token literal-property property">left</span><span class="token operator">:</span> 0px<span class="token punctuation">;</span>
<span class="token literal-property property">top</span><span class="token operator">:</span> 1px<span class="token punctuation">;</span>
z<span class="token operator">-</span>index<span class="token operator">:</span> <span class="token number">9999</span><span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.9</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> 1px solid #ccc<span class="token punctuation">;</span>
border<span class="token operator">-</span>top<span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token literal-property property">overflow</span><span class="token operator">:</span> hidden
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> li <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 60px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 46px<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 15px<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token number">484848</span><span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">cursor</span><span class="token operator">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> <span class="token literal-property property">li</span><span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> #3385ff<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">.</span>this_s <span class="token punctuation">{</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #317ef3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>Select<span class="token operator">-</span>box<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">.</span>this_s<span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #317ef3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#kw<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 335px<span class="token punctuation">;</span>
<span class="token literal-property property">outline</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> 1px solid #ccc<span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token number">000000</span><span class="token punctuation">;</span>
padding<span class="token operator">-</span>left<span class="token operator">:</span> 70px<span class="token punctuation">;</span>
font<span class="token operator">-</span>weight<span class="token operator">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 修改搜索框样式 */</span>
#su<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> 90px<span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> blue<span class="token punctuation">;</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
border<span class="token operator">-</span>top<span class="token operator">:</span> #3385ff 1px solid<span class="token punctuation">;</span>
border<span class="token operator">-</span>bottom<span class="token operator">:</span> 1px solid #2d78f4<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
<span class="token literal-property property">cursor</span><span class="token operator">:</span> pointer<span class="token punctuation">;</span>
<span class="token comment">/* 去轮廓阴影 */</span>
<span class="token literal-property property">outline</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 光标移动到搜索框颜色 */</span>
#su<span class="token operator">-</span><span class="token number">2</span><span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> blue<span class="token punctuation">;</span>
border<span class="token operator">-</span>bottom<span class="token operator">:</span> 1px solid blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#su<span class="token operator">-</span><span class="token number">2</span><span class="token operator">:</span>active <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> blue<span class="token punctuation">;</span>
box<span class="token operator">-</span>shadow<span class="token operator">:</span> inset 1px 1px 3px blue<span class="token punctuation">;</span>
<span class="token operator">-</span>webkit<span class="token operator">-</span>box<span class="token operator">-</span>shadow<span class="token operator">:</span> inset 1px 1px 3px blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>jj<span class="token operator">-</span>list<span class="token operator">-</span>tit <span class="token punctuation">{</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 16px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 25px<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
padding<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">38.5</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>jj<span class="token operator">-</span>list<span class="token operator">-</span>con <span class="token punctuation">{</span>
<span class="token literal-property property">overflow</span><span class="token operator">:</span> hidden<span class="token punctuation">;</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span> auto
<span class="token punctuation">}</span>
<span class="token comment">/* 控制网站列表间距 */</span>
<span class="token punctuation">.</span>jj<span class="token operator">-</span>list<span class="token operator">-</span>con li <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">31.333</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">1</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>link<span class="token operator">-</span><span class="token number">3</span> <span class="token punctuation">{</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> block<span class="token punctuation">;</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.35</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token constant">FFF</span><span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 13px<span class="token punctuation">;</span>
text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 35px<span class="token punctuation">;</span>
<span class="token literal-property property">padding</span><span class="token operator">:</span> 4px <span class="token number">0</span><span class="token punctuation">;</span>
border<span class="token operator">-</span>radius<span class="token operator">:</span> 2px<span class="token punctuation">;</span>
<span class="token literal-property property">transition</span><span class="token operator">:</span> all <span class="token number">0</span><span class="token punctuation">.</span>2s
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>link<span class="token operator">-</span><span class="token number">3</span><span class="token operator">:</span>hover <span class="token punctuation">{</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.45</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 15px<span class="token punctuation">;</span>
font<span class="token operator">-</span>weight<span class="token operator">:</span> bold
<span class="token punctuation">}</span>
<span class="token comment">/*1 栏 小于 584*/</span>
@media only screen <span class="token function">and</span> <span class="token punctuation">(</span><span class="token parameter">max<span class="token operator">-</span>width<span class="token operator">:</span> 584px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span>navi<span class="token operator">-</span>height <span class="token punctuation">{</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 1300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>link<span class="token operator">-</span>box <span class="token punctuation">{</span>
margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">5</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>large<span class="token operator">-</span>screen <span class="token punctuation">{</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 2 栏 大于 584 小于 993px */</span>
@media only screen <span class="token function">and</span> <span class="token punctuation">(</span>min<span class="token operator">-</span>width<span class="token operator">:</span> 584px<span class="token punctuation">)</span> <span class="token function">and</span> <span class="token punctuation">(</span><span class="token parameter">max<span class="token operator">-</span>width<span class="token operator">:</span> 993px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span>navi<span class="token operator">-</span>height <span class="token punctuation">{</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 800px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>link<span class="token operator">-</span>box <span class="token punctuation">{</span>
margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">5</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>large<span class="token operator">-</span>screen <span class="token punctuation">{</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/*3 栏 大于 993px*/</span>
@media only screen <span class="token function">and</span> <span class="token punctuation">(</span><span class="token parameter">min<span class="token operator">-</span>width<span class="token operator">:</span> 993px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span>navi<span class="token operator">-</span>height <span class="token punctuation">{</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> absolute<span class="token punctuation">;</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 隐藏 footer */</span>
<span class="token punctuation">.</span>page<span class="token operator">-</span>footer <span class="token punctuation">{</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</`style`>`
`<%` `if` `(`theme`.`banner`.`enable`)` `{` `%>`
`<`script`>`
`// 每天切换 banner 图. Switch banner image every day.`
`$('.bg-cover').css('background-image',` `'url(/medias/banner/'` `+` `new` `Date().getDay()` `+` `'.jpg)');`
`</`script`>`
`<%` `}` `else` `{` `%>`
`<`script`>`
`$('.bg-cover').css('background-image',` `'url(/medias/banner/0.jpg)');`
`</`script`>`
`<%` `}` `%>
添加翻译 {#添加翻译}
定位到 \themes\matery\languages\ 目录, 下方存在两个翻译文件, 一个 default.yml 是默认英文,zh-CN.yml是中文, 可以在博客根目录配置文件 _config.yml 修改默认语言
# Site
title: 框架师
subtitle: 墨白
description: 中南财经大学 | 金融管理 | 计算机应用
keywords: Java Python 编程语言 墨白 框架师 计算机应用 视频资料 免费
author: 墨白
language: zh-CN
timezone:
打开 default.yml 文件, 定位到 friends: Friends, 在下面添加一行navigate: Navigate 即可, 打开 zh-CN.yml, 定位到friends: 友链, 在下面添加一行navigate: 导航; 到这里基本上是没问题了, 如果你发现导航栏还是英文, 定位到\themes\matery\layout\_partial\mobile-nav.ejs 添加以下代码, 还有 navigation.ejs 同上修改
<%
var menuMap = new Map();
menuMap.set("Index", "首页");
menuMap.set("Tags", "标签");
menuMap.set("Categories", "分类");
menuMap.set("Archives", "归档");
menuMap.set("About", "关于");
menuMap.set("Contact", "留言");
menuMap.set("Friends", "友链");
menuMap.set("Navigate", "导航");
%>
在 git bash 输入以下命令预览, 记得清理一下 浏览器缓存
$ hexo clean && hexo g && hexo s
如果以上很顺利没什么问题, 可以直接将博客部署上线即可, 输入以下命令
$ hexo clean && hexo g && hexo d
