新增文章类型Gallery

archive.php

@@ -33,7 +33,7 @@
       </div>
       <div class="article">
         <?php while ($this->next()) :
-          if ($this->fields->articleType == "article" or $this->fields->articleType == NULL) { ?>
+          if ($this->fields->articleType == "article" or $this->fields->articleType == NULL or $this->fields->articleType == "gallery") { ?>
             <a class="post" href="<?php $this -> permalink() ?>">
               <div class="mdui-card index-card mdui-hoverable">
                 <div class="mdui-card-media index-img-media">
@@ -43,9 +43,12 @@
                     <div class="mdui-card-primary index-primary">
                       <div class="mdui-card-primary-title"><?php $this -> title(); ?></div>
                       <div class="mdui-card-primary-subtitle index-info"><?php $this -> date(); ?>
-                        <?php if ($this->options->showComments) {
-                          echo '｜'; $this -> commentsNum('0 条评论', '1 条评论', '%d 条评论');
-                        } ?>
+                      <?php if ($this->options->showComments and $this->fields->articleType != "gallery") {
+                        echo '｜'; $this -> commentsNum('0 条评论', '1 条评论', '%d 条评论');
+                      }elseif ($this->fields->articleType == "gallery") {
+                        echo '｜画廊';
+                      };
+                      ?>
                       </div>
                       <div class="mdui-card-primary-subtitle index-subtitle"><?php $this -> excerpt(); ?></div>
                     </div>

assets/css/gallery.css

@@ -0,0 +1,75 @@
+.gallery-container {
+    width: 90%;
+    max-width: 1900px;
+    margin: 0 auto;
+    padding-top: 64px;
+    flex: 0 1 auto;
+}
+
+.gallery-container:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+.gallery-sizer,
+.gallery-item {
+    /* 自定义css覆盖width改变大小 */
+    width: 30%;
+    min-width: 300px;
+    margin-bottom: 15px;
+    border-radius: 3px;
+}
+
+.gallery-item--little1 {
+    width: 20%;
+}
+
+.gallery-item--little2 {
+    width: 10%;
+}
+
+.gallery-item--large1 {
+    width: 40%;
+}
+
+.gallery-item--large2 {
+    width: 60%;
+}
+
+.gallery-item {
+    float: left;
+}
+
+.gallery-item > img {
+    display: block;
+    max-width: 100%;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.gallery-item > img:hover {
+    filter: blur(5px);
+    background-color: rgba(255, 255, 255, 0.4);
+    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+}
+
+.gallery-footer-margin {
+    margin-top: 60vh;
+}
+
+@media (max-width: 1100px) {
+    .gallery-item {
+        min-width: 600px;
+    }
+    .gallery-footer-margin {
+        margin-top: 70vh;
+    }
+}
+
+@media (max-width: 600px) {
+    .gallery-item {
+        min-width: 350px;
+    }
+}

functions.php

@@ -24,7 +24,7 @@
 
 // 文章自定义设置
 function themeFields($layout) {
-  $articleType = new Typecho_Widget_Helper_Form_Element_Select('articleType',array('article' => '文章', 'daily' => '日常', 'normal' => '无封面'), 'article', _t('文章类型'));
+  $articleType = new Typecho_Widget_Helper_Form_Element_Select('articleType',array('article' => '文章', 'daily' => '日常', 'normal' => '无封面', 'gallery' => '画廊'), 'article', _t('文章类型'));
   $layout->addItem($articleType);
   $wzimg = new Typecho_Widget_Helper_Form_Element_Text('wzimg', NULL, NULL, _t('文章/独立页面封面图'), _t('如果不填将显示随机封面图'));
   $layout->addItem($wzimg);

includes/footer.php

@@ -19,7 +19,7 @@
 </div>
 <div onclick="tocOverlay()" class="toc-overlay"></div>
 <button class="mdui-fab mdui-fab-fixed mdui-ripple top mdui-color-theme-accent"><i class="mdui-icon material-icons">arrow_upward</i></button>
-<footer>
+<footer <?php if($this->fields->articleType == "gallery"){echo 'class="gallery-footer-margin"';}; ?>>
   <?php Footer() ?>
 </footer>
 <script src="<?php staticFiles('js/mdui.min.js') ?>"></script>

includes/gallery.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Gallery
+ * 
+ *
+ * @Creator perriya
+ * @date 2025-8-15
+ */
+
+if (!defined('__TYPECHO_ROOT_DIR__')) exit;
+?>
+
+<?php
+
+//Gallery生成
+//会忽略除img以外的元素
+
+function parseGallery($content) {
+
+    $callback = function($m){
+        $result = "";
+
+        $img = $m[0];
+
+        $patt_img = '/<img(.*?)src="(.*?)"(.*?)>/s';
+        $text_image = '<img $1 src="$2" $3 onclick="window.open(\'$2\')" loading="lazy">';
+        $img = preg_replace($patt_img, $text_image, $img);
+
+        $result = $result . '<div class="gallery-item">';
+        $result = $result . $img;
+        $result = $result . '</div>';
+
+        echo $result;
+    };
+
+    $img_pattern = '/<img\b[^>]*>/i';
+
+    preg_replace_callback($img_pattern, $callback, $content);
+};
+
+?>
+
+<div class="gallery-container">
+    <div class="gallery-sizer"></div>
+    <?php parseGallery($this->content); ?>
+</div>
+
+<script>
+var grid = document.querySelector('.gallery-container');
+var msnry = new Masonry(grid,{
+  itemSelector: '.gallery-item',
+  columnWidth: '.gallery-sizer',
+  gutter: 20,
+  percentPosition: true
+});
+imagesLoaded(grid).on('progress',function(){
+  msnry.layout();
+});
+</script>
+
+
+<?php $this -> need('includes/footer.php'); ?>

includes/header.php

@@ -55,6 +55,12 @@
   <link rel="stylesheet" href="<?php staticFiles('css/fancybox.min.css') ?>">
   <link rel="stylesheet" href="<?php staticFiles('css/katex.min.css') ?>">
   <link rel="stylesheet" href="<?php staticFiles('css/cuckoo.min.css') ?>">
+  <?php if ($this->fields->articleType == "gallery") { ?>
+  <link rel="stylesheet" href="<?php staticFiles('css/gallery.css') ?>">
+  <script src="<?php staticFiles('js/jquery-3.7.1.min.js') ?>"></script>
+  <script src="<?php staticFiles('js/masonry.pkgd.min.js') ?>"></script>
+  <script src="<?php staticFiles('js/imagesloaded.pkgd.min.js') ?>"></script> 
+  <?php } ?>
   <script src="<?php staticFiles('js/tocbot.min.js') ?>"></script>
   <script src="<?php staticFiles('js/nprogress.min.js') ?>"></script>
   <?php fontFamily(); $this->header('antiSpam=&commentReply='); bgUrl(); otherCss();?>

index.php

@@ -49,7 +49,7 @@
     <div class="article">
 <?php if ($this->have()) :
   while ($this->next()) :
-    if ($this->fields->articleType == "article" or $this->fields->articleType == NULL) { ?>
+    if ($this->fields->articleType == "article" or $this->fields->articleType == NULL or $this->fields->articleType == "gallery") { ?>
       <a class="post" href="<?php $this -> permalink() ?>">
         <div class="mdui-card index-card mdui-hoverable">
           <div class="mdui-card-media index-img-media">
@@ -59,9 +59,12 @@
               <div class="mdui-card-primary index-primary">
                 <div class="mdui-card-primary-title"><?php $this->sticky();$this -> title(); ?></div>
                 <div class="mdui-card-primary-subtitle index-info"><?php $this -> date(); ?>
-                  <?php if ($this->options->showComments) {
+                  <?php if ($this->options->showComments and $this->fields->articleType != "gallery") {
                     echo '｜'; $this -> commentsNum('0 条评论', '1 条评论', '%d 条评论');
-                  } ?>
+                  }elseif ($this->fields->articleType == "gallery") {
+                    echo '｜画廊';
+                  };
+                  ?>
                 </div>
                 <div class="mdui-card-primary-subtitle index-subtitle"><?php $this -> excerpt(); ?></div>
               </div>

post.php

@@ -19,6 +19,15 @@
     Typecho_Response::getInstance()->setStatus(200);
 }
 $this->need('includes/header.php'); ?>
+
+<?php
+//使用gallery.php替换原有页面
+//未解密使用原post页面
+if ($this->fields->articleType == "gallery" && !($this->hidden)) {
+  $this->need('includes/gallery.php');
+}else{
+?>
+
 <div class="index-container">
   <div class="mdui-col-md-8">
     <div class="mdui-card post-card">
@@ -48,3 +57,4 @@
 </div>
 <?php $this -> need('includes/footer.php'); ?>
 
+<?php } ?>