前言
上周困扰了两天的问题终于得到解决,于是就打算写点东西,也当作一次记录。
从题目可以看出,问题就是——如何在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 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":