index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head prefix="og: http://ogp.me/ns#">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>~振鹭于飞~</title>
    


  
  <script defer src="/js/fuse.min.8dfbf8696f107ab8b55732efbb04c5c51576692a4a2cce6effef9f6e92d341a7.js"></script>



<script src="/js/enquire.min.aa37bdcb743826eecdae5c5d177fc7d6552340f1b4378ffaa9c82b2c6111400b.js"></script>

<script defer src="/js/lazysizes.min.498676c34eb225e85357ab0ce19c3c1244f3bd0bf595e5684d1b9d50ea4fbc42.js"></script>

<script defer src="/js/helper/getParents.min.1618c696be7c98933f9a92677f518b512a74e55bdbb976b09936b4182e93181b.js"></script>

<script defer src="/js/helper/fadeinout.min.93a331f96194789a542f33690bbe4f0c102c7e78ffc018217f5a1c33010bad91.js"></script>

<script defer src="/js/helper/closest.min.js"></script>
  
<script>
  "use strict";

  
  
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  
  if (!String.prototype.includes) {
    String.prototype.includes = function (search, start) {
      'use strict';

      if (search instanceof RegExp) {
        throw TypeError('first argument must not be a RegExp');
      }
      if (start === undefined) { start = 0; }
      return this.indexOf(search, start) !== -1;
    };
  }

  
  Document.prototype.append = Element.prototype.append = function append() {
    this.appendChild(_mutation(arguments));
  };
  function _mutation(nodes) {
    if (!nodes.length) {
      throw new Error('DOM Exception 8');
    } else if (nodes.length === 1) {
      return typeof nodes[0] === 'string' ? document.createTextNode(nodes[0]) : nodes[0];
    } else {
      var
      fragment = document.createDocumentFragment(),
      length = nodes.length,
      index = -1,
      node;

      while (++index < length) {
        node = nodes[index];

        fragment.appendChild(typeof node === 'string' ? document.createTextNode(node) : node);
      }

      return fragment;
    }
  }

  
  if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
      position = position || 0;
      return this.indexOf(searchString, position) === position;
    };
  }
  


  document.addEventListener('DOMContentLoaded', function () {
    
    var navCollapseBtn = document.querySelector('.navbar__burger');
    navCollapseBtn ? navCollapseBtn.addEventListener('click', function (e) {
      var navCollapse = document.querySelector('.navbarm__collapse');

      if (navCollapse) {
        var dataOpen = navCollapse.getAttribute('data-open');

        if (dataOpen === 'true') {
          navCollapse.setAttribute('data-open', 'false');
          navCollapse.style.maxHeight = 0;
          navCollapseBtn.classList.remove('is-active');
        } else {
          navCollapse.setAttribute('data-open', 'true');
          navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
          navCollapseBtn.classList.add('is-active');
        }
      }
    }) : null;
    


    
    var summaryContainer = document.querySelector('.summary__container');
    var searchResult = document.querySelector('.search-result');
    var searchResultCloseBtn = document.querySelector('.search-result__close');
    searchResultCloseBtn ? searchResultCloseBtn.addEventListener('click', function (e) {
      searchResult.setAttribute('data-display', 'none');
      summaryContainer.setAttribute('data-display', 'block');
    }) : null;
    


    
    document.querySelectorAll('.tab') ? 
    document.querySelectorAll('.tab').forEach(function(elem, idx) {
      var containerId = elem.getAttribute('id');
      var containerElem = elem;
      var tabLinks = elem.querySelectorAll('.tab__link');
      var tabContents = elem.querySelectorAll('.tab__content');
      var ids = [];

      tabLinks && tabLinks.length > 0 ?
      tabLinks.forEach(function(link, index, self) {
        link.onclick = function(e) {
          for (var i = 0; i < self.length; i++) {
            if (index === parseInt(i, 10)) {
              if (!self[i].classList.contains('active')) {
                self[i].classList.add('active');
                tabContents[i].style.display = 'block';
              }
            } else {
              self[i].classList.remove('active');
              tabContents[i].style.display = 'none';
            }
          }
        }
      }) : null;
    }) : null;
    


    
    document.querySelectorAll('.codetab') ? 
    document.querySelectorAll('.codetab').forEach(function(elem, idx) {
      var containerId = elem.getAttribute('id');
      var containerElem = elem;
      var codetabLinks = elem.querySelectorAll('.codetab__link');
      var codetabContents = elem.querySelectorAll('.codetab__content');
      var ids = [];

      codetabLinks && codetabLinks.length > 0 ?
      codetabLinks.forEach(function(link, index, self) {
        link.onclick = function(e) {
          for (var i = 0; i < self.length; i++) {
            if (index === parseInt(i, 10)) {
              if (!self[i].classList.contains('active')) {
                self[i].classList.add('active');
                codetabContents[i].style.display = 'block';
              }
            } else {
              self[i].classList.remove('active');
              codetabContents[i].style.display = 'none';
            }
          }
        }
      }) : null;
    }) : null;
    


    
    var gttBtn = document.getElementById("gtt");
    gttBtn.style.display = "none";
    gttBtn.addEventListener('click', function () {
      if (window.document.documentMode) {
        document.documentElement.scrollTop = 0;
      } else {
        scrollToTop(250);
      }
    });

    function scrollToTop(scrollDuration) {
      var scrollStep = -window.scrollY / (scrollDuration / 15);
      var scrollInterval = setInterval(function () {
        if (window.scrollY != 0) {
          window.scrollBy(0, scrollStep);
        }
        else clearInterval(scrollInterval);
      }, 15);
    }

    var scrollFunction = function () {
      if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
        gttBtn.style.display = "block";
      } else {
        gttBtn.style.display = "none";
      }
    }
    


    
    var expandBtn = document.querySelectorAll('.expand__button');

    for (let i = 0; i < expandBtn.length; i++) {
      expandBtn[i].addEventListener("click", function () {
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          this.querySelector('svg').classList.add('expand-icon__right');
          this.querySelector('svg').classList.remove('expand-icon__down');
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
          this.querySelector('svg').classList.remove('expand-icon__right');
          this.querySelector('svg').classList.add('expand-icon__down');
        }
      });
    }
    


    
    var lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var tocElem = document.querySelector('.toc');
    var tableOfContentsElem = tocElem ? tocElem.querySelector('#TableOfContents') : null;
    var toggleTocElem = document.getElementById('toggle-toc');
    var singleContentsElem = document.querySelector('.single__contents');
    var navbar = document.querySelector('.navbar');
    var tocFlexbox = document.querySelector('.toc__flexbox');
    var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
    var expandContents = document.querySelectorAll('.expand__content');
    var boxContents = document.querySelectorAll('.box');
    var notAllowedTitleIds = null;

    
    var tocFolding = JSON.parse("true");
    
    var tocLevels = JSON.parse("[\"h2\",\"h3\",\"h4\"]");
    
    if (tocLevels) {
      tocLevels = tocLevels.toString();
    } else {
      tocLevels = "h1, h2, h3, h4, h5, h6";
    }

    
    singleContentsElem && singleContentsElem.querySelectorAll(".tab") ?
    singleContentsElem.querySelectorAll(".tab").forEach(function (elem) {
      elem.querySelectorAll(tocLevels).forEach(function (element) {
        notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
          notAllowedTitleIds.concat(element.getAttribute('id')) :
          [element.getAttribute('id')];
      });
    }) : null;

    
    expandContents ? expandContents.forEach(function(elem) {
      elem.querySelectorAll(tocLevels).forEach(function (element) {
        notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
          notAllowedTitleIds.concat(element.getAttribute('id')) :
          [element.getAttribute('id')];
      });
    }) : null;

    
    boxContents ? boxContents.forEach(function(elem) {
      elem.querySelectorAll(tocLevels).forEach(function (element) {
        notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
          notAllowedTitleIds.concat(element.getAttribute('id')) :
          [element.getAttribute('id')];
      });
    }) : null;

    
    window.onscroll = function () {
      scrollFunction();
      
      var st = window.pageYOffset || document.documentElement.scrollTop;
      if (st > lastScrollTop) { 
        if (st < 250) {
          gttBtn.style.display = "none";
        } else {
          gttBtn.style.display = "block";
        }

        if (st < 45) {
          return null;
        }
        
        if (!navbar.classList.contains('navbar--hide')) {
          navbar.classList.add('navbar--hide');
        } else if (navbar.classList.contains('navbar--show')) {
          navbar.classList.remove('navbar--show');
        }

        if (singleContentsElem) {
          if (singleContentsElem.querySelectorAll(tocLevels).length > 0) {
            singleContentsElem.querySelectorAll(tocLevels).forEach(function (elem) {
              if (toggleTocElem && !toggleTocElem.checked) {
                return null;
              }

              if (notAllowedTitleIds && notAllowedTitleIds.includes(elem.getAttribute('id'))) {
                return null;
              }
              
              if (document.documentElement.scrollTop >= elem.offsetTop) {
                if (tableOfContentsElem) {
                  var id = elem.getAttribute('id');
                  tocElem.querySelectorAll('a').forEach(function (elem) {
                    elem.classList.remove('active');
                  });
                  tocElem.querySelector('a[href="#' + id + '"]') ?
                    tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;

                  if (false === tocFolding) {
                    
                  } else {
                    tableOfContentsElem.querySelectorAll('ul') ?
                      tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
                        rootUl.querySelectorAll('li').forEach(function (liElem) {
                          liElem.querySelectorAll('ul').forEach(function (ulElem) {
                            ulElem.style.display = 'none';
                          });
                        });
                      }) : null;
                  }

                  var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
                  if (curElem && curElem.nextElementSibling) {
                    curElem.nextElementSibling.style.display = 'block';
                  }
                  getParents(curElem, 'ul') ?
                    getParents(curElem, 'ul').forEach(function (elem) {
                      elem.style.display = 'block';
                    }) : null;
                }
              }
            });
          } else {
            if (tocFlexbox) {
              tocFlexbox.setAttribute('data-position', '');
              if (!tocFlexbox.classList.contains('hide')) {
                tocFlexbox.classList.add('hide');
              }
            }
            if (tocFlexboxOuter) {
              tocFlexboxOuter.setAttribute('data-position', '');
              if (!tocFlexboxOuter.classList.contains('hide')) {
                tocFlexboxOuter.classList.add('hide');
              }
            }
          }
        }
      } else { 
        if (st < 250) {
          gttBtn.style.display = "none";
        }

        if (navbar.classList.contains('navbar--hide')) {
          navbar.classList.remove('navbar--hide');
        } else if (!navbar.classList.contains('navbar--show')) {
          navbar.classList.add('navbar--show');
        }

        if (singleContentsElem) {
          if (singleContentsElem.querySelectorAll(tocLevels).length > 0) {
            singleContentsElem.querySelectorAll(tocLevels).forEach(function (elem) {
              if (toggleTocElem && !toggleTocElem.checked) {
                return null;
              }
              
              if (notAllowedTitleIds && notAllowedTitleIds.includes(elem.getAttribute('id'))) {
                return null;
              }

              if (document.documentElement.scrollTop >= elem.offsetTop) {
                if (tableOfContentsElem) {
                  var id = elem.getAttribute('id');
                  tocElem.querySelectorAll('a').forEach(function (elem) {
                    elem.classList.remove('active');
                  });
                  tocElem.querySelector('a[href="#' + id + '"]') ?
                    tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;

                  if (false === tocFolding) {
                    
                  } else {
                    tableOfContentsElem.querySelectorAll('ul') ?
                      tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
                        rootUl.querySelectorAll('li').forEach(function (liElem) {
                          liElem.querySelectorAll('ul').forEach(function (ulElem) {
                            ulElem.style.display = 'none';
                          });
                        });
                      }) : null;
                  }

                  var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
                  if (curElem && curElem.nextElementSibling) {
                    curElem.nextElementSibling.style.display = 'block';
                  }
                  getParents(curElem, 'ul') ?
                    getParents(curElem, 'ul').forEach(function (elem) {
                      elem.style.display = 'block';
                    }) : null;
                }
              }
            });
          } else {
            if (tocFlexbox && !tocFlexbox.classList.contains('hide')) {
              tocFlexbox.classList.add('hide');
            }
            if (tocFlexboxOuter && !tocFlexboxOuter.classList.contains('hide')) {
              tocFlexboxOuter.classList.add('hide');
            }
          }
          
        }

        if (tableOfContentsElem && document.documentElement.scrollTop < 250) {
          if (false === tocFolding) {

          } else {
            tableOfContentsElem.querySelector('ul') ?
              tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
                liElem.querySelectorAll('ul').forEach(function (ulElem) {
                  ulElem.style.display = 'none';
                });
              }) : null;
          }
        }
      }
      lastScrollTop = st <= 0 ? 0 : st;
    };
  


  
    var localTheme = localStorage.getItem('theme');
    var rootEleme = document.getElementById('root');
    var selectThemeElem = document.querySelectorAll('.select-theme');
    var selectThemeItemElem = document.querySelectorAll('.select-theme__item');

    var setMetaColor = function(themeColor) {
      var metaMsapplicationTileColor = document.getElementsByName('msapplication-TileColor')[0];
      var metaThemeColor = document.getElementsByName('theme-color')[0];
      var metaMsapplicationNavbuttonColor = document.getElementsByName('msapplication-navbutton-color')[0];
      var metaAppleMobileWebAappStatusBarStyle = document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];

      if (themeColor.includes('dark')) {
        metaMsapplicationTileColor.setAttribute('content', '#fcfcfa');
        metaThemeColor.setAttribute('content', '#403E41');
        metaMsapplicationNavbuttonColor.setAttribute('content', '#403E41');
        metaAppleMobileWebAappStatusBarStyle.setAttribute('content', '#403E41');
      } else if (themeColor.includes('light')) {
        metaMsapplicationTileColor.setAttribute('content', '#555');
        metaThemeColor.setAttribute('content', '#eee');
        metaMsapplicationNavbuttonColor.setAttribute('content', '#eee');
        metaAppleMobileWebAappStatusBarStyle.setAttribute('content', '#eee');
      } else if (themeColor.includes('hacker')) {
        metaMsapplicationTileColor.setAttribute('content', '#e3cd26');
        metaThemeColor.setAttribute('content', '#252526');
        metaMsapplicationNavbuttonColor.setAttribute('content', '#252526');
        metaAppleMobileWebAappStatusBarStyle.setAttribute('content', '#252526');
      } else if (themeColor.includes('solarized')) {
        metaMsapplicationTileColor.setAttribute('content', '#d3af86');
        metaThemeColor.setAttribute('content', '#51412c');
        metaMsapplicationNavbuttonColor.setAttribute('content', '#51412c');
        metaAppleMobileWebAappStatusBarStyle.setAttribute('content', '#51412c');
      } else if (themeColor.includes('kimbie')) {
        metaMsapplicationTileColor.setAttribute('content', '#586e75');
        metaThemeColor.setAttribute('content', '#eee8d5');
        metaMsapplicationNavbuttonColor.setAttribute('content', '#eee8d5');
        metaAppleMobileWebAappStatusBarStyle.setAttribute('content', '#eee8d5');
      } 
    }
    
    if (localTheme) {
      selectThemeItemElem ? 
      selectThemeItemElem.forEach(function (elem) {
        if (elem.text.trim() === localTheme) {
          elem.classList.add('is-active');
        } else {
          elem.classList.remove('is-active');
        }
      }) : null;

      setMetaColor(localTheme);
    } else {
      setMetaColor(rootEleme.className);
    }

    selectThemeItemElem ? 
    selectThemeItemElem.forEach(function (v, i) {
      v.addEventListener('click', function (e) {
        var selectedThemeVariant = e.target.text.trim();
        localStorage.setItem('theme', selectedThemeVariant);
        setMetaColor(selectedThemeVariant);

        rootEleme.removeAttribute('class');
        rootEleme.classList.add('theme__' + selectedThemeVariant);
        selectThemeElem.forEach(function(rootElem) {
          rootElem.querySelectorAll('a').forEach(function (elem) {
            if (elem.classList) {
              if (elem.text.trim() === selectedThemeVariant) {
                if (!elem.classList.contains('is-active')) {
                  elem.classList.add('is-active');
                }
              } else {
                if (elem.classList.contains('is-active')) {
                  elem.classList.remove('is-active');
                }
              }
            }
          });
        });

        if (window.mermaid) {
          if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
            mermaid.initialize({ theme: 'dark' });
            location.reload();
          } else {
            mermaid.initialize({ theme: 'default' });
            location.reload();
          }
        }

        var utterances = document.getElementById('utterances');
        if (utterances) {
          utterances.querySelector('iframe').contentWindow.postMessage({
            type: 'set-theme',
            theme: selectedThemeVariant === "dark" || selectedThemeVariant === "hacker" ? 'photon-dark' : selectedThemeVariant === 'kimbie' ? 'github-dark-orange' : 'github-light',
          }, 'https://utteranc.es');
        }

        var twitterCards = document.querySelectorAll('.twitter-timeline');
        if (twitterCards) {
          window.postMessage({
            type: 'set-twitter-theme',
            theme: selectedThemeVariant === 'light' || selectedThemeVariant === 'solarized' ? 'light' : 'dark',
          });
        }
      });
    }) : null;
  


  
    
    var baseurl = JSON.parse("\"https://emacle.github.io/\"");
    
    var permalink = JSON.parse("\"https://emacle.github.io/\"");
    
    var langprefix = JSON.parse("\"\"");
    var searchResults = null;
    var searchMenu = null;
    var searchText = null;
    
    
    var enableSearch = JSON.parse("true");
    
    var enableSearchHighlight = JSON.parse("true");
    
    var searchResultPosition = JSON.parse("\"main\"");
    
    var sectionType = JSON.parse("\"page\"");
    
    var kind = JSON.parse("\"home\"");
    
    var fuse = null;

    if (enableSearch) {
      (function initFuse() {
        var xhr = new XMLHttpRequest();
        if (sectionType === "publication" && kind !== "page") {
          xhr.open('GET', permalink + "index.json");
        } else {
          xhr.open('GET', baseurl + langprefix + "/index.json");
        }
        
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.onload = function () {
          if (xhr.status === 200) {
            fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
              keys: sectionType.includes('publication') ? ['title', 'abstract'] : ['title', 'description', 'content'],
              includeMatches: enableSearchHighlight,
              shouldSort: true, 
              threshold: 0.4, 
              location: 0, 
              distance: 100, 
              maxPatternLength: 32,
              minMatchCharLength: 1,
              isCaseSensitive: false, 
              findAllMatches: false, 
              useExtendedSearch: false, 
            });
            window.fuse = fuse;
          }
          else {
            console.error('[' + xhr.status + ']Error:', xhr.statusText);
          }
        };
        xhr.send();
      })();
    }

    function makeLi(ulElem, obj) {
      var li = document.createElement('li');
      li.className = 'search-result__item';
      
      var a = document.createElement('a');
      a.innerHTML = obj.title;
      a.setAttribute('class', 'search-result__item--title');
      a.setAttribute('href', obj.permalink);

      var descDiv = document.createElement('div');
      descDiv.setAttribute('class', 'search-result__item--desc');
      if (obj.description) {
        descDiv.innerHTML = obj.description;
      } else if (obj.content) {
        descDiv.innerHTML = obj.content.substring(0, 225);
      }
      
      li.appendChild(a);
      li.appendChild(descDiv);
      ulElem.appendChild(li);
    }

    function makeHighlightLi(ulElem, obj) {
      var li = document.createElement('li');
      li.className = 'search-result__item';
      var descDiv = null;

      var a = document.createElement('a');
      a.innerHTML = obj.item.title;
      a.setAttribute('class', 'search-result__item--title');
      a.setAttribute('href', obj.item.uri);

      if (obj.matches && obj.matches.length) {
        for (var i = 0; i < obj.matches.length; i++) {
          if ('title' === obj.matches[i].key) {
            a = document.createElement('a');
            a.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
            a.setAttribute('class', 'search-result__item--title');
            a.setAttribute('href', obj.item.uri);
          }
          
          if ('description' === obj.matches[i].key) {
            descDiv = document.createElement('div');
            descDiv.setAttribute('class', 'search-result__item--desc');
            descDiv.innerHTML = generateHighlightedText(obj.item.description, obj.matches[i].indices);
          } else if ('content' === obj.matches[i].key) {
            if (!descDiv) {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = generateHighlightedText(obj.item.content.substring(0, 150), obj.matches[i].indices);
            }
          } else {
            if (obj.item.description) {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = obj.item.description;
            } else {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = obj.item.content.substring(0, 150);
            }
          }
        }

        li.appendChild(a);
        if (descDiv) {
          li.appendChild(descDiv);
        }
        if (li) {
          ulElem.appendChild(li);
        }
      }
    }

    function renderSearchResultsSide(searchText, results) {
      searchResults = document.getElementById('search-results');
      searchMenu = document.getElementById('search-menu');
      searchResults.setAttribute('class', 'dropdown is-active');
      
      var ul = document.createElement('ul');
      ul.setAttribute('class', 'dropdown-content search-content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.setAttribute('href', result.uri);
          a.setAttribute('class', 'dropdown-item');
          a.appendChild(li);

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.title;
          titleDiv.setAttribute('class', 'menu-item__title');

          var descDiv = document.createElement('div');
          descDiv.setAttribute('class', 'menu-item__desc');
          if (result.description) {
            descDiv.innerHTML = result.description;
          } else if (result.content) {
            descDiv.innerHTML = result.content.substring(0, 150);
          }

          li.appendChild(titleDiv);
          li.appendChild(descDiv);
          ul.appendChild(a);
        });
      } else {
        var li = document.createElement('li');
        li.setAttribute('class', 'dropdown-item');
        li.innerText = 'No results found';
        ul.appendChild(li);
      }

      while (searchMenu.hasChildNodes()) {
        searchMenu.removeChild(
          searchMenu.lastChild
        );
      }
      
      searchMenu.appendChild(ul);
    }

    function renderSearchHighlightResultsSide(searchText, results) {
      searchResults = document.getElementById('search-results');
      searchMenu = document.getElementById('search-menu');
      searchResults.setAttribute('class', 'dropdown is-active');

      var ul = document.createElement('ul');
      ul.setAttribute('class', 'dropdown-content search-content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          var descDiv = null;

          a.setAttribute('href', result.item.uri);
          a.setAttribute('class', 'dropdown-item');
          a.appendChild(li);

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.item.title;
          titleDiv.setAttribute('class', 'menu-item__title');
          
          if (result.matches && result.matches.length) {
            for (var i = 0; i < result.matches.length; i++) {
              if ('title' === result.matches[i].key) {
                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
              }

              if ('description' === result.matches[i].key) {
                descDiv = document.createElement('div');
                descDiv.setAttribute('class', 'menu-item__desc');
                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
              } else if ('content' === result.matches[i].key) {
                if (!descDiv) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'menu-item__desc');
                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 150), result.matches[i].indices);
                }
              } else {
                if (result.item.description) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'menu-item__desc');
                  descDiv.innerHTML = result.item.description;
                } else {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'menu-item__desc');
                  descDiv.innerHTML = result.item.content.substring(0, 150);
                }
              }
            }
            
            li.appendChild(titleDiv);
            if (descDiv) {
              li.appendChild(descDiv);
            }
            ul.appendChild(a);
          }
        });
      } else {
        var li = document.createElement('li');
        li.setAttribute('class', 'dropdown-item');
        li.innerText = 'No results found';
        ul.appendChild(li);
      }

      while (searchMenu.hasChildNodes()) {
        searchMenu.removeChild(
          searchMenu.lastChild
        );
      }
      searchMenu.appendChild(ul);
    }

    function renderSearchResultsMobile(searchText, results) {
      searchResults = document.getElementById('search-mobile-results');

      var content = document.createElement('div');
      content.setAttribute('class', 'mobile-search__content');

      if (results.length > 0) {
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
          content.appendChild(item);
        });
      } else {
        var item = document.createElement('span');
        content.appendChild(item);
      }

      let wrap = document.getElementById('search-mobile-results');
      while (wrap.firstChild) {
        wrap.removeChild(wrap.firstChild)
      }
      searchResults.appendChild(content);      
    }

    function renderSearchHighlightResultsMobile(searchText, results) {
      searchResults = document.getElementById('search-mobile-results');

      var ul = document.createElement('div');
      ul.setAttribute('class', 'mobile-search__content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          var descDiv = null;

          a.setAttribute('href', result.item.uri);
          a.appendChild(li);
          li.setAttribute('class', 'mobile-search__item');

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.item.title;
          titleDiv.setAttribute('class', 'mobile-search__item--title');
          
          if (result.matches && result.matches.length) {
            for (var i = 0; i < result.matches.length; i++) {
              if ('title' === result.matches[i].key) {
                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
              }

              if ('description' === result.matches[i].key) {
                descDiv = document.createElement('div');
                descDiv.setAttribute('class', 'mobile-search__item--desc');
                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
              } else if ('content' === result.matches[i].key) {
                if (!descDiv) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 150), result.matches[i].indices);
                }
              } else {
                if (result.item.description) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = result.item.description;
                } else {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = result.item.content.substring(0, 150);
                }
              }
            }
            
            li.appendChild(titleDiv);
            if (descDiv) {
              li.appendChild(descDiv);
            }
            ul.appendChild(a);
          }
        });
      } else {
        var item = document.createElement('span');
        ul.appendChild(item);
      }

      let wrap = document.getElementById('search-mobile-results');
      while (wrap.firstChild) {
        wrap.removeChild(wrap.firstChild)
      }
      searchResults.appendChild(ul);
    }

    function generateHighlightedText(text, regions) {
      if (!regions) {
        return text;
      }

      var content = '', nextUnhighlightedRegionStartingIndex = 0;

      regions.forEach(function(region) {
        if (region[0] === region[1]) {
          return null;
        }
        
        content += '' +
          text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
          '<span class="search__highlight">' +
            text.substring(region[0], region[1] + 1) +
          '</span>' +
        '';
        nextUnhighlightedRegionStartingIndex = region[1] + 1;
      });

      content += text.substring(nextUnhighlightedRegionStartingIndex);

      return content;
    };

    var searchElem = document.getElementById('search');
    var searchMobile = document.getElementById('search-mobile');
    var searchResultsContainer = document.getElementById('search-results');

    searchElem ?
    searchElem.addEventListener('input', function(e) {
      if (!e.target.value | window.innerWidth < 770) {
        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dropdown') : null;
        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);
      
      if (searchResultPosition === "main") {
        if (enableSearchHighlight) {
          renderSearchHighlightResultsMain(searchText, results);
        } else {
          renderSearchResultsMain(searchText, results);
        }
      } else {
        if (enableSearchHighlight) {
          renderSearchHighlightResultsSide(searchText, results);
        } else {
          renderSearchResultsSide(searchText, results);
        }
        
        var dropdownItems = searchResultsContainer.querySelectorAll('.dropdown-item');
        dropdownItems ? dropdownItems.forEach(function(item) {
          item.addEventListener('mousedown', function(e) {
            e.target.click();
          });
        }) : null;
      }
    }) : null;

    searchElem ? 
    searchElem.addEventListener('blur', function() {
      if (window.innerWidth < 770) {
        return null;
      }
      searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dropdown') : null;
    }) : null;

    searchElem ? 
    searchElem.addEventListener('click', function(e) {
      if (window.innerWidth < 770) {
        return null;
      }
      if (!e.target.value) {
        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dropdown') : null;
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);

      if (searchResultPosition === "main") {
        if (enableSearchHighlight) {
          renderSearchHighlightResultsMain(searchText, results);
        } else {
          renderSearchResultsMain(searchText, results);
        }
      } else{
        if (enableSearchHighlight) {
          renderSearchHighlightResultsSide(searchText, results);
        } else {
          renderSearchResultsSide(searchText, results);
        }

        var dropdownItems = searchResultsContainer.querySelectorAll('.dropdown-item');
        dropdownItems ? dropdownItems.forEach(function (item) {
          item.addEventListener('mousedown', function (e) {
            e.target.click();
          });
        }) : null;
      }
    }) : null;

    var searchMenuElem = document.getElementById("search-menu");
    var activeItem = document.querySelector('#search-menu .dropdown-item.is-active');
    var activeIndex = null;
    var items = null;
    var searchContainerMaxHeight = 350;

    searchElem ? 
    searchElem.addEventListener('keydown', function(e) {
      if (window.innerWidth < 770) {
        return null;
      }

      if (e.key === 'Escape') {
        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
      }

      var items = document.querySelectorAll('#search-menu .dropdown-item');
      var keyCode = e.which || e.keyCode;

      if (!items || !items.length) {
        return null;
      }
      
      if (e.key === 'ArrowDown' || keyCode === 40) {
        if (activeIndex === null) {
          activeIndex = 0;
          items[activeIndex].classList.remove('is-active');
        } else {
          items[activeIndex].classList.remove('is-active');
          activeIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
        }
        items[activeIndex].classList.add('is-active');

        let overflowedPixel = items[activeIndex].offsetTop + items[activeIndex].clientHeight - searchContainerMaxHeight;
        if (overflowedPixel > 0) {
          document.querySelector(".search-content").scrollTop += items[activeIndex].getBoundingClientRect().height;
        } else if (activeIndex === 0) {
          document.querySelector(".search-content").scrollTop = 0;
        }
      } else if (e.key === 'ArrowUp' || keyCode === 38) {
        if (activeIndex === null) {
          activeIndex = items.length - 1;
          items[activeIndex].classList.remove('is-active');
        } else {
          items[activeIndex].classList.remove('is-active');
          activeIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
        }
        items[activeIndex].classList.add('is-active');
        
        let overflowedPixel = items[activeIndex].offsetTop + items[activeIndex].clientHeight - searchContainerMaxHeight;
        if (overflowedPixel < 0) {
          document.querySelector(".search-content").scrollTop -= items[activeIndex].getBoundingClientRect().height;
        } else {
          document.querySelector(".search-content").scrollTop = overflowedPixel + items[activeIndex].getBoundingClientRect().height;
        }
      } else if (e.key === 'Enter' || keyCode === 13) {
        if (items[activeIndex] && items[activeIndex].getAttribute('href')) {
          location.href = items[activeIndex].getAttribute('href');
        }
      } else if (e.key === 'Escape' || keyCode === 27) {
        e.target.value = null;
        if (searchResults) {
          searchResults.classList.remove('is-active');
        }
      }
    }) : null;

    searchMobile ? 
    searchMobile.addEventListener('input', function(e) {
      if (!e.target.value) {
        let wrap = document.getElementById('search-mobile-results');
        while (wrap.firstChild) {
          wrap.removeChild(wrap.firstChild);
        }
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);
      renderSearchResultsMobile(searchText, results);
      if (enableSearchHighlight) {
        renderSearchHighlightResultsMobile(searchText, results);
      } else {
        renderSearchResultsMobile(searchText, results);
      }
    }) : null;
  


  
    var mobileSearchInputElem = document.querySelector('#search-mobile');
    var mobileSearchClassElem = document.querySelector('.mobile-search');
    var mobileSearchBtnElem = document.querySelector('#mobileSearchBtn');
    var mobileSearchCloseBtnElem = document.querySelector('#search-mobile-close');
    var mobileSearchContainer = document.querySelector('#search-mobile-container');
    var mobileSearchResultsElem = document.querySelector('#search-mobile-results');
    var htmlElem = document.querySelector('html');

    if (mobileSearchClassElem) {
      mobileSearchClassElem.style.display = 'none';
    }

    mobileSearchBtnElem ? 
    mobileSearchBtnElem.addEventListener('click', function () {
      if (mobileSearchContainer) {
        mobileSearchContainer.style.display = 'block';
      }

      if (mobileSearchInputElem) {
        mobileSearchInputElem.focus();
      }

      if (htmlElem) {
        htmlElem.style.overflowY = 'hidden';
      }
    }) : null;

    mobileSearchCloseBtnElem ? 
    mobileSearchCloseBtnElem.addEventListener('click', function() {
      if (mobileSearchContainer) {
        mobileSearchContainer.style.display = 'none';
      }

      if (mobileSearchInputElem) {
        mobileSearchInputElem.value = '';
      }
      
      if (mobileSearchResultsElem) {
        while (mobileSearchResultsElem.firstChild) {
          mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
        }
      }

      if (htmlElem) {
        htmlElem.style.overflowY = 'visible';
      }
    }) : null;

    mobileSearchInputElem ?
    mobileSearchInputElem.addEventListener('keydown', function(e) {
      var keyCode = e.which || e.keyCode;
      if (e.key === 'Escape' || keyCode === 27) {
        if (mobileSearchContainer) {
          mobileSearchContainer.style.display = 'none';
        }
        
        if (mobileSearchInputElem) {
          mobileSearchInputElem.value = '';
        }

        if (mobileSearchResultsElem) {
          while (mobileSearchResultsElem.firstChild) {
            mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
          }
        }
        if (htmlElem) {
          htmlElem.style.overflowY = 'visible';
        }
      }
    }) : null;
  


  
    function renderSearchResultsMain(searchText, results) {
      var searchBody = document.querySelector('.search-result__body');
      var originUl = searchBody.querySelector('ul');
      var ul = document.createElement('ul');
      
      if (!searchText) {
        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
      } else if (results) {
        if (results && results.length) {
          results.forEach(function (result) {
            makeLi(ul, result);
          });

          searchResult ? searchResult.setAttribute('data-display', 'block') : null;
          summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
        }
      }

      originUl.parentNode.replaceChild(ul, originUl);
    }

    function renderSearchHighlightResultsMain(searchText, results) {
      var searchBody = document.querySelector('.search-result__body');
      var originUl = searchBody.querySelector('ul');
      var ul = document.createElement('ul');

      if (!searchText) {
        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
      } else if (results) {
        if (results && results.length) {
          results.forEach(function (result) {
            makeHighlightLi(ul, result);
          });

          searchResult ? searchResult.setAttribute('data-display', 'block') : null;
          summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
        }
      }

      originUl.parentNode.replaceChild(ul, originUl);
    }
  
  });
</script>    
    


<link rel="stylesheet" href="/css/main.min.css">



  
  
    
    <link rel="stylesheet" href="/css/custom.min.css">
  


    
<link rel="alternate" type="application/rss&#43;xml" title="RSS" href="https://emacle.github.io/index.xml">

<meta name="description" content="Personal tech blog about Emacs orgmode hugo php vue.js." />


<meta name="created" content="2019-02-28T00:00:00&#43;0000">
<meta name="modified" content="2019-02-28T00:00:00&#43;0000">
<meta property="article:published_time" content="2019-02-28T00:00:00&#43;0000">

<meta name="author" content="emacle">


<meta property="og:site_name" content="~振鹭于飞~">
<meta property="og:title" content="">
<meta property="og:url" content="https://emacle.github.io/">
<meta property="og:type" content="website">
<meta property="og:description" content="Personal tech blog about Emacs orgmode hugo php vue.js.">

<meta name="generator" content="Hugo 0.65.2" />
<meta name="msapplication-TileColor" content="#fff">

<meta name="theme-color" content="#fff">

<meta name="msapplication-navbutton-color" content="#fff">

<meta name="apple-mobile-web-app-status-bar-style" content="#fff">

<link rel="canonical" href="https://emacle.github.io/">

<link rel="manifest" href="/manifest.json">

  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-512x512.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">


    <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "url" : "https://emacle.github.io/",
    "name": "",
    "description": "Personal tech blog about Emacs orgmode hugo php vue.js.",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://emacle.github.io/"
    },
    "publisher": {
      "@type": "Organization",
      "name": "~振鹭于飞~",
      "url": "https://emacle.github.io/"
    }
  }
</script>

    
  
  







  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    
<meta name="google-site-verification" content="k8WIOcecDRQPeZ2x500693x2f2W85xDEm87gV1_lWl0" />

</head>

<body id="root" class="theme__dark">
    <script>
        var localTheme = localStorage.getItem('theme');
        if (localTheme) {
            document.getElementById('root').className = 'theme__' + localTheme;
        }
    </script>
    <div id="container">
        





        <div class="wrapper" data-type="page" data-kind="home">
            <nav class="navbar" role="navigation" aria-label="main navigation" data-dir="ltr">
  <div class="navbar__brand">
    
    <a href="/" title="Home" rel="home" class="navbar__logo-link">
      <img src="/logo.png" alt="Home" class="navbar__logo">
    </a>
    
    
      <a href="/" title="Home" rel="home" class="navbar__title-link">
        <h6 class="navbar__title">Home</h6>
      </a>
    
  </div>

  
<div class="theme theme-mobile" data-ani="true">
  <div class="dropdown">
    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style="" data-ani="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentColor" d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41 0L6.34 7.93zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg>      
    </button>
    <div class="dropdown-content select-theme">
      
        
        <a href="#" class="dropdown-item select-theme__item is-active">
          dark
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          light
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          hacker
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          solarized
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          kimbie
        </a>
        
      
    </div>
  </div>
</div>


<div id="mobileSearchBtn" class="mobile-search__btn" data-ani="true">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
</div>

<div id="search-mobile-container" class="mobile-search hide" data-dir="ltr">
  <div class="mobile-search__top">
    <input id="search-mobile" type="text" aria-label="Mobile Search" placeholder="Search" class="mobile-search__top--input"/>
    <div id="search-mobile-close" class="mobile-search__top--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
    </div>
  </div>
  <div id="search-mobile-results" class="mobile-search__body">
    
  </div>
</div>


<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false"
  data-ani="true">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>
<div class="navbarm__collapse" data-open="false">
  <ul dir="ltr">
    
    
      
      
      
      

      
        <li class="navbarm__menu--item ">
          <a href="/posts">Posts</a>
        </li>
      
      
    
      
      
      
      

      
        <li class="navbarm__menu--item ">
          <a href="/archive">Archive</a>
        </li>
      
      
    
      
      
      
      

      
        <li class="navbarm__menu--item ">
          <a href="/about">About</a>
        </li>
      
      
    

    
      <li class="navbarm__menu--item ">
        <a href="/tags" class="navbarm__menu--term" data-index="0">
          Tags
        </a>
      </li>
    
      <li class="navbarm__menu--item ">
        <a href="/categories" class="navbarm__menu--term" data-index="1">
          Categories
        </a>
      </li>
    
  </ul>
</div>
  <div class="navbar__menu">
  
<div class="theme" data-ani="true">
  <div class="dropdown">
    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentColor" d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41 0L6.34 7.93zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg>      
    </button>
    <div class="dropdown-content select-theme">
      
        
        <a href="#" class="dropdown-item select-theme__item is-active">
          dark
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          light
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          hacker
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          solarized
        </a>
        
        <a href="#" class="dropdown-item select-theme__item ">
          kimbie
        </a>
        
      
    </div>
  </div>
</div>

  
  
  
  
  
  
  
  <a href="/posts" class="navbar__menu-item navbar__slide-down " dir="ltr" data-ani="true">Posts</a>
  
  
  
  
  
  
  
  <a href="/archive" class="navbar__menu-item navbar__slide-down " dir="ltr" data-ani="true">Archive</a>
  
  
  
  
  
  
  
  <a href="/about" class="navbar__menu-item navbar__slide-down " dir="ltr" data-ani="true">About</a>
  
  
</div>
</nav>
            
<header class="header ">
    
        <script src="https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js" integrity="sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo=" crossorigin="anonymous"></script>


  
    
      <div class="site-header basicflex-column site-header__align-center" data-ani="true" style="width: 100%; height: 190px; padding: px 50px; font-size: 44px; color:yellow;">
        <div id="typewriter"></div>
      </div>

      <script>
        
        

        var methods = JSON.parse("[{\"typeString\":\"Welcome to Emacs Orgmode!\"},{\"pauseFor\":2500},{\"deleteAll\":true},{\"typeString\":\"After many years, do you still remember, How we use to be?\"},{\"pauseFor\":2500},{\"deleteChars\":10},{\"typeString\":\"\\u003cstrong\\u003eused to be?\\u003c/strong\\u003e\"},{\"pauseFor\":2500}]");
        var options = JSON.parse("{\"autoStart\":false,\"loop\":true}");
        var typeElem = document.getElementById("typewriter");
        var typewriter = new Typewriter(typeElem, options);
        
        for (var i = 0; i < methods.length; i++) {
          var key = Object.keys(methods[i])[0];

          if (key === "typeString") {
            typewriter.typeString(methods[i][key]);
          } else if (key === "pauseFor") {
            typewriter.pauseFor(methods[i][key]);
          } else if (key === "deleteAll") {
            typewriter.deleteAll();
          } else if (key === "deleteChars") {
            typewriter.deleteChars(methods[i][key]);
          } else if (key === "pause") {
            typewriter.pause();
          } else if (key === "stop") {
            typewriter.stop();
          }
        }

        typewriter.start();
      </script>
    
  
    
  
    
  
    
  


    
</header>

            
<main class="main inner" data-sidebar-position="right">
    <div class="list__main lm">
        <div class="summary__container" data-display="block">
            
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
            
            
                
            
            
            
            
            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/vue-element-ui-github-oauth-san-fang-deng-lu/">
        <img data-src="https://cn.vuejs.org/images/logo.png" alt="Vue Element-ui Github oAuth 三方登录" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/vue-element-ui-github-oauth-san-fang-deng-lu/'>📌&nbsp;Vue Element-ui Github oAuth 三方登录</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Mar 6, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;5&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            Github 网站创建 OAuth Apps 记录 Client ID / Client Secret / Authorization Callback URL 3个参数 此处 Authorization Callback URL 为默认回调网址，程序代码里没有明确指定的话，以此为默认值，代码里指定的话 指定的redi
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/vue-token-guo-qi-wu-feng-shua-xin/">
        <img data-src="https://cn.vuejs.org/images/logo.png" alt="vue token过期无缝刷新" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/vue-token-guo-qi-wu-feng-shua-xin/'>📌&nbsp;vue token过期无缝刷新</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Jan 17, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;3&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            过期刷新流程图: 思路: 登录时, 后端生成 access_token, refresh_token 返回前端, 前端保存两个token在 cookie或localstorge中 当前端发送正常请求时,请求
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/syntax-highlight/">
        <img data-src="/images/feature2/color-palette.png" alt="Syntax highlighting" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/syntax-highlight/'>📌&nbsp;Syntax highlighting</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Dec 18, 2019 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;2&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;Jeus</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            Syntax highlighting test
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/chrome-xian-shi-emoji-zi-ti/">
        <img data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Twemoji2_1f914.svg/1200px-Twemoji2_1f914.svg.png" alt="chrome 显示 emoji 字体" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/chrome-xian-shi-emoji-zi-ti/'>chrome 显示 emoji 字体</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Oct 13, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            hugo-theme-zzo 主题启用了Emoji Support windows 7 下使用chrome浏览器只能通过Segoe UI Symbol字体仅显示部分 黑白色 emoji (firefox 使用自己的字体渲染可显示彩色em
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/git-hooks-husky-4yorkie-lint-staged/">
        <img data-src="https://cn.eslint.org/img/favicon.512x512.png" alt="Git Hooks 使用 husky/yorkie lint-staged git 提交前进行校验" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/git-hooks-husky-4yorkie-lint-staged/'>Git Hooks 使用 husky/yorkie lint-staged git 提交前进行校验</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Aug 17, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            新版本的@vue/cli-service 内置了 yorkie, 见package-lock.json 不再需要额外安装husky 在安装之后，@vue/cli-
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/vue-vscode-tong-yi-dai-ma-ge-shi/">
        <img data-src="https://cn.vuejs.org/images/logo.png" alt="vue vscode 统一代码格式" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/vue-vscode-tong-yi-dai-ma-ge-shi/'>vue vscode 统一代码格式</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Aug 17, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;2&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            vscode 安装 vetur，eslint 插件 使用 vetur 作为vue文件格式化程序, prettier不用安装 注意 .eslintignore 文件一定不能忽略/src，如果包含则src下
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/git-ignore-file/">
        <img data-src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Git_icon.svg" alt="git忽略已经被提交的文件" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/git-ignore-file/'>git忽略已经被提交的文件</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Jun 30, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            .gitignore 文件的用途，该文件只能作用于 Untracked Files，也就是那些从来没有被 Git 记录过的文件（自添加以后，从未 add 及 commit 过的文件）。 How to ignore files already managed with Git locally 方法一:
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/postman-preview-image/">
        <img data-src="https://www.postman.com/assets/logos/postman-logo-stacked.svg" alt="postman预览二进制图片" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/postman-preview-image/'>postman预览二进制图片</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;May 6, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            使用 base64 编码二进制图片数据，置入 &lt;img&gt; 标签 1 2 3 4 5 6 7 8 9 &lt;?php try { // getDiagram 获得二进制流图片 可显示流程进度 $diagramBinary = $serviceFactory-&gt;createProcessInstanceService()-&gt;getDiagram($processInstanceId); $base64 = &#39;data:image/png&#39; . &#39;;base64,&#39; . base64_encode($diagramBinary); // base64加密二进制图
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/activiti-shi-yong-mysql-bu-shu-ji-zhong-wen-bu-xian-shi-jie-jue/">
        <img data-src="/images/feature2/workflow.png" alt="activiti使用mysql部署及中文不显示解决" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/activiti-shi-yong-mysql-bu-shu-ji-zhong-wen-bu-xian-shi-jie-jue/'>activiti使用mysql部署及中文不显示解决</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;May 5, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;2&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            官网下载 activiti-6.0.0.zip 包解压 将wars/目录下 activiti-app.war, activiti-rest.war 包放入apache-tomcat-9.0.30/webapps目录下 1 apache-tomcat-9.0.30/bin/catalina.bat start # 启动 tomcat，stop
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/oauth-2-authorization-code-grant-flow/">
        <img data-src="/images/feature2/color-palette.png" alt="OAuth 2 Authorization Code Grant Flow" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/oauth-2-authorization-code-grant-flow/'>OAuth 2 Authorization Code Grant Flow</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Mar 9, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            转自 OAuth 2.0 筆記 (4.1) Authorization Code Grant Flow 細節 在 Authorization Grant Code Flow 裡，Client 不直接向 Resource Owner 要求許可，而是把 Resource Owner 導去 Authorization Server 要求許可， Authorization Server 再透過轉址來告訴 Client 授權許可的代碼 (code)
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/shortcodes/">
        <img data-src="/images/feature3/code-file.png" alt="Shortcodes" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/shortcodes/'>Shortcodes</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Jan 25, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;2&nbsp;min read </span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            tabs, code-tabs, expand, alert, warning, notice, img, box
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/hugo-dusk-theme/">
        <img data-src="/images/feature2/color-palette.png" alt="hugo-dusk theme 模板,utterances评论修改" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/hugo-dusk-theme/'>hugo-dusk theme 模板,utterances评论修改</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Jan 16, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;3&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            Hugo 以 theme 中的静态模板文件来生成静态css文件 favicon 图标 1 2 3 4 5 [params] # 自定义 favicon 变量 ~/hugo/static/favicon.ico -&gt; /public/favicon.ico # ~/hugo/static/ 目录下的东西会自动发布到时 /public 根目录 i.e. ox-hugo/ orgmode 导出的静态图片 #
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
                
  <article class="summary-classic" data-ani="true">
  <div class="summary-classic__flex-box" >

    
    <div class="summary-classic__image-container summary-classic__image-wrapper" data-position="right" data-hwm="">
      <a href="https://emacle.github.io/posts/hugo-with-orgmode/">
        <img data-src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Org-mode-unicorn.svg" alt="Hugo with OrgMode" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" data-ani="true" data-hwm="" style=""/>
      </a>
    </div>
    

    <div class="summary-classic__content">
      <header>
        <h5 class="title h5"><a href='https://emacle.github.io/posts/hugo-with-orgmode/'>Hugo with OrgMode</a> </h5>
        <h6 class="subtitle caption">
          <time title="Written At" dir="ltr">📅&nbsp;Jan 15, 2020 </time>
          
          <span title="Reading Time" dir="ltr"> &middot; ☕&nbsp;1&nbsp;min read </span>
          
          &middot; <span title="WRITTEN BY" dir="ltr">🎅&nbsp;[emacle]</span>
          
        </h6>
      </header>
      <div>
        <div class="summary-classic__text p2">
          
            elpa 安装 ox-hugo 优先使用基于子树模式 两个必填 &lt;hugo_base_dir&gt; 与 EXPORT_FILE_NAME org 文件头 设置配置 #+hugo_base_dir 参数指向 hugo 工程目录 1 #+hugo_base_dir: ../hugo subtree 属性必须要设置 EXPORT_FILE_NAME 即slug 不可重复, 作为导出的 .md 文件名
          
        </div>
      </div>
    </div>

    
    
  </div>
  <hr />
</article>

            
            


  
  
  
  
    
  
  <ul class="pagination">
    
      
      <script>
      </script>
      
        <li
        class="active"><a href="/">1</a></li>
      
    
      
      <script>
      </script>
      
        <li
        ><a href="/page/2/">2</a></li>
      
    
      
      <script>
      </script>
      
        <li
        ><a href="/page/3/">3</a></li>
      
    
  </ul>

        </div>
        <div class="search-result" data-display="none">
  <div class="search-result__header">
    <div class="search-result__close" data-dir="ltr">
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
    </div>
  </div>
  <div class="search-result__body">
    <ul>
      <li class="search-result__item">
        <div class="search-result__item--title">
        </div>
        <div class="search-result__item--desc">
        </div>
      </li>
    </ul>
  </div>
</div>
    </div>

    
        <aside class="list__sidebar r" data-dir="ltr">
            
<div class="sidebar">
    

<div class="search">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
  </span>
  <input id="search" aria-label="Site Search" class="input" type="text" placeholder="Search" autocomplete="off">
  <div id="search-results" class="dropdown">
    <div id="search-menu" class="dropdown-menu" role="menu">
    </div>
  </div>
</div>


    
<section class="bio" data-dir="ltr">
  
  <hr class="hr-slash bio-hr"/>
  <div class="bio__photo-wrapper">
    
    
      
        <img data-src="/images/whoami/avatar.jpg" alt="emacle" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="true"/>
           
    
  </div>
  
  <hr class="hr-slash bio-hr"/>
  <div class="bio__name">
    emacle
  </div>
  <div class="bio__desc">
    Emacser orgmode
  </div>
  
  
  <div class="bio__info">
    <div class="bio__info--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
    </div>
    Emacs Hugo
  </div>
  

  
  <div class="bio__info">
    <div class="bio__info--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V2c0-.55-.45-1-1-1s-1 .45-1 1v1.06C6.83 3.52 3.52 6.83 3.06 11H2c-.55 0-1 .45-1 1s.45 1 1 1h1.06c.46 4.17 3.77 7.48 7.94 7.94V22c0 .55.45 1 1 1s1-.45 1-1v-1.06c4.17-.46 7.48-3.77 7.94-7.94H22c.55 0 1-.45 1-1s-.45-1-1-1h-1.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
    </div>
    Zhengzhou, China
  </div>
  

  
  <div class="bio__info">
    <div class="bio__info--icon">      
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z"/></svg>
    </div>
    <a href="mailto:qkbeyond@gmail.com">qkbeyond@gmail.com</a>    
  </div>
  

  
  <div class="bio__info">
    <div class="bio__info--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M17 7h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1zm2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
    </div>
    <a href="https://emacle.github.io" target="_blank" rel="noreferrer">https://emacle.github.io</a>    
  </div>
  

  <div class="bio__social">
    
      
    
      
    
      
    
      
    
      
    
      
    
      
      <a href="https://github.com/emacle" target="_blank" rel="noreferrer" title="github" aria-label="github">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="0 0 24 24" version="1.1">
<g id="surface3680">
<path fill="currentColor" d="M 10.898438 2.101562 C 6.300781 2.601562 2.601562 6.300781 2.101562 10.800781 C 1.601562 15.5 4.300781 19.699219 8.398438 21.300781 C 8.699219 21.398438 9 21.199219 9 20.800781 L 9 19.199219 C 9 19.199219 8.601562 19.300781 8.101562 19.300781 C 6.699219 19.300781 6.101562 18.101562 6 17.398438 C 5.898438 17 5.699219 16.699219 5.398438 16.398438 C 5.101562 16.300781 5 16.300781 5 16.199219 C 5 16 5.300781 16 5.398438 16 C 6 16 6.5 16.699219 6.699219 17 C 7.199219 17.800781 7.800781 18 8.101562 18 C 8.5 18 8.800781 17.898438 9 17.800781 C 9.101562 17.101562 9.398438 16.398438 10 16 C 7.699219 15.5 6 14.199219 6 12 C 6 10.898438 6.5 9.800781 7.199219 9 C 7.101562 8.800781 7 8.300781 7 7.601562 C 7 7.199219 7 6.601562 7.300781 6 C 7.300781 6 8.699219 6 10.101562 7.300781 C 10.601562 7.101562 11.300781 7 12 7 C 12.699219 7 13.398438 7.101562 14 7.300781 C 15.300781 6 16.800781 6 16.800781 6 C 17 6.601562 17 7.199219 17 7.601562 C 17 8.398438 16.898438 8.800781 16.800781 9 C 17.5 9.800781 18 10.800781 18 12 C 18 14.199219 16.300781 15.5 14 16 C 14.601562 16.5 15 17.398438 15 18.300781 L 15 20.898438 C 15 21.199219 15.300781 21.5 15.699219 21.398438 C 19.398438 19.898438 22 16.300781 22 12.101562 C 22 6.101562 16.898438 1.398438 10.898438 2.101562 Z M 10.898438 2.101562 "/>
</g>
</svg>

      </a>
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
  </div>
</section>
<hr class="hr-fade sidebar-hr"/>


    
    

    
        
        
            
        
            
        
            
        
            
        
            
        
            
        

        
        <section class="sidebar-recent">
            <a href="/posts/" class="sidebar-recent__title p2">Posts</a>
            <ul class="sidebar-recent__ul">
                
                    <li>
                        <a href="/posts/chrome-xian-shi-emoji-zi-ti/" class="sidebar-recent__a p2">chrome 显示 emoji 字体</a>
                    </li>
                
                    <li>
                        <a href="/posts/git-hooks-husky-4yorkie-lint-staged/" class="sidebar-recent__a p2">Git Hooks 使用 husky/yorkie lint-staged git 提交前进行校验</a>
                    </li>
                
                    <li>
                        <a href="/posts/vue-vscode-tong-yi-dai-ma-ge-shi/" class="sidebar-recent__a p2">vue vscode 统一代码格式</a>
                    </li>
                
                    <li>
                        <a href="/posts/git-ignore-file/" class="sidebar-recent__a p2">git忽略已经被提交的文件</a>
                    </li>
                
                    <li>
                        <a href="/posts/postman-preview-image/" class="sidebar-recent__a p2">postman预览二进制图片</a>
                    </li>
                
            </ul>
        </section>
        <hr class="hr-fade sidebar-hr" />
        
        <section class="sidebar-recent">
            <a href="/gallery/" class="sidebar-recent__title p2">Galleries</a>
            <ul class="sidebar-recent__ul">
                
                    <li>
                        <a href="/gallery/cartoon/" class="sidebar-recent__a p2">Cartoon</a>
                    </li>
                
                    <li>
                        <a href="/gallery/photo/" class="sidebar-recent__a p2">Photo</a>
                    </li>
                
            </ul>
        </section>
        <hr class="hr-fade sidebar-hr" />
        
    
</div>

<div class="taxo-root">

<div class="taxo">
    <section>
        <span class="title p2">
            <a href="/tags/" class="taxo__title">
                Tags
            </a>
        </span>
        
        
        
            <span class="tag">
                <a href="/tags/activiti/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        activiti
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/amoji/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        amoji
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/bamoji/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        bamoji
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/css/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        css
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/diagram/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        diagram
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/element/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        element
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/emoji/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        emoji
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/eslint/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        eslint
                    </span>
                    <span class="taxo__num" dir="auto">
                        2
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/gamoji/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        gamoji
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/git/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        git
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/github/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        github
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/html/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        html
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/hugo/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        hugo
                    </span>
                    <span class="taxo__num" dir="auto">
                        4
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/husky/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        husky
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/index/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        index
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/jwt/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        jwt
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/markdown/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        markdown
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/namoji/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        namoji
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/npm/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        npm
                    </span>
                    <span class="taxo__num" dir="auto">
                        2
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/oauth/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        oauth
                    </span>
                    <span class="taxo__num" dir="auto">
                        2
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/pi/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        pi
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/postman/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        postman
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/privacy/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        privacy
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/shortcode/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        shortcode
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/shortcodes/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        shortcodes
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/theme/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        theme
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/themes/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        themes
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/token/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        token
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/utterances/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        utterances
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/vetur/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        vetur
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/vscode/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        vscode
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/vue/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        vue
                    </span>
                    <span class="taxo__num" dir="auto">
                        4
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/tags/yorkie/" class="is-tags taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        yorkie
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
    </section>
</div>


<div class="taxo">
    <section>
        <span class="title p2">
            <a href="/categories/" class="taxo__title">
                Categories
            </a>
        </span>
        
        
        
            <span class="tag">
                <a href="/categories/diagram/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        diagram
                    </span>
                    <span class="taxo__num" dir="auto">
                        6
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/emacs/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        emacs
                    </span>
                    <span class="taxo__num" dir="auto">
                        3
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/hugo/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        hugo
                    </span>
                    <span class="taxo__num" dir="auto">
                        4
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/math/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        math
                    </span>
                    <span class="taxo__num" dir="auto">
                        2
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/syntax/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        syntax
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/themes/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        themes
                    </span>
                    <span class="taxo__num" dir="auto">
                        1
                    </span>
                </a>
            </span>
        
        
        
            <span class="tag">
                <a href="/categories/vue/" class="is-categories taxo__link" data-dir="ltr">
                    <span class="taxo__text">
                        vue
                    </span>
                    <span class="taxo__num" dir="auto">
                        4
                    </span>
                </a>
            </span>
        
        
    </section>
</div>



</div>
<hr class="hr-fade sidebar-hr" />


        </aside>
    
</main>
<script>
    
    var sidebarPosition = JSON.parse("\"right\"");
    
    var enableSidebar = JSON.parse("true");

    var listMainElem = document.querySelector('.list__main');
    var listSideElem = document.querySelector('.list__sidebar');

    var gridSmall = 'l';
    var gridBig = 'mr';
    var gridFull = 'lmr'

    if (sidebarPosition === "right") {
        gridSmall = 'r';
        gridBig = 'lm'
    }

    enquire.register("screen and (max-width: 769px)", {
        match: function () {
            if (enableSidebar) {
                listMainElem.classList.remove(gridBig);
                listMainElem.classList.add(gridFull);
                listSideElem.classList.remove(gridSmall);
                listSideElem.classList.add('hide');
            } else {
                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
                    listMainElem.classList.remove(gridBig);
                    listMainElem.classList.add(gridFull);
                }

                if (listSideElem && !listSideElem.classList.contains('hide')) {
                    listSideElem.classList.add('hide');
                }
            }

        },
        unmatch: function () {
            if (enableSidebar) {
                listMainElem.classList.remove(gridFull);
                listMainElem.classList.add(gridBig);
                listSideElem.classList.add(gridSmall);
                listSideElem.classList.remove('hide');
            } else {
                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
                    listMainElem.classList.remove(gridBig);
                    listMainElem.classList.add(gridFull);
                }

                if (listSideElem && !listSideElem.classList.contains('hide')) {
                    listSideElem.classList.add('hide');
                }
            }

            var navCollapseBtn = document.querySelector('.navbar__burger');
            var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
            if (navCollapse) {
                navCollapse.setAttribute('data-open', false);
                navCollapse.style.maxHeight = 0;
                navCollapseBtn.classList.remove('is-active');
            }
            if (document.getElementsByClassName('navbar__menu')[0]) {
                document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
            }
            if (document.getElementsByClassName('mobile-search')[0]) {
                document.getElementsByClassName('mobile-search')[0].classList.add('hide');
            }
        },
        setup: function () { },
        deferSetup: true,
        destroy: function () { },
    });
</script>

<script>
  window.onload = function() {
    
    
    var enableBusuanzi = JSON.parse("true");
    if (enableBusuanzi) {
      var sitePvElem = document.querySelector('#busuanzi_value_site_pv');
      var siteUvElem = document.querySelector('#busuanzi_value_site_uv');
      sitePvElem.textContent = sitePvElem.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      siteUvElem.textContent = siteUvElem.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
  }
</script>

            
            <footer class="footer">
    
    
    
<div id="gtt">
  <div class="gtt">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M8.12 14.71L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41 0L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.38 1.03.39 1.42 0z"/></svg>
  </div>
</div>

    <hr />

    <div class="basicflex">
        
            <a href="" class="footer__link" target="_blank" rel="noreferrer"></a>
        
            <a href="" class="footer__link" target="_blank" rel="noreferrer"></a>
        
    </div>

    <div class="footer__poweredby">
        
  <div class="busuanzi">
    
    
      <div class="busuanzi__item">
        <span class="busuanzi__item--label">
          Total visitors
        </span>
        <span id="busuanzi_value_site_uv" class="busuanzi__item--number">...</span>
      </div>
    

    
      <div class="busuanzi__item">
        <span class="busuanzi__item--label">
          Total views
        </span>
        <span id="busuanzi_value_site_pv" class="busuanzi__item--number">...</span>
      </div>
    

  </div>

                
            <p class="caption">
                
                    ©2020, All Rights Reserved
                
            </p>
        

        
            <p class="caption">Powered by <a href="https://gohugo.io/" target="_blank" rel="noreferrer">Hugo</a> and the <a href="https://github.com/zzossig/hugo-theme-zzo" target="_blank" rel="noreferrer">Zzo theme</a></p>
        
        
    </div> 
</footer>
        </div>
        





<div class="wrapper__right hide" data-pad="true" dir="ltr">
  <script>document.querySelector('.wrapper__right').classList.remove('hide')</script>
  
</div>

    </div>
</body>

</html>