内容优化

内容优化

Products

当前位置:首页 > 内容优化 >

列表页实现随机缩略图

96SEO 2025-04-24 08:28 118



因为的缩略图不支持链接,火车头发布缩略图链接无效,只能本地化后调用。
找到主题下:码代的下的.htm flat.htm list.htm .htm .inc.htm read.htm文件中的列表缩略图,比如我的主题下的代码:

<div cla;tg&vid/;ss="">
                        <a class="" href="<?php echo $_['url'];?>" title="<?php echo $_[''];?>">
                            <img width="480" ="300" src="<?php echo (),'img/nopic.png';?>" class="   " alt="<?php echo $_[''];?>" ="lazy" ="<?php echo $_[''];?>">
                        </a>
                    </div>

替换为以下代码:除了php获取目录图以外,源代码 替换了,增加了 字段。css中要对应。



        <?php
        // 指定图片目录
        $ = $_[''] . "//";
        
        // 获取目录中的所有图片文件
        $ = glob($ . "*.{jpg,png,gif,jpeg,webp}", );
        
        // 随机选择一个图片
        if (!empty($)) {
            $ = ($_[''], '', $[($)]);
        } else {
            $ = "//.jpg"; // 如果没有图片,使用默认图片
        }
        ?>
        <div class="">
            <a class="" href="<?php echo $_['url'];?>" title="<?php echo $_[''];?>">
                <img class="" src="<?php echo ();?>skin//lazy.png" ="<?php echo $; ?>" width="100%" ="auto" alt="<?php echo $_[''];?>">
                <div class=""><?php echo $_['']; ?></div>
            </a>
        </div>


        <?php
        // 指定图片目录
        $ = $_[''] . "//";
        
        // 获取目录中的所有图片文件
        $ = glob($ . "*.{jpg,png,gif,jpeg,webp}", );
        
        // 随机选择一个图片
        if (!empty($)) {
            $ = ($_[''], '', $[($)]);
        } else {
            $ = "//.jpg"; // 如果没有图片,使用默认图片
        }
        ?>
        <div class="">
            <a class="" href="<?php echo $_['url'];?>" title="<?php echo $_[''];?>">
                <img class="" src="<?php echo ();?>skin//lazy.png" ="<?php echo $; ?>" width="100%" ="auto" alt="<?php echo $_[''];?>">
                <div class=""><?php echo $_['']; ?></div>  <!--0是侧边栏-->
            </a>
        </div>

tag标签页,tag.htm

	<?php
        // 指定图片目录
        $ = $_[''] . "//";
        
        // 获取目录中的所有图片文件
        $ = glob($ . "*.{jpg,png,gif,jpeg,webp}", );
        
        // 随机选择一个图片
        if (!empty($)) {
            $ = ($_[''], '', $[($)]);
        } else {
            $ = "//.jpg"; // 如果没有图片,使用默认图片
        }
        ?>
	<div class=""> <a class="" href="<?php echo $_['url'];?>" title="<?php echo $_[''];?>" ="_blank"> <img class="" src="<?php echo $_[''];?>" ="<?php echo $; ?>" width="100%" ="auto" alt="<?php echo $_[''];?>"> </a> <a class="" href="<?php echo $_[''];?>" ="_blank"><?php echo $_[''];?></a> </div>


        <?php
        // 指定图片目录
        $ = $_[''] . "//";
        
        // 获取目录中的所有图片文件
        $ = glob($ . "*.{jpg,png,gif,jpeg,webp}", );
        
        // 随机选择一个图片
        if (!empty($)) {
            $ = ($_[''], '', $[($)]);
        } else {
            $ = "//.jpg"; // 如果没有图片,使用默认图片
        }
        ?>
        <div class="">
            <a class="" href="<?php echo $_['url'];?>" title="<?php echo $_[''];?>">
                <img class="" src="<?php echo ();?>skin//lazy.png" ="<?php echo $; ?>" width="100%" ="auto" alt="<?php echo $_[''];?>">
                <div class=""><?php echo $_['']; ?></div>  <!--0是侧边栏-->
            </a>
        </div>


CSS中:

. {
    : ; /* 设置相对定位以便内部元素绝对定位 */
    width: 100%;
    : 100%;
    : ; /* 避免文字溢出图片边界 */
}

. img {
    : block;
    width: 100%;
    : 100%;
}

. {
    : ;
    top: 8px;  
    left: 0;
    width: 100%;
    : rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
    color: #fff; /* 白色文字 */
    : ;
    : 10px 0;
    : 8px;
}
. {
    : ;
    top: 18px;  
    left: 0;
    width: 100%;
    : rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    color: #fff; /* 白色文字 */
    : ;
    : 10px 0;
    : 12px;
}

标签: WellCMS

提交需求或反馈

Demand feedback