PHPWIND8模板设计开发教程---A

门户模式模版体系简介

phpwind v8.0 的门户模版体系是一个对于广大界面开发者和站长朋友来说相当简单的一个模版制作体系，它不要求界面开发者（网页设计师或美工）具备JS和php语言基础，只要开发者掌握html和css，能写出一个网页界面的静态页面文件（html+CSS）,就能简单地将静态网页文件转换成PW8的门户模版文件。之所以这样描述是因为一下这些原因：

1. PW8程序提供了足够丰富的内容调用标签，能够满足大部分调用需求；

2. 内容调用标签的使用方法非常简单，文章接下来将会详细介绍；

3. 模版的开发流程符合模版开发者的开发习惯，即先设计，然后静态代码化，再而转化成程序所用模版，同时也能很方便模版开发者的后期维护（细节修改或添加调用模块）；

4. 界面模版的开发和页面运营能够相对独立，逻辑清晰，不会让界面开发者特别是门户模版资源提供者过于纠结页面和运营需求之间的关系；

5. 门户模板体系的脚本框架封装了一些常用页面动态效果脚本，可以方便简单地进行调用。

以上这些要点，我们将会在接下去的开发指南当中详细讲解。

另外我们要熟悉phpwind v8.0门户模式面向的两个群体：

? 开发者，即一些第三方的模板风格开发者、站点的页面美术设计师、懂页面代码（甚至php）的站长；

? 使用者，不想学代码的站长，各网站的内容编辑，热心版主等等。

门户模板体系目录基础篇

一、基本常用目录（What？）

phpwind v8.0的门户模板目录有两个：

1. 库目录——"/mode/area/themes/"，是用来存放用来创建门户频道"母板"的目录。

2. 开发目录——"/html/channel/"，是用来存放已经生成的门户频道的模板目录。每一个频道都只有一个相对应的模板目录。

3. 另外，全站调用模块模板目录——"/html/portal/"，该目录用来存放门户底层化调用模块的模版文件，比如论坛首页四格的目录就在"/html/portal/bbsindex/"中。

对于一般的频道页面开发来说，掌握这两个模板目录的关系即可。

如果你要修改默认的页首和页尾风格，则要到"/mode/area/template/"里面去修改header.htm和footer.htm。

二、门户模板体系操作逻辑如下（How？）：

1. 当在后台" 门户模式 / 门户核心设置 / 频道管理 "中创建一个频道的时候，我们必须选取一个"母板"ThemeA（存放与库目录）作为该频道的初始化模板。

频道创建完成之初，ThemeA和ChannelA中的文件其实是一模一样的。但自创建完新建频道的那一刻开始，库目录中的ThemeA和ChannelA就不会再发生任何联系，也就是说，修改库目录中的ThemeA是不会影响到ChannelA的呈现效果的，反之亦然。

3. 已经创建好了的ChannelA如果经过了修改之后，如果使用者感觉有需要将其作为基础创建新的频道页面的时候，可以将风格文件夹ChannelA整个复制到"库目录"下，为了方便区分，我们可以将其命名为"ThemeB"，那么我们就可以在后台创建一个以"ThemeB"为"母板"的频道"ChannelB"了。那么这个时候"ChannelB"其实和"ChannelA"是一摸一样的。以上就是风格开发的流程。也就是说频道风格的开发者可以将"ThemeB"打包发布到风格共享平台上供站长选用，站长之需要将该文件夹置于"库目录"（/mode/area/themes/）下即可，再从后台去创建基于"母板"ThemeB的频道了。

三、PW8和PW7.5门户模版体系的区别（Why？）

如果熟悉p7.5的站长或者模版开发者会发现p8.0的体系和p7.5截然不同——p7.5只要修改一个"mode/area/themes/"下的一个母板文件，就能在频道前台上全部体现，并且好几个频道会相应发生变化。

但是在实际的社区网站应用当中，我们可以发现门户的首页和频道页面其实是处在同一层级的，也就是说其实每一个"频道"页面在结构和内容上都可以作为一个独立的首页存在，并且这些页面上的内容结构，广告排布也几乎不会一样。相同的，可能就只剩下"页首"（头部）和"页脚"（尾部）了。

所以我们就有了"开发目录"和"库目录"的区分。

"开发目录"面向风格作者和网站的设计师，便于他们开发风格和修改模板，并且每一个独立频道的修改不会影响其他频道。

"库目录"面向普通站长，当他们看到中意的频道模板时，就可以下载安放到"库目录"，以便创建新频道，之后的调用配置可以到生成的频道前台作修改（具体会反映在"开发目录"中config.htm文件的修改）。并且这样也不会影响已经生成的其他频道。

另外，PW8的门户频道是可以生成静态页面的，静态页面就存在于"开发目录"，index.htm。

设计师开发一个新的频道风格模板时，第一步，就是到后台创建一个以"blank"为母板的频道，这个频道所生成的模板文件在"开发目录"里，该文件夹的"main.htm"、"config.htm"以及"images"目录下的"style.css"都是几乎空白的，"images"目录下也没有图片。接下来设计师就可以将自己写好的频道风格html植入，或者就可以在"main.htm"里直接写静态页面咯！

门户模板体系调用标签基础篇

一、什么是调用标签（What）？

phpwind v8.0 的调用标签就是一套有别于html标签和php代码标签的傻瓜式标签。PW8相对于PW7.5的调用标签有了进一步的丰富和加强，可以满足更为复杂高级的调用需求。

二、如何使用调用标签（How）？

在学习如何使用这些调用标签之前我们来看看这些调用标签的分类：

? 声明标签，有<pw />、<list />、<loop> (带/的为不闭合标签，不带/的是闭合标签)；

? 变量标签，最常用的有 {title}、{descrip}、{url}、{image}、{forumname} ……

下面我们就来详细讲解下这些标签的使用方法：

（一）<pw />标签

它是用来关联main.htm和config.htm的声明标签。比方说：main.htm中有一个<pw id="ABC123" />的标签，那么config.htm中<pw id="ABC123" title="门户首页头条模块" /> 的内容才能传输到编译后的门户首页前台去。

在config.htm当中，一个<pw />标签到下一个<pw />之间的内容就是该<pw />标签的具体调用内容。如

<pw id="I4267marry" />
   <list action="subject" num="2" title="婚嫁头条" />
   <ul class="tops">
    <loop>
     <li>
      <h2><a class="s1" href="{url}" target="_blank" title="{title}">{title,16}</a></h2>
      <p>{descrip,50}<a href="{url}" target="_blank" title="{title}" class="s2">详细>></a></p>
     </li>
    </loop>
   </ul>
  
  
<pw id="E9018marry" />
   <list action="subject" num="6" />
   <ul class="list">
    <loop>
     <li><a href="{url}" target="_blank" title="{title}"><span class="s1">{forumname}</span>{title,16}</a></li>
    </loop>
   </ul>
  
  
<pw id="V8095marry" />
   <list num="6" action="subject" title="最新活动" />
   <ul class="list">
    <loop>
     <li><a href="{url}" target="_blank" title="{title}"><span class="s1">[{forumname,8}]</span>{title,32}</a></li>
    </loop>
   </ul>
  
  
<pw id="C553marry" />
   <list num="6" action="subject" title="商家活动" />
   <ul class="list mb10">
    <loop>
     <li><a href="{url}" target="_blank" title="{title}">{title,26}</a></li>
    </loop>
   </ul>
  
  
<pw id="C554marry" />
   <list action="image" num="1" title="右广告" />
   <loop> <a href="{url}" target="_blank"><img src=\'#\'" width="175" height="75" /></a> </loop>

而一个<pw />标签中也可以是纯粹的html代码，这样有一些比如标题，公告之类的模块，我们就可以直接在前台进行编辑修改了！这是有别于PW7.5的一个强劲改进，这样，使用者在使用门户模板的时候就有更大的使用自由了，甚至广告代码也可以是一个<pw />标签的内容，这样使用者就不用到服务器上修改页面模板代码了，而是直接在频道前台进行编辑。

<pw />标签的属性有两个：

? id，模块编号，这个id是给开发者和程序识别的属性，它是全站唯一的，在pw8中提供的配套频道风格当中我们常常可以看到有id="EDCA2675"属性的pw标签，这些id属性都是在开发过程当中自动生成的，这个在后面的实例开发中会有详细的说明；

? title，模块名称，这个属性是给管理站点的站长或者职业编辑（使用者）辨别的，这个可以后期在前台修改。比如有了title="门户首页头条模块"这个属性，使用者就可以在论坛推送内容的时候快速地找到这个模块，我们甚至可以考虑了这样的场景这个模块名称title可以命名成这样，title="门户首页头条-小王负责"，这样在后台查找的时候就更加方便了，每一个专职编辑都能迅速找到自己负责的模块，并且这些模块可以又网站编辑自己根据自己的记忆习惯来设定。

这样的两个标签，目的就是为了给开发者和使用者带来巨大的方便，开发者再也不用为了命名某个模块绞尽脑汁最后想出的是"第二模块左侧新闻列表"这样让使用者看了摸不着头脑的模块名称。

开发者也根本不需要考虑id，因为id可以自己来设定，但更多情况是由程序自动生成了。这样就能开发者和使用者都能提高相应的效率了。这个相对于pw7.5改进，也是pw8出于"降低使用成本"的一个小提升。

最后我们来看看范例：

<pw  id="EDCD1233@channelA"  title="门户首页头条-小王" />

（二）<list />标签

声明一个<pw />调用模块当中的一个调用列表。一个调用模块当中可以有多个调用列表，但通常情况下不建议超过3个，他们以title属性来加以区分。由于范围已经缩小到一个调用模块内，所以list标签title的属性值也相对简单了一些，比较常见的有"图文列表"、"标题列表"、"图片列表"等，这个需要开发者在开发的时候进行命名。<list />标签和<pw />标签一样，每两个<list />标签之间的<loop>内容为第一个<list />标签的输出内容。跟PW7.5一样，每个<list />标签涵盖的代码范围中只有一个声明循环闭合标签<loop>...</loop>。

<list />标签的属性：

? action属性，action属性声明的是调用列表调用的内容类型。action的常见属性有：帖子subject、图片image。在PW8中，可调用类型增加了很多，如日志排行diary、群组排行group、群组文章grouparticle等等。同时声明标签<list />的action属性又决定了该调用列表中有效的变量标签。具体的对照列表请参见《附录1，<list />的action属性与可用内容标签对照表》。

? num属性，声明循环标签<loop>的循环输出数量；

? title属性，声明list调用列表的列表名称；

? 其他调用参数属性是开发者不需要考虑的，而这些属性使用者可以直接在前台设置，它们有：缓存时间cachetime、是否只允许推送ifpushonly、调用排行类型func……

我们来看一个list范例：

<list num="3" action="subject"  title="标题加摘要" />

<loop>

……

</loop>

这个出来的效果就是大家经常看到的这个效果，如图3.2所示，循环输出了三条帖子的标题加摘要：

（三）<loop> 标签

? 声明调用列表<list />中将要循环输出的部分;

? 一个<list />标签只对应一组<loop>;

? 所有的变量标签只能出现在<loop>标签之内。

下面列举了<loop>标签正确的使用方法和错误的使用方法，见图3.3：

 

（四）常用的变量标签

1. {title}标签，标题，title标签是最常见的变量标签，它可以用简单的声明来进行字符数截断，比如一个标题为"今天天气非常好"的标题，如果title是这样书写{title,10}，那么这个标题在输出的时候将变成："今天天气非"，也就是说只现实出5个汉字（10个字节，一个中文字符为2字节）；

2. {descrip}标签，摘要描述，{descrip}也有字符数截断声明属性，如{descrip,10}，输出效果参见上面第一点；

3. {image}标签，图片链接，{image,100,200}代表输出宽度为100，高度为200的略缩图的链接，如果不填些数值，则为输出原图（慎用，过大的原图会消耗更多的服务器和客户端系统资源）。

4. {url}标签，目标链接。subject、image调用属性中的{url}变量代表帖子的链接。

更多变量标签请参加《附录1，list的action属性的可用内容标签对照表》。

三、PW8标签体系的演进好在哪里（Why）？

熟悉PW7.5的开发者会发现从前<pw />标签的内容以前只能在站点后台的模块管理里去编辑，而PW7.5版本的门户开发过程是一个很繁杂的过程，开发者需要在编辑器，站点后台，浏览器之间来回切换，而且没办法一次性转化所有的模块代码。

但在PW8，我们化繁为简，出现了模块代码配置文件config.htm，之所以采用.htm文件类型，是为了让开发者可以直接在Dreamweave等代码编写工具中直接编辑。并且开发者也同要可以在门户频道前台进行编辑和修改。

而PW8门户模板开发过程当中有一个隐藏的特别之处，就是在main.htm中，开发者加入的静态代码只要在循环输出内容的首尾添加闭合的<pw>标签，到门户频道页面刷新之后，<pw>闭合标签中的内容就会写到config.htm当中，而此时main.htm当中原来包括闭合<pw>标签和其之间的内容会自动转变称一个<pw />标签，如图3.4所示：

这样的细节，使得转化一个<pw />标签变得非常简单，所以在PW8的门户模板中，我们将很多不是调用列表模块的页面内容也转化成了可前台修改的html代码模块，如图3.5所示：

 

对于使用者而言，则是为他们提供了一个非常方便的途径去管理他们的门户频道页面显示效果。