Using Template literals (Template strings) (theme-next#557)

* Format code * Update lean-analytics.swig * Update note.js
tongluyang · Jan 5, 2019 · 7a58fff · 7a58fff
1 parent 48f1e67
commit 7a58fff
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 61 deletions.
diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
@@ -7,7 +7,7 @@
     {% set post_class = post_class + ' ' + post_extra_class | default('') %}
   {% endif %}
   {% if post.sticky > 0 %}
-    {% set post_class = post_class + ' ' + 'post-sticky' %}
+    {% set post_class = post_class + ' post-sticky' %}
   {% endif %}
 
   {% if theme.reading_progress.enable && not is_index %}

diff --git a/layout/_partials/header/menu.swig b/layout/_partials/header/menu.swig
@@ -31,7 +31,7 @@
             <a href="javascript:;" class="popup-trigger">
           {% endif %}
             {% if theme.menu_settings.icons %}
-              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />{#
+              <i class="menu-item-icon fa fa-search fa-fw"></i> <br/>{#
           #}{% endif %}{#
           #}{{ __('menu.search') }}{#
         #}</a>

diff --git a/layout/_third-party/analytics/lean-analytics.swig b/layout/_third-party/analytics/lean-analytics.swig
@@ -22,8 +22,8 @@
                 $element.find('.leancloud-visitors-count').text(counter.time + 1);
               })
             {% endif %}
-              .fail(function({ responseJSON }) {
-                console.log('Failed to save Visitor num, with error message: ' + responseJSON.error);
+              .fail(function ({ responseJSON }) {
+                console.log(`Failed to save Visitor num, with error message: ${responseJSON.error}`);
               })
           } else {
             {% if theme.leancloud_visitors.security %}
@@ -42,9 +42,9 @@
             {% endif %}
           }
         })
-      .fail(function({ responseJSON }) {
-        console.log('LeanCloud Counter Error: ' + responseJSON.code + ' ' + responseJSON.error);
-      });
+        .fail(function ({ responseJSON }) {
+          console.log(`LeanCloud Counter Error: ${responseJSON.code} ${responseJSON.error}`);
+        });
     }
     {% else %}
     function showTime(Counter) {
@@ -81,8 +81,8 @@
             }
           }
         })
-        .fail(function({ responseJSON }) {
-          console.log('LeanCloud Counter Error: ' + responseJSON.code + ' ' + responseJSON.error);
+        .fail(function ({ responseJSON }) {
+          console.log(`LeanCloud Counter Error: ${responseJSON.code} ${responseJSON.error}`);
         });
     }
     {% endif %}

diff --git a/scripts/filters/after_post_render/exturl.js b/scripts/filters/after_post_render/exturl.js
@@ -31,12 +31,12 @@ hexo.extend.filter.register('after_post_render', function(data) {
     if (data.hostname === siteHost) return;
 
     // If title atribute filled, set it as title; if not, set url as title.
-    var title = $(this).attr('title') ? $(this).attr('title') : href;
+    var title = $(this).attr('title') || href;
 
     var encoded = new Buffer(href).toString('base64');
 
     $(this).replaceWith(function() {
-      return $('<span class="exturl" data-url="' + encoded + '" title="' + title + '">' + $(this).html() + '<i class="fa fa-external-link"></i></span>');
+      return $(`<span class="exturl" data-url="${encoded}" title="${title}">${$(this).html()}<i class="fa fa-external-link"></i></span>`);
     });
 
   });

diff --git a/scripts/tags/button.js b/scripts/tags/button.js
@@ -21,10 +21,10 @@ function postButton(args) {
   icon = icon.trim();
   title = title.trim();
 
-  var result = ['<a class="btn" href="' + url + '"'];
-  title.length > 0 && result.push(' title="' + title + '"');
+  var result = [`<a class="btn" href="${url}"`];
+  title.length > 0 && result.push(` title="${title}"`);
   result.push('>');
-  icon.length > 0 && result.push('<i class="fa fa-' + icon + '"></i>');
+  icon.length > 0 && result.push(`<i class="fa fa-${icon}"></i>`);
   text.length > 0 && result.push(text);
   result.push('</a>');
 

diff --git a/scripts/tags/full-image.js b/scripts/tags/full-image.js
@@ -19,10 +19,10 @@ function fullImage(args) {
     hexo.log.warn('Image src can NOT be empty');
   }
 
-  var image = ['<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="' + src + '" class="full-image"'];
-  alt.length > 0 && image.push('alt="' + alt.trim() + '"');
-  title.length > 0 && image.push('title="' + title.trim() + '"');
-  width.length > 0 && image.push('style="max-width: none; width:' + width + ';"');
+  var image = [`<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="${src}" class="full-image"`];
+  alt.length > 0 && image.push(`alt="${alt.trim()}"`);
+  title.length > 0 && image.push(`title="${title.trim()}"`);
+  width.length > 0 && image.push(`style="max-width: none; width:${width};"`);
   image.push('/><meta itemprop="width" content="auto"/><meta itemprop="height" content="auto"/></span>');
 
   return image.join(' ');

diff --git a/scripts/tags/group-pictures.js b/scripts/tags/group-pictures.js
@@ -123,22 +123,20 @@ var templates = {
       rowHTML += this.getRowHTML(rows[i]);
     }
 
-    return '<div class="group-picture-container">' + rowHTML + '</div>';
+    return `<div class="group-picture-container">${rowHTML}</div>`;
   },
 
   getRowHTML: function(pictures) {
-    return (
-      '<div class="group-picture-row">' + this.getColumnHTML(pictures) + '</div>'
-    );
+    return `<div class="group-picture-row">${this.getColumnHTML(pictures)}</div>`;
   },
 
   getColumnHTML: function(pictures) {
     var columns = [];
     var columnWidth = 100 / pictures.length;
-    var columnStyle = ' style="width: ' + columnWidth + '%;"';
+    var columnStyle = `style="width: ${columnWidth}%;"`;
 
     for (var i = 0; i < pictures.length; i++) {
-      columns.push('<div class="group-picture-column" ' + columnStyle + '>' + pictures[i] + '</div>');
+      columns.push(`<div class="group-picture-column" ${columnStyle}>${pictures[i]}</div>`);
     }
     return columns.join('');
   }
@@ -153,7 +151,7 @@ function groupPicture(args, content) {
 
   var pictures = content.match(/<img[\s\S]*?>/g);
 
-  return '<div class="group-picture">' + templates.dispatch(pictures, group, layout) + '</div>';
+  return `<div class="group-picture">${templates.dispatch(pictures, group, layout)}</div>`;
 }
 
 hexo.extend.tag.register('grouppicture', groupPicture, {ends: true});

diff --git a/scripts/tags/label.js b/scripts/tags/label.js
@@ -13,7 +13,7 @@ function postLabel(args) {
 
   !text && hexo.log.warn('Label text must be defined!');
 
-  return '<span class="label ' + classes.trim() + '">' + text + '</span>';
+  return `<span class="label ${classes.trim()}">${text}</span>`;
 }
 
 hexo.extend.tag.register('label', postLabel, { ends: false });
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
@@ -7,9 +7,9 @@
 'use strict';
 
 function postNote(args, content) {
-  return '<div class="note ' + args.join(' ') + '">'
-       + hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
-       + '</div>';
+  return `<div class="note ${args.join(' ')}">
+            ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+          </div>`;
 }
 
 hexo.extend.tag.register('note', postNote, {ends: true});

diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
@@ -41,17 +41,17 @@ function postTabs(args, content) {
     ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId);
 
     var isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : '';
-    tabIcon.length > 0 && (tabIcon = '<i class="fa fa-' + tabIcon.trim() + '"' + isOnlyicon + '></i>');
+    tabIcon.length > 0 && (tabIcon = `<i class="fa fa-${tabIcon.trim()}"${isOnlyicon}></i>`);
 
     var isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '';
-    tabNav += '<li class="tab' + isActive + '"><a href="#' + tabHref + '">' + tabIcon + tabCaption.trim() + '</a></li>';
-    tabContent += '<div class="tab-pane' + isActive + '" id="' + tabHref + '">' + postContent + '</div>';
+    tabNav += `<li class="tab${isActive}"><a href="#${tabHref}">${tabIcon + tabCaption.trim()}</a></li>`;
+    tabContent += `<div class="tab-pane${isActive}" id="${tabHref}">${postContent}</div>`;
   }
 
-  tabNav = '<ul class="nav-tabs">' + tabNav + '</ul>';
-  tabContent = '<div class="tab-content">' + tabContent + '</div>';
+  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`;
+  tabContent = `<div class="tab-content">${tabContent}</div>`;
 
-  return '<div class="tabs" id="' + tabName.toLowerCase().split(' ').join('-') + '">' + tabNav + tabContent + '</div>';
+  return `<div class="tabs" id="${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`;
 }
 
 hexo.extend.tag.register('tabs', postTabs, {ends: true});

diff --git a/source/js/src/algolia-search.js b/source/js/src/algolia-search.js
@@ -37,18 +37,12 @@ $(document).ready(function() {
       templates  : {
         item: function(data) {
           var link = data.permalink ? data.permalink : CONFIG.root + data.path;
-          return (
-            '<a href="' + link + '" class="algolia-hit-item-link">'
-          + data._highlightResult.title.value
-          + '</a>'
-          );
+          return `<a href="${link}" class="algolia-hit-item-link">${data._highlightResult.title.value}</a>`;
         },
         empty: function(data) {
-          return (
-            '<div id="algolia-hits-empty">'
-          + algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query)
-          + '</div>'
-          );
+          return `<div id="algolia-hits-empty">
+              ${algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query)}
+            </div>`;
         }
       },
       cssClasses: {
@@ -63,13 +57,11 @@ $(document).ready(function() {
           var stats = algoliaSettings.labels.hits_stats
             .replace(/\$\{hits}/, data.nbHits)
             .replace(/\$\{time}/, data.processingTimeMS);
-          return (
-            stats
-            + '<span class="algolia-powered">'
-            + '  <img src="' + CONFIG.root + 'images/algolia_logo.svg" alt="Algolia" />'
-            + '</span>'
-            + '<hr />'
-          );
+          return `${stats}
+            <span class="algolia-powered">
+              <img src="${CONFIG.root}images/algolia_logo.svg" alt="Algolia"/>
+            </span>
+            <hr/>`;
         }
       }
     }),

diff --git a/source/js/src/scrollspy.js b/source/js/src/scrollspy.js
@@ -119,9 +119,7 @@
 
     this.clear();
 
-    var selector = this.selector
-      + '[data-target="' + target + '"],'
-      + this.selector + '[href="' + target + '"]';
+    var selector = `${this.selector}[data-target="${target}"],${this.selector}[href="${target}"]`;
 
     var active = $(selector)
       .parents('li')

diff --git a/source/js/src/utils.js b/source/js/src/utils.js
@@ -16,13 +16,13 @@ NexT.utils = NexT.$u = {
 
         if ($imageWrapLink.length < 1) {
           var imageLink = $image.attr('data-original') ? this.getAttribute('data-original') : this.getAttribute('src');
-          $imageWrapLink = $image.wrap('<a data-fancybox="group" href="' + imageLink + '"></a>').parent('a');
+          $imageWrapLink = $image.wrap(`<a data-fancybox="group" href="${imageLink}"></a>`).parent('a');
           $imageWrapLink.addClass('fancybox fancybox.image');
           $imageWrapLink.attr('rel', 'group');
         }
 
         if (imageTitle) {
-          $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
+          $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
 
           //make sure img title tag will show correctly in fancybox
           $imageWrapLink.attr('title', imageTitle);
@@ -57,7 +57,7 @@ NexT.utils = NexT.$u = {
       $(window).bind('hashchange', function() {
         var tHash = location.hash;
         if (tHash !== '' && !tHash.match(/%\S{2}/)) {
-          $(tNav + 'li:has(a[href="' + tHash + '"])').addClass('active').siblings().removeClass('active');
+          $(`${tNav}li:has(a[href="${tHash}"])`).addClass('active').siblings().removeClass('active');
           $(tHash).addClass('active').siblings().removeClass('active');
         }
       }).trigger('hashchange');
@@ -256,7 +256,7 @@ NexT.utils = NexT.$u = {
   },
 
   getScrollbarWidth: function() {
-    var $div = $('<div />').addClass('scrollbar-measure').prependTo('body');
+    var $div = $('<div/>').addClass('scrollbar-measure').prependTo('body');
     var div = $div[0];
     var scrollbarWidth = div.offsetWidth - div.clientWidth;
     $div.remove();
@@ -317,10 +317,10 @@ $(document).ready(function() {
     // Initialize Sidebar & TOC Width.
     var scrollbarWidth = NexT.utils.getScrollbarWidth();
     if ($('.site-overview-wrap').height() > (document.body.clientHeight - NexT.utils.getSidebarSchemePadding())) {
-      $('.site-overview').css('width', 'calc(100% + ' + scrollbarWidth + 'px)');
+      $('.site-overview').css('width', `calc(100% + ${scrollbarWidth}px)`);
     }
     if ($('.post-toc-wrap').height() > (document.body.clientHeight - NexT.utils.getSidebarSchemePadding())) {
-      $('.post-toc').css('width', 'calc(100% + ' + scrollbarWidth + 'px)');
+      $('.post-toc').css('width', `calc(100% + ${scrollbarWidth}px)`);
     }
 
     // Initialize Sidebar & TOC Height.