Gleaner主题下载地址:
https://github.com/fordes123/gleaner
实现思路
利用gleaner主题的文章自定义图片接口,这样既可以使文章封面随机显示图片(原有功能),我们也可以开发一个Typecho模板,用于展示所有的图片。
实现方法
我们可以通过
$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;
}
实现细节
-
如果在一个页面中展示所有的图片,当图片数量过多时,既不便于浏览,还会造成浏览器卡顿的现象。所以使用分页加载的方式更加合理。
- 页首直接跳转对应页码
<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页以前的页。
- 前端使用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; ?>
嗯嗯。很有价值
谢谢