插件作者的标准出来了!Manyou诚邀开发者加盟!
《站长》&《程序员》杂志火热征集开发者
立即免费下载 Discuz!6.1.0正式版
Discuz! 6.1.0 使用说明
Discuz!NT2.5正式版发布
开放源码下载
UCenter Home 1.2 正式版发布
官方站 | 帮助文档
基于ECShop的网店托管-卖否
PHP就业培训直通车 | LAMP培训大连
Discuz!收费服务内容及价格
论坛免费升级 手握手
Discuz!/ECShop 专用官方虚拟主机
【九城-奇迹世界】专题活动开始了!
Comsenz 招聘信息
网店系统ECShop v2.6.0正式版火热发布
基于Discuz!的免费论坛空间5D6D
参与有奖社区调查 赢取台湾5日游
 45 12345
发新话题
打印

[教程] XS首页模板修改教程(模块篇)

本主题由 茄子 于 2007-10-22 10:53 设置高亮

XS首页模板修改教程(模块篇)

  模块功能,是X- Space的核心功能之一。通过模块功能,站长可以轻松的构建一个非常强大的站点。此功能非常强大,几乎能实现你想要的任何利用论坛、X-Space的资源来建站的功能,不过需要一定的技巧才能学会使用。模块功能可以让你把论坛的帖子、用户、附件等几乎所有的信息,X-Space的日志、图片、商品、文件等等都给读取出来,并按照你指定的风格样式,显示在你指定的页面位置。

套用代码时请将<>替换为半角的<>


  X-Space具有强劲的模块功能。不过,大家可能没有利用起来。

  模块功能,是X- Space的核心功能之一。通过模块功能,站长可以轻松的构建一个非常强大的站点。此功能非常强大,几乎能实现你想要的任何利用论坛、X-Space的资源来建站的功能,不过需要一定的技巧才能学会使用。模块功能可以让你把论坛的帖子、用户、附件等几乎所有的信息,X-Space的日志、图片、商品、文件等等都给读取出来,并按照你指定的风格样式,显示在你指定的页面位置。

  现在,通过一个简单的教程,图文并茂的教你实现如果通过对强劲的模块功能,实现我们更具个性化的需求。

  开始之前呢,有些东西,必须强调一下

  我们的首页模板有三个部分组成,即

  header 这个是模板的头部 对应文件 /templates/default/header.html.php

  body 这个就是模板的主要部分 对应文件 /templates/default/index.html.php
  foot这个就是模板的页脚 对应文件 /templates/default/footer.html.php

  我们可以把我们做好的页面对应的粘贴或者复制到这几个文件中来!

  开始了,首先我们得自己做一个自己喜欢的页面,比如看看我手里这个

图如附件


  我们就拿图上圈出的几个部分分别讲解!

  好了我们来看第一个地方,这里是一个幻灯片展示,它的作用呢就是把我们站点上的一些图片资源有选择性(比如精华)的展示给大家

  好了,看看代码,我们不难发现他所在的位置

  <table width="760" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

  <td><table width="222" border="0" cellpadding="0" cellspacing="1" bgcolor="4789C4">

  <tr>

  <td style="padding:5px"><img src="images/ls_01.gif" width="210" height="196"></td>

  </tr>

  <tr>

  <td class="bokewhite"><div align="center"><a href="#"><strong>袁立个人博客访问量突破千万</strong></a></div></td>

  </tr>

  </table>

  好的,我们进入xspace 的后台,http://www.xxx.com/xspace/admincp.php

  其中www.xxx.com为你的域名,xspace/为你的安装目录,可以自己做出对应的修改,以下类同!

  我们会看到“模块”的连接,他有两个关联 “模块列表”和“模块风格”,借助这里我们就能操纵强大的模块功能了!

  我们要做的是 图片的幻灯展示,好的,那么我们在 “模块”--“模块列表”

  选择基本模块我们点击“图片”因为这个是我们需要的....点击后回出现基本的一些模块,大家可以点击旁边对应的编辑,查看他们实现的功能,OK找到这个地方

  对应代码

  <!--精华图片 图片+标题(共4条) begin--><!--{block name="spaceimage" parameter="digest/1,2,3/showattach/1/order/i.dateline DESC/limit/0,4/cachetime/3600/tpl/item_image_subject_list"}--><!--精华图片 图片+标题(共4条) end-->

  这个代码对应的功能就是调用4张精华图片然后以幻灯片的方式,轮番展示,好了代码有了,加到我们的摸班里面去,记得找对地方哦!

  这个例子中,我们把他放到这里:

  原来:

  <table width="760" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

  <td><table width="222" border="0" cellpadding="0" cellspacing="1" bgcolor="4789C4">

  <tr>

  <td style="padding:5px"><img src="images/ls_01.gif" width="210" height="196"></td>

  </tr>

  <tr>

  <td class="bokewhite"><div align="center"><a href="#"><strong>袁立个人博客访问量突破千万</strong></a></div></td>

  </tr>

  </table>

  插入要调用的代码后

  <table width="760" border="0" align="center" cellpadding="0" cellspacing="0">

  <!--精华图片 图片+标题(共4条) begin--><!--{block name="spaceimage" parameter="digest/1,2,3/showattach/1/order/i.dateline DESC/limit/0,4/cachetime/3600/tpl/item_image_subject_list"}--><!--精华图片 图片+标题(共4条) end-->

  </table>

  好了,保存index.html.php 去首页刷新下,完成。

  OK ,看第二部分。。。

  同理我们看看代码,会找到以下内容:

  <table width="99%" border="0" cellspacing="0" cellpadding="0" style="margin-top:2px">

   <tr>

   <td><img src="images/bokeshow_60.gif" width="222" height="27"></td>

   </tr>

   <tr>

   <td style="border-left:1px #4789C4 solid;border-right:1px #4789C4 solid;padding:8px"><a href="#">江浙私募基金操盘手:大牛的绝招</a><br>

   美媒:在台湾海域 中国有能力挑战<br>

   亲爱的,让我们吵一场有技术含量</td>

   </tr>

   <tr>

   <td><img src="images/bokeshow_64.gif" width="222" height="13"></td>

   </tr>

   </table>

  好的,里面需要替换的就是:

  <tr>

   <td style="border-left:1px #4789C4 solid;border-right:1px #4789C4 solid;padding:8px"><a href="#">江浙私募基金操盘手:大牛的绝招</a><br>

   美媒:在台湾海域 中国有能力挑战<br>

   亲爱的,让我们吵一场有技术含量</td>

   </tr>
  继续去模板列表找到,对应的功能相近似的模板,编辑,获取代码,然后插入到这里,替换,完成。

  替换后代码如下:

  <table width="99%" border="0" cellspacing="0" cellpadding="0" style="margin-top:2px">

  <tr>

  <td><img src="images/bokeshow_60.gif" width="222" height="27"></td>

  </tr>

  <tr>

  <!--首页推荐阅读 begin--><!--{block name="spaceblog" parameter="digest/1,2,3/order/i.dateline DESC/limit/0,5/cachetime/900/subjectlen/30/tpl/12333"}--><!--首页推荐阅读 end-->

  </tr>

  <tr>

  <td><img src="images/bokeshow_64.gif" width="222" height="13"></td>

  </tr>

  </table>

  刷新首页观看效果!

附件

2.jpg (142.26 KB)

2006-6-24 12:31

2.jpg

3.jpg (16.62 KB)

2006-6-24 12:31

3.jpg

本帖最近评分记录
  • 茄子 威望 +3 追加红分3分,多谢分享,再接再厉~ 2007-10-22 10:52
  • 茄子 金币 +3 追加红分3分,多谢分享,再接再厉~ 2007-10-22 10:52
  • iloul 威望 +5 nice work 2006-6-24 19:33
  • iloul +5 nice work 2006-6-24 19:33
附页面代码,方便大家清楚下面的操作

附件

案例源文件.rar (3.4 KB)

2006-6-24 12:33, 下载次数: 1676

  当然了,模块功能的强大就在于,我们还可以自己定义模块,使得我们可以去使用我们所有的图片或者日志资源(包括作者、附件等等)我们以首页推荐这个模块为例子

  

  首先我们建立一个文件命名格式如下 xxx.html.php 其中xxx用户可以自己定义,后面的.html.php必须要有,而且不能更改!保存到你的安装目录下的style子目录下面(当前我们命名为)12333.html.php





  内容如下:

  <?exit?>

  <!--{loop $iarr $value}-->

  <tr><td style="border-left:1px #4789C4 solid;border-right:1px #4789C4 solid;">∴<a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a>

  </td></tr>

  <!--{/loop}-->

  部分代码的意思 loop 吗就是循环输出$value[url] 就是对应的连接地址,$value[subject]标题等....

  OK,根据自己做出的模板做一些小的调整。

  好的,现在去后台,点"模块"-->“模块风格”-->添加风格
如图

  现在去"模块"-->“模块列表”-->添加模块

  选择 基本模块“日志”
最后这里模块风格的地方,选择,自己刚才建立的风格名字!

  最后根据自己的功能效果,进行选择,对后得到代码,插入!

  好了完成,其他部分,均可参考上面的步骤!

附件

4.jpg (9.12 KB)

2006-6-24 12:36

4.jpg

5.jpg (26.73 KB)

2006-6-24 12:36

5.jpg

操作如图!

附件

6.jpg (44.25 KB)

2006-6-24 12:42

6.jpg

7.jpg (35.54 KB)

2006-6-24 12:42

7.jpg

最后一个

附件

8.jpg (18.54 KB)

2006-6-24 12:43

8.jpg

学习一下,终于有人出教程了,谢谢楼主
虽然是1.0的
占位
再占
占位
 45 12345
发新话题
版块跳转