前言
最近想给我的个人网站侧边栏添加一个搜索引擎模块，可以引导用户帮助本站SEO优化（让用户可以通过点击搜索按钮完成一次对本人网站的搜索，从而实现对网站的搜索引擎优化）。
最开始，我只是想实现一个简单的百度搜索引擎模块。后来又考虑到搜索市场的多样性，加入更多搜索引擎让搜索框更有意思一些，于是决定让它随机选择百度或 Bing 进行搜索。最后甚至想同时达到优化两个搜索引擎的目的，实现一个搜索框同时打开百度和 Bing 的搜索结果页面。最终诞生了三个不同的版本，今天就来分享一下如何实现侧边栏搜索引擎模块。
效果展示
1. 百度引擎版
一个仅支持百度搜索引擎的搜索框。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>百度搜索引擎示例</title><linkrel="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><!-- 百度搜索引擎搜索框 --><sectionclass="search-widget"><divclass="title"><iclass="fas fa-search"></i><spanclass="text">百度搜索引擎</span></div><divclass="search-form"><formid="search-form"action="https://www.baidu.com/s"method="GET"target="_blank"><inputclass="search-input"type="text"name="wd"placeholder="Dangks' Blog"value="Dangks' Blog"><buttonclass="search-submit"type="submit">搜索</button></form></div><divclass="search-tip">🔎点击搜索，可帮助本站seo优化！</div></section></body></html>
2. 百度必应随机版
使用搜索框随机选择百度或 Bing 进行搜索。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>随机搜索引擎示例</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>/* 同上 */</style></head><body><!-- 随机搜索引擎搜索框 --><sectionclass="search-widget"><divclass="title"><iclass="fas fa-search"></i><spanclass="text">随机搜索引擎</span></div><divclass="search-form"><formid="search-form"action=""method="GET"target="_blank"><inputclass="search-input"type="text"name="query"placeholder="Dangks' Blog"value="Dangks' Blog"><buttonclass="search-submit"type="submit">搜索</button></form></div><divclass="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)}`;}elseif(randomEngine ==='bing'){
searchUrl =`https://www.bing.com/search?q=${encodeURIComponent(query)}`;}
window.open(searchUrl,'_blank');});</script></body></html>
3. 百度必应双重版
使用搜索框同时打开百度和 Bing 的搜索结果页面。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>多搜索引擎示例</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>/* 同上 */</style></head><body><!-- 多搜索引擎搜索框 --><sectionclass="search-widget"><divclass="title"><iclass="fas fa-search"></i><spanclass="text">多搜索引擎</span></div><divclass="search-form"><formid="search-form"action=""method="GET"target="_blank"><inputclass="search-input"type="text"name="query"placeholder="Dangks' Blog"value="Dangks' Blog"><buttonclass="search-submit"type="submit">搜索</button></form></div><divclass="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;// 生成百度搜索 URLconst baiduUrl =`https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;// 生成 Bing 搜索 URLconst bingUrl =`https://www.bing.com/search?q=${encodeURIComponent(query)}`;// 打开百度搜索结果页面
window.open(baiduUrl,'_blank');// 延迟打开 Bing 搜索结果页面setTimeout(()=>{
window.open(bingUrl,'_blank');},100);// 延迟100毫秒});</script></body></html>
⚠ 提示：“双重版” 经过测试是可用的，但通常由于浏览器的安全机制，搜索引擎快速打开多个页面可能会被拦截，可以手动设置始终允许网站的窗口弹出。如下图所示：
总结
通过上述三个版本的代码，我们展示了如何为网站侧边栏添加一个多功能搜索引擎模块。无论是简单的百度搜索框，还是随机选择搜索引擎，或者是同时打开多个搜索引擎的结果页面，三种可能随你选择。希望这些示例能对您有所帮助！
本文转载自: https://blog.csdn.net/weixin_52269666/article/details/143465718
版权归原作者 Dangks 所有， 如有侵权，请联系我们删除。
版权归原作者 Dangks 所有， 如有侵权，请联系我们删除。