Emlog增加弹出搜索功能教程

标签：ext   整理   shu   close   overflow   ul li   shuff   shuf   lin   

教程简介

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

第一步

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

1. <?php
2. //search：手机搜索标签
3. function search_tag($title){
4. global $CACHE;
5. $tag_cache = $CACHE->readCache(‘tags‘);?>
6. <?php shuffle ($tag_cache);
7. $tag_cache = array_slice($tag_cache,0,15);foreach($tag_cache as $value): ?>
8. <li class="search-go"><a href="<?php echo BLOG_URL; ?>tag/<?php echo $value[‘tagname‘]; ?>"><?php echo $value[‘tagname‘]; ?></a></li>
9. <?php endforeach; ?>
10. <?php }?>

第二步

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

1. .search-forms.is-visible {display: block;}
2. .search-forms.is-visible {animation: fade-in;animation-duration: .3s;-webkit-animation: fade-in .3s;}
3. .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;}
4. .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;}
5. .search-forms .search-form-box {position: relative;margin-bottom: 40px;}
6. .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;}
7. .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;}
8. .search-forms .search-form-box {position: relative;margin-bottom: 40px;}
9. .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;}
10. .search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
11. .search-commend ul li a {display: inline-block;line-height: 1;padding: 5px 5px;border: 1px solid #e2e2e2;border-radius: 2px;color: #949494;}
12. .search-commend ul li {display: inline-block;margin-bottom: 10px;margin-right: 10px;}
13. .search-commend h4 {position: relative;font-size: 16px;margin: 0 0 20px;}
14. .close-search {display: block;position: absolute;top: 10%;right: 10%;width: 80px;height: 80px;cursor: pointer;background: rgba(255,255,255,0);}
15. .close-bottom, .close-top {position: absolute;left: 14px;background: #333;width: 22px;height: 2px;transition: .3s;}
16. .close-search .close-bottom, .close-search .close-top {width: 30px!important;left: 5px!important;}
17. .close-search .close-top {top: 15px!important;}
18. .close-top {top: 19px;}
19. .close-search .close-bottom, .close-search .close-top {width: 45px;left: 16px;}
20. .close-top {-webkit-transform: translate(0,5px) rotate(225deg);transform: translate(0,5px) rotate(225deg);}
21. .close-search .close-top {top: 34px;}
22. .search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
23. .close-bottom {-webkit-transform: translate(0,-5px) rotate(135deg);transform: translate(0,-5px) rotate(135deg);}
24. .close-search .close-bottom {bottom: 24px!important;}

第三步

你的公用js增加如下js

1. $(‘.fly-search-s‘).click(function () {$(‘.search-forms‘).addClass(‘is-visible‘)});
2. $(‘.search-go,.close-search‘).click(function(){$(".search-forms").removeClass("is-visible")});

第四步

footer.php文件增加如下代码

1. <div class="search-forms">
2. <form method="get" action="<?php echo BLOG_URL;?>">
3. <div class="search-form-inner">
4. <div class="search-form-box">
5. <input class="form-search" type="text" name="keyword" placeholder="输入搜索关键词">
6. <button type="submit" id="btn-search" class="search-go"><i class="fa fa-search"></i> </button>
7. </div>
8. <div class="search-commend">
9. <h4>大家都在搜</h4>
10. <ul>
11. <?php search_tag($title); ?>
12. </ul>
13. </div>
14. </div>
15. </form>
16. <div class="close-search">
17. <span class="close-top"></span>
18. <span class="close-bottom"></span>
19. </div>
20. </div>

第五步

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

1. <li> <a href="javascript:;" class="fly-search-s"> <span class="fa fa-search"></span> 搜索

Emlog增加弹出搜索功能教程

标签：ext   整理   shu   close   overflow   ul li   shuff   shuf   lin   

原文地址：https://www.cnblogs.com/shuaqb/p/11921466.html