[前端] 为网站侧边栏添加搜索引擎模块

前言

最近想给我的个人网站侧边栏添加一个搜索引擎模块,可以引导用户帮助本站SEO优化(让用户可以通过点击搜索按钮完成一次对本人网站的搜索,从而实现对网站的搜索引擎优化)。

最开始,我只是想实现一个简单的百度搜索引擎模块。后来又考虑到搜索市场的多样性,加入更多搜索引擎让搜索框更有意思一些,于是决定让它随机选择百度或 Bing 进行搜索。最后甚至想同时达到优化两个搜索引擎的目的,实现一个搜索框同时打开百度和 Bing 的搜索结果页面。最终诞生了三个不同的版本,今天就来分享一下如何实现侧边栏搜索引擎模块。

效果展示


1. 百度引擎版

一个仅支持百度搜索引擎的搜索框。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索引擎示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --theme: #44A8C7;
            --main: #333;
            --minor: #999;
        }

        .search-widget {
            padding: 15px;
            margin-bottom: 20px;
            max-width: 100%;
        }

        .search-widget .title {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: var(--main);
            margin-bottom: 10px;
        }

        .search-widget .title i {
            font-size: 20px;
            margin-right: 10px;
        }

        .search-widget .title .text {
            font-weight: bold;
        }

        .search-widget .search-form {
            position: relative;
            border: 1px solid var(--theme);
            border-radius: 4px;
            overflow: hidden;
        }

        .search-widget .search-input {
            border: none;
            font-size: 14px;
            padding: 9px 8px;
            width: calc(100% - 80px);
        }

        .search-widget .search-submit {
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: var(--theme);
            color: #fff;
            padding: 6px 8px;
            cursor: pointer;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .search-widget .search-tip {
            font-size: 13px;
            color: var(--minor);
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <!-- 百度搜索引擎搜索框 -->
    <section class="search-widget">
        <div class="title">
            <i class="fas fa-search"></i>
            <span class="text">百度搜索引擎</span>
        </div>
        <div class="search-form">
            <form id="search-form" action="https://www.baidu.com/s" method="GET" target="_blank">
                <input class="search-input" type="text" name="wd" placeholder="Dangks' Blog" value="Dangks' Blog">
                <button class="search-submit" type="submit">搜索</button>
            </form>
        </div>
        <div class="search-tip">🔎点击搜索,可帮助本站seo优化!</div>
    </section>
</body>
</html>

2. 百度必应随机版

使用搜索框随机选择百度或 Bing 进行搜索。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机搜索引擎示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 同上 */
    </style>
</head>
<body>
    <!-- 随机搜索引擎搜索框 -->
    <section class="search-widget">
        <div class="title">
            <i class="fas fa-search"></i>
            <span class="text">随机搜索引擎</span>
        </div>
        <div class="search-form">
            <form id="search-form" action="" method="GET" target="_blank">
                <input class="search-input" type="text" name="query" placeholder="Dangks' Blog" value="Dangks' Blog">
                <button class="search-submit" type="submit">搜索</button>
            </form>
        </div>
        <div class="search-tip">🔎点击搜索,可帮助本站seo优化!</div>
    </section>

    <script>
        document.getElementById('search-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const queryInput = document.querySelector('.search-input');
            const query = queryInput.value;

            // 随机选择搜索引擎
            const engines = ['baidu', 'bing'];
            const randomEngine = engines[Math.floor(Math.random() * engines.length)];

            let searchUrl = '';
            if (randomEngine === 'baidu') {
                searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
            } else if (randomEngine === 'bing') {
                searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
            }

            window.open(searchUrl, '_blank');
        });
    </script>
</body>
</html>

3. 百度必应双重版

使用搜索框同时打开百度和 Bing 的搜索结果页面。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多搜索引擎示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 同上 */
    </style>
</head>
<body>
    <!-- 多搜索引擎搜索框 -->
    <section class="search-widget">
        <div class="title">
            <i class="fas fa-search"></i>
            <span class="text">多搜索引擎</span>
        </div>
        <div class="search-form">
            <form id="search-form" action="" method="GET" target="_blank">
                <input class="search-input" type="text" name="query" placeholder="Dangks' Blog" value="Dangks' Blog">
                <button class="search-submit" type="submit">搜索</button>
            </form>
        </div>
        <div class="search-tip">🔎点击搜索,可帮助本站seo优化!</div>
    </section>

    <script>
        document.getElementById('search-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const queryInput = document.querySelector('.search-input');
            const query = queryInput.value;

            // 生成百度搜索 URL
            const baiduUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
            // 生成 Bing 搜索 URL
            const bingUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;

            // 打开百度搜索结果页面
            window.open(baiduUrl, '_blank');

            // 延迟打开 Bing 搜索结果页面
            setTimeout(() => {
                window.open(bingUrl, '_blank');
            }, 100); // 延迟100毫秒
        });
    </script>
</body>
</html>

⚠ 提示:"双重版" 经过测试是可用的,但通常由于浏览器的安全机制,搜索引擎快速打开多个页面可能会被拦截,可以手动设置始终允许网站的窗口弹出。如下图所示:


总结

通过上述三个版本的代码,我们展示了如何为网站侧边栏添加一个多功能搜索引擎模块。无论是简单的百度搜索框,还是随机选择搜索引擎,或者是同时打开多个搜索引擎的结果页面,三种可能随你选择。希望这些示例能对您有所帮助!

相关推荐
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
java1234_小锋2 小时前
Elasticsearch是如何实现Master选举的?
大数据·elasticsearch·搜索引擎
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html