Emlog后台发布文章,添加缩略图地址,文章列表显示缩略图
时间:2014-12-11 16:42 作者:admin 分类: 代码人生
分析:我们为文章添加缩略图地址是保存到数据库中的,并且是保存在文章表中,这样做的原因是在取文章的时候,顺便取出缩略图地址,效率很高,不影响原有系统性能。
1)有些同学是从附件表取的。
2)有些同学是从内容摘要中解析出图片地址。
这个各有各的好处,这里不做评价,适合自己的是最好的。
楼主是在文章表中添加了一个字段:thumbUrl,见下图:
代码编写开始 ------>>>>>
1. 我们在后台发布文章,添加缩略图地址,首先要提供一个可输入的编辑框,找到文章发布页面admin\views\add_log.php
1) 文件中找到以下代码:
<div>
<label for="title" id="title_label">输入文章标题</label>
<input type="text" maxlength="200" name="title" id="title"/>
</div>
在以上代码下面添加如下代码:
<div>
<label for="thumbUrl" id="thumbUrl_label">输入缩略图地址</label>
<input type="text" maxlength="200" name="thumbUrl" id="thumbUrl"/>
</div>
代码描述:在文章标题下面添加了可输入缩略图地址的输入框。
2) 文中找到以下代码:
$("#title").focus(function(){$("#title_label").hide();});
$("#title").blur(function(){if($("#title").val() == '') {$("#title_label").show();}});
在以上代码下面添加如下代码:
$("#thumbUrl").focus(function(){$("#thumbUrl_label").hide();});
$("#thumbUrl").blur(function(){if($("#thumbUrl").val() == '') {$("#thumbUrl_label").show();}});
代码描述:添加文本框的JS特效,当鼠标点到这个文本框的时候,让里面的提示的字消失,鼠标离开的时候再显示。
2. 给录入缩略图地址的输入框添加CSS样式,和标题的输入框样式一致,美观。找到admin\views\css\css-min.css
3. 在文章编辑页面,也要加上缩略图地址编辑的输入框,使其可以编辑,找到文章编辑页面admin\views\edit_log.php
1) 文件中找到以下代码:
<div>
<label for="title" id="title_label">输入文章标题</label>
<input type="text" maxlength="200" name="title" id="title" value="<?php echo $title; ?>" />
</div>
在以上代码下面添加如下代码:
<div>
<label for="thumbUrl" id="thumbUrl_label">输入缩略图地址</label>
<input type="text" maxlength="200" name="thumbUrl" id="thumbUrl" value="<?php echo $thumbUrl; ?>"/>
</div>
代码描述:在文章标题下面添加了可编辑缩略图地址的输入框。
2) 文中找到以下代码:
$("#title").focus(function(){$("#title_label").hide();});
$("#title").blur(function(){if($("#title").val() == '') {$("#title_label").show();}});
在以上代码下面添加如下代码:
$("#thumbUrl").focus(function(){$("#thumbUrl_label").hide();});
$("#thumbUrl").blur(function(){if($("#thumbUrl").val() == '') {$("#thumbUrl_label").show();}});
3) 文中找到以下代码:
if ($("#title").val() != '')$("#title_label").hide();
在以上代码下面添加如下代码:
if ($("#thumbUrl").val() != '')$("#thumbUrl_label").hide();
4. 文章编辑页面,文章内容保存分为自动保存和手动保存,自动保存通过JS实现,找到admin\views\js\common.js
切记,在170行后面进行查找,170行之前也有,但不是我们要操作的。
推荐阅读: