卡卡網(wǎng)

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

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

百度站內(nèi)搜索

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

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

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

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

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

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

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

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