编辑“ECMS 6.6/灵动标签使用”

{{ECMS 6.6 top}}

==实例效果图：==

[[文件:Ldbq01.jpg]]

==[[网页]]制作流程：==

===制作显示效果页面===
先用[[Dreamweaver]]做出网页效果，如下为我们预先做的普通[[HTML]]页面效果（图1）：

[[文件:Ldbq02.jpg]]

<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>e:loop灵动标签使用教程</title>
<style>
td {font-size: 10pt;}
.line{line-height: 14pt;font-size: 10pt;}
A:link {text-decoration: none; color:#000000}
A:visited {text-decoration: none; color: #000000} 
A:active {text-decoration: underline; color: #000000 } 
A:hover {text-decoration: underline;	color: #FF0000;}
</style>
</head>

<body topmargin="0">
<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  <tr>
    <td height="60"> 
      <div align="center"><font size="6"><strong>e:loop灵动标签使用教程</strong></font></div></td>
  </tr>
  <tr>
    <td height="25" bgcolor="#FFFFFF">&nbsp; </td>
  </tr>
</table>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="50%" valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>国内新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              <tr> 
                <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td width="18%"><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
    <td width="50%" valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>国际新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              <tr> 
                <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td width="18%"><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2">
<div align="center">
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
          <tr> 
            <td height="23"><strong>图片新闻</strong></td>
          </tr>
          <tr> 
            <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="3" cellpadding="1">
                <tr> 
                  <td width="25%" height="92"> 
                    <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
                  </td>
                  <td width="25%">
                    <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
                  </td>
                  <td width="25%">
                    <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
                  </td>
                  <td width="25%">
                    <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
                  </td>
                </tr>
              </table></td>
          </tr>
        </table>
      </div></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>娱乐新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              <tr> 
                <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td width="18%"><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
    <td valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>体育新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              <tr> 
                <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td width="18%"><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
              <tr> 
                <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
                <td><div align="right">[11-08]</div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<br>
<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  <tr>
    <td height="23">
<div align="center">Powered by <a href="http://www.phome.net" target="_blank">EmpireCMS</a><br>
      </div></td>
  </tr>
</table>
</body>
</html>
</pre>

===修改效果页面加上e:loop调用标签：===
我们来分析下上面做好的HTML网页调用样式，如下（图2）：

[[文件:Ldbq03.jpg]]


上图我们分析了该网页共有两种调用样式：文字调用样式、图片调用样式:

文字调用样式：一行一列,内容包括"标题"(标题长度截取36个字符)、"标题[[链接]]"、"发布日期"格式；
:应用于国内、国际、娱乐、体育新闻4个栏目,每个栏目显示最新3条信息。

图片调用样式：一行一列,内容包括"标题"、"标题图片"、"图片链接"格式；
:调用新闻数据表内所有栏目带标题图片的信息,共显示4条最新信息。

因此我们需要为上述每个类别的文字（图片）调用样式中添加灵动[[标签]]，调用并显示该样式。


== e:loop灵动标签语法：==

[[文件:Ldbq04.jpg]]

==【例1】 使用灵动标签调用“国内新闻”栏目的最新3条信息==

===第一步，确定需要用灵动标签调用的信息内容及其代码：===

我们需要用灵动标签调用"国内新闻"栏目的最新3条信息,并且3条信息具有相同的显示样式（见文字调用样式）。

调用内容：如图11中黑色加粗的部分，即为我们要使用灵动标签调用“国内新闻”栏目的信息：

[[文件:Ldbq05.jpg]]

由此，调用内容的代码（查看图11黑色加粗部分对应的，即为图12中蓝色框内代码），就要用灵动标签的语法表示：（图12：） 

[[文件:Ldbq06.jpg]]

===第二步，将调用内容用灵动标签表示：===
下面我们来逐一分析本例中的灵动标签语法。

分析并确定灵动标签的参数：{栏目ID/专题ID,显示条数,操作类型,只显示有标题图片}

按照第一步的设定，例1中调用“国内新闻”栏目的最新3条信息，灵动标签参数应设为：
<p style="border:1px solid #999; width:800px; padding-left:15px;">
[e:loop={34,3,0,0}]<br>

模板代码内容<br>

[/e:loop]<br>
</p>
标签参数说明
<pre style="border:1px solid #999; background:white; width:880px;">
34             在帝国CMS后台查得“国内新闻”栏目的ID=34；
3              每个新闻栏目显示3条信息；
0              操作类型=0，调用栏目的最新信息.操作类型点击这里查询
0              0为 是否只调用带标题图片的信息——不限制，有无标题图片的信息都做调用。
</pre>

分析并确定灵动标签的[[模板]]代码，根据灵动标签语法，找出本例的模板代码：

模板代码内容代表了灵动标签的显示样式；即使用灵动标签调用的信息最终显示样式，取决于模板代码是如何设置的。

图12中，调用内容的代码（蓝色框内代码）用灵动标签的模板代码表示，

由于调用内容的3条信息,具有相同显示样式(文字调用样式),所以我们只需要取一条信息的显示样式代码做为模板代码就可以了，

其他信息会根据灵动标签设置循环此调用，

因此模板代码为：
<pre>
<tr>
<td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
<td width="18%"><div align="right">[11-08]</div></td>
</tr>
</pre>


再将模板代码的顶部和底部加上灵动标签参数，如：（图13：）

[[文件:Ldbq07.jpg]]


[[文件:Ldbq08.jpg]]

模板代码内容：

<pre>
<tr>
<td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
<td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
</tr>
</pre>

切记：因为这段代码中要输出变量内容，所以在变量名两侧都要加上<?= 和 ?>，如<?=$bqsr[titleurl]?>

最后，例1调用国内新闻栏目最新信息的灵动标签语法即为（粗体部分）：

<pre>
<table width="100%" border="0" cellspacing="1" cellpadding="3">
[e:loop={34,3,0,0}]
<tr>
<td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
<td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
</tr>
[/e:loop]
</table>
</pre>

自己动手试试使用灵动标签调用其他新闻栏目的信息^-^

==【例2】 使用灵动标签调用新闻数据表中，所有栏目最新发布的4条带标题图片的信息==
===第一步，确定需要用灵动标签表示的信息内容及其代码：===

[[文件:Ldbq09.jpg]]

===第二步，将调用内容用灵动标签表示：===
[[文件:Ldbq010.jpg]]
<pre>
<td width="25%" height="92">
<div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank">
<img src="pic.gif" width="135" height="90" border="0"></a></div>
</td>
</pre>

再将模板代码顶部和底部加上灵动标签参数，如：（图23：）

[[文件:Ldbq011.jpg]]

分析并确定灵动标签模板代码内容中的变量：

在模板代码中，找出与其他信息不同之处并用变量替换，

如标题变量为$bqr[title]；标题链接变量为$bqsr[titleurl]；标题图片变量为$bqr[titlepic]。

熟悉了灵动标签变量语法后，下面我们将标题、标题链接、标题图片变量加入到模板代码内容中：（图24：）

[[文件:Ldbq012.jpg]]

模板代码内容：

<pre>
<td width="25%" height="92">
<div align="center"><a href="<?=$bqsr[titleurl]?>" title="<?=$bqr[title]?>" target="_blank">
<img src="<?=$bqr[titlepic]?>" width="135" height="90" border="0"></a></div>
</td>
</pre>

切记：因为这段代码中要输出变量内容，所以在变量名两侧都要加上<?= 和 ?>，如<?=$bqsr[titleurl]?>

最后，例2调用新闻数据表所有栏目最新信息的灵动标签语法即为（粗体部分）：

<pre>
<table width="100%" border="0" cellspacing="3" cellpadding="1">
<tr>
[e:loop={'news',4,18,1}]
<td width="25%" height="92">
<div align="center"><a href="<?=$bqsr[titleurl]?>" title="<?=$bqr[title]?>" target="_blank">
<img src="<?=$bqr[titlepic]?>" width="135" height="90" border="0"></a></div>
</td>
[/e:loop]
</tr>
</table>
</pre>

==加入调用【例1】【例2】灵动标签后的页面效果（图3）：==

[[文件:Ldbq013.jpg]]

已加上e:loop调用标签后的模板(见图3)HTML代码如下（HTML代码2）：

<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>e:loop灵动标签使用教程</title>
<style>
td {font-size: 10pt;}
.line{line-height: 14pt;font-size: 10pt;}
A:link {text-decoration: none; color:#000000}
A:visited {text-decoration: none; color: #000000} 
A:active {text-decoration: underline; color: #000000 } 
A:hover {text-decoration: underline;	color: #FF0000;}
</style>
</head>

<body topmargin="0">
<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  <tr>
    <td height="60"> 
      <div align="center"><font size="6"><strong>e:loop灵动标签使用教程</strong></font></div></td>
  </tr>
  <tr>
    <td height="25" bgcolor="#FFFFFF">&nbsp; </td>
  </tr>
</table>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="50%" valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>国内新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
			  [e:loop={34,3,0,0}]
              <tr> 
                <td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
                <td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
              </tr>
			  [/e:loop]
            </table></td>
        </tr>
      </table></td>
    <td width="50%" valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>国际新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              [e:loop={35,3,0,0}] 
              <tr> 
                <td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
                <td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
              </tr>
              [/e:loop]
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2">
<div align="center">
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
          <tr> 
            <td height="23"><strong>图片新闻</strong></td>
          </tr>
          <tr> 
            <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="3" cellpadding="1">
                <tr>
				[e:loop={'news',4,18,1}] 
                  <td width="25%" height="92"> 
                    <div align="center"><a href="<?=$bqsr[titleurl]?>" title="<?=$bqr[title]?>" target="_blank"><img src="<?=$bqr[titlepic]?>" width="135" height="90" border="0"></a></div>
                  </td>
				[/e:loop]
                </tr>
              </table></td>
          </tr>
        </table>
      </div></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>娱乐新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              [e:loop={36,3,0,0}] 
              <tr> 
                <td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
                <td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
              </tr>
              [/e:loop]
            </table></td>
        </tr>
      </table></td>
    <td valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
        <tr> 
          <td height="23"><strong>体育新闻</strong></td>
        </tr>
        <tr> 
          <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
              [e:loop={37,3,0,0}] 
              <tr> 
                <td width="82%" height="23">·<a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],36)?></a></td>
                <td width="18%"><div align="right">[<?=date('m-d',$bqr[newstime])?>]</div></td>
              </tr>
              [/e:loop]
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<br>
<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  <tr>
    <td height="23">
<div align="center">Powered by <a href="http://www.phome.net" target="_blank">EmpireCMS</a><br>
      </div></td>
  </tr>
</table>
</body>
</html>
</pre>


'''3、将已加上灵动标签后的HTML效果页面代码复制到后台更新：'''

位置：后台 > “模板管理” > “管理自定义页面” > “增加自定义页面”：

页面名称：e:loop灵动标签调用测试页面

文件名：../../eloop.html

页面内容：将已加上e:loop调用标签后的模板HTML代码（HTML代码2）复制到页面内容框中（图4）：

[[文件:Ldbq014.jpg]]


'''4、查看生成后的页面效果：'''

管理自定义页面，可看到我们刚才增加的页面（图5）：

[[文件:Ldbq015.jpg]]

点击页面名称查看最终页面在网站前台的生成效果（图6）：

[[文件:Ldbq016.jpg]]
 
至此，e:loop灵动标签使用讲解完毕。

点击页面底部的“提交”按钮，e:loop灵动标签调用测试页面增加完毕。

== 参考来源 ==
*http://www.phome.net/doc/manual/template/
{{ECMS 6.6}}


[[category:ECMS 6.6使用手册]]