PHPCMS2008模板教程—官方默认模板完全解读及制作思路

来源：互联网发布：淘宝货源免费编辑：程序博客网时间：2024/06/05 20:13

图片：

'700')this.width='700';if(this.height>'700')this.height='700';"border=0>

大家好！我是酷扑工作室的beyond0624,首先祝贺一下beta2的发布！昨天下午云飞版主让我研究一下phpcms2008，然后写个模板制作教程给大家！昨晚匆忙安装测试了一下，发现phpcms2008还有很多bug需要修正完善！但是这并不影响我们模板的制作！从今天开始，我就和大家一起交流一下phpcms2008模板制作的相关问题。

很显然，2008版官方精简了模板的设计代码，可谓完全的DIV+CSS，到底08版的默认模板是什么样子？代码又有什么变化？今天，我们来一起看看吧！！如果你能看完看懂这篇冗长的文章，相信你对phpcms2008的模板也就不再陌生！可以说，很快你就可以自己做模板了！！

好了，闲话少说，我们开始吧！今天是第一讲！

第一讲：PHPCMS2008官方默认模板完全解读及模板制作思路——PHPCMS支持团队【酷扑工作室】

首先大家打开后台，看一下官方默认模板的存放位置，其实都是存放在./templates/default/phpcms/ 目录里，这下我们清楚了，如图附件截图：

第一反应，看看header.html、index.html、footer.html三个模板文件。这可是模板的灵魂啊！完整页面模板就是header+index+footer了，大家都知道的！！

代码分别如下：header.html部分：

Copy code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset={CHARSET}"/>
<title>{$head[title]}</title>
<metacontent="{$head[keywords]}" name="keywords" />
<metacontent="{$head[description]}" name="description"/>
<base href="{SITE_URL}"/>
<link href="favicon.ico"rel="shortcut icon" />
<linkhref="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css"/>
<scriptlanguage="JavaScript"src="data/config.js"></script>
<scriptlanguage="JavaScript"src="images/js/jquery.min.js"></script>
<scriptlanguage="JavaScript"src="images/js/css.js"></script>
<scriptlanguage="JavaScript"src="images/js/common.js"></script>
<scriptlanguage="JavaScript"src="images/js/login.js"></script>
<scriptlanguage="JavaScript"src="images/js/validator.js"></script>
</head>
<bodyonload="menu_selected('{php echo $catid ? $catid :$mod;}')">
<divid="top">
{if isset($MODULE['search'])}
{php $types = includePHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.php';}
  <divclass="f_r">
    <formname="site_search" action="{$MODULE[search][url]}"target="_blank">
  <input type="hidden" name="type"value="all"/>
    <input type="text" name="q"size="20"/>
    <select>
      <optionvalue="all">全部</option>
  {loop $types $k $name}
      <optionvalue="{$k}">{$name}</option>
  {/loop}
    </select>
    <input type="submit" name="s"id="button" value="搜索" />
  </form>
  </div>
{/if}
  <divclass="f_l">
<div id="div_login"style="display:block">
  <formaction="{$MODULE[member][url]}login.php" method="post" name="login"onsubmit="return loginSubmit(this,{$PHPCMS[uc]});">
  用户名：<inputtype="text" name="username" size="12"/>
  密码：<inputtype="password" name="password" size="12"/>
    <inputtype="submit" name="dosubmit" value="登录" />
    <inputtype="button" name="register" value="注册"onclick="redirect('{$MODULE[member][url]}register.php')"/>
    <inputtype="hidden" name="cookietime" value="0"/>
  </form>
</div>
<div id="div_logined"style="display:none">
  <spanid="logined_username"class="b"></span>，<ahref="{$MODULE[member][url]}">会员中心</a>|
      <ahref="{if$PHPCMS['uc']}{$MODULE[member][url]}logout.php{else}javascript:logout('{$MODULE[member][url]}logout.php?action=ajax');{/if}">退出登录</a>
</div>
  </div>
</div>
<divid="head">
  <divid="logo">
<ahref="{SITE_URL}"><imgsrc="images/logo.gif" alt="{$PHPCMS[sitename]}"/></a>
<a href="{SITE_URL}rss.php"target="_blank"><imgsrc="images/rss.jpg" alt="rss信息聚合"/></a></div>
  <div class="ad"id="topbanner"><scriptlanguage="javascript"src="data/js.php?id=1"></script></div>
</div>
<divid="menu">
<ul>
  <li><ahref=""id="menu_phpcms"><span>首页</span></a></li>
  {tag_一级栏目}
  <li><ahref="{$MODULE[special][url]}"id="menu_special"><span>专题</span></a></li>
  <li><ahref="{$MODULE[ask][url]}"id="menu_ask"><span>问吧</span></a></li>
  <li><ahref="{$MODULE[search][url]}"id="menu_search"><span>搜索</span></a></li>
</ul>
</div>

默认Index.html部分模板代码如下：

Copy code

<divid="main">
  
  <divid="main_l">

  ******************************中间部分代码太长此处省略处理******************************


<scripttype="text/javascript">
function set_type(type)
{
$('#type').val(type);
$('#search_tag>span').removeClass('selected');
$('#type_'+type).addClass('selected');
}
</script>
<form name="search" action="{$MODULE[search][url]}"target="_blank">
    <div class="search_tag_topmar_10">
      <pid="search_tag"> <span id="type_all"class="selected"onclick="set_type('all')">全部</span>{php $types = includePHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.php';}
      {loop$types $type $name} <span id="type_{$type}"onclick="set_type('{$type}')">{$name}</span>{/loop} </p>
    </div>
    <divclass="cribox_bdr_1">
      <inputtype="hidden" name="type" value="all"id="type"/>
      <inputtype="text" name="q" size="50"/>
      <inputtype="submit" name="s" id="button" value="搜索" />
    </div>
</form>
<divclass="cribox_btm"></div>

******************************中间部分代码太长此处省略处理******************************

<h4><ahref="{$MODULE[link][url]}"><imgsrc="images/more.gif" alt="更多"/></a>友情链接</h4>
<div class="pic_txt_list_1">{tag_logo链接} </div>
<div class="pic_txt_list_1">{tag_文字链接} </div>

  </div>
  
</div>

页脚footer.html代码较少，如下：

Copy code

<div id="foot">

<ahref="">网站首页</a>{tag_关于我们}<br/>
<strong>{$PHPCMS['copyright']}</strong><br/>
<ahref="http://www.miibeian.gov.cn/"target="_blank">{$PHPCMS[icpno]}</a>
<ahref="http://www.phpcms.cn/" class="copyright"target="_blank">Powered by Phpcms2008</a>
</div>
</body>
</html>

把三个部分代码放在一张页面里，就是一个完整页面模板了，说做就做吧，我把它放到单独的一个页面，方便讲解！从代码中可以看出，phpcms2008的模板设计基本上是完全的DIV+CSS了，当然还引入jquery框架，广泛应用AJAX无刷新技术等等技术，撇开它们不说！！

上面我们把首页的header、index、footer放到一起，成为完整的首页模板了！但是显示双击显示的是乱七八糟的东西，还有乱码！别急，其实我们看看上面的代码就知道原因了，

1、编码不对，当然显示乱码；

2、无法调用css文件和风格图片，当然乱七八糟；

3，重要的JS调用文件没有，无法显示相关效果；

4、网页很多php语言代码，特别是导航部分，没有运行环境，效果就不会有了；

。。。。。。

好了，针对以上问题，为了把后台首页模板还原成前台访问的样式效果，我们动手注意解决吧（所有代码请对照一楼）

一、官方模板中的网页编码定义如下：

Copy code

<meta http-equiv="Content-Type"content="text/html; charset={CHARSET}"/>

{CHARSET}是只有phpcms才会识别的变量标签，我们把它改成“GBK”，这样就解决乱码问题了，完整代码如下：

Copy code

<meta http-equiv="Content-Type"content="text/html; charset=gbk" />

二、为了看效果，我们把下面的代码

Copy code

<meta content="{$head[keywords]}"name="keywords" />

<metacontent="{$head[description]}" name="description"/>

改为：

Copy code

<meta content="酷扑工作室——PHPCMS支持团队"name="keywords" />

<metacontent="酷扑工作室——PHPCMS支持团队" name="description"/>

当然，不该也行，只是为了看效果，这都无所谓。。

三、因为我们调用的css样式和风格样式图片都是相对于本文件夹的相对地址，所以去掉header.html代码里一行代码，图片才能正常显示，不然则会显示乱码的，####这点很重要！####,

所以把<basehref="{SITE_URL}"/>去掉或者改为，代码就失效了！！

反过来，大家在制作模板的时候，这个代码不能丢了哦，一定要加上。

四、为了还原默认模板样式，解剖2008版的官方默认模板，我把代码

Copy code

<link href="{SKIN_PATH}{$mod}.css"rel="stylesheet" type="text/css" />

改为下面的样式，

Copy code

<linkhref="templates/default/skins/default/phpcms.css" rel="stylesheet"type="text/css" />

无非就是直接调用本文件的相对地址css样式文件，这样css才会起作用！

五、下面几个JS文件关系到一些重要调用，所以要从程序文件夹中复制过来！！放到相应文件夹中，

<scriptlanguage="JavaScript"src="data/config.js"></script>

<scriptlanguage="JavaScript"src="images/js/jquery.min.js"></script>

<scriptlanguage="JavaScript"src="images/js/css.js"></script>

<scriptlanguage="JavaScript"src="images/js/common.js"></script>

<scriptlanguage="JavaScript"src="images/js/login.js"></script>

<scriptlanguage="JavaScript"src="images/js/validator.js"></script>

差点忘记了，上面的所有代码涉及的的css文件，风格图片，请先分别复制到相应文件夹。否则，调用代码没意义啦！

至此，头部文件修改完毕！！！！

图片：

'700')this.width='700';if(this.height>'700')this.height='700';"border=0>

看看Index.html部分代码有这么一段，好像是php语言的if条件语句，我也不太懂，只有放在php环境中，才可以执行语句！：

Copy code

{if isset($MODULE['search'])}

{php $types = includePHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.php';}
  <divclass="f_r">
    <form name="site_search"action="{$MODULE[search][url]}" target="_blank">
  <input type="hidden" name="type"value="all"/>
      <inputtype="text" name="q" size="20"/>
      <select>
        <optionvalue="all">全部</option>
  {loop $types $k $name}
        <optionvalue="{$k}">{$name}</option>
  {/loop}
      </select>
      <inputtype="submit" name="s" id="button" value="搜索" />
  </form>
  </div>
{/if}

我们把它改成前台显示的具体代码，如下：

Copy code

<div class="f_r">

    <form name="site_search" action="search/"target="_blank">
  <inputtype="hidden" name="type" value="all"/>
      <inputtype="text" name="q" size="20"/>
      <select>
        <optionvalue="all">全部</option>
        <optionvalue="news">资讯</option>
        <optionvalue="picture">图片</option>
        <optionvalue="down">下载</option>
        <optionvalue="info">信息</option>
        <optionvalue="ask">问吧</option>
      </select>
      <inputtype="submit" name="s" id="button" value="搜索" />
</form>
  </div>

这样，通过调用类“f_r”，就能显示搜索框了。呵呵

说明一下：这种从官方模板到普通模板的解读过程其实就是我们制作模板的逆向过程！所以，我可以很自信的对大家说，读懂了我这篇文章，你就可以随心所欲的制作你想要的任何风格模板了！完全的DIV+CSS设计，给我们制作模板带来了很多方便，2007版的模板还是有tb嵌套的，很不好，2008版要更人性化的多！！是吧^_^

下面的这一部分仍然是默认首页模板的后台代码：

Copy code

<div class="f_l">

    <divid="div_login" style="display:block">
  <formaction="{$MODULE[member][url]}login.php" method="post" name="login"onsubmit="return loginSubmit(this,{$PHPCMS[uc]});">
  用户名：<inputtype="text" name="username" size="12"/>
  密码：<inputtype="password" name="password" size="12"/>
    <input type="submit" name="dosubmit" value="登录"/>
    <input type="button" name="register" value="注册"onclick="redirect('{$MODULE[member][url]}register.php')"/>
    <input type="hidden" name="cookietime"value="0"/>
  </form>
</div>
    <divid="div_logined" style="display:none">
  <spanid="logined_username"class="b"></span>，<ahref="{$MODULE[member][url]}">会员中心</a>|
        <ahref="{if$PHPCMS['uc']}{$MODULE[member][url]}logout.php{else}javascript:logout('{$MODULE[member][url]}logout.php?action=ajax');{/if}">退出登录</a>
</div>
  </div>
</div>