在Hexo釋出部落格的MarkDown檔案中引入JS程式碼
阿新 • • 發佈：2019-02-19
前言
上週困擾了兩天的問題終於得到解決，於是就打算寫點東西，也當作一次記錄。
從題目可以看出，問題就是——如何在Hexo釋出部落格的Md檔案中引入JS程式碼，來實現你想要的特效。
之所以會提出這個問題，是源於一個簡單的想法，單純地想在某一篇部落格中引入echarts（一個純 Javascript 的圖表庫）特效，實質上就是引入它的JS程式碼。
那麼就詳細講解一下引入echarts來實現特效的過程。
下載
首先，在echarts下載頁面 中下載相應的版本，我這裡下載的是完整版（echarts.min.js）。
檔案下載完成後，將其放入下圖所示資料夾當中
我的部落格使用的是next主題，開啟themes資料夾中的next資料夾，再依次開啟source、js、src資料夾，就可以看到許多js檔案，將echarts.min.js放入即可。
使用
在檔案引入後（src就是指向剛剛存入js檔案的目錄），那麼你就可以在你的部落格中引用這個js檔案來達到特定的效果。
引用的方式很簡單，只需一行程式碼：
<script type="text/javascript" src="/js/src/echarts.min.js"></script>
在引用js檔案後，那麼你只要在md檔案中新增相應的js程式碼片段即可，這裡貼出我使用的js程式碼片段
<script>
var bmapChart=echarts.init(document.getElementById("map-wrap"));var 文章末尾有部落格連結。
在這個頁面中所展現的特效中還引入了其他的js檔案，如china.js、api.js、bmap.js等，例如api.js是百度地圖的js程式碼，當然你可以引入任何你想要引用的js檔案。
詳細
至於bmap.js檔案可以在github下載，下載之後開啟echarts-master資料夾，找到extension中的bamp.js,如下圖所示:
ECharts使用參考（其中有china.js的介紹）：
這裡要注意一個問題，就是引入bmap.js後，地圖並不顯示，想要使用百度地圖，還要去百度地圖開放平臺申請一個金鑰，申請成功後在頁面中引入，但是經過多次嘗試，直接在md檔案中引入並不起作用，如下：
<script src="http://api.map.baidu.com/api?v=2.0&ak=？（你的金鑰）"></script>
由此想到在script標籤中嵌入了網頁連結，md可能不能識別（只是猜測），於是想著將這個連結所指向的js轉為檔案引入試試。直接點選連結，跳轉到如下頁面：
可以看到標記處同樣為一個連結，再次從瀏覽器開啟，出現如下：
在你眼前呈現的是全屏的js程式碼，這就是我們所需要的js檔案，即百度地圖的js程式碼，將它全選儲存為js檔案，這裡命名為api.js。
然後在md中引入它即可使用，這樣我們就能取得和百度地圖類似的效果。
下面貼出完整的文章程式碼，即md檔案：
<div id="map-wrap" style="height: 500px;width:800px;"></div>
<script type="text/javascript" src="/js/src/echarts.min.js"></script>
<script src="/js/src/china.js"></script>
<script src="/js/src/api.js"></script>
<script src="/js/src/bmap.js"></script>
<script>
var bmapChart=echarts.init(document.getElementById("map-wrap"));var data=[{name:"上海",value:299},{name:"廈門",value:245},{name:"豐城",value:120},{name:"南昌",value:160},{name:"張家界",value:128},{name:"長沙",value:75},{name:"杭州",value:90},{name:"福州",value:90},{name:"深圳",value:90},{name:"武漢",value:73}];var geoCoordMap={"廈門":[118.105,24.443],"上海":[121.399,31.321],"豐城":[115.801,28.201],"南昌":[115.856,28.691],"張家界":[110.489,29.118],"福州":[119.3,26.08],"長沙":[113,28.21],"杭州":[120.16,30.28],"深圳":[114.06,22.55],"武漢":[114.31,30.52]};var convertData=function(data){var res=[];for(var i=0;i<data.length;i++){var geoCoord=geoCoordMap[data[i].name];if(geoCoord){res.push({name:data[i].name,value:geoCoord.concat(data[i].value)})}}return res};option={title:{text:"我們的足跡 - Our footprints",subtext:"一步一個腳印，讓時光見證",sublink:"#",left:"center"},tooltip:{trigger:"item"},bmap:{center:[106.320439,32.58783],zoom:5,roam:true,mapStyle:{styleJson:[{"featureType":"water","elementType":"all","stylers":{"color":"#d1d1d1"}},{"featureType":"land","elementType":"all","stylers":{"color":"#f3f3f3"}},{"featureType":"railway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"highway","elementType":"all","stylers":{"color":"#fdfdfd"}},{"featureType":"highway","elementType":"labels","stylers":{"visibility":"off"}},{"featureType":"arterial","elementType":"geometry","stylers":{"color":"#fefefe"}},{"featureType":"arterial","elementType":"geometry.fill","stylers":{"color":"#fefefe"}},{"featureType":"poi","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"green","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"subway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"manmade","elementType":"all","stylers":{"color":"#d1d1d1"}},{"featureType":"local","elementType":"all","stylers":{"color":"#d1d1d1"}},{"featureType":"arterial","elementType":"labels","stylers":{"visibility":"off"}},{"featureType":"boundary","elementType":"all","stylers":{"color":"#fefefe"}},{"featureType":"building","elementType":"all","stylers":{"color":"#d1d1d1"}},{"featureType":"label","elementType":"labels.text.fill","stylers":{"color":"#999999"}}]}},series:[{name:"footmark",type:"scatter",coordinateSystem:"bmap",data:convertData(data),symbolSize:function(val){return val[2]/10},label:{normal:{formatter:"{b}",position:"right",show:false},emphasis:{show:true}},itemStyle:{normal:{color:"#60C0DD"}}},{name:"I miss you",type:"effectScatter",coordinateSystem:"bmap",data:convertData(data.sort(function(a,b){return b.value-a.value}).slice(0,2)),symbolSize:function(val){return val[2]/10},showEffectOn:"render",rippleEffect:{brushType:"stroke"},hoverAnimation:true,label:{normal:{formatter:"{b}",position:"right",show:true}},itemStyle:{normal:{color:"purple",shadowBlur:10,shadowColor:"#333"}},zlevel:1}]};bmapChart.setOption(option);
</script>特效如下圖所示：
問題
這裡其實有個問題，就是特效雖然展現出來，但是在網頁端還是無法實現地圖的縮放，而在手機端和ipad中都可以進行地圖的縮放，目前這個問題還未能得到解決，待日後解決再補充。
總結
以上就是在MarkDown中插入js程式碼的過程。