feat: valine comment verify

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: https://pic.downk.cc/item/5e1c70bc2fb38b8c3c5b0a2f.png

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 沈宇
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,6 @@
 <p align="center"><a href="https://shen-yu.gitee.io" target="_blank" rel="noopener noreferrer"><img width="100" src="logo.png" alt="ayer logo"></a></p>
 
-<h3 align="center">一个干净且优雅的 Hexo 主题</h3>
+<h3 align="center">一个安静且优雅的 Hexo 主题</h3>
 
 <p align="center">
   <a href="https://travis-ci.org/Shen-Yu/hexo-theme-ayer?branch=master" target="_blank" rel="noopener noreferrer">
@@ -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.2-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">
@@ -33,6 +33,8 @@
 
 ### [中文说明](https://shen-yu.gitee.io/2019/ayer/)
 
+### [国内镜像](https://gitee.com/shen-yu/hexo-theme-ayer)
+
 ![Screenshot](screenshots/hexo-theme-ayer.png)
 
 ### Install
@@ -58,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
@@ -100,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
@@ -220,6 +225,21 @@ pageFooter: true
   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save
   ```
+### Categories
+``` bash
+  hexo new page categories
+```
+Then paste following codes to file: _posts/categories/index.md
+``` md
+---
+title: categories
+type: categories
+layout: "categories"
+---
+```
+
+### Tags
+Same as categories.
 
 ### Post poster
 
@@ -268,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)
+<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>.
-<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>.

_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') %>
+<%- js('/js/tocbot.min') %>
-  <script>
+<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/archive.styl

@@ -46,7 +46,7 @@
     padding-left 3rem
     .archive-article-title
       text-decoration: none
-      font-size 1.5rem
+      font-size 1.8rem
 
 .archive-article-footer
   margin-top: 1.5rem

source/css/_partial/article.styl

@@ -32,7 +32,7 @@
   @extend $block-caption
   &::before
     content '\eaf2'
-    margin-right .5rem
+    margin-right .15rem
     font-family remixicon
     opacity .5
 
@@ -42,7 +42,7 @@
   &:before
     content "\efde"
     font-family remixicon
-    margin-right .5rem
+    margin-right .15rem
     opacity 0.6
   .article-category-link
     @extend $block-caption

source/css/_partial/categories.styl

@@ -4,10 +4,41 @@
   list-unstyled()
   margin-right -.5rem
   margin-left -.5rem
-  > .category-list-item
+  .category-list-item
-    display inline-block
+    margin: 10px 10px;
-    padding .5rem 1rem
+    padding: 0 14px;
+    display: inline-block;
+    text-align: center;
+    height: 38px;
+    min-width: 80px;
+    line-height: 38px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    border-radius: 5px;
+    word-wrap: break-word;
+    cursor: pointer;
+    box-shadow: 0px 3px 5px rgba(0,0,0,0.08);
+    border: 1px solid #e7e7eb
     &:before
       content "\efde"
       font-family remixicon
       margin-right .5rem
+      display inline-block
+      vertical-align middle
+    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/_partial/tag.styl

@@ -12,3 +12,21 @@
       content "\eec3"
       font-family remixicon
       margin-right .5rem
+      display inline-block
+      vertical-align middle
+      color: tag-color
+    .tag-list-link
+      display inline-block
+      vertical-align middle
+      text-decoration: none
+      height 30px
+      line-height 30px
+      padding: 0 15px
+      font-size: 1.5rem
+      border-radius: 15px
+      background-color tag-color
+      color white
+      box-shadow: 0 3px 5px rgba(0,0,0,0.12)
+      transition: .2s
+      &:hover
+        transform: scale(1.1)

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'),
+    $sidebar = $('.sidebar');
-    isMobileNavAnim = false,
-    mobileNavAnimDuration = 200;
-
-  var startMobileNavAnim = function () {
-    isMobileNavAnim = true;
-  };
-
-  var stopMobileNavAnim = function () {
-    setTimeout(function () {
-      isMobileNavAnim = false;
-    }, mobileNavAnimDuration);
-  };
 
   $('.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');
   });