PureSuck-主题手机端添加搜索框

2025 年 09 月 03 日

18 次浏览

323字数

PureSuck主题

PureSuck主题是一个简洁，以文字为中心适合阅读的一款主题，这样的主题很适合用来做博客，博客主要还是文字图片的描述，那些花里胡哨的功能其实是无伤大雅的！
今天那我在手机上用的时候有点不习惯，所以我就改装了一下PureSuck主题，让他在手机端显示个搜索框，有手就会，~~文章结尾处可直接下载文件来替换！~~
[alert type="red"]注意这教程是PureSuck 1.2.6主题版本。[/alert]

增加代码

我们可以在 header.php 文件中添加手机端搜索框的 HTML 代码，这样它会在页面头部显示。编辑 header.php 文件，在234行以下添加以下代码：

                    <!-- <nav class="nav header-item header-nav">以下添加以下代码 -->
                    <!-- 手机端搜索框，仅在小屏幕显示 -->
                    <div class="mobile-search d-sm-none d-md-block">
                        <?php if ($this->options->showSearch === '1'): ?>
                            <form method="get" action="<?php $this->options->siteUrl(); ?>" class="search-container" role="search">
                                <input type="text" name="s" class="search-input" placeholder="输入关键字搜索" aria-label="输入关键字搜索">
                                <button type="submit" class="search-button" aria-label="搜索">
                                    <span class="icon-search"></span>
                                </button>
                            </form>
                        <?php endif; ?>
                    </div>

在 css/PureSuck_Style.css 文件中1754行空白位置一下添加 CSS 代码，隐藏桌面端的显示

/* 此代码之前@media (max-width: 767.5px) { */
/* 隐藏手机端搜索框，在大屏幕显示 */
.mobile-search {
    display: none;
}

修改css/PureSuck_Style.css 文件中1759行以下添加 CSS 代码，添加移动端的显示

    /* @media (max-width: 767.5px) {以下添加 CSS 代码 */
    /* 在小屏幕显示手机端搜索框 */
    .mobile-search {
        display: block;
        padding: 10px;
        background-color: var(--card-color);
        border-bottom: 1px solid var(--border-color);
    }

    .mobile-search .search-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .mobile-search .search-input {
        width: calc(100% - 40px); /* 减去按钮宽度 */
    }