typecho博客系统 Typecho_ISLAND 主题添加搜索框

打开header.php 文件 修改如下

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<!DOCTYPE HTML>
<html class="no-js">
****************************以下为添加********************************************
<script type="text/javascript">
        function button_search(){
            var G=document.getElementById('input_search').value;
            G="http://"+window.location.host+"/index.php/search/"+G+"/";
            window.location.href=G;
        }
        function key_search(e){
          var evt = window.event || e; 
          if (evt.keyCode == 13){
            var G=document.getElementById('input_search').value;
            G="http://"+window.location.host+"/index.php/search/"+G+"/";
            window.location.href=G;
          }
        }
    </script>
******************************************************************************
<head>

<li class="menu-item menu-item-type-post_type menu-item-object-page">
        <a href="<?php $pages->permalink(); ?>">
          <p class="ja"><?php $pages->title(); ?></p>
          <p class="en">
          <?php
          if(isset($pages->fields->en)){
            echo $pages->fields->en;
            }else{
            echo 'page';
            }
            ?>
          </p>
          <div class="line"></div>
        </a>
      </li>
      <?php endwhile; ?>

****************************以下为添加********************************************
      <li class="island_logo_box">
      <div class="search">
            <input type="text" placeholder="请输入..." name="" id="input_search" value="" onkeydown="key_search(event);"/>
            <button onclick="button_search()"><i>搜索</i></button>
        </div>
        </li>
********************************************************************************

打开css/reset.css 文件追加如下

.search{
    width: 200px;            
    display: flex;
    margin: 0 auto;
    /*border: 1px solid red;*/
  }
  .search input{
    float: left;
    flex: 4;
    height: 30px;
    width: 100px;  
    outline: none;
    border: 1px solid red;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .search button{
    float: right;
    flex: 1;
    height: 30px;
    width: 50px;  
    color: lightslategray;
    border-style: none;
    outline: none;
  }
  .search button i{
    font-style: normal;
  }
  .search button:hover{
    font-style: normal;
  }

效果如下
微信截图_20200709182659.png

微信截图_20200709182647.png

标签: none

已有 4 条评论

  1. 请问我的Cukoo主题评论区,我的自己头像显示是系统默认,就是那个蓝色的大G默认头像,请问有解决方法吗

    1. 参考链接 http://www.trtos.com/index.php/2020/07/21/516.html

  2. 看起来很厉害的样子,嘿嘿互访

    1. 欢迎大佬视察工作

添加新评论