v0.4.0的版本增加了前台的首页,文章列表,以及文章内容页的脚本和相关模板。当在后台添加了文章后,就可以通过后台文章列表的查看按钮,查看到该文章在前台的内容页面...

    页面导航: 项目下载地址:

    zenglBlog源代码的相关地址:https://github.com/zenglong/zenglBlog  当前版本对应的tag标签为:v0.4.0

zenglBlog v0.4.0:

    v0.4.0的版本增加了前台的首页,文章列表,以及文章内容页的脚本和相关模板。当在后台添加了文章后,就可以通过后台文章列表的查看按钮,查看到该文章在前台的内容页面:



图1:点击查看按钮,进入文章的前台内容页面

 


图2:文章内容页

    通过前台文章内容页的导航栏,进入前台首页和前台文章列表页:



图3:文章列表页

 


图4:首页

    在根目录中,增加了article.zl脚本,该脚本用于显示前台的文章内容页和前台的文章列表页:

inc 'common.zl';
inc 'helper.zl';

querys = rqtGetQuery();
action = querys['act'] ? querys['act'] : 'show';
if(action == 'show')
	Article.show();
elif(action == 'list')
	Article.list();
else
	print 'invalid act';
endif

class Article
	// 显示文章内容
	fun show()
		global querys, categories, db;
		id = bltInt(querys['id']);
		data = Mysql.fetchOne(db, "select * from article where id='"+id+"'");
		data['csses'] = bltArray('article-show.css');
		data['head_js'] = bltArray('jquery.yestop.js');
		Article.SetCurCate(categories, data, data['cid']);
		print bltMustacheFileRender("tpl/article_show.tpl", data);
	endfun

	// 显示文章列表
	fun list()
		global querys, categories, db;
		cid = bltInt(querys['cid']);
		where = " where cid=" + cid;
		tmp = Mysql.fetchOne(db, "select count(1) as cnt from article " + where);
		total = bltInt(tmp[cnt]);
		page = get_page(2, total, 10);
		for(i=page['start']; i <= page['end'];i++)
			cur = (page['curpage'] == i) ? ' class="active"' : '';
			pages[] = '<li'+cur+'><a href="'+page['link']+'page='+i+'">'+i+'</a></li>';
		endfor
		data['page'] = page;
		data['pages'] = pages;
		data['articles'] = Mysql.fetchAll(db, "select id,title,thumbnail,description,created_at from article "+ where +
							" order by id desc limit " + page['offset'] + "," + page['limit']);
		Article.SetCurCate(categories, data, cid);
		print bltMustacheFileRender("tpl/article_list.tpl", data);
	endfun

	// 设置当前分类
	fun SetCurCate(categories, data, cid)
		for(i=0;bltIterArray(categories,&i,&v);)
			if(v['id'] == cid)
				v['cur'] = 'yes';
				if(!data['title'])
					data['title'] = v['name'];
				endif
				data['catname'] = v['name'];
				break;
			endif
		endfor
		data['categories'] = categories;
	endfun
endclass


    根目录中还修改了index.zl脚本,用于显示前台首页:

inc 'common.zl';

Index.index();

class Index
	// 首页内容
	fun index()
		global querys, categories, db;
		data['title'] = 'zenglBlog首页';
		data['csses'] = bltArray('index.css');
		data['thumb_articles'] = Mysql.fetchAll(db, "select id,title,thumbnail,description,created_at from article " + 
							" where thumbnail != '' order by id desc limit 0,10");
		data['categories'] = categories;
		for(i=0;i < 2 && bltIterArray(categories,&i,&v);)
			item = bltArray();
			item['cate_id'] = v['id'];
			item['cate_name'] = v['name'];
			item['articles'] = Mysql.fetchAll(db, "select id,title,created_at from article where cid = "+v['id']+" order by id desc limit 0,5");
			items[] = item;
		endfor
		data['items'] = items;
		print bltMustacheFileRender("tpl/index.tpl", data);
	endfun
endclass


    此外,根目录中的common.zl是一个前台的通用脚本,article.zl和index.zl都会在开头加载此脚本,此脚本中执行了一些通用操作,例如加载配置和数据库脚本,初始化数据库等:

use builtin, request, mysql, session;
def TRUE 1;
def FALSE 0;
inc 'config.zl';
inc 'mysql.zl';

db = initDB();
categories = Mysql.fetchAll(db, "select id,name from category where pid=0 order by id asc");

// 初始化数据库连接
fun initDB()
	global config;
	db = bltArray();
	Mysql.init(db, config, "tpl/error.tpl");
	return db;
endfun


    根目录中还增加了一个helper.zl脚本,该脚本里面包含了前台显示时需要的辅助函数,例如和文章列表的分页有关的get_page函数:

/**
 * 获取分页相关的信息,第一个参数per表示一页显示多少条记录,total表示总记录数
 * showpage表示需要显示的分页数,link表示需要访问的地址,以问号结尾
 */
fun get_page(per, total, showpage, link = '?')
	global querys;
	totalpage = bltInt(total/per); // 根据总记录数和每页需要显示的记录数计算总页数
	if(total % per > 0) // 如果有余数则将总页数加一
		totalpage++;
	endif
	half = bltInt(showpage / 2);
	curpage = bltInt(querys['page']); // 从查询字符串中获取page也就是当前分页
	if(curpage < 1)
		curpage = 1;
	elif(totalpage > 0 && curpage > totalpage)
		curpage = totalpage;
	endif
	start = curpage - half; // 计算起始页号
	if(start < 1) 
		start = 1; 
	endif
	end = curpage + half; // 计算结束页号
	if(end > totalpage)
		end = totalpage;
	endif
	for(i=0;bltIterArray(querys,&i,&k,&v);) // 获取不包括page在内的查询字符串
		if(k != 'page')
			link += k + '=' + v + '&';
		endif
	endfor
	// 将分页信息存储到ret返回
	ret['start'] = start;
	ret['end'] = end;
	ret['offset'] = (curpage - 1) * per;
	ret['limit'] = per;
	ret['prev'] = (curpage <= 1) ? 1 : (curpage - 1); // 计算上一页
	ret['next'] = (curpage >= totalpage) ? totalpage : (curpage + 1); // 计算下一页
	ret['total'] = total;
	ret['totalpage'] = totalpage;
	ret['curpage'] = curpage;
	ret['link'] = link;
	return ret;
endfun


    在根目录中,还增加了一个tpl子目录,该目录内包含了和前台显示相关的模板。例如:index.tpl是首页模板,article_list.tpl是前台文章列表页模板,article_show.tpl是前台文章内容页的模板,header.tpl是前台公共的头部模板,包含了导航栏等,footer.tpl是前台公共的底部模板。

    在根目录的assets目录中增加了相关的css样式文件,js文件,和图片等,分别存储在assets的css,js,以及image目录中。

    前台的页面显示和后台一样都是使用的bootstrap前端框架。前台文章列表页和内容页都在顶部包含了面包屑,内容页还通过yestop的jquery插件实现了返回顶部的功能:



图5:内容页返回顶部

    此版本还修复了后台文章列表页的分页BUG,上一个版本,当列表中没有文章数据时,如果分页号大于0就会报sql错误。以及在后台搜索文章标题时加入了sql转义。

    以上就是当前版本的相关内容。OK,就到这里,休息,休息一下 o(∩_∩)o~~

结束语:

    有时,最好的选择就是重新开始!

——  《美国队长2》
 
上下篇

下一篇: zenglBlog v0.5.0 发表评论,图形验证码

上一篇: zenglBlog v0.3.0 文章管理,图片上传,生成缩略图

相关文章

zenglBlog v0.1.0 登录和后台界面

zenglBlog v0.3.0 文章管理,图片上传,生成缩略图

zenglBlog v0.7.0 增加公告功能,内容页图片自适应,首页及列表页样式调整

zenglBlog v0.2.0 分类管理

zenglBlog v0.6.0-v0.6.2 生成静态页面

zenglBlog v0.5.0 发表评论,图形验证码