index.html

<!DOCTYPE html>
<html lang="en">
<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Calpa的技術博客，開發日常，以及遇到的坑">
    <meta name="keyword" content="calpa, blog, JavaScript">
    <meta name="theme-color" content="#384f7c">
    <meta name="msapplication-navbutton-color" content="#384f7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#384f7c">
    <link rel="shortcut icon" href="/img/icon.png">
    <link rel="alternate" type="application/atom+xml" title="Calpa" href="/atom.xml">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="google-site-verification" content="riZBcestky7i9xY__A-5J-2EE65T75X1u-zgbss37Io">
    <title>
        
        Calpa&#39;s blog
        
    </title>

    <link rel="canonical" href="https://calpa.me/">

    <!-- Open Graph -->
    
    <meta name="description" content="Calpa的技術博客，開發日常，以及遇到的坑">
<meta property="og:type" content="website">
<meta property="og:title" content="Calpa&#39;s blog">
<meta property="og:url" content="https://calpa.me/index.html">
<meta property="og:site_name" content="Calpa">
<meta property="og:description" content="Calpa的技術博客，開發日常，以及遇到的坑">
<meta property="og:image" content="https://calpa.me/img/post-default.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Calpa&#39;s blog">
<meta name="twitter:description" content="Calpa的技術博客，開發日常，以及遇到的坑">
<meta name="twitter:image" content="https://calpa.me/img/post-default.jpg">

    <!-- Bootstrap v3.3.7 Core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/blog-style.css">

    <!-- Pygments Github CSS -->
    <link rel="stylesheet" href="/css/syntax.css">

    <!-- pace -->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
    <link rel="stylesheet" href="/css/pace-theme-minimal.min.css">
    

    <!-- lazy loading -->
    <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

    <!-- OneSignal -->
    <link rel="manifest" href="/manifest.json">
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(["init", {
            appId: "272cd882-09dc-46af-bdee-842e3caf63c9",
            autoRegister: false,
            httpPermissionRequest: {
              enable: true,
            },
            notifyButton: {
                enable: true
            }
        }]);
    </script>
</head>


<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top is-fixed" id="nav-top" data-ispost="false" data-istags="false
" data-ishome="true">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand animated pulse" href="/">
        <span class="brand-logo">Calpa</span><span class="brand-blog">'s Blog</span>
      </a>
    </div>

    <div id="huxblog_navbar">
      <div class="navbar-collapse">
        <ul class="nav navbar-nav navbar-center title-calpa display-none">
          <li><a href="#" onclick="scrolltoTop(event)">home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="/">Home</a>
          </li>
          
            
                  <li>
                    <a href="/Tags/">
                      Tags
                    </a>
                  </li>
                
              
                  <li>
                    <a href="/about/">
                      About
                    </a>
                  </li>
                
              
                  <li>
                    <a href="/archive/">
                      Archive
                    </a>
                  </li>
                
              
                  <li>
                    <a href="/search/">
                      Search
                    </a>
                  </li>
                
              
                  <li>
                    <a href="/works/">
                      Works
                    </a>
                  </li>
                
              
        </ul>
      </div>
    </div>
  </div>
  <!-- /.container -->
</nav>
<script>
  // Drop Bootstarp low-performance Navbar
  // Use customize navbar with high-quality material design animation
  // in high-perf jank-free CSS3 implementation
  //    var $body   = document.body;
  var $toggle = document.querySelector('.navbar-toggle');
  var $navbar = document.querySelector('#huxblog_navbar');
  var $collapse = document.querySelector('.navbar-collapse');

  $toggle.addEventListener('click', handleMagic)

  function handleMagic(e) {
    if ($navbar.className.indexOf('in') > 0) {
      // CLOSE
      $navbar.className = " ";
      // wait until animation end.
      setTimeout(function() {
        // prevent frequently toggle
        if ($navbar.className.indexOf('in') < 0) {
          $collapse.style.height = "0px"
        }
      }, 400)
    } else {
      // OPEN
      $collapse.style.height = "auto"
      $navbar.className += " in";
    }
  }
</script>

<!-- Main Content -->


<style>

    header.intro-header {
        background-image: url('/img/blue-blur-background.jpg')
    }

    /*去掉诗歌的背景图片*/
    .custom-haojen-container .post-preview-poetry:nth-of-type(1) {
        background-image: none !important;
        background-color: rgba(255, 248, 220, 0.5);
    }

    .custom-haojen-container .post-preview:nth-child(1) h2,
    .custom-haojen-container .post-preview:nth-child(1) .post-meta,
    .custom-haojen-container .post-preview:nth-child(1) .post-subtitle {
        letter-spacing: 1px;
        margin-top: 0;
    }

    .custom-haojen-container .post-preview:nth-child(1) .post-meta {
        font-size: .9em;
        font-weight: 300;
        margin-top: 0;
    }

    .custom-haojen-container .post-preview-poetry:nth-child(1) .post-subtitle {
        letter-spacing: 6px;
        font-size: 18px;
        font-family: unset;
        font-weight: 400;
        color: rgba(0, 0, 0, .75)
    }

    /*不显示摘要*/
    .custom-haojen-container .post-preview:nth-child(1) .post-content-preview {
        display: none
    }

    /*第一个分界线去掉*/
    .custom-haojen-container hr:nth-of-type(1) {
        display: none;
    }

    /*主题*/
    .custom-haojen-container .post-preview:nth-of-type(1) > a {
        display: table-cell;
        vertical-align: middle;
    }

    /*诗词标题*/
    .custom-haojen-container .post-preview-poetry:nth-child(1) h2 {
        font-size: 35px;
        font-family: STKaiti;
        color: rgba(0, 0, 0, .8);
    }

    .custom-haojen-container .post-preview-poetry:nth-of-type(1) .post-meta {
        color: #0e2231;
    }

    @media (max-width: 768px) {
        .custom-haojen-container .post-preview:nth-child(1) {
            height: 240px;
        }

        .custom-haojen-container .post-preview-poetry:nth-child(1) h2 {
            font-size: 28px !important;
            margin-top: 0;
        }

        .custom-haojen-container .post-preview:nth-child(1) .post-subtitle {
            font-size: 18px;
            font-weight: 400;
            padding-left: 0;
            padding-right: 0;
        }
    }

    /*手机屏幕*/
    @media (max-width: 400px) {
        .custom-haojen-container .post-preview:nth-child(1) {
            height: 195px;
        }

        .custom-haojen-container .post-preview-poetry:nth-child(1) h2 {
            font-size: 20px !important;
        }

        .custom-haojen-container .post-preview:nth-child(1) .post-subtitle {
            font-size: 16px;
        }
    }
</style>

<!-- Page Header -->
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 visible-xs-block visible-sm-block">
    <div class="row">
        <header class="intro-header">
            <div class="container">
                <div class="site-heading text-center">
                    <div class="about-me">
                        <!--移动端头部显示-->
                        <img class="lozad" data-src="https://calpa.me/img/profile.png" alt="avatar">
                        <h4>Calpa</h4>

                        <!-- 關於我的一言兩句 -->
                        
  
      <p>夢裡不覺秋已深</p>
    
      <p>餘情豈是為他人</p>
    

                    </div>
                </div>
            </div>
        </header>
    </div>
</div>
<!-- Main Content -->
<div class="container custom-haojen-container">
    <!-- Post Container -->
    <div class="row">
        <div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-12 col-xs-12 post-container">
            <script>
function toggleBookMark(id) {
  $(id).removeClass('fa-bookmark-o').addClass('fa-bookmark');
}
</script>

<!-- Main Content -->

  <div class="card card0" href="/2017/10/02/frontend-developer-tools-in-macos/">
    <div class="wrapper black">
      <div class="card-header" style="background: #00d8e4 url(https://i.imgur.com/Vb56RuU.jpg) center/contain no-repeat" onclick="location.href='/2017/10/02/frontend-developer-tools-in-macos/'">
      </div>
      <div class="data" onclick="location.href='/2017/10/02/frontend-developer-tools-in-macos/'">
        <div class="content">
          <div class="stats"><a href="/2017/10/02/frontend-developer-tools-in-macos/"><span class="date">2017-10-02</span></a></div>
          <h1 class="title"><a href="/2017/10/02/frontend-developer-tools-in-macos/">前端程序員的必備工具清單（MacOS）</a></h1>
          <p class="text"><a href="/2017/10/02/frontend-developer-tools-in-macos/">前言工欲善其事，必先利其器。一套完善的工具可以幫助我們事半功倍。而作為前端程序員的我，也是花了點時間為自己配置了一套工具。如果你也是使用 MacOS 作為你的開發系統的話，那麼你可以看一下這篇文章。
日常Alfred 3
Alfred 是一個強大的效率工具，而且它更加是一個...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card1" href="/2017/09/30/hang-zhou-interview-summary/">
    <div class="wrapper black">
      <div class="card-header" style="background: #2f383a url(https://i.imgur.com/pbvqpjs.png) center/contain no-repeat" onclick="location.href='/2017/09/30/hang-zhou-interview-summary/'">
      </div>
      <div class="data" onclick="location.href='/2017/09/30/hang-zhou-interview-summary/'">
        <div class="content">
          <div class="stats"><a href="/2017/09/30/hang-zhou-interview-summary/"><span class="date">2017-09-30</span></a></div>
          <h1 class="title"><a href="/2017/09/30/hang-zhou-interview-summary/">【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》</a></h1>
          <p class="text"><a href="/2017/09/30/hang-zhou-interview-summary/">前言謝邀。本文圖多，流量黨慎入。
首先，我要感謝網易。作為一個香港人，能夠拿到杭州的面試機會，實屬機會難得。這次的兩輪技術面試，考察點廣泛而深入。雖然問題比較深入，但這讓我感覺對於技術要求比較高，這是一件好事，因為可以反映公司對於技術的重視。在大四的這一年裡，我會繼續努力，...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card2" href="/2017/09/27/async-summary/">
    <div class="wrapper white">
      <div class="card-header" style="background: #f0db51 url(https://i.imgur.com/KMksHxZ.png) center/contain no-repeat" onclick="location.href='/2017/09/27/async-summary/'">
      </div>
      <div class="data" onclick="location.href='/2017/09/27/async-summary/'">
        <div class="content">
          <div class="stats"><a href="/2017/09/27/async-summary/"><span class="date">2017-09-27</span></a></div>
          <h1 class="title"><a href="/2017/09/27/async-summary/">異步操作見聞錄</a></h1>
          <p class="text"><a href="/2017/09/27/async-summary/">前言異步操作是非常常見的操作，也是其中一題常見的前端工程師面試題目。在日常開發中，我們會和伺服器交互，或者是和用戶的行動作出反應，比如說監聽某些點擊事件。這個時候，其實我們是執行了異步操作，我們需要等待對方若干時間才能收到返回值，甚至是一個錯誤的值。。。因此，異步操作很容易...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card3" href="/2017/08/31/react-markdown-render-markdown-as-component/">
    <div class="wrapper white">
      <div class="card-header" style="background: #fff url(https://i.imgur.com/IYhTVXU.png) center/contain no-repeat" onclick="location.href='/2017/08/31/react-markdown-render-markdown-as-component/'">
      </div>
      <div class="data" onclick="location.href='/2017/08/31/react-markdown-render-markdown-as-component/'">
        <div class="content">
          <div class="stats"><a href="/2017/08/31/react-markdown-render-markdown-as-component/"><span class="date">2017-08-31</span></a></div>
          <h1 class="title"><a href="/2017/08/31/react-markdown-render-markdown-as-component/">React-markdown -- 實時渲染 Markdown 的 React 工具</a></h1>
          <p class="text"><a href="/2017/08/31/react-markdown-render-markdown-as-component/">前言要寫出優雅的文檔是有難度的，尤其是需要格式規範的文章。而利用 Markdown，則可以專心寫作。Markdown 除了可以直接編譯為 HTML，還能編譯為 PowerPoint, Resume，還有 React 組件。無論是利用 Markdown 製作 PowerPoi...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card4" href="/2017/08/27/react-app-optimization-1-source-map/">
    <div class="wrapper white">
      <div class="card-header" style="background: #fff url(https://i.imgur.com/IYhTVXU.png) center/contain no-repeat" onclick="location.href='/2017/08/27/react-app-optimization-1-source-map/'">
      </div>
      <div class="data" onclick="location.href='/2017/08/27/react-app-optimization-1-source-map/'">
        <div class="content">
          <div class="stats"><a href="/2017/08/27/react-app-optimization-1-source-map/"><span class="date">2017-08-27</span></a></div>
          <h1 class="title"><a href="/2017/08/27/react-app-optimization-1-source-map/">React 應用輕量化（一）Source Map</a></h1>
          <p class="text"><a href="/2017/08/27/react-app-optimization-1-source-map/">前言create-react-app 提供了很方便的創建 React 應用途徑。它已經把 webpack, Babel, Autoprefixer, ESLint, Jest 等常用工具打包進去。可以說是一個非常方便，好用的製造 React 應用工具。當我打算把包裝好的檔案...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card5" href="/2017/08/04/utilize-github-issue-by-using-gitalk/">
    <div class="wrapper black">
      <div class="card-header" style="background: #fff url(https://i.imgur.com/phH7Jc4.png;) center/contain no-repeat" onclick="location.href='/2017/08/04/utilize-github-issue-by-using-gitalk/'">
      </div>
      <div class="data" onclick="location.href='/2017/08/04/utilize-github-issue-by-using-gitalk/'">
        <div class="content">
          <div class="stats"><a href="/2017/08/04/utilize-github-issue-by-using-gitalk/"><span class="date">2017-08-04</span></a></div>
          <h1 class="title"><a href="/2017/08/04/utilize-github-issue-by-using-gitalk/">善用 Github Issue 的開源評論插件 -- Gitalk</a></h1>
          <p class="text"><a href="/2017/08/04/utilize-github-issue-by-using-gitalk/">
前言以前，我的博客是用 Disqus 的評論插件，但是無論是載入速度，還是樣式上，都是有所缺乏的。我一直沒有安裝其他的評論插件，因為覺得搬家有點麻煩。但是當我試用一下之後，我就覺得這個插件安裝很方便，功能也很實用，尤其是可以寫 Markdown 評論，就讓我非常喜歡這個插...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card6" href="/2017/07/24/six-steps-to-debug-before-directly-ask-question/">
    <div class="wrapper black">
      <div class="card-header" style="background: #0b0b0b url(https://i.imgur.com/ERjLSMf.jpg) center/contain no-repeat" onclick="location.href='/2017/07/24/six-steps-to-debug-before-directly-ask-question/'">
      </div>
      <div class="data" onclick="location.href='/2017/07/24/six-steps-to-debug-before-directly-ask-question/'">
        <div class="content">
          <div class="stats"><a href="/2017/07/24/six-steps-to-debug-before-directly-ask-question/"><span class="date">2017-07-24</span></a></div>
          <h1 class="title"><a href="/2017/07/24/six-steps-to-debug-before-directly-ask-question/">項目代碼調試：提問前要做的六個步驟</a></h1>
          <p class="text"><a href="/2017/07/24/six-steps-to-debug-before-directly-ask-question/">上天對於每個地球人都是公平的，每個人都一天只有 24 小時。為什麼有的人會停留不前，有的人卻會不斷有所成長？其中一個原因是當遇到問題時，他們解決問題的方法是非常不同的。同樣是遇到問題，與其伸手，等其他程序員幫助去解決問題，倒不如自己先嘗試各種方法，然後才問人家。。。我會在這...</a></p>
        </div>
      </div>
    </div>
  </div>

  <div class="card card7" href="/2017/07/06/titanic-a-set-of-animated-icons/">
    <div class="wrapper black">
      <div class="card-header" style="background: #022e2f url(https://i.imgur.com/bLmxAZ3.gif) center/contain no-repeat" onclick="location.href='/2017/07/06/titanic-a-set-of-animated-icons/'">
      </div>
      <div class="data" onclick="location.href='/2017/07/06/titanic-a-set-of-animated-icons/'">
        <div class="content">
          <div class="stats"><a href="/2017/07/06/titanic-a-set-of-animated-icons/"><span class="date">2017-07-06</span></a></div>
          <h1 class="title"><a href="/2017/07/06/titanic-a-set-of-animated-icons/">簡單易用的開源 JavaScript 動畫圖標庫 -- Titanic</a></h1>
          <p class="text"><a href="/2017/07/06/titanic-a-set-of-animated-icons/">如果你用過 Font Awesome 等圖標，你可能會覺得它們很好看，用起來很很方便。但是，在用戶點擊這些圖標的時候，它們是不會有反應的。如果有這些圖標會動的話，那就更加好。Titanic 提供一系列的動畫圖標，以及以 JavaScript 的調用圖標動畫的方法。
如果你想...</a></p>
        </div>
      </div>
    </div>
  </div>


<!-- 翻页 pager -->

<ul class="pager">
    
    <li>Page 1 / 6</li>
    
    <li class="next">
        <a href="/page/2/">Older Posts &rarr;</a>
    </li>
    
</ul>

        </div>
        <!-- Sidebar Container -->
<div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 hidden-sm hidden-xs sidebar-container">
    <!-- About Me -->
    <section class="visible-md visible-lg" style="padding: 0 18px">
        <div class="short-about">
            <!--侧边栏头像-->
            
            <img alt="avatar" class="lozad" data-src="https://calpa.me/img/profile.png">
            
            <h5>Calpa</h5>
            <!-- 關於我的一言兩句 -->
            
  
      <p>夢裡不覺秋已深</p>
    
      <p>餘情豈是為他人</p>
    

            <hr>

            <!-- 跳轉到搜尋 -->
            <input href="/search" placeholder="搜尋博客內容" onblur="navigateToSearch()" onkeypress="handleEnter(event)" id="customSearch">
            <!-- SNS Link 社交 -->
            <ul class="list-inline">
                
                
                <li>
                    <a target="_blank" href="https://www.zhihu.com/people/piao-xue-wu-ying" rel="external nofollow noopener noreferrer">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa  fa-stack-1x fa-inverse">知</i>
                                </span>
                    </a>
                </li>
                

                <li>
                    <a target="_blank" href="https://github.com/calpa" rel="external nofollow noopener noreferrer">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                    </a>
                </li>
                

            </ul>
        </div>
    </section>

    <!-- Featured Tags  标签 -->
    
      <section>
          <div class="tags">
              
              
              <a href="/Tags/#JavaScript" title="JavaScript" rel="15">JavaScript</a>
              
              
              <a href="/Tags/#Web" title="Web" rel="5">Web</a>
              
              
              <a href="/Tags/#Front End" title="Front End" rel="5">Front End</a>
              
              
              <a href="/Tags/#Markdown" title="Markdown" rel="2">Markdown</a>
              
              
              <a href="/Tags/#Github" title="Github" rel="2">Github</a>
              
              
              <a href="/Tags/#Hackathon" title="Hackathon" rel="2">Hackathon</a>
              
              
              <a href="/Tags/#Interview" title="Interview" rel="2">Interview</a>
              
              
              <a href="/Tags/#Hexo" title="Hexo" rel="5">Hexo</a>
              
              
              <a href="/Tags/#SEO" title="SEO" rel="2">SEO</a>
              
              
              <a href="/Tags/#React" title="React" rel="3">React</a>
              
              
              <a href="/Tags/#CSS" title="CSS" rel="2">CSS</a>
              
              
              <a href="/Tags/#Blog" title="Blog" rel="2">Blog</a>
              
              
          </div>
      </section>
    
    <hr>

    
      <h5 style="text-align: center;">友情鏈接</h5>
      <ul class="list-inline" style="text-align: center;">
          
          <li><a href="http://blog.shanamaid.top/" target="_blank" rel="external nofollow noopener noreferrer">娜酱骑士团</a></li>
          
          <li><a href="https://clarencec.github.io/" target="_blank" rel="external nofollow noopener noreferrer">Clarence Blog</a></li>
          
          <li><a href="http://f2ex.cn/" target="_blank" rel="external nofollow noopener noreferrer">F2EX</a></li>
          
          <li><a href="https://jeffjade.com/" target="_blank" rel="external nofollow noopener noreferrer">晚晴幽草轩</a></li>
          
      </ul>
    
    <hr>

    <!-- Latest Blog Post-->
    
      <h5 style="text-align: center;">最新文章</h5>
      <ul class="list-inline" style="text-align: center;">
        
          <li>
            <a href="/2017/10/02/frontend-developer-tools-in-macos/">
              前端程序員的必備工具清單（MacOS）
            </a>
          </li>
        
          <li>
            <a href="/2017/09/30/hang-zhou-interview-summary/">
              【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》
            </a>
          </li>
        
          <li>
            <a href="/2017/09/27/async-summary/">
              異步操作見聞錄
            </a>
          </li>
        
          <li>
            <a href="/2017/08/31/react-markdown-render-markdown-as-component/">
              React-markdown -- 實時渲染 Markdown 的 React 工具
            </a>
          </li>
        
          <li>
            <a href="/2017/08/27/react-app-optimization-1-source-map/">
              React 應用輕量化（一）Source Map
            </a>
          </li>
        
      </ul>
    
    <hr>

    <h5 style="text-align: center;">共48篇文章</h5>
    <hr>

    <!-- All Blog Posts -->
    
      <h5 style="text-align: center;">所有文章</h5>
      <ul style="text-align: center; list-style-type: none; padding: 0;">
        
          
              <li>
                <a href="/archive/#2017-10">
                  10月(1)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-9">
                  9月(2)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-8">
                  8月(3)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-7">
                  7月(3)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-6">
                  6月(4)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-5">
                  5月(11)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-4">
                  4月(10)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-3">
                  3月(2)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-2">
                  2月(7)
                </a>
              </li>
            
          
              <li>
                <a href="/archive/#2017-1">
                  1月(5)
                </a>
              </li>
            
          
      </ul>
    
</div>

<script>
function navigateToSearch() {
  var q = document.getElementById("customSearch").value;
  location.href="https://calpa.me/search/?q=" + q;
}

function handleEnter(e) {
  if (e.keyCode == 13) {
    navigateToSearch();
  }
}
</script>

    </div>
</div>

<!-- Footer -->
<style>
#busuanzi_container_site_pv {
  display: inline;
}
</style>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <p class="copyright text-muted">
                  <span id="busuanzi_container_site_pv" style="font-size: 12px;">
                    本站總訪問量: <span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span> 次
                  </span>
                  <span id="busuanzi_container_site_uv" style="font-size: 12px;">
                    本站訪客數: <span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span> 次
                  </span>
                  <br>
                  
                    
轉載請 CC 內容作者註明

                  <br>
                  
                  Copyright &copy; Calpa 2017<br>
                  Theme by <a href="https://haojen.github.io/" rel="external nofollow noopener noreferrer" target="_blank">Haojen Ma</a>, Modified by <a href="https://calpa.me">Calpa Liu </a><br>
                </p>
                <hr>
            </div>
        </div>
    </div>
</footer>


<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Calpa's Magic -->
<script src="/js/magic.js"></script>

<!-- Bootstrap v3.3.7 Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/blog.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("https://calpa.me/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>

<!-- Google Analytics -->


<script>
    // dynamic User by Hux
    var _gaId = 'UA-84737574-3';
    var _gaDomain = 'auto';
    // Originial
    (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','//www.google-analytics.com/analytics.js','ga');
    ga('create', _gaId, _gaDomain);
    ga('send', 'pageview');
</script>
<!-- Scroll Depth -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrolldepth/1.0.0/jquery.scrolldepth.min.js"></script>
<script>
  jQuery(function() {
    jQuery.scrollDepth();
  });
</script>


<!-- busuanzi -->
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<!-- hotjar -->

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:576135,hjsv:5};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>


<!-- lazy loading -->
<script>
var observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
</script>

<script async>'use strict';'serviceWorker'in navigator&&navigator.serviceWorker.register('service-worker.js').then(function(a){a.onupdatefound=function(){var b=a.installing;b.onstatechange=function(){switch(b.state){case'installed':navigator.serviceWorker.controller?console.log('New or updated content is available.'):console.log('Content is now available offline!');break;case'redundant':console.error('The installing service worker became redundant.');}}}}).catch(function(a){console.error('Error during service worker registration:',a)});
</script></body></html>