diff --git a/_data/variables.yml b/_data/variables.yml
index a0868277946..9ddfebc2d5d 100644
--- a/_data/variables.yml
+++ b/_data/variables.yml
@@ -7,4 +7,15 @@ default:
     rss:  /feed.xml
   lang: zh
   toc:
-    selectors: 'h1,h2,h3'
\ No newline at end of file
+    selectors: 'h1,h2,h3'
+
+sources:
+  jquery: 'https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'
+  leancloud_js_sdk: '//cdn1.lncld.net/static/js/3.4.1/av-min.js'
+  toc: 'https://cdn.bootcss.com/toc/0.3.2/toc.min.js'
+  chart: 'https://cdn.bootcss.com/Chart.js/2.7.1/Chart.bundle.min.js'
+  gitalk:
+    js: '//unpkg.com/gitalk/dist/gitalk.min.js'
+    css: '//unpkg.com/gitalk/dist/gitalk.css'
+  mathjax: 'https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'
+  mermaid: 'https://cdn.bootcss.com/mermaid/7.1.2/mermaid.min.js'
diff --git a/_includes/components/tags.html b/_includes/components/tags.html
index 08a2b818c93..6992cc319df 100644
--- a/_includes/components/tags.html
+++ b/_includes/components/tags.html
@@ -15,10 +15,10 @@
 {%- if gap_size < 1 -%}
   {%- assign gap_size = 1 -%}
 {%- endif -%}
-<div class="m-tags">
+<div class="m-tags js-tags">
   <ul>
     <li>
-      <button type="button" class="js-article-tag js-tag-show-all all pill-button" onclick="tagSelect('')">Show All
+      <button type="button" class="js-article-tag js-tag-show-all all pill-button">Show All
         <div class="tag-count">{{ site.posts | size }}</div>
       </button>
     </li>
@@ -44,7 +44,7 @@
         {%- assign c_index = 4 -%}
       {%- endif -%}
       <li><button type="button" class="js-article-tag tag-{{ c_index }} pill-button"
-        data-tag="{{ tag[0] | strip | url_encode }}" onclick="tagSelect('{{ tag[0] | strip | url_encode }}')">
+        data-tag="{{ tag[0] | strip | url_encode }}">
           <span>{{ tag[0] | strip }}</span><div class="tag-count">{{ tag[1].size }}</div>
         </button>
       </li>
diff --git a/_includes/scripts/all.html b/_includes/scripts/all.html
new file mode 100644
index 00000000000..b861f9262a6
--- /dev/null
+++ b/_includes/scripts/all.html
@@ -0,0 +1,101 @@
+{%- include snippets/page-title.html -%}
+<script>
+  (function() {
+    function queryString() {
+      // This function is anonymous, is executed immediately and
+      // the return value is assigned to QueryString!
+      var i = 0,
+        queryObj = {},
+        pair;
+      var queryStr = window.location.search.substring(1);
+      var queryArr = queryStr.split('&');
+      for (i = 0; i < queryArr.length; i++) {
+        pair = queryArr[i].split('=');
+        // If first entry with this name
+        if (typeof queryObj[pair[0]] === 'undefined') {
+          queryObj[pair[0]] = pair[1];
+          // If second entry with this name
+        } else if (typeof queryObj[pair[0]] === 'string') {
+          queryObj[pair[0]] = [queryObj[pair[0]], pair[1]];
+          // If third or later entry with this name
+        } else {
+          queryObj[pair[0]].push(pair[1]);
+        }
+      }
+      return queryObj;
+    }
+
+    window.Lazyload.js('{{ site.data.variables.sources.jquery }}', function() {
+      var $pageHeading = $('.js-page-heading');
+      var $tags = $('.js-tags');
+      var $articleTag = $('.js-article-tag');
+      var $tagShowAll = $('.js-tag-show-all');
+      var $postBlock = $('.js-post-block');
+      var $yearSection = $('.js-year-wrapper section');
+
+      $tags.on('click', 'button', function() {
+        tagSelect($(this).data('tag'));
+      });
+
+      function tagSelect(tag) {
+        var i = 0,
+          flag = false,
+          cur, tagStr = '',
+          tags = [],
+          _tag = '',
+          lis = [];
+        if (tag === undefined || tag === '') {
+          $pageHeading.text('{{ __return }}');
+          $tagShowAll.focus();
+          $postBlock.show();
+        } else {
+          tag = tag.trim();
+          // $articleTag.filter('.tag-' + tag).focus();
+          for (i = 0; i < $articleTag.length; i++) {
+            cur = $articleTag.eq(i);
+            _tag = cur.data('tag');
+            if (typeof _tag === 'string' && _tag.trim() === tag) {
+              cur.focus();
+              tagStr = cur.children('span').text();
+              (typeof tagStr === 'string') && (tagStr = tagStr.trim());
+              $pageHeading.text('Tag: ' + tagStr);
+              break;
+            }
+          }
+          $postBlock.each(function() {
+            flag = false;
+            cur = $(this);
+            tags = cur.data('tag').split(',');
+            for (i = 0; i < tags.length; i++) {
+              _tag = tags[i].trim();
+              if (_tag === tag) {
+                flag = true;
+                cur.show();
+                break;
+              }
+            }
+            flag || (cur.hide());
+          });
+        }
+        $yearSection.each(function() {
+          flag = false;
+          cur = $(this);
+          lis = cur.find('li');
+          for (i = 0; i < lis.length; i++) {
+            if (lis.eq(i).css('display') !== 'none') {
+              flag = true;
+              break;
+            }
+          }
+          flag ? cur.show() : cur.hide();
+        });
+        tag === undefined || window.history.replaceState(null, '', window.location.href.split('?')[0] + '?tag=' + tag);
+      }
+
+      var query = queryString(),
+        tag = undefined;
+      query.tag === undefined || (tag = query.tag);
+      tagSelect(tag);
+    });
+  })();
+</script>
diff --git a/_includes/scripts/home.html b/_includes/scripts/home.html
new file mode 100644
index 00000000000..0f7ac9e3653
--- /dev/null
+++ b/_includes/scripts/home.html
@@ -0,0 +1,24 @@
+{%- if page.key and site.leancloud.app_id and site.leancloud.app_key and site.leancloud.app_class and jekyll.environment != "development" -%}
+<script>
+  window.Lazyload.js('{{ site.data.variables.sources.leancloud_js_sdk }}', function() {
+    AV.init({
+      appId: '{{ site.leancloud.app_id }}',
+      appKey: '{{ site.leancloud.app_key }}'
+    });
+    $(".article-view").each(function() {
+      var curId = this.id;
+      var query = new AV.Query('{{ site.leancloud.app_class }}');
+      query.equalTo('key', curId.substr(9));
+      query.first().then(function(result) {
+        if (result) {
+          $('#' + curId).text(result.attributes.views);
+        }
+      }, function(error) {
+        if (error) {
+          throw error;
+        }
+      });
+    });
+  });
+</script>
+{%- endif -%}
\ No newline at end of file
diff --git a/_includes/scripts/page-post.html b/_includes/scripts/page-post.html
new file mode 100644
index 00000000000..351e2aef899
--- /dev/null
+++ b/_includes/scripts/page-post.html
@@ -0,0 +1,24 @@
+<script>
+  window.Lazyload.js('{{ site.data.variables.sources.jquery }}', function() {
+    var $articleContent = $('.m-post, .m-page').find('.m-article-content'), $this;
+    $articleContent.children('.highlight').each(function() {
+      $this = $(this);
+      $this.attr('data-lang', $this.find('code').attr('data-lang'));
+    });
+    function scrollAnimateTo(destination, duration, callback) {
+      var $body = $('html, body'), bodyScrollTop = $body.scrollTop();
+      if(bodyScrollTop === destination) { return; }
+      $body.animate({ scrollTop: destination }, duration, callback);
+    }
+    $articleContent.children('h1, h2, h3, h4, h5, h6').each(function() {
+      $this = $(this);
+      $this.append($('<a class="anchor" aria-hidden="true"></a>').html('{%- include icon/link.svg -%}'));
+    });
+    $articleContent.on('click', '.anchor', function(e) {
+      var targetId = $(this).parent().attr('id');
+      scrollAnimateTo($('#' + targetId).offset().top, 400, function() {
+        window.history.replaceState(null, '', window.location.href.split('#')[0] + '#' + targetId);
+      });
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/_includes/scripts/post.html b/_includes/scripts/post.html
new file mode 100644
index 00000000000..9ba4884cec7
--- /dev/null
+++ b/_includes/scripts/post.html
@@ -0,0 +1,128 @@
+{%- assign _toc_selectors = site.toc.selectors | default: site.data.variables.default.toc.selectors -%}
+<script>
+  window.Lazyload.js('{{ site.data.variables.sources.jquery }}', function() {
+    window.Lazyload.js('{{ site.data.variables.sources.toc }}', function() {
+      var $window = $(window);
+      var $pageStage = $('.js-page-stage');
+      var $pageMain = $('.js-main');
+      var $pageFooter = $('.js-page-footer');
+      var $articleContent = $('.js-article-content');
+      var $articleAside = $('.js-article-aside');
+      var $toc = $('.js-toc');
+      var $col2 = $('.js-col-2');
+      var hasTitle = $articleContent.find('{{ _toc_selectors }}').length > 0;
+      function asideSticky() {
+        return $col2.css('display') !== 'none' && $pageStage.hasClass('has-toc');
+      }
+
+      function setTocClass() {
+        if (hasTitle) {
+          !$pageStage.hasClass('has-toc') && $pageStage.addClass('has-toc');
+        }
+      }
+
+      setTocClass();
+
+      function setAsideTOC() {
+        var asideTop, asideLeft, scrollBottom, asideBottomTop, lastScrollTop;
+
+        function init() {
+          var asideOffset = $articleAside.offset();
+          var footerOffset = $pageFooter.offset();
+          var mainOffset = $pageMain.offset();
+          asideTop = mainOffset.top;
+          asideHeight = $toc.outerHeight() + parseInt($articleAside.css('padding-top'), 10) + parseInt($articleAside.css('padding-bottom'), 10);
+          asideLeft = mainOffset.left + $pageMain.outerWidth() - $articleAside.outerWidth() - parseInt($pageMain.css('padding-right'), 10);
+          scrollBottom = footerOffset.top - asideHeight;
+          asideBottomTop = scrollBottom - mainOffset.top;
+        }
+
+        function setAside(force) {
+          force !== true && (force = false);
+          var scrollTop = $window.scrollTop();
+          if (scrollTop >= asideTop && scrollTop <= scrollBottom) {
+            (!force && lastScrollTop >= asideTop && lastScrollTop <= scrollBottom) ||
+            $articleAside.addClass('fixed').css({
+              left: asideLeft + 'px',
+              top: 0
+            });
+          } else if (scrollTop < asideTop) {
+            (!force && lastScrollTop < asideTop) ||
+            $articleAside.removeClass('fixed').css({
+              left: 0,
+              top: 0
+            });
+          } else {
+            (!force && lastScrollTop > scrollBottom) ||
+            $articleAside.removeClass('fixed').css({
+              left: 0,
+              top: asideBottomTop + 'px'
+            });
+          }
+          lastScrollTop = scrollTop;
+        }
+        asideSticky() && (init(), setAside());
+        $window.on('scroll', function() {
+          asideSticky() && setAside();
+        });
+        $window.on('resize', window.throttle(function() {
+          setTocClass();
+          asideSticky() && (init(), setAside(true));
+        }, 100));
+        setTimeout(init, 4000);
+      }
+      setTimeout(setAsideTOC, 1000);
+      $toc.toc({
+        selectors: '{{ _toc_selectors }}',
+        container: '.js-article-content',
+        highlightOffset: 0
+      });
+    });
+  });
+
+  {%- if page.key and site.leancloud.app_id and site.leancloud.app_key and site.leancloud.app_class and jekyll.environment != "development" -%}
+  window.Lazyload.js(['{{ site.data.variables.sources.jquery }}', '{{ site.data.variables.sources.leancloud_js_sdk }}'], function() {
+    AV.init({
+      appId: '{{ site.leancloud.app_id }}',
+      appKey: '{{ site.leancloud.app_key }}'
+    });
+    var query = new AV.Query('{{ site.leancloud.app_class }}');
+    query.equalTo('key', '{{ page.key }}');
+    query.first().then(function(result) {
+      if (result) {
+        addOne(result)
+      } else {
+        var Blog = AV.Object.extend('{{ site.leancloud.app_class }}');
+        var blog = new Blog();
+        blog.set('title', '{{ page.title }}');
+        blog.set('key', '{{ page.key }}');
+        blog.set('views', 0);
+        blog.save().then(function(page) {
+          addOne(page)
+        }, function(error) {
+          if (error) {
+            throw error;
+          }
+        });
+      }
+
+      function addOne(page) {
+        page.increment('views', 1);
+        page.save(null, {
+          fetchWhenSave: true
+        }).then(function(page) {
+          $("#post-key-{{ page.key }}").text(page.attributes.views);
+        }, function(error) {
+          if (error) {
+            throw error;
+          }
+        });
+      }
+    }, function(error) {
+      if (error) {
+        throw error;
+      }
+    });
+  });
+  {%- endif -%}
+</script>
\ No newline at end of file
diff --git a/_includes/scripts/utils.html b/_includes/scripts/utils.html
new file mode 100644
index 00000000000..bd1aa1ad294
--- /dev/null
+++ b/_includes/scripts/utils.html
@@ -0,0 +1,178 @@
+<script>
+  window.Lazyload = (function(doc) {
+    var queue = {js: [], css: []}, sources = {js: {}, css: {}}, context = this;
+
+    var Set = (function() {
+      var add = function(item) {
+        var i, data = this._data;
+        for (i = 0; i < data.length; i++) {
+          if (data[i] === item) {
+            return;
+          }
+        }
+        this.size ++;
+        data.push(item);
+        return data;
+      }
+
+      var Set = function(data) {
+        this.size = 0;
+        this._data = [];
+        if (data.length > 0) {
+          for (i = 0; i < data.length; i++) {
+            add.call(this, data[i]);
+          }
+        }
+      }
+      Set.prototype.add = add;
+      Set.prototype.get = function(index) {
+        return this._data[index];
+      };
+      Set.prototype.has = function(item) {
+        var i, data = this._data;
+        for (i = 0; i < data.length; i++) {
+          if (this.get(i) === item) {
+            return true;
+          }
+        }
+        return false;
+      };
+      Set.prototype.is = function(map) {
+        if (map._data.length !== this._data.length) { return false; }
+        var i, j, flag, tData = this._data, mData = map._data;
+        for (i = 0; i < tData.length; i++) {
+          for (flag = false, j = 0; j < mData.length; j++) {
+            if (tData[i] === mData[j]) {
+              flag = true;
+              break;
+            }
+          }
+          if (!flag) { return false; }
+        }
+        return true;
+      };
+
+      Set.prototype.values = function() {
+        return this._data;
+      }
+      return Set;
+    })();
+
+    var createNode = function(name, attrs) {
+      var node = doc.createElement(name), attr;
+      for (attr in attrs) {
+        if (attrs.hasOwnProperty(attr)) {
+          node.setAttribute(attr, attrs[attr]);
+        }
+      }
+      return node;
+    }
+
+    var end = function(type, url, urls) {
+      var s, q, qi, cbs, i, cur,
+        val = urls.values(), flag;
+      if (type === 'js' || type ==='css') {
+        s = sources[type], q = queue[type];
+        s[url] = true;
+        for (i = 0; i < q.length; i++) {
+          cur = q[i];
+          if (urls.is(cur.urls)) {
+            qi = cur;
+            break;
+          }
+        }
+        qi && (cbs = qi.callbacks);
+        for (flag = true, i = 0; i < val.length; i++) {
+          cur = val[i]
+          if (!s[cur]) {
+            flag = false;
+          }
+        }
+        if (flag && cbs && cbs.length > 0) {
+          for (i = 0; i < cbs.length; i++) {
+            cbs[i].call(context);
+          }
+        }
+      }
+    }
+
+    var load = function(type, urls, callback) {
+      var s, si, q, qi, node, i, cur, flag,
+        _urls = typeof urls === 'string' ? new Set([urls]) : new Set(urls), val, url;
+      if (type === 'js' || type ==='css') {
+        s = sources[type], q = queue[type];
+        for (i = 0; i < q.length; i++) {
+          cur = q[i];
+          if (_urls.is(cur.urls)) {
+            qi = cur;
+            break;
+          }
+        }
+        val = _urls.values();
+        for (flag = true, i = 0; i < val.length; i++) {
+          url = val[i]
+          if (!s[url]) {
+            flag = false;
+          }
+        }
+        if (qi) {
+          callback && (flag || qi.callbacks.push(callback));
+          callback && (flag && callback());
+        } else {
+          q.push({
+            urls: _urls,
+            callbacks: callback ? [callback] : []
+          });
+          for (i = 0; i < val.length; i++) {
+            node = null, url = val[i];
+            (type === 'js' && s[url] === undefined) && (s[url] = false, node = createNode('script', { src: url }));
+            (type === 'css'&& s[url] === undefined) && (s[url] = false, node = createNode('link', { rel: 'stylesheet', href: url }));
+            if (node) {
+              node.onload = function(e) {
+                end(type, url, _urls);
+              };
+              (doc.head || doc.body).appendChild(node);
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      js: function(url, callback) {
+        load('js', url, callback);
+      },
+      css: function(url, callback) {
+        load('css', url, callback);
+      }
+    }
+
+  })(this.document);
+
+  window.throttle = function(func, wait) {
+    var args, result, thisArg, timeoutId, lastCalled = 0;
+
+    function trailingCall() {
+      lastCalled = new Date;
+      timeoutId = null;
+      result = func.apply(thisArg, args);
+    }
+    return function() {
+      var now = new Date,
+        remaining = wait - (now - lastCalled);
+
+      args = arguments;
+      thisArg = this;
+
+      if (remaining <= 0) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+        lastCalled = now;
+        result = func.apply(thisArg, args);
+      } else if (!timeoutId) {
+        timeoutId = setTimeout(trailingCall, remaining);
+      }
+      return result;
+    };
+  }
+</script>
\ No newline at end of file
diff --git a/_includes/utils/chart.html b/_includes/utils/chart.html
index fdd0c15f45e..3854002fc2d 100644
--- a/_includes/utils/chart.html
+++ b/_includes/utils/chart.html
@@ -1,6 +1,6 @@
 {%- if site.chart == true or page.chart == true -%}
-  <script src="//cdn.bootcss.com/Chart.js/2.7.1/Chart.bundle.min.js"></script>
-  <script>
+<script>
+  window.Lazyload.js(['{{ site.data.variables.sources.jquery }}', '{{ site.data.variables.sources.chart }}'], function() {
     var $canvas = null, $this = null, _ctx = null, _text = '';
     $('.language-chart').each(function(){
       $this = $(this);
@@ -10,5 +10,6 @@
       _ctx = $canvas.get(0).getContext('2d');
       (_ctx && _text) && (new Chart(_ctx, JSON.parse(_text)) && $this.attr('data-processed', true));
     });
-  </script>
+  });
+</script>
 {%- endif -%}
\ No newline at end of file
diff --git a/_includes/utils/comment-gitalk.html b/_includes/utils/comment-gitalk.html
index 3230f7151c0..af3ea6002ac 100644
--- a/_includes/utils/comment-gitalk.html
+++ b/_includes/utils/comment-gitalk.html
@@ -1,22 +1,23 @@
 {%- if site.disqus.shortname == nil and site.gitalk.clientID and site.gitalk.clientSecret and site.gitalk.repository and site.gitalk.owner and site.gitalk.admin and page.key -%}
-	<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
-	<div id="js-gitalk-container"></div>
-  {%- assign admin = '' -%}
-  {%- for adminId in site.gitalk.admin -%}
-    {%- assign admin = admin | append: ", '" | append: adminId | append: "'" -%}
-  {%- endfor -%}
-  {%- assign last = admin | size | minus: 1 -%}
-  {%- assign admin = admin | slice: 2, last -%}
-	<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
-	<script>
+<div id="js-gitalk-container"></div>
+{%- assign admin = '' -%}
+{%- for adminId in site.gitalk.admin -%}
+	{%- assign admin = admin | append: ", '" | append: adminId | append: "'" -%}
+{%- endfor -%}
+{%- assign last = admin | size | minus: 1 -%}
+{%- assign admin = admin | slice: 2, last -%}
+<script>
+	window.Lazyload.css('{{ site.data.variables.sources.gitalk.css }}');
+	window.Lazyload.js('{{ site.data.variables.sources.gitalk.js }}', function() {
 		var gitalk = new Gitalk({
 			clientID: '{{ site.gitalk.clientID }}',
 			clientSecret: '{{ site.gitalk.clientSecret }}',
 			repo: '{{ site.gitalk.repository }}',
 			owner: '{{ site.gitalk.owner }}',
 			admin: [{{ admin }}],
-      id: '{{ page.key }}'
+			id: '{{ page.key }}'
 		});
 		gitalk.render('js-gitalk-container');
-	</script>
+	});
+</script>
 {%- endif -%}
\ No newline at end of file
diff --git a/_includes/utils/google-analytics.html b/_includes/utils/google-analytics.html
index 3306f3f204a..27416350467 100644
--- a/_includes/utils/google-analytics.html
+++ b/_includes/utils/google-analytics.html
@@ -1,13 +1,11 @@
 {%- if site.ga_tracking_id -%}
-	<!-- Google Analytics -->
-	<script>
-		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+<script>
+	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-		ga('create', '{{ site.ga_tracking_id }}', 'auto');
-		ga('send', 'pageview');
-	</script>
-	<!-- End Google Analytics -->
+	ga('create', '{{ site.ga_tracking_id }}', 'auto');
+	ga('send', 'pageview');
+</script>
 {%- endif -%}
diff --git a/_includes/utils/mathjax.html b/_includes/utils/mathjax.html
index 585f13f998c..a9fe5260457 100644
--- a/_includes/utils/mathjax.html
+++ b/_includes/utils/mathjax.html
@@ -8,5 +8,5 @@
 		{%- endif -%}
 		MathJax.Hub.Config(_config);
 	</script>
-	<script type="text/javascript" async src="//cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+	<script type="text/javascript" src="{{ site.data.variables.sources.mathjax }}" async></script>
 {%- endif -%}
\ No newline at end of file
diff --git a/_includes/utils/mermaid.html b/_includes/utils/mermaid.html
index ea4fb04b7a1..c4ff3ac257e 100644
--- a/_includes/utils/mermaid.html
+++ b/_includes/utils/mermaid.html
@@ -1,9 +1,8 @@
 {%- if site.mermaid == true or page.mermaid == true -%}
-  <script src="//cdn.bootcss.com/mermaid/7.1.2/mermaid.min.js"></script>
-  <script>
+<script>
+  window.Lazyload.js('{{ site.data.variables.sources.mermaid }}', function() {
     mermaid.init(undefined, '.language-mermaid');
-    $(function() {
-      mermaid.initialize({ startOnLoad: true });
-    });
-  </script>
+    mermaid.initialize({ startOnLoad: true });
+  });
+</script>
 {%- endif -%}
\ No newline at end of file
diff --git a/_layouts/all.html b/_layouts/all.html
index f8ec09a5461..1b6c5a6d4f4 100644
--- a/_layouts/all.html
+++ b/_layouts/all.html
@@ -1,5 +1,5 @@
 ---
-layout: blog-default
+layout: base
 titles:
   en: All Posts
   zh: 归档
@@ -42,100 +42,4 @@ <h2 class="year-title" id="year-{{ post.date | date: "%Y" }}">{{ currentdate }}<
       {%- endfor -%}
     </section>
   </div>
-</div>
-{%- include snippets/page-title.html -%}
-<script type="text/javascript">
-  // function queryString is copied from
-  // http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter#answer-979995
-  function queryString() {
-    // This function is anonymous, is executed immediately and
-    // the return value is assigned to QueryString!
-    var i = 0,
-      queryObj = {},
-      pair;
-    var queryStr = window.location.search.substring(1);
-    var queryArr = queryStr.split('&');
-    for (i = 0; i < queryArr.length; i++) {
-      pair = queryArr[i].split('=');
-      // If first entry with this name
-      if (typeof queryObj[pair[0]] === 'undefined') {
-        queryObj[pair[0]] = pair[1];
-        // If second entry with this name
-      } else if (typeof queryObj[pair[0]] === 'string') {
-        queryObj[pair[0]] = [queryObj[pair[0]], pair[1]];
-        // If third or later entry with this name
-      } else {
-        queryObj[pair[0]].push(pair[1]);
-      }
-    }
-    return queryObj;
-  }
-
-  $(function() {
-    var $pageHeading = $('.js-page-heading');
-    var $articleTag = $('.js-article-tag');
-    var $tagShowAll = $('.js-tag-show-all');
-    var $postBlock = $('.js-post-block');
-    var $yearSection = $('.js-year-wrapper section');
-
-    window.tagSelect = function(tag) {
-      var i = 0,
-        flag = false,
-        cur, tagStr = '',
-        tags = [],
-        _tag = '',
-        lis = [];
-      if (tag === undefined || tag === '') {
-        $pageHeading.text('{{ __return }}');
-        $tagShowAll.focus();
-        $postBlock.show();
-      } else {
-        tag = tag.trim();
-        // $articleTag.filter('.tag-' + tag).focus();
-        for (i = 0; i < $articleTag.length; i++) {
-          cur = $articleTag.eq(i);
-          _tag = cur.data('tag');
-          if (typeof _tag === 'string' && _tag.trim() === tag) {
-            cur.focus();
-            tagStr = cur.children('span').text();
-            (typeof tagStr === 'string') && (tagStr = tagStr.trim());
-            $pageHeading.text('Tag: ' + tagStr);
-            break;
-          }
-        }
-        $postBlock.each(function() {
-          flag = false;
-          cur = $(this);
-          tags = cur.data('tag').split(',');
-          for (i = 0; i < tags.length; i++) {
-            _tag = tags[i].trim();
-            if (_tag === tag) {
-              flag = true;
-              cur.show();
-              break;
-            }
-          }
-          flag || (cur.hide());
-        });
-      }
-      $yearSection.each(function() {
-        flag = false;
-        cur = $(this);
-        lis = cur.find('li');
-        for (i = 0; i < lis.length; i++) {
-          if (lis.eq(i).css('display') !== 'none') {
-            flag = true;
-            break;
-          }
-        }
-        flag ? cur.show() : cur.hide();
-      });
-      tag === undefined || window.history.replaceState(null, '', window.location.href.split('?')[0] + '?tag=' + tag);
-    }
-
-    var query = queryString(),
-      tag = undefined;
-    query.tag === undefined || (tag = query.tag);
-    tagSelect(tag);
-  });
-</script>
+</div>
\ No newline at end of file
diff --git a/_layouts/base.html b/_layouts/base.html
new file mode 100644
index 00000000000..9d3f490e5f1
--- /dev/null
+++ b/_layouts/base.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+{%- include snippets/get-lang.html -%}
+<html lang="{{ __return }}">
+  <head>
+    {%- include common-head.html -%}
+    {%- include head-icons-rel.html -%}
+    {%- assign __path = '/assets/css/blog.css' -%}
+    {%- include snippets/prepend-baseurl.html -%}
+    <link rel="stylesheet" href="{{ __return }}">
+    {%- include scripts/utils.html -%}
+          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+  <body>
+    <div class="m-page-stage js-page-stage">
+      <div class="m-page-content">
+        {%- include components/header.html -%}
+        <div class="m-page-main">{{ content }}</div>
+      </div>
+    </div>
+    {%- include components/footer.html -%}
+    {%- if page.layout == "home" -%}
+      {%- include scripts/home.html -%}
+    {%- elsif page.layout == "page" -%}
+      {%- include scripts/page-post.html -%}
+    {%- elsif page.layout == "post" -%}
+      {%- include scripts/page-post.html -%}
+      {%- include scripts/post.html -%}
+    {%- elsif page.layout == "all" -%}
+      {%- include scripts/all.html -%}
+    {%- endif -%}
+    {%- include utils/mathjax.html -%}
+    {%- include utils/mermaid.html -%}
+    {%- include utils/chart.html -%}
+    {%- if jekyll.environment != "development" -%}
+      {%- include utils/google-analytics.html -%}
+    {%- endif -%}
+  </body>
+</html>
diff --git a/_layouts/blog-base.html b/_layouts/blog-base.html
deleted file mode 100644
index 73bdda6a717..00000000000
--- a/_layouts/blog-base.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-{%- include snippets/get-lang.html -%}
-<html lang="{{ __return }}">
-  <head>
-    {%- include common-head.html -%}
-    {%- include head-icons-rel.html -%}
-    {%- assign __path = '/assets/css/blog.css' -%}
-    {%- include snippets/prepend-baseurl.html -%}
-    <link rel="stylesheet" href="{{ __return }}">
-    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
-          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-  <body>
-    <div class="m-page-stage js-page-stage">{{ content }}</div>
-    {%- include components/footer.html -%}
-    <script>
-      $(function() {
-        // display coding language
-        var $articleContent = $('.m-post, .m-page').find('.m-article-content'), $this;
-        $articleContent.children('.highlight').each(function() {
-          $this = $(this);
-          $this.attr('data-lang', $this.find('code').attr('data-lang'));
-        });
-        $articleContent.children('h1, h2, h3, h4, h5, h6').each(function() {
-          $this = $(this);
-          $this.append($('<a class="anchor" aria-hidden="true"></a>').text('#'));
-        });
-        $articleContent.on('click', '.anchor', function(e) {
-          var targetId = $(this).parent().attr('id');
-          scrollAnimateTo($('#' + targetId).offset().top, 400, function() {
-            console.log(666)
-            window.history.replaceState(null, '', window.location.href.split('#')[0] + '#' + targetId);
-          });
-        });
-        function scrollAnimateTo(destination, duration, callback) {
-          var $body = $('html, body'), bodyScrollTop = $body.scrollTop();
-          if(bodyScrollTop === destination) { return; }
-          $body.animate({ scrollTop: destination }, duration, callback);
-        }
-      });
-    </script>
-    {%- include utils/mathjax.html -%}
-    {%- include utils/mermaid.html -%}
-    {%- include utils/chart.html -%}
-    {%- if jekyll.environment != "development" -%}
-      {%- include utils/google-analytics.html -%}
-    {%- endif -%}
-  </body>
-</html>
diff --git a/_layouts/blog-default.html b/_layouts/blog-default.html
deleted file mode 100644
index 1ed91d80b0a..00000000000
--- a/_layouts/blog-default.html
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: blog-base
----
-<div class="m-page-content">
-  {%- include components/header.html -%}
-  <div class="m-page-main">{{ content }}</div>
-</div>
diff --git a/_layouts/error-404.html b/_layouts/error-404.html
index 69fcb421380..d9c576f69d0 100644
--- a/_layouts/error-404.html
+++ b/_layouts/error-404.html
@@ -1,5 +1,5 @@
 ---
-layout: blog-default
+layout: base
 title: 404
 ---
 <div class="m-error-404">
diff --git a/_layouts/home.html b/_layouts/home.html
index 611c8371294..0a1c3828412 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,5 +1,5 @@
 ---
-layout: blog-default
+layout: base
 titles:
   en: Blog
   zh: 博客
@@ -92,9 +92,9 @@ <h1><a href="{{ href }}">{{ post.title }}</a></h1>
               {%- else -%}
                 {%- if _n0 and _n1 -%}
                   {%- if page > 1 and page < _n0 -%}
-                    {%- if page == 2 -%}<li><span class="omit">...</span></li>{%- endif -%}
+                    {%- if page == 2 -%}<li><span class="omit">{%- include icon/omit.svg -%}</span></li>{%- endif -%}
                   {%- elsif page > _n1 and page < _length -%}
-                    {%- if page == _length_mimus_one -%}<li><span class="omit">...</span></li>{%- endif -%}
+                    {%- if page == _length_mimus_one -%}<li><span class="omit">{%- include icon/omit.svg -%}</span></li>{%- endif -%}
                   {%- else -%}
                     {%- assign __path = site.paginate_path -%}
                     {%- include snippets/prepend-baseurl.html -%}
@@ -133,28 +133,3 @@ <h1><a href="{{ href }}">{{ post.title }}</a></h1>
     {%- endif -%}
   </div>
 </div>
-{%- if site.leancloud.app_id and site.leancloud.app_key and site.leancloud.app_class and jekyll.environment != "development" -%}
-  <script src="//cdn1.lncld.net/static/js/3.4.1/av-min.js"></script>
-  <script>
-    $(function() {
-      AV.init({
-        appId: '{{ site.leancloud.app_id }}',
-        appKey: '{{ site.leancloud.app_key }}'
-      });
-      $(".article-view").each(function() {
-        var curId = this.id;
-        var query = new AV.Query('{{ site.leancloud.app_class }}');
-        query.equalTo('key', curId.substr(9));
-        query.first().then(function(result) {
-          if (result) {
-            $('#' + curId).text(result.attributes.views);
-          }
-        }, function(error) {
-          if (error) {
-            throw error;
-          }
-        });
-      });
-    });
-  </script>
-{%- endif -%}
diff --git a/_layouts/page.html b/_layouts/page.html
index 0d9bb6463de..486b5053a64 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,5 +1,5 @@
 ---
-layout: blog-default
+layout: base
 ---
 <div class="m-page">
   <article class="main">
diff --git a/_layouts/post.html b/_layouts/post.html
index b48c2566fc2..00061b17540 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,13 +1,13 @@
 ---
-layout: blog-default
+layout: base
 ---
 <div class="m-post">
-	<div class="main js-main clearfix">
+	<div class="main clearfix js-main">
 		<div class="col-2 js-col-2">
 			<aside class="js-article-aside"><div class="m-toc js-toc"></div></aside>
 		</div>
 		<div class="col-1">
-			<article itemscope itemtype="http://schema.org/BlogPosting">
+			<article class="js-article" itemscope itemtype="http://schema.org/BlogPosting">
 				<meta itemprop="mainEntityOfPage" itemscope itemType="https://schema.org/WebPage"/>
 				<header class="main-header">
 					{%- include snippets/page-title.html -%}
@@ -57,163 +57,4 @@ <h1 itemprop="headline" itemprop="name headline">{{ __return }}</h1>
 			{%- endif -%}
 		</div>
 	</div>
-</div>
-{%- assign _toc_selectors = site.toc.selectors | default: site.data.variables.default.toc.selectors -%}
-<script src="//cdn.bootcss.com/toc/0.3.2/toc.min.js"></script>
-<script type="text/javascript">
-	window.throttle = function(func, wait) {
-	  var args, result, thisArg, timeoutId, lastCalled = 0;
-
-	  function trailingCall() {
-	    lastCalled = new Date;
-	    timeoutId = null;
-	    result = func.apply(thisArg, args);
-	  }
-	  return function() {
-	    var now = new Date,
-	      remaining = wait - (now - lastCalled);
-
-	    args = arguments;
-	    thisArg = this;
-
-	    if (remaining <= 0) {
-	      clearTimeout(timeoutId);
-	      timeoutId = null;
-	      lastCalled = now;
-	      result = func.apply(thisArg, args);
-	    } else if (!timeoutId) {
-	      timeoutId = setTimeout(trailingCall, remaining);
-	    }
-	    return result;
-	  };
-	}
-	$(function() {
-	  var $window = $(window);
-	  var $pageStage = $('.js-page-stage');
-	  var $pageMain = $('.js-main');
-	  var $pageFooter = $('.js-page-footer');
-	  var $articleContent = $('.js-article-content');
-	  var $articleAside = $('.js-article-aside');
-	  var $toc = $('.js-toc');
-		var $col2 = $('.js-col-2');
-	  var hasTitle = $articleContent.find('{{ _toc_selectors }}').length > 0;
-	  function asideSticky() {
-	    return $col2.css('display') !== 'none' && $pageStage.hasClass('has-toc');
-	  }
-
-	  function setTocClass() {
-	    if (hasTitle) {
-	      !$pageStage.hasClass('has-toc') && $pageStage.addClass('has-toc');
-	    }
-	  }
-
-	  setTocClass();
-
-	  function setAsideTOC() {
-	    var asideTop, asideLeft, scrollBottom, asideBottomTop, lastScrollTop;
-
-	    function init() {
-	      var asideOffset = $articleAside.offset();
-	      var footerOffset = $pageFooter.offset();
-	      var mainOffset = $pageMain.offset();
-	      asideTop = mainOffset.top;
-	      asideHeight = $toc.outerHeight() + parseInt($articleAside.css('padding-top'), 10) + parseInt($articleAside.css('padding-bottom'), 10);
-	      asideLeft = mainOffset.left + $pageMain.outerWidth() - $articleAside.outerWidth() - parseInt($pageMain.css('padding-right'), 10);
-	      scrollBottom = footerOffset.top - asideHeight;
-	      asideBottomTop = scrollBottom - mainOffset.top;
-	    }
-
-	    function setAside(force) {
-	      force !== true && (force = false);
-	      var scrollTop = $window.scrollTop();
-	      if (scrollTop >= asideTop && scrollTop <= scrollBottom) {
-	        (!force && lastScrollTop >= asideTop && lastScrollTop <= scrollBottom) ||
-	        $articleAside.addClass('fixed').css({
-	          left: asideLeft + 'px',
-	          top: 0
-	        });
-	      } else if (scrollTop < asideTop) {
-	        (!force && lastScrollTop < asideTop) ||
-	        $articleAside.removeClass('fixed').css({
-	          left: 0,
-	          top: 0
-	        });
-	      } else {
-	        (!force && lastScrollTop > scrollBottom) ||
-	        $articleAside.removeClass('fixed').css({
-	          left: 0,
-	          top: asideBottomTop + 'px'
-	        });
-	      }
-	      lastScrollTop = scrollTop;
-	    }
-	    asideSticky() && (init(), setAside());
-	    $window.on('scroll', function() {
-	      asideSticky() && setAside();
-	    });
-	    $window.on('resize', throttle(function() {
-	      setTocClass();
-	      asideSticky() && (init(), setAside(true));
-	    }, 100));
-	    setTimeout(init, 4000);
-	  }
-	  setTimeout(setAsideTOC, 1000);
-
-	  $toc.toc({
-	    selectors: '{{ _toc_selectors }}',
-	    container: '.js-article-content',
-			highlightOffset: 0
-	  });
-	});
-</script>
-{%- if page.key and site.leancloud.app_id and site.leancloud.app_key and site.leancloud.app_class and jekyll.environment != "development" -%}
-  <script src="//cdn1.lncld.net/static/js/3.4.1/av-min.js"></script>
-  <script type="text/javascript">
-		$(function() {
-			// 初始化
-			AV.init({
-				appId: '{{ site.leancloud.app_id }}',
-				appKey: '{{ site.leancloud.app_key }}'
-			});
-			// 查询
-			var query = new AV.Query('{{ site.leancloud.app_class }}');
-			query.equalTo('key', '{{ page.key }}');
-			query.first().then(function(result) {
-				if (result) {
-					addOne(result)
-				} else {
-					//新建
-					var Blog = AV.Object.extend('{{ site.leancloud.app_class }}');
-					var blog = new Blog();
-					blog.set('title', '{{ page.title }}');
-					blog.set('key', '{{ page.key }}');
-					blog.set('views', 0);
-					blog.save().then(function(page) {
-						addOne(page)
-					}, function(error) {
-						if (error) {
-							throw error;
-						}
-					});
-				}
-
-				function addOne(page) {
-					page.increment('views', 1);
-					page.save(null, {
-						fetchWhenSave: true
-					}).then(function(page) {
-						$("#post-key-{{ page.key }}").text(page.attributes.views);
-					}, function(error) {
-						if (error) {
-							throw error;
-						}
-					});
-				}
-			}, function(error) {
-				if (error) {
-					throw error;
-				}
-			});
-		});
-	</script>
-{%- endif -%}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/package.json b/package.json
index 3a28e87fb14..fa3532cd068 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "default": "bundle exec jekyll serve -H 0.0.0.0 -t",
     "dev": "bundle exec jekyll serve -H 0.0.0.0 -t --config ./_config.dev.yml",
     "demo": "bundle exec jekyll serve -H 0.0.0.0 -t --config ./_config.demo.yml",
+    "production": "JEKYLL_ENV=production bundle exec jekyll serve -H 0.0.0.0 -t --config ./_config.demo.yml",
     "favicon": "gulp favicon",
     "icons": "gulp icons",
     "artwork": "gulp artwork",