新增相册页面

README.md

@@ -94,6 +94,48 @@ layout: "tags"
 ---
 ```
 
+#### 🏖相册页
+
+在根目录`source`文件夹下创建`galleries`文件夹，并新建`index.md`文件
+
+```
+---
+title: galleries
+date: 2023-02-22 07:33:36
+type: galleries
+layout: galleries
+---
+```
+
+**创建新相册示例**
+
+> 可以直接将/themes/hexo-theme-quiet/galleries文件夹拷贝到/source下
+
+在gallery文件夹下新建`sea`文件夹，并在其中新建`index.md`文件
+
+添加图片：
+
+- 方式一：将图片上传到图床，直接填写图片url链接
+
+- 方式二：将图片`sea1.jpg`拷贝到`sea`文件夹下，url填写为`/galleries/sea/sea1.jpg`
+```
+---
+title: 这是your_gallery_name相册
+date: 2023-02-22 08:40:23
+type: gallery
+layout: gallery
+describe: 示例相册的相关介绍
+photos:
+ - url: '/galleries/sea/sea1.jpg'
+---
+```
+
+**解释**
+
+`describe`：相册简介
+
+`photos` ：照片地址
+
 #### 🏂简介页
 
 进入根目录下的`source`文件夹下创建`about`文件夹新建`index.md`文件

_config.yml

@@ -20,13 +20,15 @@ menus_title:
   tags: TAGS
   links: LINKS
   about: ABOUT
+  galleries: GALLERIES
 # 导航 （不建议修改）
 menus:
   home: /
   archive: /archives
   categories: /categories
   tags: /tags
   links: /links
+  galleries: /galleries
   about: /about
 
 # logo
@@ -52,11 +54,16 @@ headers:
       message: "我和我的小伙伴们",
       icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imga20r7-cftji.svg"
     }
+    galleries: {
+      message: "相册",
+      icon: "/image/galleryIcon.png"
+    }
     categories: {
       message: "文章分类",
       icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgblogmyCategory.svg"
     }
 
+
 # 网页访问统计
 web_analytics:  
   enable: false #需要改为true
@@ -93,3 +100,30 @@ linksList:
 # https://api.ixiaowai.cn/gqapi/gqapi.php
 # https://tuapi.eees.cc/api.php?type=302&category=fengjing
 default_cover: https://api.ixiaowai.cn/gqapi/gqapi.php
+
+galleries:
+  - {
+      title: sea相册,
+      # galleries下的相册文件夹名称
+      dirname: 'sea',
+      cover: '/galleries/sea/sea1.jpg',
+      date: '2011-02-02'
+  }
+  - {
+      title: cloud相册,
+      dirname: 'cloud',
+      cover: '/galleries/cloud/cloud1.png',
+      date: '2012-02-02'
+  }
+  - {
+      title: mountain相册,
+      dirname: 'mountain',
+      cover: '/galleries/mountain/mountain1.png',
+      date: '2013-02-02'
+  }
+  - {
+      title: city相册,
+      dirname: 'city',
+      cover: 'https://api.ixiaowai.cn/gqapi/gqapi.php',
+      date: '2014-02-02'
+  }

galleries/index.md

@@ -0,0 +1,6 @@
+---
+title: galleries
+date: 2023-02-22 07:33:36
+type: galleries
+layout: galleries
+---

galleries/sea/index.md

@@ -0,0 +1,12 @@
+---
+title: 这是sea相册
+date: 2023-02-22 08:40:23
+type: gallery
+layout: gallery
+describe: 示例相册的相关介绍
+photos:
+ - url: '/galleries/sea/sea1.jpg'
+ - url: '/galleries/sea/sea1.jpg'
+ - url: '/galleries/sea/sea1.jpg'
+ - url: '/galleries/sea/sea1.jpg'
+---

layout/galleries.ejs

@@ -0,0 +1,144 @@
+<%- partial('_partial/header',{name:'galleries'}) %>
+
+<style>
+  .galleries-content {
+    display: flex;
+    max-width: 100%;
+    padding: 0 calc((100% - 1200px)/2) 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+  }
+
+  .move {
+    margin-top: -84px;
+    transition: margin-top .8s ease-in-out;
+  }
+
+  @media screen and (min-width:600px) {
+    .gallery-display {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: 360px;
+      position: relative;
+      min-height: 420px;
+      margin: 20px;
+      background-color: #FFF;
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 20px 40px 0 rgba(50, 50, 50, 0.08);
+      flex-direction: column;
+      position: relative;
+      top: 0px;
+      transition: ease-in-out;
+      -moz-transition: top .5s;
+      -webkit-transition: top .5s;
+      -o-transition: top .5s;
+    }
+  }
+
+  @media screen and (max-width:600px) {
+    .gallery-display {
+      flex-grow: 1;
+      flex-shrink: 1;
+      position: relative;
+      min-height: 420px;
+      margin: 20px;
+      background-color: #FFF;
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 20px 40px 0 rgba(50, 50, 50, 0.08);
+      flex-direction: column;
+      position: relative;
+      top: 0px;
+      transition: ease-in-out;
+      -moz-transition: top .5s;
+      -webkit-transition: top .5s;
+      -o-transition: top .5s;
+    }
+  }
+
+  .gallery-display:hover {
+    cursor: pointer;
+    top: -15px;
+  }
+
+  .gallery-display a {
+    text-decoration: none;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .gallery-title {
+    padding: 30px 24px;
+    flex-grow: 1;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 36px;
+    color: #12183a;
+  }
+
+  .gallery-meat {
+    display: flex;
+    padding: 8px 24px 24px 16px;
+    justify-content: space-between;
+  }
+
+  .gallery-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .gallery-data {
+    margin: 8px 0 0 8px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #12183A;
+  }
+
+  .gallery-type {
+    width: 32px;
+    height: 32px;
+    margin-top: 10px;
+    background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg')no-repeat;
+  }
+
+  img {
+    width: 100%;
+    height: 200px;
+    margin-bottom: 30px;
+    background: linear-gradient(to top, #f1f5fb, #f9fcff);
+    object-fit: cover;
+  }
+</style>
+
+<div class="galleries">
+  <%- partial('_widget/header_body',{message:theme.headers.galleries.message,icon:theme.headers.galleries.icon}) %>
+  <div class="galleries-content move">
+    <% let galleries = theme.galleries %>
+    <% for(var i= 0;i<galleries.length;i++) {%>
+    <div class="gallery-display">
+      <a href="./<%-galleries[i].dirname %>">
+        <h2 class="gallery-title"><%- galleries[i].title %></h2>
+        <% if(galleries[i].cover){ %>
+        <img src="<%- galleries[i].cover %>" alt="Quiet">
+        <% }else{ %>
+        <img src="<%- theme.default_cover %>" alt="Quiet">
+        <% } %>
+      </a>
+      <div class="gallery-meat">
+        <div class="gallery-info">
+          <div><%- galleries[i].info %></div>
+        </div>
+      </div>
+    </div>
+    <% } %>
+  </div>
+</div>
+
+<script>
+  $(function() {
+    $('.feed').addClass('move');
+  })
+</script>

layout/gallery.ejs

@@ -0,0 +1,105 @@
+<%- partial('_partial/header',{name:'galleries'}) %>
+
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+    font-family: 'montserrat', sans-serif;
+    box-sizing: border-box;
+  }
+
+  .gallery-section {
+    width: 100%;
+    padding: 160px 0;
+    background: #f1f1f1;
+  }
+
+  .inner-width {
+    width: 100%;
+    max-width: 1200px;
+    margin: auto;
+    padding: 0 20px;
+  }
+
+  .gallery-section h1 {
+    text-align: center;
+    text-transform: uppercase;
+    color: #333;
+  }
+
+  .gallery-section h3 {
+    text-align: center;
+    text-transform: uppercase;
+    color: #333;
+    padding-bottom: 40px;
+  }
+
+  .border {
+    width: 180px;
+    height: 4px;
+    background: #333;
+    margin: 60px auto;
+  }
+
+  .gallery-section .gallery {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    justify-content: space-between;
+  }
+
+  .gallery-section .image {
+    flex: 25%;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .gallery-section .image img {
+    width: 100%;
+    text-align: center;
+    transition: 0.4s;
+    padding: 5px;
+  }
+
+  @media screen and (max-width: 960px) {
+    .gallery-section .image {
+      flex: 33.33%;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .gallery-section .image {
+      flex: 50%;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .gallery-section .image {
+      flex: 70%;
+    }
+  }
+</style>
+<div class="gallery-section">
+  <div class="inner-width">
+    <h1><%- page.title %></h1>
+    <div class="border"></div>
+    <h3><%- page.describe %></h3>
+    <div class="gallery">
+      <% let photos = page.photos %>
+      <% for(var i= 0;i<photos.length;i++) {%>
+      <% let url = photos[i].url %>
+      <a href=<%- url %> class="image">
+        <img src=<%- url %> alt="" />
+      </a>
+      <% } %>
+    </div>
+  </div>
+</div>
+<script>
+  $('.gallery').magnificPopup({
+    delegate: 'a',
+    type: 'image',
+    gallery: {
+      enabled: true
+    }
+  })
+</script>