Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[教程] SupeSite的模板制作教程和部分相关信息

[复制链接]
流星雪影 发表于 2006-12-27 18:05:31 | 显示全部楼层 |阅读模式
本帖最后由 流星雪影 于 2009-5-9 23:03 编辑

SupeSite的模板制作教程部分相关信息[模板制作不完全手册]
流星雪影综合收集整理 白领时尚论坛


一 前期准备[便于本地测试]

0环境搭建相关教程

Zeus 4.3+php+Zend Optimizer for Linux安装指南(第二版)
https://discuz.dismall.com/viewthread.php?tid=85432

Zeus+php+Zend Optimizer for Linux安装指南
https://discuz.dismall.com/viewthread.php?tid=46937

IIS+PHP+MySQL+ZendOptimizer+GD库+phpMyAdmin安装配置(图文版)
https://discuz.dismall.com/viewthread.php?tid=206616

Win2000/XP/2003下IIS/Apache+PHP+MySQL+Zend Optimizer+phpMyAdmin安装配置
https://discuz.dismall.com/viewthread.php?tid=90874


1二进制上传方法
https://discuz.dismall.com/viewthread.php?tid=73393

2phpmyadmin导入sql语句方法及phpmyadmin用法小结
https://discuz.dismall.com/viewthread.php?tid=118440
https://discuz.dismall.com/viewthread.php?tid=207058
https://discuz.dismall.com/viewthread.php?tid=132882



二,X-Space 2.0/SupeSite 5.0 Final目录结构详解![原作者:网点 大大]


今天我门来看看 X-Space 2.0/SupeSite 5.0 Final的目录结构,可以间接的帮助我门更好的了解它和使用它!我门会挑一些重要的目录进行说明,其他的略过,当然如果大家有需要可以随时交流!

第一个,CACHE目录,这个可是命脉啊,所有生成的缓存都在这里面,此文件夹记得一定不能删除,要不你的站点有可能会出些不大不小的问题,会给你徒增烦恼,嘿嘿,所以一般情况下不要去修改此目录下的任何文件.!

第二个,CSS目录,这个目录下面,所有站点相关的样式表都存放在这里,这些CSS决定了你的门户的"脸面"啊,不能删除,当然如果你有一定的HTML&CSS基础的话另说,否则估计你的页面美观程度会倒退几年...:),有些用户说页面难看,有可能就是此目录下面的CSS文件不完整,弥补办法就是重新上传一下!

第三个,templates目录,基本上现在的用户使用上都在围绕这个目录做文章,因为它下面的文件就是整个站点对应的模板拉,想要你的站点有个性有自己的风格,就离不了长来这个目录转转拉.此目录下面的文件命名上和站点的页面是一一对应的,比如资讯页对应的模板文件就是--news_header.html.php--news_index.html.php等等,有一些设计经验的朋友都应该从命名上看出他门的作用来,摸清这里的情况,你的站点无疑将是所有站点中的亮点...弄清楚它!

第四个,就是STYLE目录了,所有的模块风格文件都在此了,我门通过模块(注:
如何快速读懂SUPESITE的模块代码)来得到的数据,最后展现前都得经过模块风格,所以....要想配合好你设计出来的风格,这里也就更显重要了,至于怎么利用,我门会开辟新帖专门讨论,记得一定要来关注!
第舞个,就是user目录了,所有的用户的空间都在这里放着(什么你删除了?没有关系只要数据库有数据,当用户在访问的时候会重新建立,不过记得USR目录一定要有对应的权限哦),所以有的时候进行数据备份连他也一起打包吧,要不有些用户空间就没有CSS了,有点难看的说(注:解决方法:让用户换个风格,就可以重新生成一个CSS)....
好了,其他目录如果有需要我门会慢慢的讲解.....OVER!



图片附件: dir.gif (2006-11-17 17:33, 36.29 K)

推荐参考:
X-Space 2.0/SupeSite 5.0 Final主要页面展示内容说明:
https://discuz.dismall.com/viewthread.php?tid=446043


三,SupSite页面文件与模块关系说明[原作者:茄子 姐姐]

1,  SupeSite的模板文件和页面的关联

SupeSite的模板文件和页面url链接地址是有关联的。大家可以打开templates/default目录,可以发现其文件名都是有规律的。下面我会详细说明文件名和链接地址的具体关系。
下面列出的是templates/default里面的全部文件
可以看到文件名都是有规律的,以bbs_开头的都是论坛的页面文件,以blog_开头的都是日志的页面文件,同理文件、商品、书签、图片的页面都是一样的规律。
稍微懂点英文的人都可以看出,以论坛页面文件为例,
bbs_footer.html.php    代表论坛页面的页脚文件
bbs_forumdisplay.html.php  代表论坛页面的板块列表
                       对应url地址http://域名?action_forumdisplay_fid_板块编号.html
bbs_header.html.php   代表论坛页面的头部文件
bbs_index.html.php    代表论坛首页文件         对应url地址http://域名/action_bbs.html
bbs_viewthread.html.php  
代表论坛帖子查看页面   对应url地址http://域名/?action_viewthread_tid_帖子编号.html

从上面可以看出,url地址其实和文件名是一致的
再看日志的页面文件
其中有一个比较特殊的,就是blog_category.html.php,根据页面英文单词可以猜测为日志分类页面,确实是!
我们可以访问日志的分类,http://域名?action_category_catid_日志分类编号.html,也和文件名吻合。
其他文件、商品、图片、书签页面和日志是一模一样的。
资讯页面有2个特殊的,news_view.html.php  news_viewcomment.html.php
根据英文可以判断是资讯查看页面,和资讯评论查看页面。
其对应的url地址分别是http:/域名?action_viewnews_itemid_资讯编号.html
http://域名/?action_viewcomment_itemid_资讯编号.html



图片附件: Snap2.jpg (2006-11-29 16:12, 121.38 K)


下面的图片是站点的相关文件
同样,根据上面的方法可以很快得出,分别是站点的公告页面、页脚、头部文件、站点友情链接、登陆、站点地图、快捷面板、投票、注册、搜索、安全问答、tagtag查看全部页面、脚印页面
Spaces_开头的都是空间页面,分别是个人空间分类页面、个人空间页脚、头部、首页。



图片附件: Snap4.jpg (2006-11-29 16:12, 80.1 K)


搞清楚了上面的文件和对应页面url访问链接关系之后,我们来接着看具体页面里的模块。
以站点首页为例,我们可以很快定位他对应的文件页面是templates/default/index.html.php

2,如何读懂模块代码

这个部分网点也说明过,大家可以看看https://discuz.dismall.com/thread-456494-1-1.html

首先需要说明的是SupeSite全部页面的信息都是通过模块来进行汇集的。你所看到的页面的每条内容都是利用SupeSite后台的模块功能创建并提取出来的。通过SupeSite的模块功能,您可以将X-SpaceDiscuz!的几乎全部内容都可以提出出来。
具体的创建模块代码,大家可以到SupeSite站点设置――模块功能里面进行创建,全过程都是采取的向导模式,非常简单,Sup也做过一个视频教程,大家可以看看https://discuz.dismall.com/thread-320058-1-1.html
推销下,如果您对SupeSite不了解,不妨多看看帮助文档板块的帖子,还有各个板块的置顶贴,相信对您了解SupeSite/X-Space将很有帮助。
下面我们来看一段最普通的模块代码,大家可以跟着我来读懂他。

<!--{blockname="category" parameter="type/news/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/25200/cachename/category_news/tpl/data"}-->

SupeSite创建的所有模块都具有下面的统一格式:
1)  <!--{blockname="开始,以"}-->结束
2)  blockname=" "引号里面放的是模块的类型,SupeSite的模块类型都有固定的命名规则的。您可以这样查看。
登陆SupeSite站点设置――模块功能――模块列表,可以看到有下列基本模块



图片附件: Snap6.jpg (2006-11-29 16:12, 76.2 K)



您可以将鼠标放置在任何一个基本模块的名称上,然后查看地址栏,都可以看到类似下面的url地址:

http://域名/admincp.php?action=blocks&viewblocktype=spacenews&blocktype=spacenews&op=
其中blocktype=spacenews这里就可以告诉您当前查看的模块的类型是什么
根据英文可以得出,spacenews就是资讯模块
同理其他模块类型也可以很方便的知道。
blocktype=category   系统分类模块
blocktype=spacenews  资讯模块
blocktype=poll       投票模块
blocktype=spaceblog   日志模块
blocktype=spaceimage  图片模块
blocktype=spacefile    文件模块
blocktype=spacegoods  商品模块
blocktype=spacelink    书签模块
blocktype=tag         TAG模块
blocktype=spacetag     TAG文章信息模块
blocktype=spacecomment   用户回复模块
blocktype=userspace    个人空间列表模块
blocktype=announcement   站点公告模块
blocktype=bbsthread    论坛主题模块
blocktype=bbsannouncement   论坛公告模块
blocktype=bbsforum   论坛板块模块
blocktype=bbslink    论坛友情链接模块
blocktype=bbsmember  论坛会员模块
blocktype=bbsattachment  论坛附件模块
blocktype=bbspost  论坛帖子模块

1) parameter=""这里存放的就是各个模块的具体筛选参数了,相同的模块类型调出来的内容不同就是通过这里控制的,而这里的参数也是SupeSite/X-Space 模块功能自动生成的。
2)  type/news/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/25200/cachename/category_news/tpl/data
这段就是模块参数的筛选条件。这里由许多条件通过/组合起来。您稍微留心点,可以发现,上面的代码通过/分成偶数段,从左至右每2段组成一个基本筛选条件,左边代表筛选名字,右边代表筛选条件
例如上面的
type/news  /isroot/1 ischannel/2 order/c.displayorder limit/0,10 cachetime/36800等都是一个独立的基本筛选条件,
我稍微解释下:
type/表示类型,右边的/news表示资讯,所以type/news表示这个模块取的内容来自资讯
同理/isroot/1这个左边isroot表示根分类右边1表示条件成立这里1表示是,2表示否,下面的专题也是一样),所以这个/isroot/1表示是根分类
ischannel/2这个左边表示是专题,右边2表示不属于专题。
order/c.displayorder这个参数很重要,一般每个模块都会有,这个代表的是排序的条件。
Limit/1,10这个参数也很重要,一般每个模块都会有,这个代表的是取的数据的条数限制,limit右边的2个数字,左边代表的是取的数据的起始行数,右边代表取的数据条数,所以Limit/1,10就表示从第一行数据开始取10条数据。
cachetime/25200表示的是缓存时间,单位为妙。所以这个就代表缓存时间是7小时
SupeSite有强大的缓存机制,可以将全部数据进行缓存起来,有效的减少数据库查询,加快页面的打开速度。

如果您要了解更多,可以登陆站点设置――模块功能――创建模块,随便进入一个创建模块的页面,查看源文件,就可以看到各个筛选条件对应的变量了
以创建日志模块为例,查看他的源文件:
随便截取一段,如下图:



图片附件: Snap7.jpg (2006-11-29 16:19, 100.51 K)[提示:点击小图查看清晰大图,以下雷同]


其中黄色部分表示模块变量的中文意思,蓝色部分表示模块变量,灰色部分表示其对应的取值
通过这种方法,您可以到各个创建模块的页面查看源文件,基本就能明白模块代码里面各个筛选条件是怎么来的,各自代表什么含义了。


通过上面的说明,相信以后大家见到一段模块代码都知道怎么入手分析了



3,  根据页面查找模块位置

我对边在SupeSite/X-Space官方站点http://x.discuz.net随便截了一张图片,如下图:
我们如何找到黄色区域的模块代码呢?对于不懂div+css的用户来说,也可以很快确定的~

首先,我们可以得到的直观感觉就是他有15条记录,并位于中间部位。
接下来,根据上面的内容,我们很清楚这个页面对应的文件是templates/default/index.html.php


图片附件: Snap5.jpg (2006-11-29 16:12, 122.16 K)



第三步,我们用记事本打开templates/default/index.html.php这个文件

根据上面的模块知识,我们可以得到黄色部分肯定存在的一个筛选条件limit/*,15/
SupeSite的模块一般都是从0开始的,所以您可以在文件中查找下limit/0,15/

这样,您就可以很方便的找到
<!-- 1周回复热点 -->
                     <!--{block name="spaceblog" parameter="dateline/604800/notype/1/order/i.replynum DESC/subjectlen/34/subjectdot/1/limit/0,15/cachetime/1/showspacename/1/cachename/newinfos/tpl/data"}-->

如果他是唯一的,就说明您的模块代码找对了。如果不唯一,就可以再结合一点刚才说的模块的知识和页面的知识,也可以很快定位到具体的模块代码的。是不是很简单呢?呵呵

标准页面里面的模块提取的内容或许您不太满意,同样,利用刚才的模块知识,您可以在读懂了模块调用的内容之后根据您自己站点的需求修改为您自己的模块代码。

3,  修改模块代码适应自己站点
以上面找到的模块代码为例:www.027cool.com
<!-- 1周回复热点 -->
                     <!--{block name="spaceblog" parameter="dateline/604800/notype/1/order/i.replynum DESC/subjectlen/34/subjectdot/1/limit/0,15/cachetime/1/showspacename/1/cachename/newinfos/tpl/data"}-->


大家可以自己到SupeSite站点设置――模块功能――创建一个新的模块并获取模块代码替换这段模块代码。
当然,如果您通过多次实践,已经完全熟悉SupeSite的模块参数说明,您也可以直接在这段模块代码中修改。
一般大家修改的比较多的无非是条数、缓存时间这些参数,可以这样修改:
limit/0,15这里读取的是从0行开始的15条数据,如果您需要8条数据,可以改为limit/0,8
cachetime/1这里表示的是缓存时间为1妙,如果您嫌太短,需要设置为1小时,可以修改为cachetime/3600
诸如此类。


最后,我要说明的是,SupeSite模块功能给了大家一个强大的自定义站点功能,从现在开始,您不再需要局限于标准程序的设计,通过灵活运用模块功能,您可以利用SupeSite将站点内的数据,打造出千千万万种站点模式!




三,【视频教程强烈推荐】[原作者:sup 前辈]:)
SupeSite V5.0 利用模块功能进行模板设计的视频教程(更新推荐)


通过视频,手把手教你如何利用SupeSite的强大的模块功能,从一个空白页面,做出一个属于自己的站点页面。
整个教程内容翔实,思路条理,是你使用SupeSite模块功能的必备教程之一。

SupeSite的强大、灵活、自由的模板制作,是站长应该学会的,请认真学习一下此教程,方可真正学会使用SupeSite

SupeSite 5.0 模板制作的视频教程 下载地址:
http://download2.discuz.net/v5/doc/SupeSite_templates_help.wmv



五,如何创建一个新的频道?如何更改首页?
登陆站点后台--基本设置--频道设置--将其中的论坛频道显示框取消
如图
接着创建一个频道
如图

接下来到频道浏览页面将刚才创建的频道连接地址输入您需要连接到的地址,并将其显示框设置为显示
最后提交保存即可
如图

同理,其他频道创建方法一样



附:GoLive CS2基础视频教程(div+css 网页设计精品)


Golive CS2中文视频教程全集

用不了多久,也许大多数人要用GoLive做网页了。Adobe公司已收购了dreamweaver,并没有要继续开发dreamweaver的计划。

今天学会了用Golive,明天你也许会成为制作网页的高手。

用了GoLive,你才发现,做网页变得如此的方便简单。

这套教程,讲得通俗易懂,特别适合新手。当然,对用过GoLive的人也是很好的参考。



中文名称:GoLive CS2基础视频教程 大师之路 赵鹏主讲
英文名称:Golive CS2 teaching
别名:Golive CS2 最高教学
地区:大陆
语言:普通话

01 输出网页设计稿 (素材)
02 建立站点
03 操作方式初识
04 用版面网格进行布局
05 创建翻转及脚本库设置
06 通过关系图策划站点
07 使用表格
08 表格的控制和嵌套
09 应用表样式和表数据处理
10 表格制作实战(1/2)
11 表格制作实战(2/2)
12 色彩应用
13 管理站点色彩
14 设定PSD文件变量 (素材)
15 使用智能对象
16 定义及使用组件
17 更改传入和传出链接
18 使用CSS编辑器之一
19 使用CSS编辑器之二
20 使用CSS编辑器之三
21 自定义CSS项目
22 为表格设置CSS
23 有关CSS的其他操作
24 通过CSS+DIV进行布局之一
25 通过CSS+DIV进行布局之二
26 通过CSS+DIV进行布局之三
27 CSS+DIV布局样式
28 实战CSS+DIV布局
29 定义和使用模板之一
30 定义和使用模板之二
31 定义和使用模板之三
32 综合使用组件和模板
33 源代码工作方式
34 使用站点库
35 为文字和图像添加链接
36 设置图像映射
37 设定动作
38 使用标头动作和动作组
39 使用DHTML时间轴之一 (素材)
40 使用DHTML时间轴之二
41 实战DHTML制作之一
42 实战DHTML制作之二
43 使用布尔型变量
44 用框架组建页面
45 制作动画菜单之一
46 制作动画菜单之二
47 制作动画菜单之三
48 查找文本
49 查找代码元素
50 使用其它查找命令
51 使用站点查询
52 上传站点
CodeX 判断图层交错
CodeX 获取并传递图层坐标参数
地址:http://www.027cool.com/bbs/viewthread.php?tid=11220

在线观看或下载--构建DIV+CSS框架的基本教程:
http://www.027cool.com/bbs/viewthread.php?tid=11219



推荐教程类:
XS首页模板修改教程(模块篇)
〓〓〓我的模板我自己做-教你不用在div+css做风格 〓〓〓
我的模板我自己做-解析篇-完成
.supersite5.0/x-space2.0 使用“部落窝”模版风格的方法
x-space2.0用户把部落窝模版设置为系统模版的方法
教你如何简单的修改官方的风格![演示站qq.com]技术提供,浙江娱乐网!


官方程序下载:
SupeSite 5.0Final 正式版
X-Space 2.0Final 正式版

语言:
GBK简体中文版
完整包下载:
GBK简体中文版: http://www.supesite.com/download/X-Space2.0_SupeSite5.0_Final_SC_GBK.zip
简体中文UTF-8: http://www.supesite.com/download/X-Space2.0_SupeSite5.0_Final_SC_UTF8.zip
繁体中文BIG5: http://www.supesite.com/download/X-Space2.0_SupeSite5.0_Final_TC_BIG5.zip
繁体中文UTF-8: http://www.supesite.com/download/X-Space2.0_SupeSite5.0_Final_TC_UTF8.zip


Discuz!NT SQLServer1.0 RC2版本提供下载(12月22日 更新)
http://nt.discuz.net/product/discuznt_1.0_rc2_sqlserver.zip


部分风格下载及其他
https://discuz.dismall.com/forumdisplay.php?fid=73&filter=type&typeid=34
[SS区的兄弟姐妹们必看]在困境中崛起,在希望中腾飞!

整理人:流星雪影 QQ:124116530 MSN:531@live.com 个人网站:www.6long.com
爱好:网络 军事 看书 足球 摄影等 格言:在困境中崛起,在希望中腾飞!心若在,梦就在,人生不过是从头再来!

全文完,转载请保留本人信息,本人视情况不定时更新,欢迎关注。
希望朋友们为了更多人能看到这帖子,先顶后看,ok?我替需要的朋友谢谢了。。。
谢谢收看,下次再会

评分

1

查看全部评分

 楼主| 流星雪影 发表于 2006-12-27 18:05:53 | 显示全部楼层
本帖最后由 流星雪影 于 2009-5-9 23:04 编辑

希望斑竹能置顶!或者加为高亮
那样会有更多的朋友看到
以DISCUZ&supersite的名义,兄弟姐妹们 顶啊。。。。。。。。

[ 本帖最后由 流星雪影 于 2006-12-27 18:10 编辑 ]

本人新社区 六龙社区 www.6long.com 请多多支持
回复

使用道具 举报

wuhaolong 发表于 2006-12-27 18:29:49 | 显示全部楼层
DDDDDDDDDDDDDDDDDDDD
回复

使用道具 举报

 楼主| 流星雪影 发表于 2006-12-27 21:36:59 | 显示全部楼层
回复

使用道具 举报

Zart 发表于 2006-12-27 22:07:19 | 显示全部楼层
支持啊.精华了!!! :)
回复

使用道具 举报

chinafor 发表于 2006-12-27 22:48:46 | 显示全部楼层
真不容易呀.!fdeagegewgfr
回复

使用道具 举报

 楼主| 流星雪影 发表于 2006-12-28 03:54:51 | 显示全部楼层
辛苦N久 没人顶 郁闷。。。。。。。。。。。。
回复

使用道具 举报

Sophie.Cat 发表于 2006-12-28 09:03:21 | 显示全部楼层
支持下 :)
回复

使用道具 举报

 楼主| 流星雪影 发表于 2006-12-28 16:22:00 | 显示全部楼层
茄子姐姐给奖金B的帖子也不帮顶啊 呵呵
回复

使用道具 举报

游离人 发表于 2006-12-28 16:56:57 | 显示全部楼层
收藏了!感谢!:) :)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-6-2 11:50 , Processed in 0.142058 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表