Emlog pro适配5.3.1默认模版缩略图功能加内容页美化

本文介绍emlog pro 版启用emlog5.3.1默认主题模版增加文章列表缩略图功能及相关美化

安装 emlog pro

    打开emlog官网：https://www.emlog.net/ 下载emlog pro系统 源码，    上传emlog 5.3.1 默认模版zip文件（此模版文件是经过修改适配pro版本）

    首页文章列表支持缩略图功能的修改方案：

    缩略图的获取优先顺序是文章中插入的第一张图片，如果文章中没有图片则随机输出images/random文件夹下的随机图片

得改三处，一个就是moudule.php里要先建立个调用，也就是读取文章中第一个图片 

    修改 模版的"    moudule.php    "

一：在适当位置添加如下代码:

<?php
//get thumbs（图片链接）
function pic_thumb($content){
     preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $content, $img);
     $imgsrc = !empty($img[1]) ? $img[1][0] : '';
     if($imgsrc):
     return $imgsrc;
     endif;
}?>

二：在模版“log_lis.php"    文件想显示缩略图的合适地方加上如下代码:

<div class="thumbnail_box">
<div class="thumbnail">
<?php if(pic_thumb($value['content'])){$imgsrc = pic_thumb($value['content']);
}else$imgsrc = TEMPLATE_URL.'images/random/tb'.rand(1,20).'.jpg';?><a href="<?php echo $value['log_url']; ?>" title="<?php echo $value['log_title']; ?>"><img src="<?php echo $imgsrc; ?>" /></a>
</div>
</div>

        代码说明：优先获取文章中第一张图，如果 没有则随机输出主题模版目录images/random下的1-20张以.jpg格式结尾的随机一张，所以要创建这样一个目录及目录下的相关图片文件。（目录及文件需要自行创建，文件名必须是以1.jpg  ,  2.jpg 格式结尾，如不足20张图片，则需要将”20“改成目录下实际图片数量）

三： 还有就是给缩图片添加样式，将下列代码添加到CSS文件中：

/*thumbnail*/
.thumbnail_box {
    float:left;
    width:128px;
    height:85px;
    margin:10px 10px 10px 0;
    padding:4px;
    border:1px solid #ccc;
}

.thumbnail img {
        position:absolute;
        z-index:3;
        width:125px;
        height:85px;
}

.thumbnail_a {
        background:#fff;
        position:absolute;
        z-index:3;
}

.thumbnail_t img {
        position:absolute;
        width:125px;
        height:85px;
}

.thumbnail_b img {
        position:absolute;
        z-index:1;
} 

.readmore a{background: #FFFFF; font-size: 12px; float: right;}/*"阅读全文"的样式，可以删除这行代码不用*/

    最后一步：我们发现缩略图样式已经出来了，但遇文章列表的文章摘要却不受控制。我们来美化一下文章的摘要：控制 文章摘要的字数,找到主题模版下”log_lis.php“文件，找到如下代码：

<?php echo $value['log_description']; ?>

    将以下代码替代上面的”<?php echo $value['log_description']; ?>”

<?php echo extractHtmlData($value['content'],200);?>

代码说明：上面这行代码意思 是显示摘要的字符长度，其中“200“可以更改想要输出摘要的长度

"banner"图片美化

要求：实现刷新页面可以随机显示"banner"图片

打开主题模版目录下”header.php“文件，找到”content/templates/default531/images/top/default.jpg“

修改替换成如下代码

content/templates/default531/images/top/<?php echo(rand(1,3)); ?>.jpg

代码说明：利用php的 echo(rand）函数，调用主题目录/images/top下的随机3张图，实现刷新一次页面就随机显示/top目录下的一张图片。其中数字 ”3“可以改成/top目录下的图片数量 。（目录及文件需要自行创建，文件名必须是以1.jpg  ,  2.jpg 格式结尾）

其上就是emlog pro版中启用emlog5.3.1默认主题模版的美化，其它样式美化可以自行修改main.css文件。

相關 博客程序