Emlog增加了弹出搜索功能的教程。

教程演示

课程介绍

今天，当我回到家，我无事可做。我贴了自己的博客搜索，好丑。二话没说，最后在很多知名博客的帮助下看中了一个风格不错的弹窗搜索，就是娇子里的模板EMlog Fly。这个模板用了17年，今年才换了个新模板，于是二话没说，把苍蝇搜索拉了出来，改编到我的博客上。大家都知道一个没有搜索的网站是不可能的，也是不可或缺的。用户在找东西的时候，一键搜索很方便。让我们开始教程。

第一步

Module.php模板文件添加以下代码。

& lt？Php//search:手机搜索标签函数search _ tag($ title){ global $ cache；$ tag _ cache = $ cache -& gt；read cache(& # 39；标签& # 39；);？& gt& lt？phpshuffle($ tag _ cache)；$ tag _ cache = array _ slice($ tag _ cache，0，15)；foreach($tag_cacheas$value):？& gt& ltliclass = & quot搜索-go & quot；& gt& ltahref = & quot& lt？phpechoBLOG _ URL？& gttag/& lt；？phpecho $ value[& # 39；标记名& # 39；];？& gt”& gt& lt？phpecho $ value[& # 39；标记名& # 39；];？& gt& lt/a & gt；& lt/李& gt& lt？phpendforeach？& gt& lt？php}？& gt第二步

将以下css添加到您的公共css文件中。

. search -forms . is-visible { display:block；} . search -forms . is-visible { animation:fade -in；动画-时长:. 3s；-WebKit -动画:fade -in . 3s；} . search -forms {位置:固定；top:0；左:0；右:0；底部:0；背景:# fff-WebKit -动画:fade -zoom -in . 3s forwards；-O-动画:fade -zoom -in . 3s forwards；动画:fade -zoom -in . 3s forwards；显示:无；z-指数:9999；-WebKit -back face -可见性:隐藏；溢出:隐藏；} . search -forms . search -form -inner { max -width:640 px；填充:020px边距:自动；位置:绝对；宽度:100%；左:0；右:0；身高:285pxtop:-100px；底部:0；} . search -forms . search -form -box { position:相对；margin -bottom:40px；} . search -forms input { background:# fff；显示:inline -block；line -高度:58px高度:58px颜色:# 949494；font -size:15px；border -半径:3px填充:020px宽度:100%；border:1 px solid # e2e2e 2；text -align:left；-WebKit -外观:无；} . search -forms button { background:# 000；显示:inline -block；line -高度:58px高度:58px宽度:100px颜色:# ffffont -size:15px；填充:025px边距:0；border -radius:03px 3 px 0；位置:绝对；右:0；top:0；边框:0；} . search -forms . search -form -box { position:相对；margin -bottom:40px；} . search -forms . search -form -inner { max -width:640 px；填充:020px边距:自动；位置:绝对；宽度:100%；左:0；右:0；身高:285pxtop:-100px；底部:0；} . search -forms . close -search { display:block；位置:绝对；top:3%；右:1%；宽度:50px高度:50px光标:指针；背景:rgba(255，255，255，0)；} . search -commendullia { display:inline -block；line -高度:1；填充:5px 5 px；border:1 px solid # e2e2e 2；边框-半径:2px颜色:# 949494；} . search -commendulli { display:inline -block；margin -bottom:10px；margin -right:10px；} . search -commendh 4 { position:relative；font -大小:16px保证金:0020px} . close -搜索{ display:block；位置:绝对；top:10%；右:10%；宽度:80px高度:80px光标:指针；背景:rgba(255，255，255，0)；}.close-bottom，. close -top { position:absolute；左:14px背景:# 333；宽度:22px高度:2px过渡:. 3s；}.close-search.close-bottom，. close -search . close -top { width:30px！重要；左:5px！重要；} . close -search . close -top { top:15px！重要；} . close -top { top:19px；}.close-search.close-bottom，. close -search . close -top { width:45px；左:16px} . close -top { -WebKit -transform:translate(0，5 px)rotate(225 deg)；变换:平移(0.5像素)旋转(225度)；} . close -search . close -top { top:34px；} . search -forms . close -search { display:block；位置:绝对；top:3%；右:1%；宽度:50px高度:50px光标:指针；背景:rgba(255，255，255，0)；} . close -bottom { -WebKit -transform:translate(0，-5px)rotate(135 deg)；变换:平移(0，-5px)旋转(135度)；} . close -search . close -bottom { bottom:24px！重要；}

第三步

您的公共js添加了以下js。

$('. fly -search -s & # 39；).单击(function(){ $(& # 39；. search -forms & # 39；).addClass(& # 39；is-可见& # 39；)});$('. search-go，. close -search & # 39；).单击(function(){ $(& quot；. search -forms & quot；).remove class(& quot；is-可见& quot)});第四步

Footer.php文件添加以下代码。

& ltdivclass = & quotsearch -表单& quot& gt& ltformmethod = & quot获取& quotaction = & quot& lt？phpechoBLOG _ URL？& gt”& gt& ltdivclass = & quotsearch -form -inner & quot；& gt& ltdivclass = & quot搜索-表单-框& quot& gt& lt输入类= & quotform -搜索& quottype = & quot文本& quotname = & quot关键字& quotplaceholder = & quot输入搜索关键字” & gt& ltbuttontype = & quot提交& quotid = & quotBTN -搜索& quotclass = & quot搜索-go & quot；& gt& lticlass = & quotfafa -搜索& quot& gt& lt/I & gt；& lt/button & gt；& lt/div & gt；& ltdivclass = & quot搜索-推荐& quot& gt& lth4 & gt每个人都在寻找

下面是点击弹出搜索增加你想显示的地方。

& lt李& gt& ltahref = & quotJavaScript:；”class = & quot飞行-搜索-s & quot；& gt& ltspanclass = & quotfafa -搜索& quot& gt& lt/span&gt。搜索