typecho 主题添加搜索框

暂无AI摘要

摘要由智能技术生成

Typecho 默认都有搜索框的，由于喜欢的某些主题没有搜索框，可以安装下面步骤添加

打开header.php 文件 修改如下

<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>

以下为添加搜索框添加位置 （无内容404）

      <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>

以下为添加搜索框添加位置 （带提示）

      <li class="island_logo_box">
      <div class="search">
        <form id="search" class="search-form" method="get" action="<?php $this->options->siteUrl(); ?>" role="search">
            <span class="search-box clearfix">
                <input type="text" id="input" class="input" name="s" required="true" placeholder="请输入..." maxlength="35" autocomplete="off">
                <button type="submit" class="spsubmit"><i class="icon-search"></i>搜索</button>
            </span>
        </form>
        </div>
        </li>

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;
  }