XOOPS China - 创建一个xoop布景『译Theme KickStart Guide』 [技术论坛

XOOPS China 讨论区 > 风格制作 > 模版风格 > 创建一个xoop布景『译Theme KickStart Guide』

正在浏览： 1 名游客

到底部

前一个主题

下一个主题

[无发表权] 请登录或者注册

macti

创建一个xoop布景『译Theme KickStart Guide』

新进会员

注册日期:
2005/1/25 1:35

所属群组：
注册会员

帖子: 6 | 精华: 1

等级： 1; EXP： 47
HP： 0 / 11
MP： 2 / 93

Theme KickStart Guide(Macti翻译)
『来自本社区DJ老大贴出的文章』

这是一篇如何创建一个你自己的布景的文章。读完本文后你将学会如何建立自己的布景。

*编辑“default”布景。（就是默认的那个）
第一步
拷贝默认的布景文件夹到themes\default目录下重命名文件夹名称（如“cool”）。现在你拥有了一个和默认布景相同的名为cool的文件夹。
在此文件夹下打开文件theme.html找到如下字符串（用Ctrl＋f了，呵呵）
<{include file="default/theme_blockleft.html"}>
请修改如下：
<{include file="cool/theme_blockleft.html"}>
这样你能够看见你的修改结果在cool布景中。
同时此文件中还包含了一些其他的此类链接，修改方法如上。（不要怕麻烦，哦！）

第二步
现在，你必须做的是克隆你的“默认”布景了，因为默认布景是不能够被修改的。管理区 > 系统管理 > 模板风格管理，在右侧有一个“复制”按钮。你可以给新的布景取一个于你文件夹相同的名字，如“cool”。
请非常小心你此时的操作。错误的的编辑和修改将给你带来不可挽回的后果。（要胆大心细，脸皮厚）

第三步
在管理区> 系统管理 > 系统设置 > 一般设置里（一般是管理区里的第一个图标第6个设置项）在“默认模板风格”里选择“cool”作为你的默认模板风格。“从/themes/yourtheme/templates目录更新模板.html文件?若打开此功能,模块的模板.html文件将自动从更新/themes/yourtheme/templates目录更新。网站正式运行后，请关闭该功能。”在这个选项中选“是”，因为这是你唯一能够即时更新修改的方法了，为了您能够即使看到你所作的修改。
这非常有用一定要记住了，不然你是看不到你随时修改的结果的。等到你完成了所有修改后，不要忘记把这个选项改成“否”！
现在你已经完成了安装“cool”布景的工作，现在的布景不再是“default”而是“cool”，你可以按照你的需要编辑它了。如果你在编辑过程中有任何问题，都可以回复到默认布景的。（大胆干吧，有后备保障了）

第四步
这是一个编辑的过程。先简短的说明一下文件结构：
heme.html - 控制这主要版面，这个文件是最重要的。（所有的theme中都有）
theme_blockleft.html - 控制着左侧版面的显示
theme_blockright.html - 控制右侧版面的显示
theme_blockcenter_c.html - 控制正中版面的显示
theme_blockcenter_l.html - 控制正中偏左版面的显示
theme_blockcenter_r.html - 控制正中偏右版面的显示（如果你设置过“区块显示安排”你应该能够理解这几种版面的意思）
style.css - 布景的样式表单（就是css样式了）
styleMAC.css - 对于苹果机的样式设置。
styleNN.css - 对于Netscape浏览器的样式设置（一些两个文件对于你的布景的通用性是比较重要的，如果你的用户群都是ie的，不写也没关系）

有了这些文件你就可以定义你的网站的外观了，（呵呵，可以充分发挥你的想象力了）。模块的所有结构块显示都可以通过模板被单独控制。

*设计一个完整的新布景

普通的网站设计这通常是通过可视化的设计程序来完成网站设计的。（但是，我没用过，我一直用VI）在此以后，他可以完成一个HTML站点的创建。此时最重要的是要记住规划出XOOP的3个区域。（）

注：如果你不能象我一样使用记事本等文本编辑器来书写网页，那么当你使用FrontPage等可以化编辑工具设计网页时，它们将产生大量垃圾代码，在网页投入使用前必须经过优化。
一些缩写的含有：
lc = 左侧区域
cc = 中间区域
rc = 右侧区域

在你完成了你三个区域设计后你还必须拷贝default/theme.html的头文件，放到你的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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<title><{$xoops_sitename}>-<{$xoops_pagetitle}></title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<script type="text/javascript">

</script>

<{$xoops_module_header}>

</head>
（一大串，有些我页不明白是说明意思，反正放进去就没错了）

把一下代码放到你左侧的区域模块中。

<{foreach item=block from=$xoops_lblocks}>
<{include file="default/theme_blockleft.html"}>
<{/foreach}>

请把这以上一段代码放到<td></td>标记之间，并给不标记id="leftcolumn"象默认模板那样。这是必须的对于css定义来说。

这些代码是放到中间区域模块中的。


<{if $xoops_showcblock == 1}>

<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">


<{foreach item=block from=$xoops_ccblocks}>
<{include file="default/theme_blockcenter_c.html"}>
<{/foreach}>


</td>
</tr>
<tr>
<td id="centerLcolumn">


<{foreach item=block from=$xoops_clblocks}>
<{include file="default/theme_blockcenter_l.html"}>
<{/foreach}>


</td><td id="centerRcolumn">


<{foreach item=block from=$xoops_crblocks}>
<{include file="default/theme_blockcenter_r.html"}>
<{/foreach}>


</td>
</tr>
</table>

<{/if}>


<div id="content">
<{$xoops_contents}>
</div>
在<td></td>标记中放入以上代码，并打上标记id="centercolumn"（我关于标记的表示方法，请参考一下默认模板，应该不难懂的，不行的化也可以给我发邮箱咨询。）


<{foreach item=block from=$xoops_rblocks}>
<{include file="default/theme_blockright.html"}>
<{/foreach}>

在左侧的<td></td>之间放入以上代码并给予标记id="rightcolumn"。在完成此操作后，你必须在theme.html中给出你的正确的图片文件路径。如果你的所有图片路径都在你定义（在xoop中设定的图片路径）的图片路径下，<img>就应该这样写：

<img src="<{$xoops_imageurl}>logo.gif">

否则，图片将不能够被正确的解析，从而不能够显示正确显示。

记住这只是最基本的应用说明。你也可以随随心所欲移动你的区域，制作出你自己的theme。

——————————————————————————————————————————————————
后记：
看到了这篇文章感觉很基础也是大家所需要的。DJ老大没时间翻译，所有我就显丑翻译了一下，时间仓促，错误在所难免，有不对的地方，请大家给予批评指正。
也希望在技术上于大家共同交流，一起进步。
不过今天也有点遗憾，为了翻译这篇文章，我没去上课，结果老师点……名……了，呜呜。看来这回完了，明天补请假条也没戏了！我不想重修呀！
说句老实话，我真的很喜欢XOOP无论在设计思路和结构设计上都有着无比的创新。还有一群想DJ XOOP CHINA这样的老大级人物在支持这我们这些初学者，我真的感到
很荣幸。我也将为XOOP做出自己一份力量。

如果有疑问欢迎于我探讨！

2005/3/29 22:11

工具箱