Introduction of JS code in the markdown file of Hexo Publishing blog __markdown

Preface

The problem that had plagued me for two days last week was finally resolved, so I decided to write something, as a record.

As you can see from the topic, the problem is- how to introduce the JS code in the MD file of Hexo Publishing blog to achieve the special effects you want.
The reason for this question is that it stems from a simple idea that simply trying to introduce echarts (a pure Javascript chart library) in a blog is essentially a JS code that introduces it.

Then explain in detail the process of introducing echarts to achieve special effects. Download

First of all, download the corresponding version in the Echarts download page, I am here to download the full version (Echarts.min.js).
When the file download is complete, put it in the folder shown in the following illustration

My blog uses the next theme, open the next folder in the Themes folder, and then open source, JS, src folder, you can see a lot of JS files, will echarts.min.js into it. Use

After the introduction of the file (SRC is to point to just into the directory of JS files), then you can refer to this JS file in your blog to achieve a specific effect.
The reference is simple, just one line of code:

<script type= "Text/javascript" src= "/js/src/echarts.min.js" ></script>

After referencing the JS file, then you just add the appropriate JS code snippet in the MD file, and post the JS code snippet I used here.

<script> var bmapchart=echarts.init (document.getElementById ("Map-wrap")); var data=[{name: "Shanghai", value:299},{ Name: "Xiamen", Value:245},{name: "Fengcheng", Value:120},{name: "Nanchang", Value:160},{name: "Zhangjiajie", Value:128},{name: "Changsha", value:75},{ Name: "Hangzhou", Value:90},{name: "Fuzhou", Value:90},{name: "Shenzhen", Value:90},{name: "Wuhan", Value:73}];var geocoordmap={"Xiamen": [ 118.105,24.443], "Shanghai": [121.399,31.321], "Fengcheng": [115.801,28.201], "Nanchang": [115.856,28.691], "Zhangjiajie": [110.489,29.118], "Fuzhou": [119.3,26.08], "Changsha": [113,28.21], "Hangzhou": [120.16,30.28], "Shenzhen": [114.06,22.55], "Wuhan": [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 footprint-our Footprints ", Subtext:" Step, let Time Witness ", 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": "The #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>

There is a blog link at the end of the article.
In this page shows the special effects also introduced other JS files, such as China.js, Api.js, bmap.js, such as Api.js is Baidu map of the JS code, of course you can introduce any you want to reference the JS file. detailed

As for the Bmap.js file can be downloaded in GitHub, after downloading, open Echarts-master folder, find the bamp.js in extension, as shown in the following figure:

Echarts use reference (which has china.js introduction): Echarts realization Map Scatter chart (above) echarts realize map Scatter chart (bottom)

Here to pay attention to a problem, that is, the introduction of Bmap.js, the map does not show, want to use Baidu map, but also to Baidu map open platform to apply for a key, the application after the successful introduction of the page, but after many attempts, directly in the MD file introduced does not work, as follows:

<script src= "http://api.map.baidu.com/api?v=2.0&ak=. (Your key) "></script>

The idea is to embed a web link in the script tag, and MD may not be able to recognize it (just guess), and then think of the link to the JS to file into a try. Click on the link directly to jump to the following page:

You can see the tag at the same time as a link, open again from the browser, and appear as follows:

In front of your present is full screen JS code, this is what we need JS file, that is, Baidu map of the JS code, it is selected to save all JS files, here named Api.js.
It can then be used in MD so that we can get a similar effect to the Baidu map.

The complete article code, the MD file, is posted below:

<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: "Shanghai", Value:299},{name: "Xiamen", Value:245},{name: "Fengcheng", Value:120},{name: "Nanchang", Value:160},{name: "Zhangjiajie", Value:128},{name: "Changsha", Value:75},{name: "Hangzhou", Value:90},{name: "Fuzhou", Value:90},{name: "Shenzhen", Value:90},{name: "Wuhan", Value:73}];var geocoordmap={"Xiamen": [118.105,24.443], "Shanghai": [121.399,31.321], "Fengcheng": [115.801,28.201], "Nanchang": [ 115.856,28.691], "Zhangjiajie": [110.489,29.118], "Fuzhou": [119.3,26.08], "Changsha": [113,28.21], "Hangzhou": [120.16,30.28], "Shenzhen": [ 114.06,22.55], "Wuhan": [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-our footprints", Subtext: "Step, let Time Witness", 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 ( 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>

The effects are shown in the following illustration:

Welcome to the Blog Page view effect: Youngforzy problem

There is a problem here, that is, although the special effects are displayed, but in the end of the page can not achieve the zoom map, and the mobile phone and the ipad in the zoom map, the problem has not been resolved, to be resolved in the future to supplement. Summary

The above is the process of inserting JS code in markdown.