当前位置:首页 > emlog博客 > 正文内容

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文件。


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/emlog/42.html

标签: emlog博客

相关文章

Emlog pro博客添背景图片及背景透明教程[默认模版]

Emlog pro博客添背景图片及背景透明教程[默认模版]

(一)添加背景图片修改main.css文件,emlog的主题模板下,找到主题的“main.css”文件,打开它,找到body命令行(默认模板body在第一行),我们在body后加入代码使它变成这样body {background-...

Emlog pro 用5.3.1默认模版添加悬浮侧边栏的笔记

Emlog pro 用5.3.1默认模版添加悬浮侧边栏的笔记

第一步:找到需要悬浮文件的代码位置,如侧边栏新建组件 代码框里,添加如下代码:<div id="float"> 你要悬浮的内容代码 </div>  &nb...

Emlog pro利用5.3.1默认模版在内容页面下添加版权代码

Emlog pro利用5.3.1默认模版在内容页面下添加版权代码

EMLOG 博客程序关于实现文章内容页底部添加加版权信息及代码EMLOG博客快速、简单的,我们可以给文章加版权各方面的信息。下面以emlog pro 版为例,模版为5.3.1默认模版修改适配pro版本,以下简称pro版精典531。添加方法:...

Emlog博客之列表分页title标题SEO相关优化

Emlog博客之列表分页title标题SEO相关优化

如何解决emlog列表分页title标题SEO优化Emlog程序默认的分页title都一模一样,造成很多同名页面,关键词冲突;以下是解决这个问题的方法。首先编写一个从第二页开始显示分页标题的函数,放在模版文件的module.php里面,代码...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。