登录
Z-BlogPHP拓源纯净主题添谷歌、必应搜索记
2025年4月20日 08:20
尝闻 Z-BlogPHP 之拓源纯净主题，简约精巧，然搜索之能，仅囿于站内。为扩其搜索之域，增谷歌、必应之搜索功能，以利访客便捷求知，遂着手于主题之 navbar.php 文件，行修改之事。
于 navbar.php 中，寻得搜索表单代码之处。修改代码如下：
{if $zbp->Config('tpure')->PostSEARCHON=='1'}
<div class="schico statefixed">
<a href="javascript:;"></a>
<div class="schfixed">
<form method="post" name="search" action="#" onsubmit="return handleSearch(this);" target="_blank">
<input type="text" name="q" placeholder="{if $zbp->Config('tpure')->PostSCHTXT}{$zbp->Config('tpure')->PostSCHTXT}{else}{$lang['tpure']['schtxt']}{/if}" autocomplete="off" class="schinput">
<select name="engine">
<option value="site">站内搜索</option>
<option value="google">谷歌搜索</option>
<option value="bing">必应搜索</option>
</select>
<button type="submit" class="btn"></button>
</form>
</div>
</div>
{/if}
{if $zbp->Config('tpure')->PostSEARCHON=='1'}
<form method="post" name="search" action="#" onsubmit="return handleSearch(this);" class="sch-m" target="_blank">
<input type="text" name="q" placeholder="{if $zbp->Config('tpure')->PostSCHTXT}{$zbp->Config('tpure')->PostSCHTXT}{else}{$lang['tpure']['schtxt']}{/if}" autocomplete="off" class="schinput">
<select name="engine">
<option value="site">站内搜索</option>
<option value="google">谷歌搜索</option>
<option value="bing">必应搜索</option>
</select>
<button type="submit" class="btn"></button>
</form>
{/if}此表单含输入框，以供输入搜索词；下拉选框，可择站内、谷歌、必应搜索；并有提交按钮。且设onsubmit事件，关联handleSearch函数，以理搜索逻辑。
复添JavaScript代码，以完搜索功能及样式调整：
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchForms = document.querySelectorAll('form[name="search"]');
searchForms.forEach(form => {
const input = form.querySelector('.schinput');
const select = form.querySelector('select');
const button = form.querySelector('.btn');
input.style.position ='relative';
input.style.paddingRight = '100px';
input.style.boxSizing = 'border-box';
select.style.position = 'absolute';
select.style.left = '55%';
select.style.top = '0';
select.style.bottom = '0';
select.style.border = 'none';
select.style.background = 'transparent';
select.style.appearance = 'none';
select.style.webkitAppearance = 'none';
select.style.mozAppearance = 'none';
select.style.padding = '0 5px';
button.style.position = 'absolute';
if (window.innerWidth < 960) {
button.style.top = 'auto';
} else {
button.style.top = '0';
button.style.bottom = '0';
}
const inputParent = input.parentElement;
inputParent.insertBefore(select, input.nextSibling);
inputParent.insertBefore(button, select.nextSibling);
});
});
function handleSearch(form) {
const query = form.q.value;
const engine = form.engine.value;
const domain = "{$host}".replace(/^https?:\/\//, '').replace(/\/$/, '');
if (engine ==='site') {
form.action = "{$host}zb_system/cmd.php?act=search";
return true;
}
let fullQuery;
let url;
switch (engine) {
case 'google':
fullQuery = "site:" + domain + " " + query;
url = "https://www.google.com/search?q=" + encodeURIComponent(fullQuery);
break;
case 'bing':
fullQuery = "site:" + domain + " " + query;
url = "https://www.bing.com/search?q=" + encodeURIComponent(fullQuery);
break;
}
window.open(url, '_blank');
return false;
}
</script>此JavaScript代码，待页面DOM加载完毕，即遍历搜索表单，为输入框、下拉框、按钮添样式。依屏幕宽度，若小于960像素，则按钮top样式设为auto；否则，设top与bottom为0。并将下拉框与按钮嵌入输入框父元素，整其顺序。
handleSearch 函数取用户输入词与所选引擎。若为站内搜索，依原逻辑，设表单action为站内搜索地址；若为谷歌或必应搜索，则构含域名与搜索词之链接，于新窗口打开搜索结果，阻表单默认提交。
经此番修改，Z-BlogPHP拓源纯净主题搜索功能得以拓展，访客可按需选搜索引擎，或站内细索，或借谷歌、必应广求，便捷高效，望能为博客增色，予用户佳体验。
