卡卡網(wǎng)

近日網(wǎng)站使用了百度站內(nèi)搜索api，目的是為了提高站內(nèi)搜索的速度，減輕查詢站內(nèi)數(shù)據(jù)庫(kù)帶來(lái)的服務(wù)器壓力。

不過(guò)在使用百度站內(nèi)搜索api（生效范圍：*webkaka.com/*）后發(fā)現(xiàn)一個(gè)問(wèn)題，不同的頻道模版造成排版不合適的后果，如搜索輸入框?qū)挾冗^(guò)長(zhǎng)、高度過(guò)高等情況。例如技術(shù)頻道和博客的模版不同，側(cè)欄寬度也不同，如果按照博客的模版來(lái)設(shè)置搜索輸入框?qū)捀撸敲丛诩夹g(shù)頻道頁(yè)面，搜索輸入框就超出了側(cè)欄的寬度了。但如果按照技術(shù)頻道的側(cè)欄寬度來(lái)設(shè)置搜索輸入框?qū)挾?，那么在博客?cè)欄里就顯得過(guò)短了。因此，需要為各個(gè)頻道模版自定義百度站內(nèi)搜索輸入框的樣式。這個(gè)如何實(shí)現(xiàn)的？

百度站內(nèi)搜索

百度也考慮到了這個(gè)問(wèn)題，于是提供了一個(gè)css文件，我們?cè)诎俣日緝?nèi)搜索后臺(tái)可下載到該文件，下載位置在“搜索框管理”-“編輯樣式”，滾動(dòng)條拖到最下面，就看到“下載嵌入式CSS源文件”了。

我們可以使用這個(gè)css文件，來(lái)單獨(dú)設(shè)置任何頁(yè)面的百度站內(nèi)搜索輸入框和按鈕的樣式。

由于本文主要是介紹如何自定義輸入框?qū)挾?，因此削掉多余的代碼，我們只需這幾行代碼即可達(dá)到目的：

/*輸入框自定義樣式*/
.bdcs-container .bdcs-search-form-input {
width:230px;
}
/*按鈕樣式自定義*/
.bdcs-container .bdcs-search{
width:340px;
}

這幾行代碼怎樣使用，很簡(jiǎn)單，把它們加入到網(wǎng)頁(yè)的css文件里即可。這幾行代碼，根據(jù)網(wǎng)頁(yè)布局，修改一下 230 和 340 這兩個(gè)數(shù)字，它們代表的正是輸入框和搜索容器的寬度。

百度站內(nèi)搜索，只能搜索出已被百度收錄的網(wǎng)頁(yè)，不被百度收錄的網(wǎng)頁(yè)是搜不出來(lái)的，因此使用時(shí)要了解這點(diǎn)。

站長(zhǎng)可以到百度站內(nèi)搜索管理平臺(tái)（http://zn.baidu.com/cse/home/index）上，使用百度站長(zhǎng)管理平臺(tái)帳號(hào)立即獲得一個(gè)api，無(wú)任何附加條件。

標(biāo)簽: 百度站內(nèi)搜索