0

模板设计文档

发表者:p分类:wiki2019-03-01 17:35:40 阅读[52]

网站模板存放在themes目录


以网站默认模板default为例,该模板在themes/default目录


模板下起码包含以下文件:


info.txt  模板说明文件
style.css 模板css文件
theme.png 模板截图
header.html 网站头部
footer.html 网站尾部
sidebar.html 网站边栏,此文件html结构不能进行改变
page.html 分页列表模板
notice.html 跳转提示文件,比如在注册会员后提示注册会员成功
index.html首页模板文件
blog.html 博客显示模板文件
list.html 博客列表模板
login.html 登陆页面模板
user.html 用户中心模板
reg.html 注册页面模板

comments.html 评论列表模板


-------------------------------------------------------------------------------------------------------------


info.txt用于说明整个模板信息


模板名字: default
模板描述: The default simple-log template.
模板演示地址: http://www.simple-log.com/
版本: 1.0
作者: pengwenfei
作者网址: http://www.simple-log.com/

其中模板名字default必须与目录名字相同,其他的根据情况填写


header.html标签说明


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>{$page_title}</title>
<meta name="keywords" content="{$blog_keyword}" />
<link href="{$domain}{$templates_dir}style.css" media="all" rev="stylesheet" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="{$domain}feed.php" />
<script src="{$domain}includes/js/jquery.js"></script>
</head>


<body>


<div id="container">
  <div id="header">
  <div class="logo">
  <a href="{$domain}index.php">{$blog_name}</a>
  </div>
  </div>  <!-- end #header -->


  <div id="nav">
<ul>
{foreach from=$nav_list item=nav}
    <li {if $nav.current eq 1}class="current"{/if}><a href="{$nav.content}" title="{$nav.desc}">{$nav.title}</a></li>
{/foreach}
</ul>
</div>
  {include file="sidebar.html"}



{$page_title}标签标示网站标题


{$blog_keyword} 博客关键字


{$blog_desc} 博客描述


{$domain} 网站域名地址,比如http://www.simple-log.com


{$templates_dir}标示模板位置


{$domain}{$templates_dir}style.css 标示css文件位置


{$domain}feed.php feed文件地址


{$domain}includes/js/jquery.js js文件地址


{foreach from=$nav_list item=nav}
<li {if $nav.current eq 1}class="current"{/if}><a href="{$nav.content}" title="{$nav.desc}">{$nav.title}</a></li>
{/foreach}



此段代码标示循环导航地址,比如Simple-Log的首页、给我们建议,只可以改变内部的{foreach from=$nav_list item=nav}到{/foreach}中间的代码






其中的<li>开始和</li>结尾是具体的导航信息

<li {if $nav.current eq 1}class="current"{/if}><a href="{$nav.content}" title="{$nav.desc}">{$nav.title}</a></li>



{if $nav.current eq 1}class="current"{/if}



此代码标示如果点击的是当时导航地址


{$nav.content}标签标示导航地址


{$nav.desc}导航描述


{$nav.title}导航标题


{include file="sidebar.html"}



标示引入边栏文件




sidebar.html
此处与后台设置有关系,后台将自动生成此文件,只能设计此文件的css代码,不能改变html结构


footer.html
{$tj}这个是存放统计代码标签,其他的全部为html代码






page.html

<div id="page">
<ol class="pages">
{if $page_count>1}     
总共{$page_count}页,当前第{$pg}页 | 页数:
{foreach from=$page_arr item=page}
<li {if $pg eq $page.value}class="current"{/if}><a href="{$page.url}" >{$page.name}</a></li>
{/foreach}
{/if}
</ol>
</div>




{if $page_count>1}


  标示如果页数大于1


{$page_count} 页数
{$pg} 当前第几页
{foreach from=$page_arr item=page}
<li {if $pg eq $page.value}class="current"{/if}><a href="{$page.url}" >{$page.name}</a></li>
{/foreach}



循环页数,只能改变只可以改变内部的{foreach from=$nav_list item=nav}到{/foreach}中间的代码


其中的<li>开始和</li>结尾是具体的页数信息


{if $pg eq $page.value}class="current"{/if}  


标示如果是当前页数将此页数标记为当前css




{$page.url}页数地址
{$page.name}页数名字,比如1、2、3






notice.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跳转提示</title>
<meta http-equiv="refresh" content="2;URL={$new_url}">
<style type="text/css">
</style>


</head>


<body>
<p style="margin: 50px; font-size:14px;line-height:130%;">{$msg},正在跳转...</p>
</body>
</html>



{$new_url}要跳转的地址


{$msg}跳转提示信息








index.html

{include file="header.html"}
{*日志部分*}


<div id="content">
{foreach from=$blog_list item=blog}
<div class="post">
        <div class="info">
        <h3 class="title"><a href="{$blog.url}" >{$blog.title}</a></h3>   
        <span class="time">{$blog.add_time}</span>  
        <span class="author">发表者:{$blog.user_name}</span>
    </div>
{$blog.description}
<a href="{$blog.url}">详细内容</a>


  <p style="margin-top:1em;"><a href="{$blog.url}#pl" >评论[{$blog.comments}]</a>  |  <a href="{$blog.url}" >阅读[{$blog.views}]</a>  |  <a href="{$blog.cat_url}">分类:{$blog.cat_name}</a></p>
  </div>
<br /><br />
{/foreach}


{include file="page.html"}
{include file="footer.html"}





{include file="header.html"}       引入头部文件
{foreach from=$blog_list item=blog}  博客列表循环开始
{$blog.url}日志地址 
{$blog.title}日志标题
{$blog.add_time} 日志添加时间
{$blog.user_name}发表者
{$blog.description} 博客描述
{$blog.comments}评论数目
{$blog.views}阅读次数
{$blog.cat_url}分类地址
{$blog.cat_name}分类名字
{/foreach}日志列表循环结束
{include file="page.html"}引入分页列表
{include file="footer.html"}引入尾部模板






list.html



{include file="header.html"}
{*日志部分*}
<div id="content">
{if $notice != ''}
<div class="new_notice">{$notice}</div>
{/if}
{foreach from=$blog_list item=blog}
<div class="post">
        <div class="info">
        <h3 class="title"><a href="{$blog.url}" >{$blog.title}</a></h3>   
        <span class="time">{$blog.add_time}</span>  
        <span class="author">发表者:{$blog.user_name}</span>
    </div>
{$blog.description}
<a href="{$blog.url}">详细内容</a>


             <p style="margin-top:1em;"><a href="{$blog.url}#pl" >评论[{$blog.comments}]</a>  |  <a href="{$blog.url}" >阅读[{$blog.views}]</a>  |  <a href="{$blog.cat_url}">分类:{$blog.cat_name}</a></p>
  </div>
{/foreach}


{include file="page.html"}


{include file="footer.html"}





{include file="header.html"}       引入头部文件
{foreach from=$blog_list item=blog}  博客列表循环开始
{$notice}提示信息,比如分类描述
{$blog.url}日志地址 
{$blog.title}日志标题
{$blog.add_time} 日志添加时间
{$blog.user_name}发表者
{$blog.description} 博客描述
{$blog.comments}评论数目
{$blog.views}阅读次数
{$blog.cat_url}分类地址
{$blog.cat_name}分类名字
{/foreach}日志列表循环结束
{include file="page.html"}引入分页列表
{include file="footer.html"}引入尾部模板








blog.html


{include file="header.html"}
{*日志部分*}
<div id="content">
<div class="post">
<div class="info">
<h3 class="title"><a href="{$blog.url}" >{$blog.title}</a></h3>   
<span class="time">{$blog.add_time}</span>  
<span class="author">发表者:{$blog.user_name}</span>
    </div>
    {$blog.content}


    <p style="margin-top:1em;"><a href="{$blog.url}#pl" >评论[{$blog.comments}]</a>&nbsp;&nbsp;|&nbsp;&nbsp;阅读[{$blog.views}]&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{$blog.cat_url}">分类:{$blog.cat_name}</a>&nbsp;&nbsp;|&nbsp;&nbsp;Tags:{$blog.tags}</p>
  </div>


<!--{if $open_comment eq 1}-->
<div class="new_notice">网站已经关闭评论</div>
<!--{elseif $blog.open_type eq 1}-->
<div class="new_notice">此日志评论已经关闭</div>
<!--{else}-->
<div class="pl"> 
<div id="replay">
<div id="replay_box">
<a name="pl"></a>
    <form action="post.php?act=pl_post" method="post"  name="post_comment" id="post_comment" >
<div id="post_comments_notice" style="display:none;padding-bottom:5px;clear:both;font-size: 13px;font-family: verdana,arial; color:#FF0000">评论数据提交中......</div>
{insert name='comments_name'}
  <p>
  评论内容:<br />
  <textarea name="content" cols="40" rows="5"></textarea>
  </p>
  <p>
    <input type="button" name="button" id="comment_button1" value="提交" onclick="post()"  />
  </p>
</form>
</div>
</div>
<p class="p_list"><a onclick="post()">评论列表</a></p>
<div id="load_comments_notice" style="display:none;font-size: 13px;font-family: verdana,arial; color:#FF0000">评论数据加载中......</div>
<ol id="comments_list"></ol></div>
<!--{/if}-->


<script type="text/javascript">
var id={$blog.blog_id};
var u='{$domain}';
<!-- {literal} -->
$('#load_comments_notice').css("display","block"); 
var geturl=u+"/post.php?act=comments_list&id="+id;
$.getJSON(geturl,
function(data){
  $('#comments_list').html(data.content); 
  $('#load_comments_notice').css("display","none"); 
}); 




function post()
{
 comment_id=$('#post_comments_id').html();
 $('#post_comments_notice').show();
     var params=$('input').serialize(); 
 p=params+'&content='+$('textarea').val();
 var ajaxurl=u+'/post.php?act=post_comment&id='+id+'&comment_id='+comment_id;
     $.ajax({url:ajaxurl,type:'post', dataType:'json',data:p,success:update_comments});
}


function update_comments(data)
{
$('#post_comments_notice').css("display","block"); 
if(data.error!='no')
{
$('#post_comments_notice').html(data.error);
}
else
{
$('#post_comments_notice').html('评论发布成功');
var post_form=$('#replay_box').html();
$('#replay').html('<div id="replay_box">'+post_form+'</div>');
$('#comments_list').html(data.content); 
$('textarea').val('');
$('#post_comments_id').remove(); //请客回复id
}
}


function replay(comment_id)
{
$('#post_comments_notice').html('');
$('#post_comments_id').remove(); //请客回复id
var post_form=$('#replay_box').html();
$("#replay_box").remove();
$('#box-'+comment_id).append('<div id="replay_box">'+post_form+'<div id="post_comments_id" style="display:none;">'+comment_id+'</div></div><p>&nbsp;</p>');
}


<!-- {/literal} -->
</script>
{include file="page.html"}


{include file="footer.html"}





{include file="header.html"}       引入头部文件
{foreach from=$blog_list item=blog}  博客列表循环开始
{$blog.url}日志地址 
{$blog.title}日志标题
{$blog.add_time} 日志添加时间
{$blog.user_name}发表者
{$blog.description} 博客描述
{$blog.comments}评论数目
{$blog.views}阅读次数
{$blog.cat_url}分类地址
{$blog.cat_name}分类名字
{/foreach}日志列表循环结束
{include file="page.html"}引入分页列表
{include file="footer.html"}引入尾部模板



<!--{if $open_comment eq 1}--> 判断网站是否关闭评论
<!--{elseif $blog.open_type eq 1}-->判断日志是否关闭评论
<!--{else}-->判断结束

{insert name='comments_name'}插入评论者信息,包括用户名




reg.html


{include file="header.html"}       引入头部文件
{$notice}提示信息,比如注册失败等等
建议不要改变表单id,因为与ajax部分关联
{include file="page.html"}引入分页列表
{include file="footer.html"}引入尾部模板




user.html
{include file="header.html"}       引入头部文件
{$notice}提示信息,比如注册失败等等
{$user.user_name}用户名
{$user.email}用户email
{$user.home}用户主页
{include file="page.html"}引入分页列表
{include file="footer.html"}引入尾部模板


名字:

个人主页地址:

E-mail:

评论列表