FAQ首页 > 模板风格 > SupeSite > 查看文章
收起边栏
大字 小字 收藏 复制URL










6.0
SupeSite6.0模板制作教程
2008-06-06┆52,037 Views┆96
Tags : 模板

以综合首页为例,向各位简要介绍一下 SupeSite 的模板结构和制作方法,希望能够起到抛砖引玉的作用。首先以图片简要介绍一下 index.php 里边的模块,然后再实际的调整一下,以让各位更加明确。本文主要面对的对象是初级入门者,不过要求稍微懂一些 HTML 和 CSS 的知识,否则的话你可以需要先去学习一些 HTML 和 CSS 的有关知识了。

一、header

header 部分的代码如下:

<div >
<table cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="{S_URL}/"><img src="{S_URL}/templates/$_SCONFIG[template]/images/logo.gif" alt="$_SCONFIG[sitename]" /></a> </td>
<td ><ul>
<li><a href="{S_URL}/">首页</a></li>
<!--{loop $channels['menus'] $value}-->
<li><a href="$value[url]">$value[name]</a></li>
<!--{/loop}-->
<li><a href="{S_URL}/batch.search.php">搜索</a></li>
</ul></td>
</tr>
</table>
<!--{if !empty($ads['pageheadad'])}-->
<div >$ads[pageheadad]</div>
<!--{/if}-->
<div >
<!--{if !empty($channels['types']['news'])}-->
<!--{block name="category" parameter="type/news/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/36800/cachename/category_news/tpl/data"}-->
<dl>
<dt><strong><a href="#action/news#">$channels['menus']['news']['name']</a></strong></dt>
<!--{loop $_SBLOCK['category_news'] $value}-->
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
<!--{/loop}-->
</dl>
<!--{/if}-->
<!--{if !empty($channels['types']['blog'])}-->
<!--{block name="category" parameter="type/blog/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/37800/cachename/category_blog/tpl/data"}-->
<dl>
<dt><strong><a href="#action/blog#">$channels['menus']['blog']['name']</a></strong></dt>
<!--{loop $_SBLOCK['category_blog'] $value}-->
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
<!--{/loop}-->
</dl>
<!--{/if}-->
<!--{if !empty($channels['types']['image'])}-->
<!--{block name="category" parameter="type/image/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_image/tpl/data"}-->
<dl>
<dt><strong><a href="#action/image#">$channels['menus']['image']['name']</a></strong></dt>
<!--{loop $_SBLOCK['category_image'] $value}-->
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
<!--{/loop}-->
</dl>
<!--{/if}-->
<!--{if !empty($channels['types']['video'])}-->
<!--{block name="category" parameter="type/video/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_video/tpl/data"}-->
<dl>
<dt><strong><a href="#action/video#">$channels['menus']['video']['name']</a></strong></dt>
<!--{loop $_SBLOCK['category_video'] $value}-->
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
<!--{/loop}-->
</dl>
<!--{/if}-->
<!--{if !empty($channels['menus']['group'])}-->
<!--{block name="category" parameter="type/group/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_group/tpl/data"}-->
<dl>
<dt><strong><a href="#action/group#">$channels['menus']['group']['name']</a></strong></dt>
<!--{loop $_SBLOCK['category_group'] $value}-->
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
<!--{/loop}-->
</dl>
<!--{/if}-->
</div>
<div >
<form action="{S_URL}/batch.search.php" method="post">
<input type="text" name="searchkey" />
<select name="type" >
<option value="">全部</option>
<!--{loop $channels['types'] $value}-->
<option value="$value[nameid]">$value[name]</option>
<!--{/loop}-->
</select>
<button type="submit" name="subjectsearch" value="true">搜索</button>
</form>
<p>您的位置:<a href="{S_URL}/">首页</a></p>
</div>
</div>

相对应的部分如下图所示:

这部分相对来说比较简单,大家应该都能分得清,这里就不再赘述了。

二、幻灯片、头条、控制面板等区域

这部分的代码如下:

<div >
<!-- 用户面板 -->
<div topblock">
<script src="{S_URL}/batch.panel.php?rand={eval echo rand(1, 999999)}" type="text/javascript" language="javascript"></script>
</div>
<!--{block name="announcement" parameter="order/displayorder/limit/0,7/cachetime/96400/subjectlen/30/cachename/announce/tpl/data"}-->
<div >
<h3>站点公告</h3>
<ul >
<!--{if empty($_SBLOCK['announce'])}-->
<li>暂时没有公告</li>
<!--{else}-->
<!--{loop $_SBLOCK['announce'] $value}-->
<li><a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
<!--{/if}-->
</ul>
</div>
<!--{block name="poll" parameter="order/dateline DESC/limit/0,5/cachetime/80000/subjectlen/30/cachename/poll/tpl/data"}-->
<div >
<h3>站点调查</h3>
<ul >
<!--{if empty($_SBLOCK['poll'])}-->
<li>暂时没有调查</li>
<!--{else}-->
<!--{loop $_SBLOCK['poll'] $value}-->
<li><a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
<!--{/if}-->
</ul>
</div>
</div>
<div >
<!--最新日志图片幻灯片 开始-->
<!--{block name="spaceblog" parameter="haveattach/1/showattach/1/order/i.dateline DESC/limit/0,4/cachetime/13930/cachename/picblog/tpl/data"}-->
<div cleanblock topblock" >
<!--{if !empty( $_SBLOCK['picblog'])}-->
<script type="text/javascript" language="javascript">
<!-- 
var xsTextBar = 1; //是否显示文字链接,1为显示,0为不显示
var xsPlayBtn = 0; //是否显示播放按钮,1显示,0为不显示
var xsImgSize = new Array(200,167); //幻灯图片的尺寸,格式为“宽度,高度”
var xsImgs = new Array();
var xsImgLinks = new Array();
var xsImgTexts = new Array();
<!--{eval $i=0;}-->
<!--{loop $_SBLOCK['picblog'] $key $value}-->
xsImgs[$i] = "$value[a_thumbpath]";
xsImgLinks[$i] = "<!--{eval echo url_remake($value['url']);}-->";
xsImgTexts[$i] = "<!--{eval echo addslashes($value[subject])}-->";
<!--{eval $i++;}-->
<!--{/loop}-->
//-->
</script>
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/slide.js"></script>
<!--{/if}-->
</div>
<!--{block name="spaceblog" parameter="notype/1/dateline/604800/order/i.goodrate DESC/limit/0,8/cachetime/14400/subjectlen/28/cachename/recommendnews/tpl/data"}-->
<div >
<h3>一周好评榜</h3>
<ul >
<!--{if !empty($_SBLOCK['recommendnews'])}-->
<!--{loop $_SBLOCK['recommendnews'] $value}-->
<li><a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
<!--{/if}-->
</ul>
</div>
</div>
<div >
<!--一周点击排行头条-->
<!--{block name="spacenews" parameter="dateline/604800/showattach/1/showdetail/1/order/i.viewnum DESC/limit/0,1/subjectlen/34/subjectdot/1/messagelen/80/messagedot/1/cachetime/18600/cachename/headnews/tpl/data"}-->
<div cleanblock topblock">
<!--{if !empty($_SBLOCK[headnews])}-->
<!--{loop $_SBLOCK[headnews] $value}-->
<!--{if !empty($value[a_thumbpath])}-->
<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<!--{/if}-->
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
<!--{/loop}-->
<!--{/if}-->
</div>
<!-- 一周回复热点 -->
<!--{block name="spaceblog" parameter="notype/1/dateline/604800/order/i.replynum DESC/subjectlen/34/limit/0,15/cachetime/13600/showspacename/1/cachename/newinfos/tpl/data"}-->
<div >
<ul linelist">
<!--{loop $_SBLOCK[newinfos] $value}-->
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>
</div>

相应的部分如下图所示:

这部分我们以 mainarea 为例,简单介绍一下 SupeSite 文件里的一些东西:

<div >
<!--一周点击排行头条-->
<!--{block name="spacenews" parameter="dateline/604800/showattach/1/showdetail/1/order/i.viewnum DESC/limit/0,1/subjectlen/34/subjectdot/1/messagelen/80/messagedot/1/cachetime/18600/cachename/headnews/tpl/data"}-->
<div cleanblock topblock">
<!--{if !empty($_SBLOCK[headnews])}-->
<!--{loop $_SBLOCK[headnews] $value}-->
<!--{if !empty($value[a_thumbpath])}-->
<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<!--{/if}-->
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
<!--{/loop}-->
<!--{/if}-->
</div>
<!-- 一周回复热点 -->
<!--{block name="spaceblog" parameter="notype/1/dateline/604800/order/i.replynum DESC/subjectlen/34/limit/0,15/cachetime/13600/showspacename/1/cachename/newinfos/tpl/data"}-->
<div >
<ul linelist">
<!--{loop $_SBLOCK[newinfos] $value}-->
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>

在 SupeSite 的模板文件内,大家会经常看到这样的语句:

    CODE: [COPY]
  • <!--{block name="spacenews" parameter="dateline/604800/showattach/1/showdetail/1/order/i.viewnum DESC/limit/0,1/subjectlen/34/subjectdot/1/messagelen/80/messagedot/1/cachetime/18600/cachename/headnews/tpl/data"}-->

其实,这个类似论坛的 JS 调用,通过 SupeSite 后台创建模块得到模块代码或者是 JS 代码。只需要复制模块的时候不要丢下这个就行了。

还有就是循环的语句,比如:

<!--{loop $_SBLOCK[newinfos] $value}-->
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->

记得这个是有头有尾的,它的意思就是在 loop 中间的部分会进行循环,输出多条数据。

再看下 if 语句:

<!--{if !empty($_SBLOCK[headnews])}-->
<!--{loop $_SBLOCK[headnews] $value}-->
<!--{if !empty($value[a_thumbpath])}-->
<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<!--{/if}-->
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
<!--{/loop}-->
<!--{/if}-->

这个就是一个判断,比如第一条,也就是假如 $_SBLOCK[headnews] 非空的话执行下边的语句,记得这个也是有头尾的,复制模块的时候认清 if 的开头和结尾。

三、资讯

资讯部分的代码如下:

<!--{if !empty($channels['types']['news'])}-->
<div >
<div > <a href="#action/news#" >更多</a>
<h2>资讯</h2>
</div>
<div >
<div >
<!-- 一个月点击排行榜 -->
<!--{block name="spacenews" parameter="dateline/2592000/haveattach/1/showattach/1/order/i.viewnum DESC/showdetail/1/messagelen/180/messagedot/1/limit/0,1/cachetime/98800/subjectlen/30/cachename/hotnews/tpl/data"}-->
<div >
<h3>月点击图文头条</h3>
<!--{loop $_SBLOCK[hotnews] $value}-->
<p ><a href="$value[url]"><img src="$value[a_thumbpath]" alt="$value[subject]" /></a>$value[message]... <a href="$value[url]">阅读更多</a></p>
<!--{/loop}-->
</div>
</div>
<div >
<!--{block name="spacenews" parameter="order/i.lastpost DESC/limit/0,9/cachetime/14400/subjectlen/30/cachename/spacialnews/tpl/data"}-->
<div >
<h3>评论更新</h3>
<ul >
<!--{loop $_SBLOCK[spacialnews] $value}-->
<li><a href="$value[url]" target="_blank">$value[subject]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>
<div >
<!--{block name="spacenews" parameter="order/i.dateline DESC/subjectlen/40/subjectdot/1/limit/0,10/cachetime/10800/cachename/newnews/tpl/data"}-->
<ul linelist">
<!--{loop $_SBLOCK['newnews'] $value}-->
<li><cite>#date("m-d", $value["dateline"])# </cite><a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>
</div>
<!--{/if}-->

资讯主要分为左中右三部分,分别为 sideL、mainarea 和 sideR,这个大家应该都能看得清楚。相对应部分的图片为:

四、日志

这部分代码为:

<!--{if !empty($channels['types']['blog'])}-->
<div >
<div > <a href="#action/blog#" >更多</a>
<h2>日志</h2>
</div>
<div >
<div >
<!--{block name="userspace" parameter="order/u.spaceallnum DESC/limit/0,10/cachetime/44000/cachename/topspace/tpl/data"}-->
<div stat" > <a href="#action/spaces#" >所有空间</a>
<h3>空间排行</h3>
<ol>
<!--{loop $_SBLOCK['topspace'] $value}-->
<li><em>$value[spaceallnum]</em><a href="$value[url]">$value[spacename]</a></li>
<!--{/loop}-->
</ol>
</div>
</div>
<div >
<!-- 同城空间 -->
<div cleanblock">
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/city.js"></script>
<form action="{S_URL}/batch.search.php" method="post">
<button type="submit" name="usersearch" value="true">同城
空间</button>
<script language="javascript" type="text/javascript">showprovince('province', 'city', '');</script>
<script language="javascript" type="text/javascript">showcity('city', '');</script>
</form>
</div>
<!--{block name="tag" parameter="order/spaceallnum DESC/limit/0,20/cachetime/21600/cachename/hottag/tpl/data"}-->
<div boldblock">
<h3>热门标签</h3>
<div >
<!--{loop $_SBLOCK['hottag'] $value}-->
<a href="$value[url]">$value[tagname]<em>($value[spaceallnum])</em></a>
<!--{/loop}-->
</div>
</div>
</div>
<div >
<!-- 周评论榜 -->
<!--{block name="spaceblog" parameter="dateline/604800/order/i.replynum DESC/subjectlen/40/subjectdot/1/limit/0,10/cachetime/18400/cachename/hotblog/tpl/data"}-->
<ul linelist">
<!--{loop $_SBLOCK['hotblog'] $value}-->
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite><a href="$value[url]">$value[subject]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>
</div>
<!--{/if}-->

日志模块其实跟资讯差不多,只不过在左侧部分多了一个同城空间,相应部分如下图所示:

五、圈子、图片、影音、商品

这四部分的结构几乎一样,以圈子为例,代码如下:

<!--{if !empty($channels['menus']['group'])}-->
<div >
<div > <a href="#action/group#" >更多</a>
<h2>圈子</h2>
</div>
<div >
<div >
<!--{block name="group" parameter="order/g.dateline DESC/limit/0,8/cachetime/19900/cachename/newgroup/tpl/data"}-->
<div >
<h3>最新圈子</h3>
<ul >
<!--{loop $_SBLOCK['newgroup'] $value}-->
<li><cite><a href="#uid/$value[uid]#" target="_blank" title="圈主">$value[username]</a></cite><a href="$value[url]" target="_blank">$value[groupname]</a></li>
<!--{/loop}-->
</ul>
</div>
</div>
<div >
<!--最近更新-->
<!--{block name="group" parameter="order/g.lastpost DESC/limit/0,12/cachetime/11000/cachename/updategroup/tpl/data"}-->
<div >
<ul >
<!--{loop $_SBLOCK['updategroup'] $value}-->
<li >
<div><a href="$value[url]" title="$value[groupname], by $value[username]"><img src="$value[logo]" alt="$value[groupname]" /></a></div>
<p><a href="$value[url]">$value[groupname]</a><span title="共有$value[usernum]位会员"> ($value[usernum])</span></p>
</li>
<!--{/loop}-->
</ul>
</div>
</div>
</div>
</div>
<!--{/if}-->

这个模块主要分为两部分,分别为 sideL 和 mainarea,比较简单,对应的部分如下图所示:

五、文件、书签以及一些专题模块等

这部分和资讯模块几乎一样。

六、友情链接

友情链接代码如下:

<!--{if !empty($_SCONFIG['showindex'])}-->
<!--{block name="friendlink" parameter="order/displayorder/limit/0,$_SCONFIG['showindex']/cachetime/11600/namelen/32/cachename/friendlink/tpl/data"}-->
<!--{eval $imglink=$txtlink="";}-->
<!--{loop $_SBLOCK['friendlink'] $value}-->
<!--{if $value[logo]}-->
<!--{eval $imglink .="<li><a href=\"".$value[url]."\" target=\"_blank\"><img src=\"".$value[logo]."\" alt=\"".$value[description]."\" /></a></li>";}-->
<!--{else}-->
<!--{eval $txtlink .= "<li><a href=\"".$value[url]."\" title=\"".$value[description]."\" target=\"_blank\">".$value[name]."</a></li>";}-->
<!--{/if}-->
<!--{/loop}-->
<div > <a href="#action/site/type/link#">更多链接</a>
<h3>友情链接</h3>
<ul >
$imglink
</ul>
<ul >
$txtlink
</ul>
</div>
<!-- /链接 -->
<!--{/if}-->

这部分需要在后台 => 站点设置 => 其他设置里边设置友情链接的数目后才能显示的,也很简单就能看清楚了,对应部分如下图所示:

七、#footer

<div >
<!--{if !empty($ads['pagefootad'])}-->
<div > $ads[pagefootad] </div>
<!--{/if}-->
<p> <a href="{S_URL}/">$_SCONFIG[sitename]</a> | <a href="{B_URL}/" target="_blank">交流论坛</a> | <a href="http://faq.comsenz.com/action/site/type/panel">快捷面板</a> | <a href="http://faq.comsenz.com/action/site/type/map">站点地图</a> | <a href="http://faq.comsenz.com/action/site/type/link">友情链接</a> | <a href="http://faq.comsenz.com/action/spaces">空间列表</a> | <a href="{S_URL}/archiver/">站点存档</a> | <a href="mailto:$_SCONFIG[adminemail]">联系我们</a> </p>
<p > Powered by <a href="http://www.SupeSite.com" target="_blank"><strong>Supe<span>Site</span></strong></a> <em>
<?=S_VER?>
</em> &copy; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a> 
{eval debuginfo();} </p>
</div>

这里是底部部分,也很容易看懂,唯一不足的是上边那一排导航应该用列表更合适,如下图所示:

首页就这么多内容,其他页面也差不多,大家仔细看一下就会明白了,这一部分是写给那些不愿意看 SupeSite 模板文件的朋友,其实 SupeSite 模板没有那么难懂,相对来说比 Discuz! 模板要简单一些。


96

满意

不满意

本篇文章用到的Tags : 模板

没找到您想要的答案吗?建议您到我们的讨论区发帖寻求大家和 Comsenz 工作人员的帮助。