Fixes and enhancements. [11]

_config.yml

@@ -171,6 +171,9 @@ toc:
   # Automatically add list number to toc.
   number: true
 
+  # If true, all words will placed on next lines if header width longer then sidebar width.
+  wrap: false
+
 
 # Creative Commons 4.0 International License.
 # http://creativecommons.org/
@@ -245,6 +248,7 @@ post_wordcount:
   item_text: true
   wordcount: false
   min2read: false
+  separated_meta: true
 
 # Wechat Subscriber
 #wechat_subscriber:
@@ -400,6 +404,13 @@ vkontakte_api:
   comments:     true
   num_of_posts: 10
 
+# Star rating support to each article.
+# To get your ID visit https://widgetpack.com
+rating: 
+  enable: false
+  id:     #<app_id>
+  color:  fc6423
+
 
 # Show number of visitors to each article.
 # You can visit https://leancloud.cn get AppID and AppKey.

layout/_layout.swig

@@ -67,14 +67,17 @@
   {% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
   {% include scheme_script %}
 
-  {% block script_extra %}{% endblock %}
+  {% block script_extra %}
+    {% include '_scripts/pages/post-details.swig' %}
+  {% endblock %}
 
   {% include '_scripts/boostrap.swig' %}
 
   {% include '_third-party/comments/index.swig' %}
   {% include '_third-party/search/index.swig' %}
   {% include '_third-party/analytics/lean-analytics.swig' %}
   {% include '_third-party/seo/baidu-push.swig' %}
+  {% include '_third-party/rating.swig' %}
   {% include '_third-party/mathjax.swig' %}
   {% include '_third-party/scroll-cookie.swig' %}
   {% include '_third-party/exturl.swig' %}

layout/_macro/post.swig

@@ -207,7 +207,9 @@
           {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
             <div class="post-wordcount">
               {% if theme.post_wordcount.wordcount %}
-                <span class="post-meta-divider">|</span>
+                {% if not theme.post_wordcount.separated_meta %}
+                  <span class="post-meta-divider">|</span>
+                {% endif %}
                 <span class="post-meta-item-icon">
                   <i class="fa fa-file-word-o"></i>
                 </span>
@@ -337,7 +339,14 @@
         </div>
       {% endif %}
 
-      {% if not is_index %}
+      {% if not is_index and (theme.rating.enable) or (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) %}
+      <div class="post-widgets">
+        {% if theme.rating.enable %}
+          <div class="wp_rating">
+            <div id="wpac-rating"></div>
+          </div>
+        {% endif %}
+
         {% if (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) %}
           <div class="social-like">
             {% if theme.vkontakte_api.enable and theme.vkontakte_api.like %}
@@ -353,6 +362,7 @@
             {% endif %}
           </div>
         {% endif %}
+      </div>
       {% endif %}
 
       {% if not is_index and (post.prev or post.next) %}

layout/_macro/sidebar.swig

@@ -10,7 +10,7 @@
   <aside id="sidebar" class="sidebar">
     <div class="sidebar-inner">
 
-      {% set display_toc = is_post and theme.toc.enable %}
+      {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}
 
       {% if display_toc and toc(page.content).length > 1 %}
         <ul class="sidebar-nav motion-element">

layout/_third-party/rating.swig

@@ -0,0 +1,18 @@
+{% if theme.rating.enable and (not is_home() and is_post()) %}
+  <script type="text/javascript">
+  wpac_init = window.wpac_init || [];
+  wpac_init.push({widget: 'Rating', id: {{ theme.rating.id }},
+    el: 'wpac-rating',
+    color: '{{ theme.rating.color }}'
+  });
+  (function() {
+    if ('WIDGETPACK_LOADED' in window) return;
+    WIDGETPACK_LOADED = true;
+    var mc = document.createElement('script');
+    mc.type = 'text/javascript';
+    mc.async = true;
+    mc.src = '//embed.widgetpack.com/widget.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
+  })();
+  </script>
+{% endif %}

layout/page.swig

@@ -13,6 +13,8 @@
   #}{% endif %}{#
 #}{% endblock %}
 
+{% block page_class %}page-post-detail{% endblock %}
+
 {% block content %}
 
   <div id="posts" class="posts-expand">

scripts/tags/lazy-image.js

@@ -0,0 +1,26 @@
+/* global hexo */
+// Usage: {% lazyimage /path/to/image, alt, title %}
+// Alias: {% li /path/to/image, alt, title %}
+
+function lazyImage(args) {
+  args = args.join(' ').split(',');
+  var src = args[0];
+  var alt = args[1] || '';
+  var title = args[2] || '';
+
+  if (!src) {
+    hexo.log.warn('Image src can NOT be empty');
+  }
+  alt = alt.trim();
+  title = title.trim();
+
+  var image = ['<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="/images/loading.gif" data-original="' + src + '" class="full-image"'];
+  alt.length > 0 && image.push('alt="' + alt + '"');
+  title.length > 0 && image.push('title="' + title + '"');
+  image.push('/><meta itemprop="width" content="auto"><meta itemprop="height" content="auto"></span>');
+
+  return image.join(' ');
+}
+
+hexo.extend.tag.register('lazyimage', lazyImage);
+hexo.extend.tag.register('li', lazyImage);

source/css/_common/components/post/post-collapse.styl

@@ -35,7 +35,7 @@
     position: relative;
     margin: 60px 0;
 
-    h2 { margin-left: 20px; }
+    h1, h2 { margin-left: 20px; }
 
     small { color: $grey; margin-left: 5px; }
 

source/css/_common/components/post/post-meta.styl

@@ -47,25 +47,3 @@
 .posts-expand .post-comments-count {
   +mobile() { display: none; }
 }
-.social-like {
-  font-size: 14px;
-  height: 20px;
-  text-align: center;
-  border-top: 1px solid #eee;
-  padding-top: 9px;
-  margin-top: 45px;
-  display: flex;
-  justify-content: center;
-}
-
-.vk_like {
-  width: 85px;
-  height: 21px;
-  padding-top: 7px;
-  align-self: center;
-}
-
-.fb_like {
-  height: 30px;
-  align-self: center;
-}

source/css/_common/components/post/post-widgets.styl

@@ -0,0 +1,36 @@
+.post-widgets {
+  border-top: 1px solid #eee;
+  padding-top: 9px;
+  margin-top: 45px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.wp_rating {
+  height: 20px;
+  margin-right: 10px;
+  text-align: center;
+  line-height: 20px;
+  padding-top: 6px;
+}
+
+.social-like {
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.vk_like {
+  width: 85px;
+  height: 21px;
+  padding-top: 7px;
+  align-self: center;
+}
+
+.fb_like {
+  height: 30px;
+  align-self: center;
+}

source/css/_common/components/post/post-wordcount.styl

@@ -0,0 +1,3 @@
+.post-wordcount {
+  display: inline-block;
+}

source/css/_common/components/post/post.styl

@@ -44,4 +44,6 @@
 @import "post-eof";
 @import "post-gallery";
 @import "post-reward" if hexo-config('alipay') or hexo-config('wechatpay');
-@import "post-copyright.styl" if hexo-config('post_copyright.enable')
+@import "post-copyright" if hexo-config('post_copyright.enable');
+@import "post-wordcount" if !hexo-config('post_wordcount.separated_meta');
+@import "post-widgets" if (hexo-config('facebook_sdk.enable') and hexo-config('facebook_sdk.like_button')) or (hexo-config('vkontakte_api.enable') and hexo-config('vkontakte_api.like')) or hexo-config('rating.enable');

source/css/_common/components/sidebar/sidebar-toc.styl

@@ -33,7 +33,7 @@
 .post-toc .nav-item {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: nowrap if !hexo-config('toc.wrap');
   line-height: 1.8;
 }
 

source/js/src/utils.js

@@ -14,7 +14,8 @@ NexT.utils = NexT.$u = {
         var $imageWrapLink = $image.parent('a');
 
         if ($imageWrapLink.size() < 1) {
-          $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
+	        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
+          $imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
         }
 
         $imageWrapLink.addClass('fancybox fancybox.image');
@@ -39,8 +40,9 @@ NexT.utils = NexT.$u = {
 
   lazyLoadPostsImages: function () {
     $('#posts').find('img').lazyload({
-      placeholder: '/images/loading.gif',
-      effect: 'fadeIn'
+      //placeholder: '/images/loading.gif',
+      effect: 'fadeIn',
+      threshold : 0
     });
   },