Breaking Change

1. 不再支持hexo 4.0.0以下版本
2. 添加hexo fragment_cache,加快生成速度
3. 完善V5圖標顯示，不再需要同時加載V4和v5圖標
4. 去除cheerio依賴
5. 整合豆瓣配置，增加配置遊戲，圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
6. 友情鏈接除列表外可自定義內容
7. 可設置主頁標題距離頂部距離
8. 側邊欄可隱藏,可設置手機頁面是否隱藏
9. 增加disqusjs和utterances 兩個評論
10. 主頁文章增加tags和更新日期顯示，可以配置post_meta
11. 首頁subtitle可關閉打字效果，可設置打字效果顯示一次或loop
12. 增加valine和gitalk的配置
13. darkmode配置整理
14. 增加404頁面
15. post_beautify改為beautify，頁面美化不再只限於post頁，page頁也一樣
16. 可設置是否顯示cover，可設置各位置的cover顯示
17. 增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
18. 增加pangu配置，中英文之間添加空格
19. 整合部分配置
20. post-copyright增加decode網址 (可以顯示中文)
21. 增加部分顏色配置
Feature
1. 適配IE
2. 增加一個Tag Plugins: 圖庫集
3. 增加一個Tag Plugins: tag-hide 功能 inline/block
4. 去除page頁開頭顯示與標題一樣的內容
5. aside 公告欄設置，支持html代碼
6. 手機界面sidebar顯示進度條和加深對應的標題
7. 主頁subtitle 的 hitokoto 顯示內容出處
9. footer 的hexo鏈接改為https
10. 修改手機下，menus和toc的打開效果
11. 手機頁面下，搜索界面全屏顯示
12. SEO優化，標題欄改為h1顯示
13. 閲讀模式優化，可根據light mode 和darkmode調整背景
14. 當屏蔽js時，header會出現（之前用js控制，會隱藏）
Fixed
1. 修復Tencent Analytics的script加載為https #105
2. 修復相關文章，日期顯示錯誤bug
3. 修復gitalk報錯問題
4. 修復當valine background 是絕對地址時無法顯示的bug
5. 修復medium-zoom 無法使用的bug
6. 修復在safari下，點擊或移動到首頁文章cover，圓角變成正方形的bug #114
7. 修復在部分瀏覽器下，aside,友情鏈接頭像轉動變形的bug
8. 修復在寬度限制下，表格內容溢出屏幕外而出現滾動條的bug \#138
9. 修復gitalk js 在一些沒有設置評論的page里加載的bug
10. 修復tag plugins 的gist 在不同主題下的背景顏色問題（黑色主題下，文字不易觀看）
11. 修復highlight figcaption 顯示不全的bug
12. 修復disqus評論數無法獲取的bug
13. 修復子目錄在觸摸屏下點擊,偶爾不出現的bug
14. 修復a標籤太長（連續英文字母）不會換行的bug
15. 修復toc滾動時，閲讀進度條也跟著滾動的bug
16. 修復aside的圖片，可點擊顯示大圖bug
17. 修復activate-power-mode設置參數無效bug
18. 修復語言上的錯誤 \#156
19. 修復主頁在safari桌面端，首頁滾動卡頓的bug

source/js/third-party/ClickShowText.js

@@ -0,0 +1,42 @@
+function co(){
+  var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
+    var colorArray = colorElements.split(",");
+    var color ="#";
+    for(var i =0;i<6;i++){
+    color+=colorArray[Math.floor(Math.random()*16)];
+    }
+    return color;
+};
+var a_idx = 0;
+jQuery(document).ready(function($) {
+  $("body").click(function (e) {
+  
+    var config = GLOBAL_CONFIG.ClickShowText;
+    
+    /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
+    var a = config.text.split(",");
+    var $i = $("<span/>").text(a[a_idx]);
+    a_idx = (a_idx + 1) % a.length;
+    var x = e.pageX,
+    y = e.pageY;
+    $i.css({
+  "z-index": 150,
+  "top": y - 20,
+  "left": x -40,
+  "position": "absolute",
+  "font-weight": "bold",
+  "color": co(),
+  "cursor": "default",
+  "font-size": config.fontSize || "inherit"
+    });
+    $("body").append($i);
+    $i.animate({
+  "top": y - 180,
+  "opacity": 0
+    },
+    1500,
+    function() {
+  $i.remove();
+    });
+});
+});

source/js/third-party/activate-power-mode.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}return o.m=t,o.c=e,o.p="",o(0)}([function(t,e,o){"use strict";var n=document.createElement("canvas");n.width=window.innerWidth,n.height=window.innerHeight,n.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",(function(){n.width=window.innerWidth,n.height=window.innerHeight})),document.body.appendChild(n);var r=n.getContext("2d"),i=[],a=0,d=!1;function l(t,e){return Math.random()*(e-t)+t}function c(t){if(p.colorful){var e=l(0,360);return"hsla("+l(e-10,e+10)+", 100%, "+l(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function u(t,e,o){return{x:t,y:e,alpha:1,color:o,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}}function p(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var n=o(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:n.left+t.left,y:n.top+t.top,color:c(e)}}var r=window.getSelection();if(r.rangeCount){var i=r.getRangeAt(0),a=i.startContainer;return a.nodeType===document.TEXT_NODE&&(a=a.parentNode),{x:(t=i.getBoundingClientRect()).left,y:t.top,color:c(a)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)i[a]=u(t.x,t.y,t.color),a=(a+1)%500;if(p.shake){var n=1+2*Math.random(),r=n*(Math.random()>.5?-1:1),l=n*(Math.random()>.5?-1:1);document.body.style.marginLeft=r+"px",document.body.style.marginTop=l+"px",setTimeout((function(){document.body.style.marginLeft="",document.body.style.marginTop=""}),75)}d||requestAnimationFrame(f)}function f(){d=!0,r.clearRect(0,0,n.width,n.height);for(var t=!1,e=n.getBoundingClientRect(),o=0;o<i.length;++o){var a=i[o];a.alpha<=.1||(a.velocity.y+=.075,a.x+=a.velocity.x,a.y+=a.velocity.y,a.alpha*=.96,r.globalAlpha=a.alpha,r.fillStyle=a.color,r.fillRect(Math.round(a.x-1.5)-e.left,Math.round(a.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(f):d=!1}p.shake=!0,p.colorful=!1,t.exports=p},function(t,e){!function(){var e=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],o=null!=window.mozInnerScreenX;function n(t,n,r){var i=r&&r.debug||!1;if(i){var a=document.querySelector("#input-textarea-caret-position-mirror-div");a&&a.parentNode.removeChild(a)}var d=document.createElement("div");d.id="input-textarea-caret-position-mirror-div",document.body.appendChild(d);var l=d.style,c=window.getComputedStyle?getComputedStyle(t):t.currentStyle;l.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(l.wordWrap="break-word"),l.position="absolute",i||(l.visibility="hidden"),e.forEach((function(t){l[t]=c[t]})),o?t.scrollHeight>parseInt(c.height)&&(l.overflowY="scroll"):l.overflow="hidden",d.textContent=t.value.substring(0,n),"INPUT"===t.nodeName&&(d.textContent=d.textContent.replace(/\s/g," "));var u=document.createElement("span");u.textContent=t.value.substring(n)||".",d.appendChild(u);var p={top:u.offsetTop+parseInt(c.borderTopWidth),left:u.offsetLeft+parseInt(c.borderLeftWidth)};return i?u.style.backgroundColor="#aaa":document.body.removeChild(d),p}void 0!==t&&void 0!==t.exports?t.exports=n:window.getCaretCoordinates=n}()}])}));

source/js/third-party/canvas-nest.js

@@ -0,0 +1,88 @@
+! function () {
+  var cn = document.getElementById('canvas_nest');
+  var mb = cn.getAttribute("mobile");
+
+  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+    return;
+  }
+
+  function o(w, v, i) {
+    return w.getAttribute(v) || i
+  }
+
+  function j(i) {
+    return document.getElementsByTagName(i)
+  }
+
+  function l() {
+    var i = j("script"),
+      w = i.length,
+      v = i[w - 1];
+    return {
+      l: w,
+      z: o(v, "zIndex", -1),
+      o: o(v, "opacity", 0.5),
+      c: o(v, "color", "0,0,0"),
+      n: o(v, "count", 99)
+    }
+  }
+
+  function k() {
+    r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+  }
+
+  function b() {
+    e.clearRect(0, 0, r, n);
+    var w = [f].concat(t);
+    var x, v, A, B, z, y;
+    t.forEach(function (i) {
+      i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
+      for (v = 0; v < w.length; v++) {
+        x = w[v];
+        if (i !== x && null !== x.x && null !== x.y) {
+          B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
+          y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
+        }
+      }
+      w.splice(w.indexOf(i), 1)
+    }), m(b)
+  }
+  var u = document.createElement("canvas"),
+    s = l(),
+    c = "c_n" + s.l,
+    e = u.getContext("2d"),
+    r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
+      window.setTimeout(i, 1000 / 45)
+    },
+    a = Math.random,
+    f = {
+      x: null,
+      y: null,
+      max: 20000
+    };
+  u.id = c;
+  u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
+  j("body")[0].appendChild(u);
+  k(), window.onresize = k;
+  window.onmousemove = function (i) {
+    i = i || window.event, f.x = i.clientX, f.y = i.clientY
+  }, window.onmouseout = function () {
+    f.x = null, f.y = null
+  };
+  for (var t = [], p = 0; s.n > p; p++) {
+    var h = a() * r,
+      g = a() * n,
+      q = 2 * a() - 1,
+      d = 2 * a() - 1;
+    t.push({
+      x: h,
+      y: g,
+      xa: q,
+      ya: d,
+      max: 6000
+    })
+  }
+  setTimeout(function () {
+    b()
+  }, 100)
+}();

source/js/third-party/canvas-ribbon.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2016 hustcc
+ * License: MIT
+ * Version: v1.0.1
+ * GitHub: https://github.com/hustcc/ribbon.js
+ **/
+
+!(function () {
+
+  var script = document.getElementById('ribbon');
+  var mb = script.getAttribute("mobile");  
+  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+    return;
+  }
+
+  config = {
+    z: attr(script, 'zIndex', -1), // z-index
+    a: attr(script, 'alpha', 0.6), // alpha
+    s: attr(script, 'size', 90), // size
+    c: attr(script, 'data-click', true) // click-to-change
+  }
+
+
+  function attr (node, attr, default_value) {
+    if (default_value === true) {
+      return node.getAttribute(attr) || default_value
+    }
+    return Number(node.getAttribute(attr)) || default_value
+  }
+
+  var canvas = document.createElement('canvas'),
+    g2d = canvas.getContext('2d'),
+    pr = window.devicePixelRatio || 1,
+    width = window.innerWidth,
+    height = window.innerHeight,
+    f = config.s,
+    q,
+    t,
+    m = Math,
+    r = 0,
+    pi = m.PI * 2,
+    cos = m.cos,
+    random = m.random
+  canvas.width = width * pr
+  canvas.height = height * pr
+  g2d.scale(pr, pr)
+  g2d.globalAlpha = config.a
+  canvas.style.cssText =
+    'opacity: ' +
+    config.a +
+    ';position:fixed;top:0;left:0;z-index: ' +
+    config.z +
+    ';width:100%;height:100%;pointer-events:none;'
+  // create canvas
+  document.getElementsByTagName('body')[0].appendChild(canvas)
+
+  function redraw () {
+    g2d.clearRect(0, 0, width, height)
+    q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
+    while (q[1].x < width + f) draw(q[0], q[1])
+  }
+  function draw (i, j) {
+    g2d.beginPath()
+    g2d.moveTo(i.x, i.y)
+    g2d.lineTo(j.x, j.y)
+    var k = j.x + (random() * 2 - 0.25) * f,
+      n = line(j.y)
+    g2d.lineTo(k, n)
+    g2d.closePath()
+    r -= pi / -50
+    g2d.fillStyle =
+      '#' +
+      (
+        ((cos(r) * 127 + 128) << 16) |
+        ((cos(r + pi / 3) * 127 + 128) << 8) |
+        (cos(r + (pi / 3) * 2) * 127 + 128)
+      ).toString(16)
+    g2d.fill()
+    q[0] = q[1]
+    q[1] = { x: k, y: n }
+  }
+  function line (p) {
+    t = p + (random() * 2 - 1.1) * f
+    return t > height || t < 0 ? line(p) : t
+  }
+  if (config.c !== 'false') {
+    document.onclick = redraw
+    document.ontouchstart = redraw
+  }
+  redraw()
+})()

source/js/third-party/click_heart.js

@@ -0,0 +1,73 @@
+!(function(e, t, a) {
+  function r(e) {
+    var a = t.createElement("div");
+    (a.className = "heart"),
+      n.push({
+        el: a,
+        x: e.clientX - 5,
+        y: e.clientY - 5,
+        scale: 1,
+        alpha: 1,
+        color:
+          "rgb(" +
+          ~~(255 * Math.random()) +
+          "," +
+          ~~(255 * Math.random()) +
+          "," +
+          ~~(255 * Math.random()) +
+          ")"
+      }),
+      t.body.appendChild(a);
+  }
+  var n = [];
+  (e.requestAnimationFrame =
+    e.requestAnimationFrame ||
+    e.webkitRequestAnimationFrame ||
+    e.mozRequestAnimationFrame ||
+    e.oRequestAnimationFrame ||
+    e.msRequestAnimationFrame ||
+    function(e) {
+      setTimeout(e, 1e3 / 60);
+    }),
+    (function(e) {
+      var a = t.createElement("style");
+      a.type = "text/css";
+      try {
+        a.appendChild(t.createTextNode(e));
+      } catch (t) {
+        a.styleSheet.cssText = e;
+      }
+      t.getElementsByTagName("head")[0].appendChild(a);
+    })(
+      ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
+    ),
+    (function() {
+      var t = "function" == typeof e.onclick && e.onclick;
+      e.onclick = function(e) {
+        t && t(), r(e);
+      };
+    })(),
+    (function e() {
+      for (var a = 0; a < n.length; a++)
+        n[a].alpha <= 0
+          ? (t.body.removeChild(n[a].el), n.splice(a, 1))
+          : (n[a].y--,
+            (n[a].scale += 0.004),
+            (n[a].alpha -= 0.013),
+            (n[a].el.style.cssText =
+              "left:" +
+              n[a].x +
+              "px;top:" +
+              n[a].y +
+              "px;opacity:" +
+              n[a].alpha +
+              ";transform:scale(" +
+              n[a].scale +
+              "," +
+              n[a].scale +
+              ") rotate(45deg);background:" +
+              n[a].color +
+              ";z-index:99999"));
+      requestAnimationFrame(e);
+    })();
+})(window, document);

source/js/third-party/fireworks.js

@@ -0,0 +1,129 @@
+var canvasEl = document.querySelector('.fireworks')
+if (canvasEl) {
+  var ctx = canvasEl.getContext('2d')
+  var numberOfParticules = 30
+  var pointerX = 0
+  var pointerY = 0
+  // var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
+  // Fixed the mobile scroll
+  var tap = 'mousedown'
+  var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
+
+  var setCanvasSize = debounce(function () {
+    canvasEl.width = window.innerWidth
+    canvasEl.height = window.innerHeight
+    canvasEl.style.width = window.innerWidth + 'px'
+    canvasEl.style.height = window.innerHeight + 'px'
+    canvasEl.getContext('2d').scale(1, 1)
+  }, 500)
+
+  var render = anime({
+    duration: Infinity,
+    update: function () {
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+    }
+  })
+
+  document.addEventListener(tap, function (e) {
+    if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
+      render.play()
+      updateCoords(e)
+      animateParticules(pointerX, pointerY)
+    }
+  }, false)
+
+  setCanvasSize()
+  window.addEventListener('resize', setCanvasSize, false)
+}
+
+function updateCoords (e) {
+  pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
+  pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
+}
+
+function setParticuleDirection (p) {
+  var angle = anime.random(0, 360) * Math.PI / 180
+  var value = anime.random(50, 180)
+  var radius = [-1, 1][anime.random(0, 1)] * value
+  return {
+    x: p.x + radius * Math.cos(angle),
+    y: p.y + radius * Math.sin(angle)
+  }
+}
+
+function createParticule (x, y) {
+  var p = {}
+  p.x = x
+  p.y = y
+  p.color = colors[anime.random(0, colors.length - 1)]
+  p.radius = anime.random(16, 32)
+  p.endPos = setParticuleDirection(p)
+  p.draw = function () {
+    ctx.beginPath()
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+    ctx.fillStyle = p.color
+    ctx.fill()
+  }
+  return p
+}
+
+function createCircle (x, y) {
+  var p = {}
+  p.x = x
+  p.y = y
+  p.color = '#F00'
+  p.radius = 0.1
+  p.alpha = 0.5
+  p.lineWidth = 6
+  p.draw = function () {
+    ctx.globalAlpha = p.alpha
+    ctx.beginPath()
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+    ctx.lineWidth = p.lineWidth
+    ctx.strokeStyle = p.color
+    ctx.stroke()
+    ctx.globalAlpha = 1
+  }
+  return p
+}
+
+function renderParticule (anim) {
+  for (var i = 0; i < anim.animatables.length; i++) {
+    anim.animatables[i].target.draw()
+  }
+}
+
+function animateParticules (x, y) {
+  var circle = createCircle(x, y)
+  var particules = []
+  for (var i = 0; i < numberOfParticules; i++) {
+    particules.push(createParticule(x, y))
+  }
+  anime.timeline().add({
+    targets: particules,
+    x: function (p) {
+      return p.endPos.x
+    },
+    y: function (p) {
+      return p.endPos.y
+    },
+    radius: 0.1,
+    duration: anime.random(1200, 1800),
+    easing: 'easeOutExpo',
+    update: renderParticule
+  })
+    .add({
+      targets: circle,
+      radius: anime.random(80, 160),
+      lineWidth: 0,
+      alpha: {
+        value: 0,
+        easing: 'linear',
+        duration: anime.random(600, 800)
+      },
+      duration: anime.random(1200, 1800),
+      easing: 'easeOutExpo',
+      update: renderParticule,
+      offset: 0
+    })
+}

source/js/third-party/piao.js

@@ -0,0 +1,334 @@
+	
+	(function (name, factory) {
+		if (typeof window === "object") {
+			window[name] = factory()
+		}
+	})("Ribbons", function () {
+		var _w = window,
+			_b = document.body,
+			_d = document.documentElement;
+		var random = function () {
+			if (arguments.length === 1) {
+				if (Array.isArray(arguments[0])) {
+					var index = Math.round(random(0, arguments[0].length - 1));
+					return arguments[0][index]
+				}
+				return random(0, arguments[0])
+			} else if (arguments.length === 2) {
+				return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+			}
+			return 0
+		};
+		var screenInfo = function (e) {
+			var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
+				height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
+				scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
+				scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
+			return {
+				width: width,
+				height: height,
+				ratio: width / height,
+				centerx: width / 2,
+				centery: height / 2,
+				scrollx: scrollx,
+				scrolly: scrolly
+			}
+		};
+		var mouseInfo = function (e) {
+			var screen = screenInfo(e),
+				mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
+				mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
+			return {
+				mousex: mousex,
+				mousey: mousey,
+				centerx: mousex - screen.width / 2,
+				centery: mousey - screen.height / 2
+			}
+		};
+		var Point = function (x, y) {
+			this.x = 0;
+			this.y = 0;
+			this.set(x, y)
+		};
+		Point.prototype = {
+			constructor: Point,
+			set: function (x, y) {
+				this.x = x || 0;
+				this.y = y || 0
+			},
+			copy: function (point) {
+				this.x = point.x || 0;
+				this.y = point.y || 0;
+				return this
+			},
+			multiply: function (x, y) {
+				this.x *= x || 1;
+				this.y *= y || 1;
+				return this
+			},
+			divide: function (x, y) {
+				this.x /= x || 1;
+				this.y /= y || 1;
+				return this
+			},
+			add: function (x, y) {
+				this.x += x || 0;
+				this.y += y || 0;
+				return this
+			},
+			subtract: function (x, y) {
+				this.x -= x || 0;
+				this.y -= y || 0;
+				return this
+			},
+			clampX: function (min, max) {
+				this.x = Math.max(min, Math.min(this.x, max));
+				return this
+			},
+			clampY: function (min, max) {
+				this.y = Math.max(min, Math.min(this.y, max));
+				return this
+			},
+			flipX: function () {
+				this.x *= -1;
+				return this
+			},
+			flipY: function () {
+				this.y *= -1;
+				return this
+			}
+		};
+		var Factory = function (options) {
+			this._canvas = null;
+			this._context = null;
+			this._sto = null;
+			this._width = 0;
+			this._height = 0;
+			this._scroll = 0;
+			this._ribbons = [];
+			this._options = {
+				colorSaturation: "80%",
+				colorBrightness: "60%",
+				colorAlpha: 0.65,
+				colorCycleSpeed: 6,
+				verticalPosition: "center",
+				horizontalSpeed: 150,
+				ribbonCount: 5,
+				strokeSize: 5,
+				parallaxAmount: -0.5,
+				animateSections: true
+			};
+			this._onDraw = this._onDraw.bind(this);
+			this._onResize = this._onResize.bind(this);
+			this._onScroll = this._onScroll.bind(this);
+			this.setOptions(options);
+			this.init()
+		};
+		Factory.prototype = {
+			constructor: Factory,
+			setOptions: function (options) {
+				if (typeof options === "object") {
+					for (var key in options) {
+						if (options.hasOwnProperty(key)) {
+							this._options[key] = options[key]
+						}
+					}
+				}
+			},
+			init: function () {
+				try {
+					this._canvas = document.createElement("canvas");
+					this._canvas.style["display"] = "block";
+					this._canvas.style["position"] = "fixed";
+					this._canvas.style["margin"] = "0";
+					this._canvas.style["padding"] = "0";
+					this._canvas.style["border"] = "0";
+					this._canvas.style["outline"] = "0";
+					this._canvas.style["left"] = "0";
+					this._canvas.style["top"] = "0";
+					this._canvas.style["width"] = "100%";
+					this._canvas.style["height"] = "100%";
+					this._canvas.style["z-index"] = "-1";
+					this._onResize();
+					this._context = this._canvas.getContext("2d");
+					this._context.clearRect(0, 0, this._width, this._height);
+					this._context.globalAlpha = this._options.colorAlpha;
+					window.addEventListener("resize", this._onResize);
+					window.addEventListener("scroll", this._onScroll);
+					document.body.appendChild(this._canvas)
+				} catch (e) {
+					console.warn("Canvas Context Error: " + e.toString());
+					return
+				}
+				this._onDraw()
+			},
+			addRibbon: function () {
+				var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
+					stop = 1000,
+					hide = 200,
+					min = 0 - hide,
+					max = this._width + hide,
+					movex = 0,
+					movey = 0,
+					startx = dir === "right" ? min : max,
+					starty = Math.round(random(0, this._height));
+				if (/^(top|min)$/i.test(this._options.verticalPosition)) {
+					starty = 0 + hide
+				} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
+					starty = this._height / 2
+				} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
+					starty = this._height - hide
+				}
+				var ribbon = [],
+					point1 = new Point(startx, starty),
+					point2 = new Point(startx, starty),
+					point3 = null,
+					color = Math.round(random(0, 360)),
+					delay = 0;
+				while (true) {
+					if (stop <= 0) break;
+					stop--;
+					movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
+					movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
+					point3 = new Point();
+					point3.copy(point2);
+					if (dir === "right") {
+						point3.add(movex, movey);
+						if (point2.x >= max) break
+					} else if (dir === "left") {
+						point3.subtract(movex, movey);
+						if (point2.x <= min) break
+					}
+					ribbon.push({
+						point1: new Point(point1.x, point1.y),
+						point2: new Point(point2.x, point2.y),
+						point3: point3,
+						color: color,
+						delay: delay,
+						dir: dir,
+						alpha: 0,
+						phase: 0
+					});
+					point1.copy(point2);
+					point2.copy(point3);
+					delay += 4;
+					color += this._options.colorCycleSpeed
+				}
+				this._ribbons.push(ribbon)
+			},
+			_drawRibbonSection: function (section) {
+				if (section) {
+					if (section.phase >= 1 && section.alpha <= 0) {
+						return true
+					}
+					if (section.delay <= 0) {
+						section.phase += 0.02;
+						section.alpha = Math.sin(section.phase) * 1;
+						section.alpha = section.alpha <= 0 ? 0 : section.alpha;
+						section.alpha = section.alpha >= 1 ? 1 : section.alpha;
+						if (this._options.animateSections) {
+							var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
+							if (section.dir === "right") {
+								section.point1.add(mod, 0);
+								section.point2.add(mod, 0);
+								section.point3.add(mod, 0)
+							} else {
+								section.point1.subtract(mod, 0);
+								section.point2.subtract(mod, 0);
+								section.point3.subtract(mod, 0)
+							}
+							section.point1.add(0, mod);
+							section.point2.add(0, mod);
+							section.point3.add(0, mod)
+						}
+					} else {
+						section.delay -= 0.5
+					}
+					var s = this._options.colorSaturation,
+						l = this._options.colorBrightness,
+						c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
+					this._context.save();
+					if (this._options.parallaxAmount !== 0) {
+						this._context.translate(0, this._scroll * this._options.parallaxAmount)
+					}
+					this._context.beginPath();
+					this._context.moveTo(section.point1.x, section.point1.y);
+					this._context.lineTo(section.point2.x, section.point2.y);
+					this._context.lineTo(section.point3.x, section.point3.y);
+					this._context.fillStyle = c;
+					this._context.fill();
+					if (this._options.strokeSize > 0) {
+						this._context.lineWidth = this._options.strokeSize;
+						this._context.strokeStyle = c;
+						this._context.lineCap = "round";
+						this._context.stroke()
+					}
+					this._context.restore()
+				}
+				return false
+			},
+			_onDraw: function () {
+				for (var i = 0, t = this._ribbons.length; i < t; ++i) {
+					if (!this._ribbons[i]) {
+						this._ribbons.splice(i, 1)
+					}
+				}
+				this._context.clearRect(0, 0, this._width, this._height);
+				for (var a = 0; a < this._ribbons.length; ++a) {
+					var ribbon = this._ribbons[a],
+						numSections = ribbon.length,
+						numDone = 0;
+					for (var b = 0; b < numSections; ++b) {
+						if (this._drawRibbonSection(ribbon[b])) {
+							numDone++
+						}
+					}
+					if (numDone >= numSections) {
+						this._ribbons[a] = null
+					}
+				}
+				if (this._ribbons.length < this._options.ribbonCount) {
+					this.addRibbon()
+				}
+				requestAnimationFrame(this._onDraw)
+			},
+			_onResize: function (e) {
+				var screen = screenInfo(e);
+				this._width = screen.width;
+				this._height = screen.height;
+				if (this._canvas) {
+					this._canvas.width = this._width;
+					this._canvas.height = this._height;
+					if (this._context) {
+						this._context.globalAlpha = this._options.colorAlpha
+					}
+				}
+			},
+			_onScroll: function (e) {
+				var screen = screenInfo(e);
+				this._scroll = screen.scrolly
+			}
+		};
+		return Factory
+	});
+
+	var cn = document.getElementById('ribbon_piao');
+	var mb = cn.getAttribute("mobile");
+	
+	if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+
+	} else {
+		new Ribbons({
+			colorSaturation: "60%",
+			colorBrightness: "50%",
+			colorAlpha: 0.5,
+			colorCycleSpeed: 5,
+			verticalPosition: "random",
+			horizontalSpeed: 200,
+			ribbonCount: 3,
+			strokeSize: 0,
+			parallaxAmount: -0.2,
+			animateSections: true
+		});
+	}
+