From 24dca41afa2bca3adc4721715a69f7a0c3946e2b Mon Sep 17 00:00:00 2001
From: FarseaSH <yy_shao@outlook.com>
Date: Thu, 2 Sep 2021 21:09:09 +0800
Subject: [PATCH] add pictures style

---
 archetypes/moments.md         |  8 ++---
 layouts/partials/pic_set.html | 11 ++++--
 layouts/partials/row.html     | 68 ++++++++++++++++++++++-------------
 static/css/style.css          |  4 +--
 4 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/archetypes/moments.md b/archetypes/moments.md
index 783c538..100736a 100644
--- a/archetypes/moments.md
+++ b/archetypes/moments.md
@@ -18,14 +18,10 @@ tags:
 
 # 附加信息（选填1项或者不填写）
 # 附加信息类型1:单个图片
-pic:
-
-# 附加信息类型2:图片组
-pic_set:
+pictures:
  - 
- -
 
-# 附加信息类型3:网页链接
+# 附加信息类型2:网页链接
 # link：必填，网页链接；
 # link_text：必填，链接显示的文字；
 # link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标
diff --git a/layouts/partials/pic_set.html b/layouts/partials/pic_set.html
index 7318a2b..b4d66aa 100644
--- a/layouts/partials/pic_set.html
+++ b/layouts/partials/pic_set.html
@@ -1,9 +1,14 @@
 <!-- START -->
-<div class="pic-grid">
-    <!-- todo change display style for 2 * 2 -->
+{{ $num_per_row := 3}}
+{{ $max_width := 80}}
+{{ if or (eq (len .pic_set) 2) (eq (len .pic_set) 4)}}
+    {{ $num_per_row = 2}}
+    {{ $max_width = 53}}
+{{ end }}
+<div class="pic-grid" style="width: {{ $max_width }}%">
     <div class="pure-g">
         {{ range $num, $a := .pic_set }}
-        <div class="pure-u-1-3">
+        <div class="pure-u-1-{{ $num_per_row }}">
             <div class="add-padding">
                 <div class="img-container">
                     <a data-src="{{ $a }}" data-fancybox="gallery">
diff --git a/layouts/partials/row.html b/layouts/partials/row.html
index 8c4f88d..752a025 100644
--- a/layouts/partials/row.html
+++ b/layouts/partials/row.html
@@ -1,7 +1,7 @@
 <div class="moment-row">
 
     <div class="pure-g">
-        <!-- 时间 -->
+        <!-- time -->
         <div class="pure-u-1 pure-u-sm-1-3">
             <div class="time">
                 <div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
@@ -10,17 +10,17 @@
             </div>
         </div>
 
-        <!-- 正文 -->
+        <!-- moment-content -->
         <div class="pure-u-1 pure-u-sm-2-3">
             <div class="moment-content">
-                <!-- 置顶标签 -->
+                <!-- top mark -->
                 {{ if gt .Params.top 0}}
                 <div class="top-mark" style="position: absolute; right: 5%;">
                     <i class="fas fa-bookmark" style="color: #e76b4f;"></i>
                 </div>
                 {{ end }}
 
-                <!-- 抬头 -->
+                <!-- user info -->
                 <div class="user-info">
                     <div class="avatar-block">
                         {{ with .Params.avatar }}
@@ -39,46 +39,65 @@
                         <div>
                             {{ $tags_filtered := slice}}
                             {{ with .Params.tags }}
-                            {{ range . }}
-                            {{ with .}}
-                            {{ $tags_filtered = $tags_filtered | append . }}
-                            {{ end }}
-                            {{ end }}
+                                {{ range . }}
+                                    {{ with .}}
+                                    {{ $tags_filtered = $tags_filtered | append . }}
+                                    {{ end }}
+                                {{ end }}
                             {{ end }}
                             {{ with $tags_filtered }}
-                            {{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
+                                {{ range . }}<span class="tag text-muted">{{ . }}</span>{{ end }}
                             {{ end }}
                         </div>
                     </div>
                 </div>
-                <!-- 抬头后面内容右平移5px，与头像兼容显得自然 -->
                 <div style="padding-left: 5px; padding-right: 5px;">
-                    <!-- 文字 -->
+                    <!-- content -->
                     <div class="context">
                         {{ .Content }}
                     </div>
-
-                    <!-- 图片 -->
+                    
+                    <!-- add-on info 1: pictures -->
+                    <!-- single picture (old version)-->
                     {{ with .Params.pic }}
-                    <img src="{{ . }}" class="img-fluid pic1" alt="Responsive image" data-fancybox="gallery"></img>
+                        <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
                     {{ end }}
 
-                    <!-- 图片集  -->
+                    <!-- multiple pictures (old version) -->
                     {{ $pic_set_filtered := slice}}
                     {{ with .Params.pic_set }}
-                    {{ range . }}
-                    {{ with .}}
-                    {{ $pic_set_filtered = $pic_set_filtered | append . }}
-                    {{ end }}
-                    {{ end }}
+                        {{ range . }}
+                            {{ with . }}
+                            {{ $pic_set_filtered = $pic_set_filtered | append . }}
+                            {{ end }}
+                        {{ end }}
                     {{ end }}
 
                     {{ with $pic_set_filtered }}
                     {{ partial "pic_set.html" (dict "pic_set" .) }}
                     {{ end }}
 
-                    <!-- todo format the name of this part -->
-                    <!-- add-on info 3: link -->
+                    <!-- new pictures API (combine single & multiple pictures)-->
+                    {{ $pictures_set:= slice}}
+                    {{ with .Params.pictures }}
+                        {{ range . }}
+                            {{ with . }}
+                                {{ $pictures_set = $pictures_set | append . }}
+                            {{ end }}
+                        {{ end }}
+                    {{ end }}
+
+                    {{ if (eq (len $pictures_set) 1) }}
+                        {{ range $pictures_set }}
+                            <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
+                        {{ end }}
+                    {{ end }}
+
+                    {{ if (gt (len $pictures_set) 1)}}
+                        {{ partial "pic_set.html" (dict "pic_set" $pictures_set) }}
+                    {{ end }}
+
+                    <!-- add-on info 2: link -->
                     {{ $link_link := .Params.link }}
                     {{ $link_logo := .Params.link_logo }}
                     {{ $link_text := .Params.link_text }}
@@ -88,13 +107,12 @@
                     $.Site.BaseURL)}}
                     {{ end }}
 
-                    <!-- 附注信息 -->
+                    <!-- Note info -->
                     <div class="moment-note">
                         <p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
                         <div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
                     </div>
                 </div>
-                <!-- 分隔线 -->
                 <hr style="clear: both">
             </div>
         </div>
diff --git a/static/css/style.css b/static/css/style.css
index ec23899..4949f2e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -169,8 +169,8 @@ p{
 }
 
 /* 图片 */
-.pic1{
-    max-width: 80%; 
+.single-pic{
+    max-width: 65%; 
     max-height: 250px;
     padding-bottom:10px;
     margin-top: 5px;