Simple-Search-Page路翻，即簡潔導(dǎo)航，一個極簡的搜索頁面茄靠，兼顧網(wǎng)址導(dǎo)航茂契，并加入更多引流頁面。A simple search page.代碼作者是zzd也即zhangdi慨绳。page 1.4.2源碼可以在github上下載账嚎。
我是很喜歡簡潔優(yōu)雅的頁面莫瞬，正好有一天看到個簡潔搜索的網(wǎng)頁，名副其實郭蕉，確實很簡潔，搜索引擎可以點擊選擇更換喂江，右側(cè)還有隱藏式的導(dǎo)航欄召锈。瞬間喜歡上了，我也需要一個這樣定制好導(dǎo)航的網(wǎng)頁當做瀏覽器主頁获询。
從github上下載源碼涨岁，部署環(huán)境很簡單，純靜態(tài)吉嚣，無數(shù)據(jù)庫后臺梢薪，直接在寶塔環(huán)境添加站點，上傳源碼壓縮包尝哆，解壓到網(wǎng)站根目錄即可運行秉撇。
我是基本不懂這些編程、代碼秋泄、前端什么的琐馆，所以當我要定制這個簡潔搜索網(wǎng)站主頁名字、添加新的導(dǎo)航鏈接時恒序，傻眼了瘦麸，根本不會啊。但是又不甘心放棄歧胁，找尋其它的類似搜索+導(dǎo)航的網(wǎng)站源碼滋饲，基本都是一樣的模式，沒辦法喊巍，有什么問題就去解決它屠缭。
于是，花費了一下午搜索查找資料玄糟，反復(fù)核實勿她、測試，最終搞定了阵翎。鑒于網(wǎng)上根本找不到一個詳細的教程逢并，萬能的B站上也沒有半點水花，就趁著晚飯后的時間把這個過程寫出來郭卫，給那些跟我一樣喜歡這類搜索網(wǎng)站的小白們砍聊。
有前端和編程基礎(chǔ)的就不需要看了，寫得太小白了贰军。
說明
源碼引用的矢量圖是iconfont.cn阿里巴巴矢量圖標庫玻蝌，“symbol 引用”法蟹肘，能夠支持多色圖標
搜索框上方的字體是“楊任東竹石體-Bold”
配置過程中需要刷新瀏覽器驗證，建議清空Cookies和上網(wǎng)記錄后再刷新俯树，瀏覽器為另一個
要修改和用到的文件和文件夾如下：
/index.html
/js/search.js
/js/search.min.js
/js/data.json
/font/embed.css
/font/icon文件夾
修改及定制步驟
一帘腹、網(wǎng)站信息定制化修改
在/index.html中修改網(wǎng)站名、描述许饿、SEO關(guān)鍵詞和搜索框上的“簡潔搜索”4個字阳欲，百度統(tǒng)計和谷歌廣告代碼改為自己申請的即可。具體申請方法請百度陋率∏蚧“簡潔搜索”文字修改后會發(fā)現(xiàn)字型不一致，這個繼續(xù)看后面步驟解決瓦糟。
二筒愚、iconfont.cn阿里巴巴矢量圖標庫
需要注冊登錄iconfont.cn阿里巴巴矢量圖標庫，可以使用github或微博賬號登陸菩浙。
登錄后點擊上方菜單欄的“資源管理”——“我的項目”巢掺，點擊“新建項目”圖標，填寫“項目名稱”芍耘、“項目描述”（其它不建議修改址遇，默認即可），點擊“新建”斋竞，即成功創(chuàng)建一個項目倔约，以后你選擇的圖標等素材都可以添加到這個項目中，方便引用坝初。
我的項目右側(cè)的“使用幫助”建議看一下浸剩，對《Web端使用》方法做個了解。目前平臺推薦的用法是最后的“symbol 引用”法鳄袍，也當是未來的主流绢要，能夠支持多色圖標。
在首頁的“圖標庫”或“圖標”搜索框中拗小，選擇或根據(jù)名稱搜索你喜歡的圖標并加入購物車（鼠標經(jīng)過圖標時會有三個按鈕圖標重罪，分別是加入購物車、收藏哀九、下載）剿配。
圖標都選好后，點擊頁面右上角的購物車圖標阅束，此時可以看到已加入購物車的所有圖標呼胚，然后點擊“添加至項目”，選擇剛新建的項目息裸，點擊“確定”蝇更。
點擊“下載至本地”沪编，保存。
三年扩、引用選擇的阿里巴巴矢量圖標
將之前下載的矢量圖壓縮包上傳到網(wǎng)站后臺根目錄/font/icon文件夾內(nèi)蚁廓，并解壓，解壓后刪除壓縮包常遂。
回到阿里巴巴矢量圖標庫“我的項目”纳令，選擇“symbol ”，“點擊復(fù)制代碼”克胳，下面會用到。
注意：如果是第二次添加圖標到項目中圈匆，會有紅字提示“點擊更新代碼...”點擊自動更新完代碼之后就可以復(fù)制了漠另，如：
//at.alicdn.com/t/font_2597317_izq62s0rcb.js
提示：每次更新代碼后，_之后的字符會改變跃赚，所以要想新圖標生效笆搓，就需要在網(wǎng)站后臺再次上傳和更新配置。還是建議一次性把要添加導(dǎo)航的所有網(wǎng)站鏈接圖標添加到項目纬傲，避免添油戰(zhàn)術(shù)每次都要重新上傳和配置
在寶塔中編輯網(wǎng)站根目錄下的index.html满败，參考37行格式，在記事本上更改src=后面雙引號中的鏈接為之前提到的“點擊復(fù)制代碼”產(chǎn)生的鏈接叹括，最好按統(tǒng)一格式在鏈接前添加https:
例如：使用阿里上復(fù)制的鏈接：
//at.alicdn.com/t/font_2597317_izq62s0rcb.js
參考37行代碼格式算墨，改為：
<script src="https://at.alicdn.com/t/font_2597317_izq62s0rcb.js"></script>
在37行后新增一行，粘貼保存汁雷。
這樣就完成了矢量圖標的引用前提净嘀。
四、搜索網(wǎng)站“簡潔搜索”字體修改
在阿里巴巴矢量圖標庫首頁點擊上方菜單中間三個點侠讯，選擇“在線字體”挖藏，添加你需要的字體，這里以添加網(wǎng)站在用的“楊任東竹石體-Bold”為例，文本框中輸入你需要的網(wǎng)站文字，建議多寫幾個網(wǎng)站名字相關(guān)的文字舟山，便于可能的修改丐箩，點擊“生成字體”，鼠標放在下面需要的字體上运杭，點擊“引用線上地址”，（此時可以點擊“前端應(yīng)用幫助”進入《webfont前端使用幫助》了解下相關(guān)知識）
進入后臺根目錄/font/embed.css，在最上方粘貼柄驻，參考里面的代碼格式，在粘貼的鏈接//前都添加上https焙压，將font-family: 后面引號內(nèi)改為與之前字體格式一樣的'楊任東竹石體-Bold'鸿脓，刪除原來的楊任東竹石體-Bold那片代碼抑钟，保存。
清空瀏覽器Cookies后刷新網(wǎng)站野哭，看到網(wǎng)站搜索文字終于恢復(fù)一致了在塔，開心！
五拨黔、新增搜索引擎選項（善用寶塔在線文本編輯器的搜索）
目前網(wǎng)站源碼上自帶的搜索引擎也挺多了蛔溃，已滿足常規(guī)使用。但是還想再添加其他的搜索引擎選項篱蝇，比如CSDN贺待，該怎么辦呢？
要想添加搜索引擎選擇項零截，需要同時在/js/search.js和search.min.js中都添加麸塞，注意前后的符號：
- /js/search.js文件：
如圖所示，善用搜索涧衙，在需要插入的位置粘貼上代碼哪工，根據(jù)需要修改搜索引擎名稱name、圖標icon和鏈接url后面的參數(shù)弧哎，如添加CSDN的代碼為：
, {
name: 'CSDN',
icon: 'icon-csdn',
url: 'https://so.csdn.net/so/search/s.do?q='
}
注：icon的值不一定都是icon-csdn
查看方法（1）：在阿里巴巴矢量圖標庫“我的項目”雁比，鼠標停在矢量圖標上，點擊‘復(fù)制代碼“即可粘貼
查看方法（2）：在電腦本地點開之前下載的壓縮包撤嫩，點開demo_index.html網(wǎng)頁偎捎，在Symbol選項下查看
- search.min.js文件：
需要在同樣引擎的相對位置，添加代碼非洲，還是以CSDN舉例鸭限，提前按格式修改三要素（名稱、圖標和鏈接）：
,{name:"CSDN",icon:"icon-csdn",url:"https://so.csdn.net/so/search/s.do?q="}
刷新瀏覽器后訪問該網(wǎng)站可以看到两踏，搜索引擎切換選項中已經(jīng)有了【CSDN】败京，而且前面有了對應(yīng)的矢量圖logo顯示。
六梦染、添加右側(cè)導(dǎo)航鏈接項
導(dǎo)航欄鏈接內(nèi)容需要在/js/data.json中添加和修改赡麦。
按格式修改代碼并粘貼，以新增CSDN導(dǎo)航鏈接為例：
, {
"url": "https://blog.csdn.net/",
"icon": "icon--csdn",
"text": "CSDN"
}
刷新一看帕识，名字出來了泛粹，但圖標不顯示。
原來是源碼格式icon--csdn中間是雙-線肮疗，改為圖標的單橫線icon-csdn晶姊，刷新瀏覽器后圖標正常顯示了。
添加導(dǎo)航鏈接就是這么簡單伪货。
本來想簡單寫一點的们衙，沒想到按過程捋一遍越寫越多钾怔，能幫到你就是值得的。同時感謝github上源碼作者zzd蒙挑，做出的很簡潔實用的網(wǎng)頁宗侦。
源碼gitlab：搜索“Simple-Search-Page”，第一個就是忆蚀。
歡迎關(guān)注我的公眾號：樂吐槽矾利。
余生很長，請多指教馋袜。
