首页 / 文章 / 开发基于Gleaner主题的图片展示页
全部
前端
#暂无标签

开发基于Gleaner主题的图片展示页

冯大仙
2023-01-17
1058

Gleaner主题下载地址：

https://github.com/fordes123/gleaner

实现思路

利用gleaner主题的文章自定义图片接口，这样既可以使文章封面随机显示图片（原有功能），我们也可以开发一个Typecho模板，用于展示所有的图片。 开发基于Gleaner主题的图片展示页

实现方法

我们可以通过

$options = Typecho_Widget::widget('Widget_Options');
$thumbs = explode("|", $options->bcool_cover);/*获取文章封面*/

得到一个数组，这个数组里就是每张图片的地址。

再利用一个for循环，将这些图片的地址，带入到img标签的src属性下就可以了。

完整代码

pic_page.php

<?php

/**
 * 测试
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__'))
    exit;
$this->need('header.php'); ?>

<?php
$options = Typecho_Widget::widget('Widget_Options');
$thumbs = explode("|", $options->bcool_cover); /*获取文章封面*/
$num = count($thumbs);
// shuffle($thumbs);
if (!isset($_POST["pageNum"])) {
    $pageNum = 1;
} else {
    $pageNum = intval($_POST["pageNum"]);
}
$begin = 100 * ($pageNum - 1);
$end = 100 * ($pageNum - 1) + 99;
if ($end >= $num) {
    $end = $num - 1;
}
?>

<div class="pageNav">
    <div class="centerbox">
        <div class="discription">共计<?php echo $num; ?>张图片,当前</div>

        <form method="post">
            <input type="number" name="pageNum" id="page" min="1" max="<?php echo ceil($num / 100); ?>"
                placeholder="<?php echo $pageNum; ?>" required="required" />

            <button type="submit" id="submit">/<?php echo ceil($num / 100); ?>页</button>
        </form>
    </div>

</div>
<script>

    $(document).ready(function () {
        $("#submit").hover(function () {
            $("#submit").html("转到");
        }, function () {
            $("#submit").html("/<?php echo ceil($num / 100); ?>页");
        });

    });

</script>
<br>
<div
    class="page-wrap archive-page <?php if ($this->options->bcool_animate !== "close" || !empty($this->options->bcool_animate)): ?>animate__animated animate__<?php $this->options->bcool_animate() ?><?php endif; ?>">

    <div class="archive-body">
        <div class="wrap">
            <div class="wrap_float grid">
                <div class="portfolio">

                    <?php for ($i = $begin; $i <= $end; $i++): ?>
                        <div class="portfolio-item p-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <div class="content" href='<?php echo $thumbs[$i] ?>'>
                                <div class="thumb clearbg">
                                    <img class="lazy" src="<?php $this->options->themeUrl('./assets/img/loading.gif'); ?>"
                                        data-src="<?php echo $thumbs[$i]; ?>"
                                        error-src="<?php $this->options->themeUrl('./assets/img/404.jpg'); ?>" alt="" />
                                </div>
                            </div>
                        </div>
                    <?php endfor; ?>

                </div>

            </div>
        </div>
    </div>
    <script>
        function post(URL, PARAMS) {
            var temp = document.createElement("form");
            temp.action = URL;
            temp.method = "post";
            temp.style.display = "none";
            for (var x in PARAMS) {
                var opt = document.createElement("textarea");
                opt.name = x;
                opt.value = PARAMS[x];
                // alert(opt.name)
                temp.appendChild(opt);
            }
            document.body.appendChild(temp);
            temp.submit();
            return temp;
        }
    </script>
    <script>
        $(document).ready(function () {
            $("#prevPage").click(function () {
                if (<?php echo $pageNum ?> > 1){
                post("", { "pageNum":<?php echo $pageNum - 1; ?>})
                }
            });
        });
        $(document).ready(function () {

            $("#nextPage").click(function () {
                if (<?php echo $pageNum ?> < <?php echo ceil($num / 100) ?>){
                post("", { "pageNum":<?php echo $pageNum + 1; ?>})
                }
            });
        });
    </script>
    <div class="pages-controls">

        <div id="prevPage" class="pages-controls-item prev-page">
            <div class="pages-controls-item-wrapper">
                <div class="control-direction"><i class="fa-solid fa-arrow-left fa-lg"></i> 上一页</div>
                <h3 class="post-title">
                    <?php if ($pageNum == 1): ?>没有了~<?php else: ?>第<?php echo $pageNum - 1; ?>页<?php endif; ?>
                </h3>
            </div>
        </div>

        <div class="pages-controls-item next-page" id="nextPage">
            <div class="pages-controls-item-wrapper">
                <div class="control-direction">下一页 <i class="fa-solid fa-arrow-right fa-lg"></i></div>
                <h3 class="post-title">
                    <?php if ($pageNum == ceil($num / 100)): ?>没有了~<?php else: ?>第<?php echo $pageNum + 1; ?>页<?php endif; ?>
                </h3>
            </div>
        </div>

    </div>

    <?php $this->need('footer.php'); ?>

此外还需要在header.php中引入pic_page.css

pic_page.css

.pages-controls {
    display: block;
    float: left;
    width: 100%;
    border-top: 1px solid #DCDEE1;
    border-bottom: 1px solid #DCDEE1;
    margin-bottom: 50px;
}

.pages-controls .post-title {
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0;
}

.pages-controls-item {
    min-height: 130px;
    width: 50%;
    padding-top: 45px;
    -webkit-appearance: 45px;
    -moz-appearance: 45px;
    appearance: 45px;
    transition: background 0.2s linear;
    display: block;
    float: left;
}

.pages-controls-item-wrapper {
    display: block;
    float: left;
    width: 372px;
}

.pages-controls-item.prev-page {
    padding-right: 50px;
    text-align: right;
    border-right: 1px solid #DCDEE1;
    margin-right: -1px;
    padding-left: 12px;
}

.pages-controls-item.prev-page .pages-controls-item-wrapper {
    float: right;
}

.pages-controls-item.prev-page .control-direction {
    padding-left: 18px;
    float: right;
}

.pages-controls-item.prev-page .control-direction:before {
    left: 0;
}

.pages-controls-item.next-page {
    padding-left: 50px;
    padding-right: 12px;
    border-left: 1px solid #DCDEE1;
}

.pages-controls-item.next-page .control-direction {
    padding-right: 18px;
}

.pages-controls-item.next-page .control-direction:before {
    right: 0;
    transform: rotate(180deg);
}

.pages-controls-item:hover {
    background: #ebebeb;
}

.pages-controls-item .control-direction {
    display: block;
    float: left;
    color: #8E8E8E;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 30px;
    position: relative;
    width: auto;
    margin-bottom: 5px;
}

.dark .pages-controls-item.prev-page,
.dark .pages-controls-item.next-page,
.dark .pages-controls {
    border-color: #3C3C3C;
}

.dark .pages-controls-item:hover {
    background: #2b2b2b;
}

.pages-controls-item-wrapper {
    width: 314px;
}

.pages-controls-item.prev-page {
    padding-right: 40px;
}

.pages-controls-item.next-page {
    padding-left: 40px;
}

.pages-controls-item {
    padding-top: 36px;
}

.pages-controls .post-title {
    font-size: 18px;
    line-height: 26px;
}

.pages-controls-item-wrapper {
    width: 100%;
    max-width: 510px;
}

.pages-controls .post-title {
    font-size: 17px;
    line-height: 24px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.pageNav {
    /* display: block; */
    display: flex;
    float:none;
    /* width: 311px; */
    margin: 0 auto;
    margin-top: 30px;
}

.pageNav form {
    float: left;
    width: 130px;
}

.pageNav .centerbox{

    margin: auto;
    width: auto;
}

.pageNav .discription {
    float: left;
    /* color: blue; */
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    margin-bottom: 5px;
    /* width: 170px; */
    width: auto;
    height: 20px;
    line-height: 25px;
}
.pageNav input::placeholder{
    color:rgba(0, 0, 0, 0.8);
}
.pageNav input {
    border: 2px solid blue;
    border-right: none;
    float: left;
    height: 30px;
    width: 80px;
    text-align: center;
}

.pageNav button {
    background-color: blue;
    height: 30px;
    width: 45px;
    color: white;
}

.pageNav button:hover {
    background-color: darkblue;
}

实现细节

  1. 如果在一个页面中展示所有的图片，当图片数量过多时，既不便于浏览，还会造成浏览器卡顿的现象。所以使用分页加载的方式更加合理。

    • 页首直接跳转对应页码
   <div class="pageNav">
       <div class="centerbox">
           <div class="discription">共计<?php echo $num; ?>张图片,当前</div>
           <form method="post">
               <input type="number" name="pageNum" id="page" min="1" max="<?php echo ceil($num / 100); ?>"
                   placeholder="<?php echo $pageNum; ?>" required="required" />

               <button type="submit" id="submit">/<?php echo ceil($num / 100); ?>页</button>
           </form>
       </div>
   </div>

对应css代码

   .pageNav {

       display: flex;
       float:none;//清楚其他css文件为div定义的左浮动
       margin: 0 auto;
       margin-top: 30px;//避免在移动端下，与另一个盒子重合，造成无法输入
   }

   .pageNav form {
       float: left;
       width: 130px;
   }

   .pageNav .centerbox{

       margin: auto;
       width: auto;//清楚其他css文件为div定义的width:100%,改为宽度随着孩子内容增加而改变
   }

   .pageNav .discription {
       float: left;
       color: rgba(0, 0, 0, 0.5);
       font-size: 18px;
       margin-bottom: 5px;
       width: auto;
       height: 20px;
       line-height: 25px;
   }
   .pageNav input::placeholder{
       color:rgba(0, 0, 0, 0.8);
   }
   .pageNav input {
       border: 2px solid blue;
       border-right: none;
       float: left;
       height: 30px;
       width: 80px;
       text-align: center;
   }

   .pageNav button {
       background-color: blue;
       height: 30px;
       width: 45px;
       color: white;
   }

   .pageNav button:hover {
       background-color: darkblue;
   }

利用js代码修改提交按扭显示的文字，这里使用的是JQuery，需要在head中导入JQuery.js。并且使用php代码动态的生成当前页码。

   <script>
       $(document).ready(function () {
           $("#submit").hover(function () {
               $("#submit").html("转到");
           }, function () {
               $("#submit").html("/<?php echo ceil($num / 100); ?>页");
           });

       });

   </script>
  • 页尾跳转至前一页、后一页
   <div class="pages-controls">
        <div id="prevPage" class="pages-controls-item prev-page">
             <div class="pages-controls-item-wrapper">
                  <div class="control-direction"><i class="fa-solid fa-arrow-left fa-lg"></i> 上一页</div>
                   <h3 class="post-title">
                       <?php if ($pageNum == 1): ?>没有了~<?php else: ?>第<?php echo $pageNum - 1; ?>页<?php endif; ?>
                   </h3>
              </div>
         </div>

         <div class="pages-controls-item next-page" id="nextPage">
              <div class="pages-controls-item-wrapper">
                   <div class="control-direction">下一页 <i class="fa-solid fa-arrow-right fa-lg"></i></div>
                   <h3 class="post-title">
                       <?php if ($pageNum == ceil($num / 100)): ?>没有了~<?php else: ?>第<?php echo $pageNum + 1; ?>页<?php endif; ?>
                   </h3>
              </div>
          </div>
   </div>

利用js模拟post请求

   <script>
       function post(URL, PARAMS) {
           var temp = document.createElement("form");
           temp.action = URL;
           temp.method = "post";
           temp.style.display = "none";
           for (var x in PARAMS) {
               var opt = document.createElement("textarea");
               opt.name = x;
               opt.value = PARAMS[x];
               // alert(opt.name)
               temp.appendChild(opt);
           }
           document.body.appendChild(temp);
           temp.submit();
           return temp;
       }
   </script>
   <script>
       $(document).ready(function () {
           $("#prevPage").click(function () {
               if (<?php echo $pageNum ?> > 1){
               post("", { "pageNum":<?php echo $pageNum - 1; ?>})
               }
           });
       });
       $(document).ready(function () {

           $("#nextPage").click(function () {
               if (<?php echo $pageNum ?> < <?php echo ceil($num / 100) ?>){
               post("", { "pageNum":<?php echo $pageNum + 1; ?>})
               }
           });
       });
   </script>

值得注意的是，我们在这段js代码中嵌入了php的代码，用于防止出现访问越界的问题，如：访问第1页以前的页。

  1. 前端使用post请求发送页码，后端采用php的$_POST数组配合响应逻辑生成对应页面
<?php
if (!isset($_POST["pageNum"])) {
    $pageNum = 1;
} else {
    $pageNum = intval($_POST["pageNum"]);
}
$begin = 100 * ($pageNum - 1);
$end = 100 * ($pageNum - 1) + 99;
if ($end >= $num) {
    $end = $num - 1;
}
?>
<?php for ($i = $begin; $i <= $end; $i++): ?>
      <div class="portfolio-item p-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
           <div class="content" href='<?php echo $thumbs[$i] ?>'>
                <div class="thumb clearbg">
                     <img class="lazy" src="<?php $this->options->themeUrl('./assets/img/loading.gif'); ?>" data-src="<?php echo $thumbs[$i]; ?>" error-src="<?php $this->options->themeUrl('./assets/img/404.jpg'); ?>" alt="" />
                </div>
            </div>
       </div>
<?php endfor; ?>

评论区 2

    FriedFry (读者)
    2023-01-18 18:22

    嗯嗯。很有价值

    回复
      冯大仙 (作者)
      2023-01-18 18:24
      @FriedFry

      谢谢

      回复