Merge pull request #36 from yanm1ng/develop

Version 2.0
yanm1ng · Sep 22, 2017 · cfea465 · cfea465
2 parents f2746e5 + 819d298
commit cfea465
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@
 * Share Qrcode
 * SEO
 * Immersive Status Bar
+* Article Catalog
 
 ## Install
 
@@ -36,19 +37,19 @@
    cp -R themes/vexo/_source/* source/
    ```
 
-2. Modify `_config.yml` with your own info. look like this
+2. Update project `_config.yml` theme config, look like this
 
    ```
    themes: vexo
    ```
 
    Here theme's name must same as the theme folder name.
 
-3. Or you can copy my theme `_config.yml` into you hexo blog directory , replace default `_config.yml`
+3. Modify theme `themes/vexo/_config.yml` with your own info.
 
 4. That's all , hope you will like :)
 
-## Update
+## Update Version
 
 ```
 cd themes/vexo
@@ -63,16 +64,20 @@ The **front-matter** of a post looks like that:
 ---
 title: "Hello World"
 date: 2016-06-10 23:00
-banner: http://your-banner-image-link.jpg
+banner: your-banner-link.jpg
 tags:
  - Movies
  - Life
 ---
 ```
 
-Add to top of your article markdown file. 
+Add this to the top of your article markdown file. 
 
 ## Change Log  
+**2017-09-21**
+* Added article catalog
+* Fixed bugs
+
 **2017-08-08**
 * Added article custom banner
 * Fixed gitment error

diff --git a/_config.yml b/_config.yml
@@ -16,6 +16,12 @@ menu:
 highlight:
   tomorrow
 
+# catalog
+catalog: true
+
+# donate
+donate: true
+
 # gitment
 gitment_owner: yanm1ng
 gitment_repo: yanm1ng.github.io
@@ -30,4 +36,10 @@ baidu_id:
 about: 
   banner: http://file.muyutech.com/about.jpg
   avatar: https://avatars3.githubusercontent.com/u/16443628?v=3&s=460
-  description: The end is always near.
+  description: The end is always near.
+  # Links
+  weibo_username: yanm1ng
+  twitter_username: yanm1ng
+  github_username: yanm1ng
+  zhihu_username: yummy1121
+  douban_username: yanm1ng
diff --git a/layout/_partial/catalog.ejs b/layout/_partial/catalog.ejs
@@ -0,0 +1,10 @@
+<aside class="catalog-container">
+  <div class="toc-main">
+    <strong class="toc-title">Catalog</strong>
+    <% if (toc(page.content) !== ""){ %>
+      <%- toc(page.content, { "class": "toc-nav", "list_number": false }) %>
+    <% } else { %>
+      <ol class="nav"><%= __('none') %></ol>
+    <% } %>
+  </div>
+</aside>
diff --git a/layout/about.ejs b/layout/about.ejs
@@ -6,40 +6,40 @@
   <h3><%- config.author %></h3>
   <p class="discription"><%- theme.about.description %></p>
   <section class="share-icons">
-    <% if (config.weibo_username) { %>
-      <a class="icon-weibo" href="http://weibo.com/<%- config.weibo_username %>" target="_blank">
+    <% if (theme.about.weibo_username) { %>
+      <a class="icon-weibo" href="http://weibo.com/<%- theme.about.weibo_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-weibo fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.twitter_username) { %>
-      <a class="icon-twitter" href="https://twitter.com/<%- config.twitter_username %>" target="_blank">
+    <% if (theme.about.twitter_username) { %>
+      <a class="icon-twitter" href="https://twitter.com/<%- theme.about.twitter_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.github_username) { %>
-      <a class="icon-github" href="https://github.com/<%- config.github_username %>" target="_blank">
+    <% if (theme.about.github_username) { %>
+      <a class="icon-github" href="https://github.com/<%- theme.about.github_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-github fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.zhihu_username) { %>
-      <a class="icon-zhihu" href="https://www.zhihu.com/people/<%- config.zhihu_username %>" target="_blank">
+    <% if (theme.about.zhihu_username) { %>
+      <a class="icon-zhihu" href="https://www.zhihu.com/people/<%- theme.about.zhihu_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-stack-1x fa-inverse">知</i>
         </span>
       </a>
     <% } %>
-    <% if (config.douban_username) { %>
-        <a class="icon-douban" href="https://www.douban.com/people/<%- config.douban_username %>" target="_blank">
+    <% if (theme.about.douban_username) { %>
+        <a class="icon-douban" href="https://www.douban.com/people/<%- theme.about.douban_username %>" target="_blank">
             <span class="fa-stack fa-lg">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-stack-1x fa-inverse">豆</i>

diff --git a/layout/page.ejs b/layout/page.ejs
@@ -5,44 +5,61 @@
     <a href="javascript:;"></a>
   </div>
 </div>
-<main class="app-body">
+<main class="app-body flex-box">
+  <!-- Article START -->
   <article class="post-article">
     <section class="markdown-content"><%- page.content %></section>
+    <!-- Tags START -->
     <% if (page.tags && page.tags.length) { %>
       <div class="tags">
         <span>Tags:</span>
         <%- partial('_partial/tag', { tags: page.tags }) %>
       </div>
     <% } %>
-    <div class="money-like">
-      <div class="reward-btn">
-        赏
-        <span class="money-code">
-          <span class="alipay-code">
-            <div class="code-image"></div>
-            <b>使用支付宝打赏</b>
+    <!-- Tags END -->
+    <!-- 打赏 START -->
+    <% if (theme.donate) { %>
+      <div class="money-like">
+        <div class="reward-btn">
+          赏
+          <span class="money-code">
+            <span class="alipay-code">
+              <div class="code-image"></div>
+              <b>使用支付宝打赏</b>
+            </span>
+            <span class="wechat-code">
+              <div class="code-image"></div>
+              <b>使用微信打赏</b>
+            </span>
           </span>
-          <span class="wechat-code">
-            <div class="code-image"></div>
-            <b>使用微信打赏</b>
-          </span>
-        </span>
+        </div>
+        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
       </div>
-      <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
-    </div>
+    <% } %>
+    <!-- 打赏 END -->
+    <!-- 二维码 START -->
     <div class="qrcode">
       <canvas id="share-qrcode"></canvas>
       <p class="notice">扫描二维码，分享此文章</p>
     </div>
+    <!-- 二维码 END -->
     <% if (theme.gitment_owner) { %>
+      <!-- Gitment START -->
       <div id="comments"></div>
+      <!-- Gitment END -->
     <% } else { %>
-      <!-- UY BEGIN -->
+      <!-- UY START -->
       <div id="uyan_frame"></div>
       <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
       <!-- UY END -->
     <% } %>
   </article>
+  <!-- Article END -->
+  <!-- Catalog START -->
+  <% if (theme.catalog) { %>
+    <%- partial('_partial/catalog') %>
+  <% } %>
+  <!-- Catalog END -->
 </main>
 
 <script>
@@ -60,32 +77,37 @@
 
      // error image
     $(".markdown-content img").on('error', function() {
-      $(this).attr('src', 'http://file.muyutech.com/error-img.png') 
+      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
+      $(this).css({
+        'cursor': 'default'
+      })
     })
 
     // zoom image
     $(".markdown-content img").on('click', function() {
       var src = $(this).attr('src')
-      var imageW = $(this).width()
-      var imageH = $(this).height()
-      
-      var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
-      zoom = zoom < 1 ? 1 : zoom
-      zoom = zoom > 2 ? 2 : zoom
-      var transY = (($(window).height() - imageH) / 2).toFixed(2)
+      if (src !== 'http://file.muyutech.com/error-img.png') {
+        var imageW = $(this).width()
+        var imageH = $(this).height()
+        
+        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
+        zoom = zoom < 1 ? 1 : zoom
+        zoom = zoom > 2 ? 2 : zoom
+        var transY = (($(window).height() - imageH) / 2).toFixed(2)
 
-      $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
-      $('.image-view-wrap').addClass('wrap-active')
-      $('.image-view-wrap img').css({
-        'width': `${imageW}`,
-        'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
-      })
-      $('html').css('overflow', 'hidden')
+        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
+        $('.image-view-wrap').addClass('wrap-active')
+        $('.image-view-wrap img').css({
+          'width': `${imageW}`,
+          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
+        })
+        $('html').css('overflow', 'hidden')
 
-      $('.image-view-wrap').on('click', function() {
-        $(this).remove()
-        $('html').attr('style', '')
-      })
+        $('.image-view-wrap').on('click', function() {
+          $(this).remove()
+          $('html').attr('style', '')
+        })
+      }
     })
 
     // qrcode
@@ -96,7 +118,7 @@
 
     // gitment
     var gitmentConfig = "<%= theme['gitment_owner'] %>";
-    if (gitmentConfig != "undefined") {
+    if (gitmentConfig !== 'undefined') {
       var gitment = new Gitment({
         id: "<%- page.title %>",
         owner: "<%= theme['gitment_owner'] %>",

diff --git a/source/css/_config.styl b/source/css/_config.styl
@@ -11,10 +11,11 @@ color-shadow = #e3e3e3
 logo-url = "images/logo.png"
 menu-url = "images/menu.png"
 arrow-url = "images/top.png"
+catalog-url = "images/catalog.png"
 alipay-url = "images/alipay.jpg"
 wechat-url = "images/wechat.jpg"
 avatar-url = "images/avatar.png"
 escheres-url = "images/escheres.png"
 
 m-mobile = "screen and (max-width: 480px)"
-m-pad = "screen and (max-width: 720px)"
+m-pad = "screen and (max-width: 960px)"
diff --git a/source/css/_partial/catalog.styl b/source/css/_partial/catalog.styl
@@ -0,0 +1,38 @@
+.catalog-container
+  display: block
+  margin-left: 20px
+  flex-basis: 280px
+  -webkit-flex-basis: 280px
+  flex-shrink: 0
+  -webkit-flex-shrink: 0
+  @media m-pad
+    display: none
+  .fixed-toc
+    position: fixed
+    top: 90px
+  .toc-main
+    padding-left: 20px
+    border-left: 1px solid color-border
+    width: 280px
+    box-sizing: border-box
+    .toc-title
+      font-size: 1.2em
+      position: relative
+      padding-left: 28px
+      &:before
+        content: ''
+        position: absolute
+        width: 22px
+        height: 22px
+        left: 0
+        top: 2px
+        background: url(catalog-url) no-repeat
+        background-size: contain
+    .toc-nav
+      padding: 0
+      margin-top: 1em
+    ol
+      padding-left: 20px
+    li
+      list-style-type: none
+      line-height: 1.5
diff --git a/source/css/images/catalog.png b/source/css/images/catalog.png