<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title> King Garden </title> <meta name="generator" content="hexo-theme-yilia-plus"> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="/dist/main.css"> <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script> </head> </html> <body> <div id="app"> <main class="content"> <section class="outer"> <article id="page-" class="article article-type-page" itemscope itemprop="blogPost" data-scroll-reveal> <div class="article-inner"> <div class="article-entry" itemprop="articleBody"> <h1 id="King-Garden"><a href="#King-Garden" class="headerlink" title="King Garden"></a>King Garden</h1> <!-- reward --> </div> <!-- copyright --> <div class="declare"> <ul class="post-copyright"> <li> <i class="ri-copyright-line"></i> <strong>版权声明: </strong s> 本博客所有文章除特别声明外,均采用 <a href="https://www.apache.org/licenses/LICENSE-2.0.html" rel="external nofollow" target="_blank">Apache License 2.0</a> 许可协议。转载请注明出处! </li> </ul> </div> <footer class="article-footer"> <div class="share-btn"> <span class="share-sns share-outer"> <i class="ri-share-forward-line"></i> 分享 </span> <div class="share-wrap"> <i class="arrow"></i> <div class="share-icons"> <a class="weibo share-sns" href="javascript:;" data-type="weibo"> <i class="ri-weibo-fill"></i> </a> <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin"> <i class="ri-wechat-fill"></i> </a> <a class="qq share-sns" href="javascript:;" data-type="qq"> <i class="ri-qq-fill"></i> </a> <a class="douban share-sns" href="javascript:;" data-type="douban"> <i class="ri-douban-line"></i> </a> <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone"> <i class="icon icon-qzone"></i> </a> --> <a class="facebook share-sns" href="javascript:;" data-type="facebook"> <i class="ri-facebook-circle-fill"></i> </a> <a class="twitter share-sns" href="javascript:;" data-type="twitter"> <i class="ri-twitter-fill"></i> </a> <a class="google share-sns" href="javascript:;" data-type="google"> <i class="ri-google-fill"></i> </a> </div> </div> </div> <div class="wx-share-modal"> <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a> <p>扫一扫,分享到微信</p> <div class="wx-qrcode"> <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://winjin.github.io/README.html" alt="微信分享二维码"> </div> </div> <div id="share-mask"></div> </footer> </div> <!-- valine评论 --> <div id="vcomments-box"> <div id="vcomments"> </div> </div> <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> <script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script> <script> new Valine({ el: '#vcomments', app_id: '', app_key: '', path: window.location.pathname, notify: 'false', verify: 'false', avatar: 'mp', placeholder: '给我的文章加点评论吧~', recordIP: true }); const infoEle = document.querySelector('#vcomments .info'); if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) { infoEle.childNodes.forEach(function (item) { item.parentNode.removeChild(item); }); } </script> <style> #vcomments-box { padding: 5px 30px; } @media screen and (max-width: 800px) { #vcomments-box { padding: 5px 0px; } } #vcomments-box #vcomments { background-color: #fff; } .v .vlist .vcard .vh { padding-right: 20px; } .v .vlist .vcard { padding-left: 10px; } </style> </article> </section> <footer class="footer"> <div class="outer"> <ul class="list-inline"> <li> © 2019-2020 Justin </li> <li> Powered by <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a> </li> </ul> <ul class="list-inline"> <li> </li> <li> <!-- cnzz统计 --> </li> </ul> </div> </footer> <div class="float_btns"> <div class="totop" id="totop"> <i class="ri-arrow-up-line"></i> </div> <div class="todark" id="todark"> <i class="ri-moon-line"></i> </div> </div> </main> <aside class="sidebar"> <button class="navbar-toggle"></button> <nav class="navbar"> <div class="logo"> <a href="/"><img src="/images/avatar.jpg" alt="King Garden"></a> </div> <ul class="nav nav-main"> <li class="nav-item"> <a class="nav-item-link" href="/">主页</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/archives">归档</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/categories">分类</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/tags">标签</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/gallery">摄影</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/2020/03/20/About-Me/">关于我</a> </li> </ul> </nav> <nav class="navbar navbar-bottom"> <ul class="nav"> <li class="nav-item"> <a class="nav-item-link nav-item-search" title="Search"> <i class="ri-search-line"></i> </a> <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed"> <i class="ri-rss-line"></i> </a> </li> </ul> </nav> <div class="search-form-wrap"> <div class="local-search local-search-plugin"> <input type="search" id="local-search-input" class="local-search-input" placeholder="Search..."> <div id="local-search-result" class="local-search-result"></div> </div> </div> </aside> <div id="mask"></div> <!-- #reward --> <div id="reward"> <span class="close"><i class="ri-close-line"></i></span> <p class="reward-p"><i class="ri-cup-line"></i></p> <div class="reward-box"> </div> </div> <script src="/js/jquery-2.0.3.min.js"></script> <script src="/js/lazyload.min.js"></script> <script> try { var typed = new Typed("#subtitle", { strings: ['面朝大海,春暖花开', '人生短短几个秋,何不委心任去留。', '沧海桑田易变迁,吾永向前誓不休。'], startDelay: 0, typeSpeed: 200, loop: true, backSpeed: 100, showCursor: true }); } catch (err) { } </script> <script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css"> <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script> <script src="/dist/main.js"></script> <!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css"> <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script> <script> function viewer_init() { let pswpElement = document.querySelectorAll('.pswp')[0]; let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)')) $imgArr.forEach(($em, i) => { $em.onclick = () => { // slider展开状态 // todo: 这样不好,后面改成状态 if (document.querySelector('.left-col.show')) return let items = [] $imgArr.forEach(($em2, i2) => { let img = $em2.getAttribute('data-idx', i2) let src = $em2.getAttribute('data-target') || $em2.getAttribute('src') let title = $em2.getAttribute('alt') // 获得原图尺寸 const image = new Image() image.src = src items.push({ src: src, w: image.width || $em2.width, h: image.height || $em2.height, title: title }) }) var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, { index: parseInt(i) }); gallery.init() } }) } viewer_init() </script> <script type="text/javascript" src="https://js.users.51.la/20544303.js"></script> </div> </body> </html>