在Github Pages(一)：一個(gè)最基礎(chǔ)的個(gè)人網(wǎng)站中，我們已經(jīng)介紹了怎樣用Github Pages做出一個(gè)網(wǎng)站框架揪垄，例如完全重復(fù)出 HTML5 UP 網(wǎng)站上的某個(gè)模版。在熟悉該模版之后坛怪，你就已經(jīng)可以編寫(xiě)博客頁(yè)(html)镇防，并且鏈接到首頁(yè)了。甚至可以有出色的排版與配圖瞒津。
但對(duì)一個(gè)博客網(wǎng)站來(lái)說(shuō)這樣還不夠蝉衣，很多互動(dòng)功能也是需要手動(dòng)添加、單獨(dú)理解的巷蚪，包括評(píng)論框病毡、搜索欄、點(diǎn)擊量計(jì)數(shù)屁柏、分享按鈕啦膜、網(wǎng)站導(dǎo)航、網(wǎng)頁(yè)排版和圖片滾動(dòng)等淌喻。
這一篇文章是一個(gè)大合集僧家，總結(jié)我曾經(jīng)見(jiàn)到的個(gè)人網(wǎng)站互動(dòng)功能打颤，以及各個(gè)解決方案的優(yōu)劣玄柏。
注意：雖然列出了這么多插件，但是這些只是技術(shù)儲(chǔ)備楔壤，如果你是一個(gè)網(wǎng)站新手涯塔，建議先閱讀Github Pages(三)：使用Hexo博客生成工具乘粒。
搜索功能
搜索功能包括兩部分，一是在站內(nèi)快速找到某一篇博客伤塌，這個(gè)方便網(wǎng)站的使用灯萍；二是在站外的搜索引擎上可以查到你的博客，這個(gè)有助于網(wǎng)站的推廣每聪。然而我在選擇搜索工具的時(shí)候發(fā)現(xiàn)靜態(tài)網(wǎng)站是無(wú)法自己寫(xiě)站內(nèi)引擎的旦棉，所以我的搜索功能就暫時(shí)借助第三方（谷歌）實(shí)現(xiàn)了。
注：這篇文章寫(xiě)的早药薯，后來(lái)我在Github Pages(四)：Hexo進(jìn)階-NexT本地搜索引擎的移植搞定了站內(nèi)搜索
php站內(nèi)搜索的失敗嘗試
在站內(nèi)搜索到某個(gè)文件绑洛，直接寫(xiě)一段PHP遍歷本站文件是最靠譜的，所以我就搜到了一位大神寫(xiě)的code（月光軟件文章）童本。但是這段code有兩個(gè)函數(shù)（eregi和split）在PHP7 過(guò)期了真屯。所以我修改了一下（使用preg_match和explode），成了這個(gè)文件search.php穷娱。
使用的時(shí)候绑蔫，只要在網(wǎng)頁(yè)中調(diào)用這個(gè)search.php就可以了运沦，比如說(shuō)
<form method="GET" action="search.php">
<input type="text" name="keyword" placeholder="PHP站內(nèi)搜索" />
</form>
這個(gè)搜索引擎目前的效果是簡(jiǎn)單的列出全部搜出來(lái)的文件鏈接，在這個(gè)效果上美化一下就可以了配深。
在測(cè)試PHP文件的時(shí)候携添，必須要打開(kāi)本地Web服務(wù)，啟動(dòng)方法（Mac）參見(jiàn)本文的“網(wǎng)頁(yè)編輯后的預(yù)覽”一節(jié)篓叶。
不成功的原因是顯然的烈掠，Github Pages是靜態(tài)的，不能運(yùn)行php程序缸托。不過(guò)這段學(xué)習(xí)經(jīng)歷挺有意思左敌。
谷歌自定義搜索
引入谷歌自定義搜索有兩個(gè)工作，一是建立一個(gè)自定義引擎（谷歌自定義搜索）俐镐，二是給谷歌提供網(wǎng)站信息（Google Search Console）母谎。
點(diǎn)擊谷歌自定義搜索，創(chuàng)建一個(gè)搜索引擎京革，然后在“外觀”選項(xiàng)卡里就可以找到“保存并獲取代碼”按鈕了。把這個(gè)代碼加入你要顯示結(jié)果的網(wǎng)頁(yè)即可幸斥。
谷歌自定義引擎的搜索框有點(diǎn)丑匹摇，十有八九跟你的主題不一樣，好在這個(gè)引擎也支持分頁(yè)顯示甲葬。本站的搜索功能就是用分頁(yè)的方式實(shí)現(xiàn)的：首先選擇一個(gè)分頁(yè)的引擎主題廊勃，然后單獨(dú)建立一個(gè)Search.html，加入剛才說(shuō)的自定義引擎代碼经窖，然后在其他網(wǎng)頁(yè)需要加入搜索框的地方輸入一個(gè)原生主題的搜索框坡垫。
<form method="Get" action="blogs/Search.html">
<input type="text" name="q" id="s" placeholder="站內(nèi)Google" />
</form>
這樣每次搜索就會(huì)跳轉(zhuǎn)到搜索結(jié)果頁(yè)了。當(dāng)然也可以用“彈出”的主題画侣，把action直接放到本頁(yè)冰悠，就可以有直接在本頁(yè)顯示結(jié)果的效果。
給谷歌提供網(wǎng)站信息也是很重要的配乱，這決定了谷歌搜索你網(wǎng)站時(shí)結(jié)果的質(zhì)量溉卓。我首先在Google Search Console注冊(cè)了一個(gè)賬戶，添加本站搬泥，然后在管理界面的“抓取”桑寨、“站點(diǎn)地圖”添加了一個(gè)寫(xiě)著本站所有網(wǎng)頁(yè)地址的sitemap.txt文件，這樣谷歌就知道本站以及各個(gè)網(wǎng)頁(yè)的位置了（只添加站點(diǎn)不提交地圖也行忿檩，這關(guān)系到谷歌爬取網(wǎng)頁(yè)的效率）尉尾。
目前搜索“博客”的效果如下（一條廣告是難免的，畢竟是免費(fèi)版）燥透。當(dāng)我頻繁修改網(wǎng)站的時(shí)候沙咏，谷歌的滯后是很明顯的辨图。
其實(shí)為了提高效果，還可以提交更多的信息給谷歌芭碍，包括一些關(guān)鍵詞徒役，這些我就沒(méi)有深究了。
百度自定義搜索
百度自定義搜索其實(shí)跟谷歌差不多窖壕，都包括自定義一個(gè)引擎加入網(wǎng)頁(yè)（百度自定義搜索）忧勿，和為百度提供網(wǎng)站信息（百度站長(zhǎng)工具）兩個(gè)步驟。這里就不贅述了瞻讽。
但是百度跟Github Pages的兼容性似乎是有問(wèn)題的鸳吸，百度抓取github.io的效率明顯比谷歌低很多（搜索同樣的Github Pages網(wǎng)頁(yè)就知道了，而且我把github.io網(wǎng)址提交給百度沒(méi)有效果）速勇。所以我的第三方搜索引擎還是選擇了谷歌晌砾。
評(píng)論功能
評(píng)論功能是博客的重要互動(dòng)功能，但是評(píng)論是動(dòng)態(tài)的烦磁，Github Pages是靜態(tài)的养匈，需要借助一個(gè)第三方服務(wù)來(lái)實(shí)現(xiàn)。
新浪評(píng)論框的失敗嘗試
在網(wǎng)上搜了一下之后都伪，我最先想到的解決方案是微博開(kāi)放平臺(tái)呕乎，因?yàn)槲⒉缀跽l(shuí)都有，從演示的效果來(lái)看陨晶，評(píng)論功能使用微博評(píng)論箱猬仁，再結(jié)合微博分享、微博贊按鈕兩個(gè)插件先誉，就跟在微博內(nèi)部評(píng)論是一樣的了（甚至還有微博秀這種直接展示微博個(gè)人頁(yè)的功能）湿刽，等于把個(gè)人博客和微博社區(qū)結(jié)合起來(lái)了。
作為官方插件褐耳，需要先申請(qǐng)一個(gè)Appkey诈闺。這件事有兩個(gè)步驟，一是在微博開(kāi)放平臺(tái)申請(qǐng)一個(gè)賬戶铃芦，然后提交身份驗(yàn)證买雾。二是在微博開(kāi)放平臺(tái)：網(wǎng)站接入接入你的網(wǎng)站，然后提交審核杨帽。
Github Pages顯然是境外網(wǎng)站漓穿，不需要提供備案信息，只要選擇境外網(wǎng)站的驗(yàn)證注盈，對(duì)你的網(wǎng)址進(jìn)行域名查詢和ip查詢（很多網(wǎng)站都可以查）晃危，把結(jié)果放到一張圖片上上傳就行了。
在網(wǎng)頁(yè)中加入評(píng)論箱本身并不復(fù)雜，只要點(diǎn)擊微博開(kāi)放平臺(tái)：評(píng)論箱僚饭，然后把底部代碼加入網(wǎng)頁(yè)就行了震叮。其他插件也是一樣的，本地預(yù)覽可以很快看到效果鳍鸵。
然而苇瓣，微博插件在Github Pages是不能正常使用的。一開(kāi)始我并不知道原因偿乖，后來(lái)用Chrome瀏覽器打開(kāi)網(wǎng)頁(yè)的時(shí)候击罪，發(fā)現(xiàn)這些插件實(shí)際上是被瀏覽器安全政策阻止了。這對(duì)個(gè)人網(wǎng)站來(lái)說(shuō)肯定是不可接受的贪薪，因?yàn)槟悴荒芤笤L問(wèn)者為了訪問(wèn)你的網(wǎng)站而修改瀏覽器設(shè)置媳禁。
進(jìn)一步去查這些插件不安全的原因，就發(fā)現(xiàn)微博的插件是不支持https的画切，而現(xiàn)在Github Pages用的是https的域名竣稽。進(jìn)入Github Pages庫(kù)的設(shè)置，會(huì)發(fā)現(xiàn)這么一個(gè)無(wú)法更改的選項(xiàng)霍弹。
Enforce HTTPS
— Required for your site because you are using the default domain (hans2936.github.io)
也就是說(shuō)除非我自己買(mǎi)一個(gè)域名毫别，否則這個(gè)選項(xiàng)是不能修改的。再說(shuō)好像沒(méi)必要為了一個(gè)評(píng)論系統(tǒng)把網(wǎng)站從https改成http典格，這個(gè)方案也就擱淺了岛宦。
來(lái)必力
第二個(gè)方案是找一些專(zhuān)門(mén)提供評(píng)論服務(wù)的網(wǎng)站，我找到了現(xiàn)在比較流行的來(lái)必力钝计。
加入這個(gè)服務(wù)就比新浪評(píng)論箱簡(jiǎn)單多了。先注冊(cè)一個(gè)賬戶齐佳，然后點(diǎn)擊“體驗(yàn)”私恬、“管理中心”，就可以看到代碼了炼吴，如圖：
這個(gè)服務(wù)的好處是可以用國(guó)內(nèi)所有的社交網(wǎng)站登陸（QQ本鸣、微信、微博）硅蹦，而且界面也很好看荣德。
但是來(lái)必力有一個(gè)硬傷，就是加載速度太慢了童芹。感覺(jué)博客前兩段看完了這個(gè)插件還沒(méi)加載出來(lái)涮瞻，一開(kāi)始我覺(jué)得無(wú)傷大雅，直到我發(fā)現(xiàn)這個(gè)評(píng)論框不加載完假褪，我的導(dǎo)航欄就彈不出來(lái)署咽。這就有點(diǎn)影響體驗(yàn)了，所以這個(gè)方案也沒(méi)使用。
Gitment
最后我終于找了一個(gè)比較合適的評(píng)論系統(tǒng)：教程：Gitment宁否。
這個(gè)教程已經(jīng)很詳細(xì)了窒升，唯一需要注意的是它跟search.php一樣必須開(kāi)本地Web服務(wù)器才能查看效果。
這個(gè)評(píng)論系統(tǒng)是直接把Github issues搬到你自己的網(wǎng)頁(yè)慕匠。它有三個(gè)好處饱须，第一個(gè)就是把Github pages和Github issues聯(lián)系起來(lái)，這樣連評(píng)論帶網(wǎng)站都在一個(gè)庫(kù)里面台谊；第二個(gè)好處是Gitment是一個(gè)出色的評(píng)論框蓉媳，支持markdown語(yǔ)法，還自帶點(diǎn)贊青伤；第三個(gè)好處是加載速度快督怜。唯一的壞處就是只能使用Github賬戶評(píng)論，不過(guò)我覺(jué)得可以接受狠角，因?yàn)楸緛?lái)就是技術(shù)性博客号杠，提高評(píng)論門(mén)檻也未必是壞事。
所以這就是我的評(píng)論系統(tǒng)解決方案了丰歌。
分享按鈕
分享也是博客網(wǎng)站重要的互動(dòng)功能姨蟋。在國(guó)內(nèi)比較重要的就是支持微信和微博的分享，尤其是微信立帖。
我使用的分享按鈕來(lái)自于Github:share.js眼溶。這個(gè)Github文件夾的Readme有一個(gè)教程，不過(guò)我是把整個(gè)包下載下來(lái)晓勇，仔細(xì)看了一下demo網(wǎng)頁(yè)堂飞，然后照搬到我的網(wǎng)站的。
現(xiàn)在這個(gè)分享按鈕并不是騰訊或新浪提供的原生插件绑咱，對(duì)微博绰筛、QQ來(lái)說(shuō)是跳轉(zhuǎn)到一個(gè)分享頁(yè)，對(duì)微信來(lái)說(shuō)是在微信中打開(kāi)本網(wǎng)址描融，進(jìn)而實(shí)現(xiàn)分享的铝噩。因?yàn)橛形⒉┰u(píng)論箱的經(jīng)驗(yàn)，我也就不強(qiáng)求原生插件了窿克，這個(gè)效果還可以骏庸。
計(jì)數(shù)
在博客列表統(tǒng)計(jì)評(píng)論數(shù)、點(diǎn)擊數(shù)年叮、贊數(shù)可以讓訪問(wèn)者快速找到比較火的文章具被。也可以為進(jìn)一步排序提供依據(jù)。統(tǒng)計(jì)也是動(dòng)態(tài)的只损，要借助一個(gè)第三方服務(wù)硬猫。
我用的計(jì)數(shù)器是來(lái)自不蒜子的。教程為教程:不蒜子，非常簡(jiǎn)單啸蜜，粘貼里面的代碼進(jìn)入網(wǎng)頁(yè)即可坑雅。這個(gè)統(tǒng)計(jì)分本站點(diǎn)擊，本站訪問(wèn)人次和本頁(yè)點(diǎn)擊衬横。
但是現(xiàn)在點(diǎn)擊統(tǒng)計(jì)僅限于本頁(yè)裹粤，沒(méi)有傳遞到博客列表。另外蜂林，評(píng)論和贊的統(tǒng)計(jì)比點(diǎn)擊數(shù)更有意義遥诉，Gitment應(yīng)該可以做到但還沒(méi)有官方的解決方案。這些以后再去開(kāi)發(fā)吧噪叙。
網(wǎng)頁(yè)設(shè)計(jì)
使用Markdown編輯網(wǎng)頁(yè)博客
在寫(xiě)博客的時(shí)候矮锈，如果直接在html里面敲字體驗(yàn)并不好。因?yàn)橐粩嗟厍靡恍?code><p>, <a>, <li> 這些格式的開(kāi)頭和結(jié)尾睁蕾。雖然latex寫(xiě)習(xí)慣了之后這也沒(méi)什么苞笨，但是個(gè)人博客還有更輕松的辦法來(lái)寫(xiě)，就是用Markdown編輯器子眶。
Markdown語(yǔ)法是一個(gè)非常適合寫(xiě)日志的語(yǔ)法瀑凝。我直接從App Store里面搜了一個(gè)編輯器，叫MWeb臭杰，還是很好用的粤咪。寫(xiě)完之后可以直接導(dǎo)出為html格式，然后取其中正文部分粘貼到博客網(wǎng)頁(yè)即可渴杆。這個(gè)過(guò)程只需要注意檢查圖片寥枝、列表等特殊部分跟網(wǎng)站模板的兼容性就行了。
舉例來(lái)說(shuō)磁奖，這個(gè)工具支持?jǐn)?shù)學(xué)公式的編輯和導(dǎo)出囊拜，這是用MathJax來(lái)實(shí)現(xiàn)的。編輯工具導(dǎo)出html時(shí)會(huì)自動(dòng)轉(zhuǎn)換格式点寥，但此時(shí)要注意檢查網(wǎng)頁(yè)的引用：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({TeX: {equationNumbers: { autoNumber: "AMS" } }});</script>
更簡(jiǎn)單的就是使用Hexo等博客發(fā)布工具艾疟，這樣省去了自己導(dǎo)出html来吩，直接編輯好Markdown敢辩，再加一條hexo g命令就變成網(wǎng)頁(yè)了。
網(wǎng)頁(yè)編輯后的預(yù)覽
網(wǎng)頁(yè)預(yù)覽的方式有四種：
一弟疆，直接用瀏覽器打開(kāi)html戚长，這肯定是最快的。但是有些插件不能顯示怠苔，比如我的網(wǎng)站是不能用這種辦法來(lái)測(cè)試Gitment和search.php的同廉。但是大部分工作還是能勝任的。
二， 使用Adobe Dreamweaver這樣的專(zhuān)業(yè)工具檢查迫肖，我并沒(méi)有開(kāi)發(fā)太多功能锅劝，不過(guò)很重要的是檢查網(wǎng)頁(yè)的報(bào)錯(cuò)，以及批量查找/替換某個(gè)詞句蟆湖。
三故爵， 打開(kāi)本地Web服務(wù)器。這是能完美運(yùn)行網(wǎng)站上所有插件隅津，甚至可以測(cè)試動(dòng)態(tài)模塊的辦法诬垂。具體步驟參見(jiàn)簡(jiǎn)書(shū)博客:Mac OS X Web Server。比較重要的命令就是apachectl：
sudo apachectl start
sudo apachectl stop
啟動(dòng)apachectl后伦仍，把你的網(wǎng)站文件夾拷貝到/Library/WebServer/Documents结窘，然后打開(kāi)http://127.0.0.1/網(wǎng)站文件夾就可以了，博客里面還寫(xiě)了一些高級(jí)功能充蓝，如怎樣更改路徑和配置等隧枫。
四，如果用了Hexo博客工具棺克，一條hexo s命令就可以了悠垛。
回到頂部按鈕
在網(wǎng)頁(yè)很長(zhǎng)的時(shí)候，回到頂部按鈕就很有用了娜谊。這個(gè)需要一段javascript code實(shí)現(xiàn)确买。我是在Google上隨便找了一個(gè)，改了改圖標(biāo)和大小纱皆，也可以看文件back.js湾趾。確定按鈕圖片的位置對(duì)之后，引用一下就可以了派草。
圖片滾動(dòng)
圖片滾動(dòng)插件
這個(gè)功能對(duì)博客來(lái)說(shuō)可有可無(wú)搀缠，不過(guò)對(duì)于普通網(wǎng)站來(lái)說(shuō)，宣傳新聞近迁，推銷(xiāo)產(chǎn)品什么的還是很有用的艺普。我覺(jué)得很有意思就留在首頁(yè)了，循環(huán)播放日志鉴竭，這應(yīng)該是我的網(wǎng)站唯一一個(gè)沒(méi)那么樸素的效果歧譬。
我用的插件叫做Nivo Slider，用起來(lái)比較舒服搏存，因?yàn)閳D片和圖例是分開(kāi)的瑰步，設(shè)置也很多。我試了好幾個(gè)素材網(wǎng)站的插件都沒(méi)有這個(gè)好璧眠。但是Nivo Slider有一個(gè)毛病是圖片的尺寸最好都一樣缩焦，而且不能太方正（我都是1920x960的圖）读虏，否則電腦端還好，但在移動(dòng)端會(huì)出現(xiàn)顯示問(wèn)題袁滥。
點(diǎn)擊Github:Nivo Slider盖桥，下載并學(xué)習(xí)demo就可以把它加入你的網(wǎng)頁(yè)了。
手機(jī)滑動(dòng)的實(shí)現(xiàn)
Nivo Slider本身是不支持手機(jī)的题翻，找那兩個(gè)小按鈕實(shí)在比較麻煩葱轩。所以我找到了一位高人的博客 Will Rees。他在里面講了怎樣利用一段支持手機(jī)滑動(dòng)指令的代碼 Hammer.js實(shí)現(xiàn)Nivo Slider的左右滑動(dòng)藐握。
用手機(jī)打開(kāi)我的網(wǎng)站就可以看到效果了靴拱。不過(guò)因?yàn)槲抑皇窃贜ivo Slider上面稍作修改，在手機(jī)上是只能左右滑動(dòng)猾普，不能手指懸停的袜炕。完美的解決方案可能是為手機(jī)單獨(dú)找個(gè)插件。
關(guān)于初家、版權(quán)
考慮到現(xiàn)在轉(zhuǎn)載不署名的情況到處都是偎窘，在某個(gè)位置聲明一下網(wǎng)站內(nèi)容的版權(quán)也是有必要的。在網(wǎng)頁(yè)中加入版權(quán)聲明其實(shí)很簡(jiǎn)單溜在，只要進(jìn)入版權(quán)網(wǎng)頁(yè)Creative Commons陌知，在這一頁(yè)最下方點(diǎn)擊“將這個(gè)授權(quán)協(xié)議使用在您自己的作品中”就可以找到代碼了，或者直接點(diǎn)這里的鏈接也行掖肋。
這個(gè)證書(shū)是一個(gè)署名-可修改-非商業(yè)用途證書(shū)仆葡，如果你需要其他政策，也可以去Google其他證書(shū)的名字志笼，基本上第一個(gè)彈出來(lái)的就是這些Createive Commons協(xié)議了沿盅。
總結(jié)
至此我總結(jié)完了學(xué)習(xí)過(guò)程中遇到的各種功能插件。我屬于業(yè)余纫溃，很多細(xì)節(jié)還在學(xué)習(xí)中腰涧，相信會(huì)有更好的解決方案。
