feat: valine comment verify

README.md

@@ -14,7 +14,7 @@
   </a>
   <br>
   <a href="https://github.com/Shen-Yu/hexo-theme-ayer/releases" target="_blank" rel="noopener noreferrer">
-    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.3-blue.svg">
+    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.5-blue.svg">
   </a>
  <img alt="language" src="https://img.shields.io/badge/language-ejs--stylus-orange.svg">
   <a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener noreferrer">
@@ -60,7 +60,7 @@ git pull
 
 ### Configuration
 
-let me know if you can’t find anything.
+let me know if you have any questions.
 
 ``` yml
 # Menu-Sidebar
@@ -102,6 +102,9 @@ nav_text:
 # Catalog in article
 toc: true
 
+# images in the article support click to fullscreen
+image_viewer: true
+
 # https://github.com/willin/hexo-wordcount
 word_count:
   enable: true
@@ -285,6 +288,5 @@ Use Tocbot to parse the title tags (h1~h6) in the content and insert the directo
 
 ---
 
-Inspired by [Ocean](https://github.com/zhwangart/hexo-theme-ocean)
-
-<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Ayer</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/Shen-Yu/hexo-theme-ayer" property="cc:attributionName" rel="cc:attributionURL">Eric-Shen</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
+<br/>
+<a src="https://github.com/Shen-Yu/hexo-theme-ayer">Ayer</a> by <a  href="https://github.com/Shen-Yu">Eric-Shen</a> is licensed under  <a rel="license" href="https://www.mit-license.org/">MIT</a>.

_config.yml

@@ -1,7 +1,8 @@
 # 侧边栏菜单
 menu:
   主页: /
-  目录: /archives
+  归档: /archives
+  分类: /categories
   标签: /tags
   旅行: /tags/旅行/
   摄影: http://shenyu-vip.lofter.com
@@ -36,6 +37,9 @@ nav_text:
 # 文章页是否显示目录
 toc: true
 
+# 文章中的图片是否支持点击放大
+image_viewer: true
+
 # https://github.com/willin/hexo-wordcount
 # 是否开启字数统计(关闭请设置enable为false)
 # 也可以单独在md文件里Front-matter设置`no_word_count: true`属性，来自定义关闭字数统计
@@ -71,6 +75,7 @@ leancloud:
 # Valine配置
 valine:
   enable: true # 是否启用
+  verify: false # 是否启用防垃圾验证
   avatar: mp # 头像样式(https://valine.js.org/avatar.html)
   placeholder: 给我的文章加点评论吧~ # placeholder
 

layout/_partial/after-footer.ejs

@@ -3,12 +3,12 @@
 <%- js('/js/lazyload.min') %>
 <%- js('/js/busuanzi-2.3.pure.min') %>
 <% if (theme.fancybox){ %>
-  <%- js('fancybox/jquery.fancybox.min') %>
+<%- js('fancybox/jquery.fancybox.min') %>
 <% } %>
 
 <% if (theme.toc && is_post()){ %>
-  <%- js('/js/tocbot.min') %>
-  <script>
+<%- js('/js/tocbot.min') %>
+<script>
   // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
   tocbot.init({
     tocSelector: '.tocbot',
@@ -24,7 +24,7 @@
       return false;
     }
   });
-  </script>
+</script>
 <% } %>
 
 <script>
@@ -38,10 +38,12 @@
 <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">
 
+<% if (theme.image_viewer){ %>
+<%- partial('viewer') %>
+<% } %>
+
 <% if (theme.mathjax){ %>
-  <%- partial('mathjax') %>
+<%- partial('mathjax') %>
 <% } %>
 
 <script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
-  
-  

layout/_partial/post/valine.ejs

@@ -10,7 +10,7 @@
     new Valine({
         el: '#vcomments',
         notify: false,
-        verify: false,
+        verify: '<%- theme.leancloud.verify %>',
         app_id: '<%- theme.leancloud.app_id %>',
         app_key: '<%- theme.leancloud.app_key %>',
         path: window.location.pathname,

layout/_partial/viewer.ejs

@@ -0,0 +1,106 @@
+<!-- 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.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>

layout/categories.ejs

@@ -1,6 +1,17 @@
 <section class="outer">
   <% if (site.categories.length){ %>
     <h1 class="page-type-title"><%= __('categories') %></h1>
-    <%- list_categories({show_count: theme.show_count}) %>
+    <!-- <%- list_categories({show_count: theme.show_count}) %> -->
+    <ul class="category-list">
+      <% site.categories.sort('name').each(function(item){ %>
+        <% if(item.posts.length){ %> 
+          <a class="category-list-link" href="<%- config.root %><%- item.path %>" title="<%= item.name %>">
+            <li class="category-list-item">
+            <%= item.name %><i><%= item.posts.length %></i>
+            </li>
+          </a>
+        <% } %>
+      <% }); %>
+      </ul>
   <% } %>
 </section>

layout/layout.ejs

@@ -9,11 +9,7 @@
         <%- partial('_partial/totop') %>
       </div>
     </main>
-    <% if (theme.toc && is_post()){ %>
       <aside class="sidebar">
-      <% } else { %>
-      <aside class="sidebar">
-        <% } %>
         <%- partial('_partial/sidebar') %>
       </aside>
       <%- partial('_partial/modal') %>

source/css/_partial/categories.styl

@@ -25,16 +25,20 @@
       margin-right .5rem
       display inline-block
       vertical-align middle
-    &:hover
-      border: 1px solid darken(water,20%)
-      box-shadow:  0 3px 5px water
-      a
-        color: darken(water,30%);
-      &:before
-        color: darken(water,30%);
+    i 
+      font-style normal
+      margin-left 10px
+      color: darken(water,20%)
   a 
     display inline-block
     vertical-align middle
     text-decoration: none 
     color: body-color
+    &:hover
+      .category-list-item
+        border: 1px solid darken(water,20%)
+        box-shadow:  0 3px 5px water
+        color: darken(water,30%);
+      &:before
+        color: darken(water,30%);
     

source/css/_variables.styl

@@ -51,7 +51,7 @@ border-width    = 0.1rem
 border-color    = froth
 
 // Layout
-aside-width      = 7rem
+aside-width      = 8rem
 wrap-width       = 70rem
 years-width      = 6rem
 logo-size        = 4.2rem

source/js/ayer.js

@@ -176,30 +176,14 @@
 
   // Mobile nav
   var $content = $('.content'),
-    $sidebar = $('.sidebar'),
-    isMobileNavAnim = false,
-    mobileNavAnimDuration = 200;
-
-  var startMobileNavAnim = function () {
-    isMobileNavAnim = true;
-  };
-
-  var stopMobileNavAnim = function () {
-    setTimeout(function () {
-      isMobileNavAnim = false;
-    }, mobileNavAnimDuration);
-  };
+    $sidebar = $('.sidebar');
 
   $('.navbar-toggle').on('click', function () {
-    if (isMobileNavAnim) return;
-    startMobileNavAnim();
     $content.toggleClass('on');
     $sidebar.toggleClass('on');
-    stopMobileNavAnim();
   });
 
   $($content).on('click', function () {
-    if (isMobileNavAnim || !$content.hasClass('on')) return;
     $content.removeClass('on');
     $sidebar.removeClass('on');
   });