Emlog增加弹出搜索功能教程

作者 : 官方 本文共7754个字,预计阅读时间需要20分钟 发布时间: 2020-05-8 共144人阅读
  1. 教程简介
  2. 今天回到家 没事整理下网站 发下了自己的博客搜索太丑了 所以二话不说借助了很多有名的博客 终于看上了一款弹出搜索样式不错的搜索 也就是饺子的模板EMlog Fly模板 这个模板 17年就开始在用了 今年才换了新的模板 所以二话不说 拔Fly的搜索拔了下来 适配了自己的博客了嘛 大家也都知道一个网站没有搜索是不行 不可缺少的 用户在找东西的时候 一键搜索方便 不废话了 开始教程吧

第一步

module.php模板文件增加如下代码

 

value): ?>

<li class=”search-go”><a href=”<?php%20echo%20BLOG_URL;%20?>tag/<?php%20echo%20$value[‘tagname’];%20?>”><?php echo $value[‘tagname’]; ?></a></li>

<?php endforeach; ?>

<?php }?>

第二步

你的公用css文件增加如下css

 

.search-forms.is-visible {display: block;}

.search-forms.is-visible {animation: fade-in;animation-duration: .3s;-webkit-animation: fade-in .3s;}

.search-forms {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #fff;-webkit-animation: fade-zoom-in .3s forwards;-o-animation: fade-zoom-in .3s forwards;animation: fade-zoom-in .3s forwards;display: none;z-index: 9999;-webkit-backface-visibility: hidden;overflow: hidden;}

.search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}

.search-forms .search-form-box {position: relative;margin-bottom: 40px;}

.search-forms input {background: #fff;display: inline-block;line-height: 58px;height: 58px;color: #949494;font-size: 15px;border-radius: 3px;padding: 0 20px;width: 100%;border: 1px solid #e2e2e2;text-align: left;-webkit-appearance: none;}

.search-forms button {background: #000;display: inline-block;line-height: 58px;height: 58px;width: 100px;color: #fff;font-size: 15px;padding: 0 25px;margin: 0;border-radius: 0 3px 3px 0;position: absolute;right: 0;top: 0;border: 0;}

.search-forms .search-form-box {position: relative;margin-bottom: 40px;}

.search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}

.search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}

.search-commend ul li a {display: inline-block;line-height: 1;padding: 5px 5px;border: 1px solid #e2e2e2;border-radius: 2px;color: #949494;}

.search-commend ul li {display: inline-block;margin-bottom: 10px;margin-right: 10px;}

.search-commend h4 {position: relative;font-size: 16px;margin: 0 0 20px;}

.close-search {display: block;position: absolute;top: 10%;right: 10%;width: 80px;height: 80px;cursor: pointer;background: rgba(255,255,255,0);}

.close-bottom, .close-top {position: absolute;left: 14px;background: #333;width: 22px;height: 2px;transition: .3s;}

.close-search .close-bottom, .close-search .close-top {width: 30px!important;left: 5px!important;}

.close-search .close-top {top: 15px!important;}

.close-top {top: 19px;}

.close-search .close-bottom, .close-search .close-top {width: 45px;left: 16px;}

.close-top {-webkit-transform: translate(0,5px) rotate(225deg);transform: translate(0,5px) rotate(225deg);}

.close-search .close-top {top: 34px;}

.search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}

.close-bottom {-webkit-transform: translate(0,-5px) rotate(135deg);transform: translate(0,-5px) rotate(135deg);}

.close-search .close-bottom {bottom: 24px!important;}

第三步

你的公用js增加如下js

 

$(‘.fly-search-s’).click(function () {$(‘.search-forms’).addClass(‘is-visible’)});

$(‘.search-go,.close-search’).click(function(){$(“.search-forms”).removeClass(“is-visible”)});

第四步

footer.php文件增加如下代码

<div class=”search-forms”>

<form method=”get” action=”<?php echo BLOG_URL;?>”>

<div class=”search-form-inner”>

<div class=”search-form-box”>

<input class=”form-search” type=”text” name=”keyword” placeholder=”输入搜索关键词”>

<button type=”submit” id=”btn-search” class=”search-go”><i class=”fa fa-search”></i> </button>

</div>

<div class=”search-commend”>

<h4>大家都在搜</h4>

<ul>

<?php search_tag($title); ?>

</ul>

</div>

</div>

</form>

<div class=”close-search”>

<span class=”close-top”></span>

<span class=”close-bottom”></span>

</div>

</div>

第五步

以下是点击弹出搜索 增加你要显示的地方

<li> <a href=”javascript:;” class=”fly-search-s”

教程简介
今天回到家 没事整理下网站 发下了自己的博客搜索太丑了 所以二话不说借助了很多有名的博客 终于看上了一款弹出搜索样式不错的搜索 也就是饺子的模板EMlog Fly模板 这个模板 17年就开始在用了 今年才换了新的模板 所以二话不说 拔Fly的搜索拔了下来 适配了自己的博客了嘛 大家也都知道一个网站没有搜索是不行 不可缺少的 用户在找东西的时候 一键搜索方便 不废话了 开始教程吧

第一步
module.php模板文件增加如下代码

<?php
//search:手机搜索标签
function search_tag($title){
global $CACHE;
$tag_cache = $CACHE->readCache(‘tags’);?>
<?php shuffle ($tag_cache);
$tag_cache = array_slice($tag_cache,0,15);foreach($tag_cache as $value): ?>
<li class=”search-go”><a href=”<?php%20echo%20BLOG_URL;%20?>tag/<?php%20echo%20$value[‘tagname’];%20?>”><?php echo $value[‘tagname’]; ?></a></li>
<?php endforeach; ?>
<?php }?>
第二步
你的公用css文件增加如下css

.search-forms.is-visible {display: block;}
.search-forms.is-visible {animation: fade-in;animation-duration: .3s;-webkit-animation: fade-in .3s;}
.search-forms {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #fff;-webkit-animation: fade-zoom-in .3s forwards;-o-animation: fade-zoom-in .3s forwards;animation: fade-zoom-in .3s forwards;display: none;z-index: 9999;-webkit-backface-visibility: hidden;overflow: hidden;}
.search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}
.search-forms .search-form-box {position: relative;margin-bottom: 40px;}
.search-forms input {background: #fff;display: inline-block;line-height: 58px;height: 58px;color: #949494;font-size: 15px;border-radius: 3px;padding: 0 20px;width: 100%;border: 1px solid #e2e2e2;text-align: left;-webkit-appearance: none;}
.search-forms button {background: #000;display: inline-block;line-height: 58px;height: 58px;width: 100px;color: #fff;font-size: 15px;padding: 0 25px;margin: 0;border-radius: 0 3px 3px 0;position: absolute;right: 0;top: 0;border: 0;}
.search-forms .search-form-box {position: relative;margin-bottom: 40px;}
.search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}
.search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
.search-commend ul li a {display: inline-block;line-height: 1;padding: 5px 5px;border: 1px solid #e2e2e2;border-radius: 2px;color: #949494;}
.search-commend ul li {display: inline-block;margin-bottom: 10px;margin-right: 10px;}
.search-commend h4 {position: relative;font-size: 16px;margin: 0 0 20px;}
.close-search {display: block;position: absolute;top: 10%;right: 10%;width: 80px;height: 80px;cursor: pointer;background: rgba(255,255,255,0);}
.close-bottom, .close-top {position: absolute;left: 14px;background: #333;width: 22px;height: 2px;transition: .3s;}
.close-search .close-bottom, .close-search .close-top {width: 30px!important;left: 5px!important;}
.close-search .close-top {top: 15px!important;}
.close-top {top: 19px;}
.close-search .close-bottom, .close-search .close-top {width: 45px;left: 16px;}
.close-top {-webkit-transform: translate(0,5px) rotate(225deg);transform: translate(0,5px) rotate(225deg);}
.close-search .close-top {top: 34px;}
.search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
.close-bottom {-webkit-transform: translate(0,-5px) rotate(135deg);transform: translate(0,-5px) rotate(135deg);}
.close-search .close-bottom {bottom: 24px!important;}
第三步
你的公用js增加如下js

$(‘.fly-search-s’).click(function () {$(‘.search-forms’).addClass(‘is-visible’)});
$(‘.search-go,.close-search’).click(function(){$(“.search-forms”).removeClass(“is-visible”)});
第四步
footer.php文件增加如下代码
<div class=”search-forms”>
<form method=”get” action=”<?php echo BLOG_URL;?>”>
<div class=”search-form-inner”>
<div class=”search-form-box”>
<input class=”form-search” type=”text” name=”keyword” placeholder=”输入搜索关键词”>
<button type=”submit” id=”btn-search” class=”search-go”><i class=”fa fa-search”></i> </button>
</div>
<div class=”search-commend”>
<h4>大家都在搜</h4>
<ul>
<?php search_tag($title); ?>
</ul>
</div>
</div>
</form>
<div class=”close-search”>
<span class=”close-top”></span>
<span class=”close-bottom”></span>
</div>
</div>
第五步
以下是点击弹出搜索 增加你要显示的地方
<li> <a href=”javascript:;” class=”fly-search-s”> <span class=”fa fa-search”></span> 搜索 </a></li>


IT速极网-【教程资源】 » Emlog增加弹出搜索功能教程

常见问题FAQ

RD.IT速极网可以技术支持吗?
需要技术技术资源联系客服即可!

发表评论