feat: new page style photography

_config.yml

@@ -1,4 +1,4 @@
-version: 1619339364905
+version: 1619346775138
 language: cn
 aomori_widgets:
   - toc

layout/_partial/article-index.ejs

@@ -16,10 +16,10 @@ class="article article-type-<%= post.layout %>"
     <div class="article-feature">
         <a href="<%- url_for(post.path) %>">
             <img
-            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
-            data-src="<%- url_for(post.cover || post.photos[0]) %>"
-            alt="item.title"
-            class="lazy"
+                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
+                data-src="<%- url_for(post.cover || post.photos[0]) %>"
+                alt="item.title"
+                class="lazy"
             />
         </a>
     </div>

layout/_partial/page/photography.ejs

@@ -0,0 +1,50 @@
+<div class="photography columns clearfix">
+        <div class="column col-md-12">
+            <% site.data.photography.forEach(function(item, index){ %>
+                <% if (((index) % 3) === 0) { %>
+                    <div class="photography-item">
+                        <img
+                            class="lazy"
+                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
+                            data-src="<%= item.photo %>"
+                            alt="item.title"
+                        />
+                    </div>
+                <% } %> 
+            <% }) %>
+        </div>
+        <div class="column col-md-12">
+            <% site.data.photography.forEach(function(item, index){ %>
+                <% if (((index) % 3) === 1) { %>
+                    <div class="photography-item">
+                        <img
+                            class="lazy"
+                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
+                            data-src="<%= item.photo %>"
+                            alt="item.title"
+                        />
+                    </div>
+                <% } %> 
+            <% }) %>
+        </div>
+        <div class="column col-md-12">
+            <% site.data.photography.forEach(function(item, index){ %>
+                <% if (((index) % 3) === 2) { %>
+                    <div class="photography-item">
+                        <img
+                            class="lazy"
+                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
+                            data-src="<%= item.photo %>"
+                            alt="item.title"
+                        />
+                    </div>
+                <% } %> 
+            <% }) %>
+        </div>
+</div>
+
+<style>
+.main .inner {
+    padding: 0;
+}
+</style>

layout/page.ejs

@@ -1,10 +1,20 @@
 
 <% if (page.layout === 'friends'){ %>
+
 <div class="<%= page.layout %>">
   <%- partial(`_partial/page/${page.layout}`, {post: page, index: false}) %>
 </div>
+
+<% } else if (page.layout === 'photography') { %>
+
+<div class="<%= page.layout %>">
+  <%- partial(`_partial/page/${page.layout}`, {post: page, index: false}) %>
+</div>
+
 <% } else { %>
+
 <div class="<%= page.layout %>">
   <%- partial(`_partial/page/default`, {post: page, index: false}) %>
 </div>
+
 <% } %>

source/stylesheets/page.scss

@@ -25,3 +25,19 @@
         }
     }
 }
+
+.photography {
+    padding: .4rem .4rem 0;
+    border-radius: 8px;
+    background: var(--color-white-light);
+
+    &-item {
+        margin-bottom: .8rem;
+        cursor: pointer;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+}