之前的一篇文章通过增加html、css、javascript代码的形式，给没有搜索按钮的typecho主题增加了搜索功能的按钮，但是由于javascript的一些缺陷以及不同浏览器的策略的原因，搜索按钮的调用并不完美，经常无法打开。

下面通过增加Modal框架的方法，优化增加搜索按钮的功能。

首先我们需要引入css样式，这里选用的是bootstrap的样式，下面是一个国内的CDN
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

随后，需要添加 Bootstrap 的 JavaScript 和依赖的 Popper.js，建议添加在body标签结束之前，如下
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

对于搜索按钮，我们为其添加下面这些属性
type="button" class="btn btn-primary" data-toggle="modal" data-target="#searchModal"

随后我们在合适的位置，增加模态搜索框的html代码如下

<!-- 搜索 Modal -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalLabel">搜索</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="searchForm">
                    <input type="text" class="form-control" id="searchInput" placeholder="请输入搜索内容...">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" form="searchForm">搜索</button>
            </div>
        </div>
    </div>
</div>

最后，对于让搜索框搜索的功能，我们还需要添加少量的javascript代码，使用script标签添加在head中即可

document.addEventListener('DOMContentLoaded', function() {
    var searchForm = document.getElementById('searchForm');
    var searchInput = document.getElementById('searchInput');

    // 处理搜索表单提交
    searchForm.addEventListener('submit', function(event) {
        event.preventDefault();
        var query = searchInput.value.trim();
        if (query) {
            window.location.href = 'https://blog.wslll.cn/index.php/search/' + encodeURIComponent(query);
        }
        $('#searchModal').modal('hide'); // 隐藏 Modal
    });
});

最后，需要注意的是，在引入bootstrap的css样式时，为了防止与你当前的css样式冲突，需要在当前css样式引入的标签之前引入。