給hexo添加寵物

開始

以前在博客園上看到，公告欄裏有人居然在養魚，以爲很好玩！一直念念不忘的，因而就想着在hexo中也來養幾隻，由於我用的事Next的Muse主題，因此有一個很是合適的側邊欄，先來看看效果。

點擊此處到個人hexo博客

進入正題

首先你要去找幾隻寵物養一下，領養的網站aBowman去找你想養的寵物，狗、烏龜、青蛙之類的。

以小金魚爲例子，在下面的 edit settings按鈕中能夠設置一些參數，顏色、數目、背景圖、食物顏色之類的。

設置完成之後，下面的框框裏有對應的代碼，愉快的給copy出來備用。

操做主題

找到主題下的layout/_custom/sidebar.swig文件，將這一段給copy上。外層用div包裹一下，方便調整樣式。

固然了，直接複製過來的樣式必定不滿意，你能夠在div中本身修改，也能夠在 next/source/css/_custom/custom.style本身添加，直接修改外層包裹着的行間樣式，也是能夠的！

<div id="fish" style="text-align: center;margin-top: 18px;">
<object type="application/x-shockwave-flash" style="outline:none;" data="/js/fish.swf?up_fishColor1=F45540&amp;up_fishColor4=0D0C0C&amp;up_fishColor9=F45540&amp;up_fishColor6=F45540&amp;up_fishColor5=F45540&amp;up_fishColor10=F45540&amp;up_foodColor=FCB347&amp;up_fishColor3=080707&amp;up_fishColor7=F45540&amp;up_backgroundImage=/images/finsh.JPG&amp;up_numFish=6&amp;up_fishName=Fish&amp;up_fishColor2=F45540&amp;up_fishColor8=F45540&amp;up_backgroundColor=F0F7FF&amp;" width="200" height="375"><param name="movie" value="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&amp;up_fishColor4=0D0C0C&amp;up_fishColor9=F45540&amp;up_fishColor6=F45540&amp;up_fishColor5=F45540&amp;up_fishColor10=F45540&amp;up_foodColor=FCB347&amp;up_fishColor3=080707&amp;up_fishColor7=F45540&amp;up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&amp;up_numFish=6&amp;up_fishName=Fish&amp;up_fishColor2=F45540&amp;up_fishColor8=F45540&amp;up_backgroundColor=F0F7FF&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"><param name="scale" value="noscale"><param name="salign" value="tl"></object>
</div>

背景圖片flash我已經放到資源目錄中了，這塊代碼僅供參考，要使用你須要修改 data 與 backgroundImage 將路徑改成對應的網絡地址。

你已經懶到了不想修改了，直接使用我這個樣式的！！！也給你！

<div id="finsh" style="text-align: center;margin-top: 18px;">
    <object type="application/x-shockwave-flash" style="outline:none;"  data="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&" width="200" height="375"><param name="movie" value="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
</div>

有跨域什麼的問題，好像！把引用的資源放，主題的js目錄下！像上面那樣直接js/fish.swf 進行引用就能避免了，背景圖片同理，由於背景圖片引用用的是http協議，也是有跨域問題的！你能夠同理放到images的目錄下/images/fish.png。