程序员人生 网站导航

稻壳首页模板index.php的建立

栏目:综合技术时间:2014-07-03 09:26:54

为了方便演示,以下的教程中,我们使用“[雅风设计]稻壳cms X1.0红色企业通用模板”的静态页面为例进行讲解。

模板代码编辑软件,雅风推荐使用Dreamweaver,这里顺便啰嗦几句:如果想从事这个行业,或者认真的搞稻壳CMS模板,雅风建议您不要用那些旁门左道的软件,Dreamweaver或者其他常用的代码编辑器才是正道。

登录稻壳CMS后台,进入构建网站,选择模板管理,选择使用950d这个模板,然后选择[预览网站],打开网站首页界面。

这时候我们看到的网页界面应该是深喉咙默认模板,因为我们目前制作的模板是直接复制默认模板的,如下图:

处理模板之前,我们先把第二节中提到的静态HTML页面中所涉及到的CSS、JS、图片等文件复制到模板目录。目录关系不要搞错,例如原来的css文件存储在css目录名为css.css,那么复制后的位置相对于模板目录,也是css目录名为css.css,其他文件同理。

启动Dreamweaver软件,打开第二节中准备好的index首页html页面,再打开模板中的index.php首页模板文件。

保留index.php中的head部分中编码描述的meta代码、title和keywords以及description的代码,删除原有JS和css调用代码,处理完之后head部分的代码应该如下:
 

  1. <head> 
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3. <title>php echo $tag['seo.title']; ?>title> 
  4. <meta name="keywords" content="" /> 
  5. <meta name="description" content="" /> 
  6. head> 

上面代码中的等表示动态调用站点标题,关键字和摘要的意思,是属于稻壳CMS的系统标签。

然后我们把静态首页html页面中的js和css调用代码复制过来,复制后的head部分代码如下:
 

  1.  <head> 
  2.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3. <title>php echo $tag['seo.title']; ?>title> 
  4. <meta name="keywords" content="" /> 
  5. <meta name="description" content="" /> 
  6.  <link href="css/css.css" rel="stylesheet" type="text/css" /> 
  7. <script type="text/javascript" src="js/jquery.min.js">script> 
  8. <script type="text/javascript" src="js/functions.js">script> 

接下来,我们要手动的修改一下JS和CSS链接路径,需要在JS和CSS文件路径前添加当前模板目录的稻壳标签,当前模板目录的稻壳标签是:
 

  1. echo $tag['path.skin'];?> 

我们把当前模板目录的稻壳标签放到JS和CSS路径前,注意尾部无需添加反斜杠“/”,手动添加好之后head部分代码如下:
 

  1.  
  2. "Content-Type" content="text/html; charset=utf-8" />  
  3. <?php </span><span class="func">echo</span><span> </span><span class="vars">$tag</span><span>[</span><span class="string">'seo.title'</span><span>]; ?>  
  4. "keywords" content="" />  
  5. "description" content="" />  
  6.  "css/css.css" rel="stylesheet" type="text/css" />  
  7.  <script type="text/javascript" src="js/jquery.min.js"></script>  
  8.  <script type="text/javascript" src="js/functions.js"></script>  
  9.   

这样,系统才会解析出所调用的JS和CSS文件的正确路径。

接下来,我们把静态首页html页面中的body部分代码复制覆盖index.php中的body部分代码。

然后,我们需要将index.php中新的body部分中的代码里的插入图片路径进行修改,添加好当前模板目录的稻壳标签

例如,我们想把index.php中新的body部分代码中的img的图片插入路径进行修改,假定原来的插入路径是 src="images/图片名" ,那么修改后的插入路径应该是 src="images/图片名" 。
全部替换后,插入图片的路径就修改好了,同理,如果body部分中有js或css路径,也可以用上面的方法进行批量替换。

至此,首页index.php模板就建立好了,这时候我们选择后台的预览网站,应该能看到和静态页面首页相同的页面效果了

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐