Image thumbnails in archive page

next-theme · Aug 8, 2020 · 7b91f8e · 7b91f8e · stevenjoezhang · Aug 8, 2020
1 parent 219adff
commit 7b91f8e
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 48 deletions.
diff --git a/layout/_macro/post-collapse.njk b/layout/_macro/post-collapse.njk
@@ -13,7 +13,6 @@
 
   <article itemscope itemtype="http://schema.org/Article">
     <header class="post-header">
-
       <div class="post-meta">
         <time itemprop="dateCreated"
               datetime="{{ moment(post.date).format() }}"
@@ -34,6 +33,7 @@
         {%- endif %}
       </div>
 
+      {{ post_gallery(post.photos) }}
     </header>
   </article>
 

diff --git a/layout/_macro/post.njk b/layout/_macro/post.njk
@@ -15,15 +15,7 @@
     </span>
 
     {# Gallery support #}
-    {%- if post.photos and post.photos.length %}
-      <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
-        {%- for photo in post.photos %}
-          <div class="post-gallery-image">
-            <img src="{{ url_for(photo) }}" itemprop="contentUrl">
-          </div>
-        {%- endfor %}
-      </div>
-    {%- endif %}
+    {{ post_gallery(post.photos) }}
 
     {%- if post.header !== false %}
       <header class="post-header">
@@ -240,7 +232,26 @@
 
         {{ partial('_partials/post/post-footer.njk', {}, {cache: theme.cache.enable}) }}
 
-        {{ post_nav(post) }}
+        {%- if theme.post_navigation and (post.prev or post.next) %}
+          {%- set prev = post.prev if theme.post_navigation === 'right' else post.next %}
+          {%- set next = post.next if theme.post_navigation === 'right' else post.prev %}
+          <div class="post-nav">
+            <div class="post-nav-item">
+              {%- if prev %}
+                <a href="{{ url_for(prev.path) }}" rel="prev" title="{{ prev.title }}">
+                  <i class="fa fa-chevron-left"></i> {{ prev.title }}
+                </a>
+              {%- endif %}
+            </div>
+            <div class="post-nav-item">
+              {%- if next %}
+                <a href="{{ url_for(next.path) }}" rel="next" title="{{ next.title }}">
+                  {{ next.title }} <i class="fa fa-chevron-right"></i>
+                </a>
+              {%- endif %}
+            </div>
+          </div>
+        {%- endif %}
       </footer>
     {% else %}
       <footer class="post-footer">

diff --git a/layout/_partials/post/post-reward.njk b/layout/_partials/post/post-reward.njk
@@ -7,11 +7,7 @@
 
     {%- for name, image in theme.reward %}
       {%- set builtin = ['wechatpay', 'alipay', 'paypal', 'bitcoin'] %}
-      {%- if builtin.includes(name) %}
-        {%- set translation = __('reward.' + name) %}
-      {% else %}
-        {%- set translation = name %}
-      {%- endif %}
+      {%- set translation = __('reward.' + name) if builtin.includes(name) else name %}
       <div>
         <img src="{{ url_for(image) }}" alt="{{ author }} {{ translation }}">
         <p>{{ translation }}</p>

diff --git a/layout/_partials/sidebar/site-overview.njk b/layout/_partials/sidebar/site-overview.njk
@@ -78,17 +78,9 @@
   <div class="links-of-author animated">
     {%- for name, link in theme.social %}
       <span class="links-of-author-item">
-      {%- set sidebarURL = link.split('||')[0] | trim %}
-      {%- if theme.social_icons.enable %}
-        {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' %}
-      {%- else %}
-        {%- set sidebarIcon = '' %}
-      {%- endif %}
-      {%- if theme.social_icons.enable and theme.social_icons.icons_only %}
-        {%- set sidebarText = '' %}
-      {%- else %}
-        {%- set sidebarText = name %}
-      {%- endif %}
+        {%- set sidebarURL = link.split('||')[0] | trim %}
+        {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' if theme.social_icons.enable else '' %}
+        {%- set sidebarText = '' if (theme.social_icons.enable and theme.social_icons.icons_only) else name %}
         {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' → ' + sidebarURL}) }}
       </span>
     {%- endfor %}

diff --git a/scripts/helpers/engine.js b/scripts/helpers/engine.js
@@ -27,6 +27,17 @@ hexo.extend.helper.register('next_js', function(file, pjax = false) {
   return `<script ${pjax ? 'data-pjax ' : ''}src="${src}"></script>`;
 });
 
+hexo.extend.helper.register('post_gallery', function(photos) {
+  if (!photos || !photos.length) return '';
+  const content = photos.map(photo => `
+    <div class="post-gallery-image">
+      <img src="${this.url_for(photo)}" itemprop="contentUrl">
+    </div>`).join('');
+  return `<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
+    ${content}
+    </div>`;
+});
+
 hexo.extend.helper.register('post_edit', function(src) {
   const { theme } = this;
   if (!theme.post_edit.enable) return '';
@@ -36,26 +47,6 @@ hexo.extend.helper.register('post_edit', function(src) {
   });
 });
 
-hexo.extend.helper.register('post_nav', function(post) {
-  const { theme } = this;
-  if (theme.post_navigation === false || (!post.prev && !post.next)) return '';
-  const prev = theme.post_navigation === 'right' ? post.prev : post.next;
-  const next = theme.post_navigation === 'right' ? post.next : post.prev;
-  const left = prev ? `
-    <a href="${this.url_for(prev.path)}" rel="prev" title="${prev.title}">
-      <i class="fa fa-chevron-left"></i> ${prev.title}
-    </a>` : '';
-  const right = next ? `
-    <a href="${this.url_for(next.path)}" rel="next" title="${next.title}">
-      ${next.title} <i class="fa fa-chevron-right"></i>
-    </a>` : '';
-  return `
-    <div class="post-nav">
-      <div class="post-nav-item">${left}</div>
-      <div class="post-nav-item">${right}</div>
-    </div>`;
-});
-
 hexo.extend.helper.register('gitalk_md5', function(path) {
   const str = this.url_for(path);
   return crypto.createHash('md5').update(str).digest('hex');

diff --git a/source/css/_common/components/post/post-gallery.styl b/source/css/_common/components/post/post-gallery.styl
@@ -1,6 +1,5 @@
 .post-gallery {
   display: flex;
-  margin-bottom: 60px;
   min-height: 200px;
 
   .post-gallery-image {
@@ -22,3 +21,11 @@
     }
   }
 }
+
+.posts-expand .post-gallery {
+  margin-bottom: 60px;
+}
+
+.posts-collapse .post-gallery {
+  margin: 15px 0;
+}