index.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.52 with theme Tranquilpeak 0.4.3-SNAPSHOT">
<meta name="author" content="MutionHu">
<meta name="keywords" content="">
<meta name="description" content="一个码农的些许碎片">


<meta property="og:description" content="一个码农的些许碎片">
<meta property="og:type" content="website">
<meta property="og:title" content="一个码农的些许碎片">
<meta name="twitter:title" content="一个码农的些许碎片">
<meta property="og:url" content="https://mutionhu.github.io/">
<meta property="twitter:url" content="https://mutionhu.github.io/">
<meta property="og:site_name" content="一个码农的些许碎片">
<meta property="og:description" content="一个码农的些许碎片">
<meta name="twitter:description" content="一个码农的些许碎片">
<meta property="og:locale" content="en-us">


<meta name="twitter:card" content="summary">


  <meta property="og:image" content="https://www.gravatar.com/avatar/7ae6e56fb412094863f46ef5288df52b?s=640">
  <meta property="twitter:image" content="https://www.gravatar.com/avatar/7ae6e56fb412094863f46ef5288df52b?s=640">


    <title>一个码农的些许碎片</title>

    <link rel="icon" href="https://mutionhu.github.io/favicon.png">
    
      <link rel="alternate" type="application/rss+xml" title="RSS" href="https://mutionhu.github.io/index.xml">
    

    <link rel="canonical" href="https://mutionhu.github.io/">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css" integrity="sha256-vuXZ9LGmmwtjqFX1F+EKin1ThZMub58gKULUyf0qECk=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
    
    
    <link rel="stylesheet" href="https://mutionhu.github.io/css/style-nnm2spxvve8onlujjlegkkytaehyadd4ksxc1hyzzq9a2wvtrgbljqyulomn.min.css" />
    
    
  </head>

  <body>
    <div id="blog">
      <header id="header" data-behavior="1">
  <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
  <div class="header-title">
    <a class="header-title-link" href="https://mutionhu.github.io/">一个码农的些许碎片</a>
  </div>
  
    
      <a class="header-right-picture "
         href="https://mutionhu.github.io/#about">
    
    
        <img class="header-picture" src="https://www.gravatar.com/avatar/7ae6e56fb412094863f46ef5288df52b?s=90" alt="Author&#39;s picture" />
      
    
    </a>
  
</header>

      <nav id="sidebar" data-behavior="1">
  <div class="sidebar-container">
    
      <div class="sidebar-profile">
        <a href="https://mutionhu.github.io/#about">
          <img class="sidebar-profile-picture" src="https://www.gravatar.com/avatar/7ae6e56fb412094863f46ef5288df52b?s=110" alt="Author&#39;s picture" />
        </a>
        <h4 class="sidebar-profile-name">MutionHu</h4>
        
          <h5 class="sidebar-profile-bio">Super bio with markdown support <strong>COOL</strong></h5>
        
      </div>
    
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/">
    
      <i class="sidebar-button-icon fa fa-lg fa-home"></i>
      
      <span class="sidebar-button-desc">Home</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/categories">
    
      <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
      
      <span class="sidebar-button-desc">Categories</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/tags">
    
      <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
      
      <span class="sidebar-button-desc">Tags</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/archives">
    
      <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
      
      <span class="sidebar-button-desc">Archives</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/#about">
    
      <i class="sidebar-button-icon fa fa-lg fa-question"></i>
      
      <span class="sidebar-button-desc">About</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://github.com/MutionHu" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-github"></i>
      
      <span class="sidebar-button-desc">GitHub</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://mutionhu.github.io/index.xml">
    
      <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
      
      <span class="sidebar-button-desc">RSS</span>
    </a>
  </li>


    </ul>
  </div>
</nav>

      
      <div id="main" data-behavior="1"
        class="
               hasCoverMetaIn
               ">
        <section class="postShorten-group main-content-wrap">
          
          
<article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2018/12/test/">
          Test
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2018-12-05T13:52:17&#43;08:00">
        
  December 5, 2018

      </time>
    
    
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        
      <p>
        <a href="https://mutionhu.github.io/2018/12/test/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-top" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
      <a href="https://mutionhu.github.io/2015/06/welcome-to-tranquilpeak-0.4.4-beta/">
        <div class="postShorten-thumbnailimg">
          <img alt="" itemprop="image" src="//lioncc.oss-cn-beijing.aliyuncs.com/avtor/1541743289-1722kingsley.jpg"/>
        </div>
      </a>
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2015/06/welcome-to-tranquilpeak-0.4.4-beta/">
          Welcome to Tranquilpeak 0.4.4-BETA
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2015-06-15T00:00:00Z">
        
  June 15, 2015

      </time>
    
    
    <span>in</span>
    
      <a class="category-link" href="https://mutionhu.github.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://mutionhu.github.io/categories/releases">releases</a>
    
  
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many features and integrated services to improve user experience.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2015/06/welcome-to-tranquilpeak-0.4.4-beta/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-left" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2015/06/who-is-using-tranquilpeak-hugo-theme/">
          Who&#39;s using Tranquilpeak Hugo Theme
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2015-06-14T00:00:00Z">
        
  June 14, 2015

      </time>
    
    
    <span>in</span>
    
      <a class="category-link" href="https://mutionhu.github.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://mutionhu.github.io/categories/showcase-appliqu%c3%a9e">showcase appliquée</a>
    
  
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>Here you can find a list of the blogs that use Tranquilpeak theme, with different styles and customizations.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2015/06/who-is-using-tranquilpeak-hugo-theme/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
    <a href="https://mutionhu.github.io/2015/06/who-is-using-tranquilpeak-hugo-theme/">
      <div class="postShorten-thumbnailimg">
        <img alt="" itemprop="image" src="//d1u9biwaxjngwg.cloudfront.net/cover-image-showcase/city-750.jpg"/>
      </div>
    </a>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-left" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2015/05/elements-showcase/">
          Elements showcase
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2015-05-28T00:00:00Z">
        
  May 28, 2015

      </time>
    
    
    <span>in</span>
    
      <a class="category-link" href="https://mutionhu.github.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://mutionhu.github.io/categories/features">features</a>
    
  
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>Check out how Tranquilpeak theme display well HTML elements (title, paragraph, blockquote, table and more..). It&rsquo;s simple and elegant.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2015/05/elements-showcase/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
    <a href="https://mutionhu.github.io/2015/05/elements-showcase/">
      <div class="postShorten-thumbnailimg">
        <img alt="" itemprop="image" src="//d1u9biwaxjngwg.cloudfront.net/elements-showcase/vintage-140.jpg"/>
      </div>
    </a>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-left" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2015/05/cover-image-showcase/">
          Cover image showcase
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2015-05-13T00:00:00Z">
        
  May 13, 2015

      </time>
    
    
    <span>in</span>
    
      <a class="category-link" href="https://mutionhu.github.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://mutionhu.github.io/categories/features">features</a>
    
  
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>Tranquilpeak integrate a unique &ldquo;cover image&rdquo; feature. Open this post to see how this feature sublimate your article.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2015/05/cover-image-showcase/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
    <a href="https://mutionhu.github.io/2015/05/cover-image-showcase/">
      <div class="postShorten-thumbnailimg">
        <img alt="" itemprop="image" src="//d1u9biwaxjngwg.cloudfront.net/cover-image-showcase/city-750.jpg"/>
      </div>
    </a>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-left" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2015/03/highlighted-code-showcase/">
          highlighted code showcase
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2015-03-23T00:00:00Z">
        
  March 23, 2015

      </time>
    
    
    <span>in</span>
    
      <a class="category-link" href="https://mutionhu.github.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://mutionhu.github.io/categories/features">features</a>
    
  
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>Tranquilpeak Hugo theme have its own theme to highlight source code. It&rsquo;s based on GitHub theme: simple and elegant. Check out how it sublimate source codes.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2015/03/highlighted-code-showcase/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
    <a href="https://mutionhu.github.io/2015/03/highlighted-code-showcase/">
      <div class="postShorten-thumbnailimg">
        <img alt="" itemprop="image" src="//d1u9biwaxjngwg.cloudfront.net/highlighted-code-showcase/peak-140.jpg"/>
      </div>
    </a>
  
</article>

          
<article class="postShorten postShorten--thumbnailimg-left" itemscope itemType="http://schema.org/BlogPosting">
  <div class="postShorten-wrap">
    
    <div class="postShorten-header">
      <h1 class="postShorten-title" itemprop="headline">
        <a class="link-unstyled" href="https://mutionhu.github.io/2014/10/tags-plugins-showcase/">
          Tags plugins showcase
        </a>
      </h1>
      
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2014-10-29T00:00:00Z">
        
  October 29, 2014

      </time>
    
    
  </div>

    </div>
    <div class="postShorten-excerpt" itemprop="articleBody">
      
        <p>This post is used to show how tag plugins are displayed. See <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tags">docs</a> for more info.</p>
      
      <p>
        <a href="https://mutionhu.github.io/2014/10/tags-plugins-showcase/" class="postShorten-excerpt_link link">Continue reading</a>
        
      </p>
    </div>
  </div>
  
    <a href="https://mutionhu.github.io/2014/10/tags-plugins-showcase/">
      <div class="postShorten-thumbnailimg">
        <img alt="" itemprop="image" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-6-140.jpg"/>
      </div>
    </a>
  
</article>

          
  <div class="pagination-bar">
    <ul class="pagination">
      
        
          <li class="pagination-next">
            <a class="btn btn--default btn--small" href="https://mutionhu.github.io/page/2/">
              <span>OLDER POSTS</span>
              <i class="fa fa-angle-right text-base icon-ml"></i>
            </a>
          </li>
        
      
      <li class="pagination-number">page 1 of 2</li>
    </ul>
  </div>


        </section>
        <footer id="footer" class="main-content-wrap">
  <span class="copyrights">
    &copy; 2018 MutionHu. All Rights Reserved
  </span>
</footer>

      </div>
    </div>
    
    <div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-remove"></i>
    </div>
    
      <img id="about-card-picture" src="https://www.gravatar.com/avatar/7ae6e56fb412094863f46ef5288df52b?s=110" alt="Author&#39;s picture" />
    
    <h4 id="about-card-name">MutionHu</h4>
    
      <div id="about-card-bio">Super bio with markdown support <strong>COOL</strong></div>
    
    
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        码农
      </div>
    
    
      <div id="about-card-location">
        <i class="fa fa-map-marker"></i>
        <br/>
        China
      </div>
    
  </div>
</div>

    <div id="algolia-search-modal" class="modal-container">
  <div class="modal">
    <div class="modal-header">
      <span class="close-button"><i class="fa fa-close"></i></span>
      <a href="https://algolia.com" target="_blank" rel="noopener" class="searchby-algolia text-color-light link-unstyled">
        <span class="searchby-algolia-text text-color-light text-small">by</span>
        <img class="searchby-algolia-logo" src="https://www.algolia.com/static_assets/images/press/downloads/algolia-light.svg">
      </a>
      <i class="search-icon fa fa-search"></i>
      <form id="algolia-search-form">
        <input type="text" id="algolia-search-input" name="search"
          class="form-control input--large search-input" placeholder="Search" />
      </form>
    </div>
    <div class="modal-body">
      <div class="no-result text-color-light text-center">no post found</div>
      <div class="results">
        
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2018/12/test/">
                <h3 class="media-heading">Test</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Dec 12, 2018
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2015/06/welcome-to-tranquilpeak-0.4.4-beta/">
                <h3 class="media-heading">Welcome to Tranquilpeak 0.4.4-BETA</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Jun 6, 2015
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many features and integrated services to improve user experience.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2015/06/who-is-using-tranquilpeak-hugo-theme/">
                <h3 class="media-heading">Who&#39;s using Tranquilpeak Hugo Theme</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Jun 6, 2015
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>Here you can find a list of the blogs that use Tranquilpeak theme, with different styles and customizations.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2015/05/elements-showcase/">
                <h3 class="media-heading">Elements showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  May 5, 2015
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>Check out how Tranquilpeak theme display well HTML elements (title, paragraph, blockquote, table and more..). It&rsquo;s simple and elegant.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2015/05/cover-image-showcase/">
                <h3 class="media-heading">Cover image showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  May 5, 2015
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>Tranquilpeak integrate a unique &ldquo;cover image&rdquo; feature. Open this post to see how this feature sublimate your article.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2015/03/highlighted-code-showcase/">
                <h3 class="media-heading">highlighted code showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Mar 3, 2015
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>Tranquilpeak Hugo theme have its own theme to highlight source code. It&rsquo;s based on GitHub theme: simple and elegant. Check out how it sublimate source codes.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2014/10/tags-plugins-showcase/">
                <h3 class="media-heading">Tags plugins showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Oct 10, 2014
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>This post is used to show how tag plugins are displayed. See <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tags">docs</a> for more info.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2014/08/hidden-social-section-showcase/">
                <h3 class="media-heading">Hidden social section showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Aug 8, 2014
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>This post is used to show how a site looks if the social section is hidden.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2014/08/hidden-tag-section-showcase/">
                <h3 class="media-heading">Hidden tag section showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Aug 8, 2014
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>This post is used to show how a site looks if the tag section is hidden.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://mutionhu.github.io/2014/08/hidden-pagination-showcase/">
                <h3 class="media-heading">Hidden pagination showcase</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Aug 8, 2014
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather"><p>This post is used to show how a site looks if the pagination is hidden.</p></div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
      </div>
    </div>
    <div class="modal-footer">
      <p class="results-count text-medium"
         data-message-zero="no post found"
         data-message-one="1 post found"
         data-message-other="{n} posts found">
         14 posts found
      </p>
    </div>
  </div>
</div>
    
  
    <div id="cover" style="background-image:url('https://mutionhu.github.io/images/cover.jpg');"></div>
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>


<script src="https://mutionhu.github.io/js/script-qi9wbxp2ya2j6p7wx1i6tgavftewndznf4v0hy2gvivk1rxgc3lm7njqb6bz.min.js"></script>


<script lang="javascript">
window.onload = updateMinWidth;
window.onresize = updateMinWidth;
document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
function updateMinWidth() {
  var sidebar = document.getElementById("sidebar");
  var main = document.getElementById("main");
  main.style.minWidth = "";
  var w1 = getComputedStyle(main).getPropertyValue("min-width");
  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
}
</script>

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>


  </body>
</html>