查看: 15288|回复: 47

[新功能] 暂停教程!更新header.htm、footer.html、index.htnll代码详细学习笔记

    [复制链接]
发表于 2010-11-5 15:49:09 | 显示全部楼层 |阅读模式
本帖最后由 jckai2008 于 2010-11-13 17:45 编辑

大征集!跟帖报名!
大家一起来写模板制作教程教程。自己学习的同时,做好笔记也利于别人学习。要详细啊。不然像我技术不怎么的不容易理解。
首先一起来写\phpcms\templates\default\content文件夹下html页面教程,
header.html——【色影无忌】
header_min.html——【虚位以待】
header_page.html——【虚位以待】
index.html——【色影无忌】
footer.html——【色影无忌】
category.html——【虚位以待】
category_download.html——【虚位以待】
category_picture.html——【虚位以待】
download.html——【虚位以待】
list.html——【虚位以待】
list_download.html——【虚位以待】
list_picture.html——【虚位以待】
message.html——【虚位以待】
page.html——【虚位以待】
rss.html——【虚位以待】
search.html——【虚位以待】
show.html——【虚位以待】
show_download.html——【虚位以待】
show_picture.html——【虚位以待】
tag.html——【虚位以待】
logo_mini——“注册 | 登录 |  与盛大连接的图标 RSS图标”代码【色影无忌】
首先公布一下自己写的header.html页面学习笔记。
下载:使用EditPlus查看更清晰




由于顶帖人少。估计可能大家更加关注后台的使用和套用模版建站,无忌决定暂且只公布head、footer、index的学习笔记,

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?点击这里注册

x

评分

参与人数 6鲜花 +23 PC币 +2 收起 理由
xz2411 + 15 很给力!
lzq + 5
恒硕网络 + 1
sills + 1
世界首富 + 1 + 1 1+1=3
freshcn + 1 热心鼓励

查看全部评分

 楼主| 发表于 2010-11-5 15:51:45 | 显示全部楼层
本帖最后由 jckai2008 于 2010-11-6 23:30 编辑

header.html上半部分学习笔记

  1. <!-- 会员名:色影无忌制作 网站:www.askend.com -->
  2. <!-- 首先说明一下网站模板主要放在根目录\phpcms\templates\default下,各文件夹按功能放置相应模板,content文件夹下主要放置全站的页头、页尾等模板 -->
  3. <!-- 另一个要说明一下的就是标签,标签的作用就是把数据库里的数据调用出来显示。平时我们发布文章,文章信息都是写入数据库,页面需要显示那条数据然后从数据库调用,调用数据的程序繁琐。标签好处是,你说明一下你要哪个栏目、什么方式排列,调出几条数据,其他的工作他自己来完成,简单方便了很多。我就解释这么多 -->
  4. <!--phpcmsv9标签 在其帮助文档里有说明,仔细看看,注意不同的模板下有不同的标签 -->
  5. <!-- 文件里每个层应用的样式,要对照样式表讲,不好讲,还是大家自己看。 -->
  6. <!-- 下面开始学习页头 header.html -->
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11. <!-- 上面一行主要看文件编码方式为utf-8-->
  12. <meta http-equiv="X-UA-Compatible" content="IE=7" />
  13. <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title>
  14. <!-- 上一行,判断语句 翻译:如果设置了标题并且标题不为空,则显示标题,否则显示网站名称 -->
  15. <meta name="keywords" content="{$SEO['keyword']}">
  16. <meta name="description" content="{$SEO['description']}">
  17. <!-- 上面两行主要是页面的关键词和描述 -->
  18. <link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
  19. <link href="{CSS_PATH}default_blue.css" rel="stylesheet" type="text/css" />
  20. <!-- 上面两行调用网站根目录下\statics\css下两个css样式文件 -->
  21. <script type="text/javascript" src="{JS_PATH}jquery.min.js"></script>
  22. <script type="text/javascript" src="{JS_PATH}jquery.sGallery.js"></script>
  23. <script type="text/javascript" src="{JS_PATH}search_common.js"></script>
  24. <!-- 上面三行调用网站根目录下\statics\js下三个js文件,前面两个jquery打头的js文件是jquery的功能文件,不用管,我现在也不清楚详细功能,但是不能丢了。下面凡是没有定义的函数都可以在search_common.js文件中找到如何定义的-->
  25. </head>
  26. <body>
  27. <div class="body-top">
  28.     <div class="content">
  29.     {pc:content  action="position" posid="9" order="id" num="10" cache="3600"}
  30. <!--{pc标签:内容模板标签 动作=“内容推荐位列表”  推荐位id=“9” 排序方式=“id序号” 调用条数=“10条” 缓存时间=“3600”-->
  31.       <div id="announ">
  32.                  <ul>
  33.                  {loop $data $k $v}
  34.      <!-- 这里是用loop调出数据,由于使用pc标签把数据调用出来后,结果是个数组,无法直接显示,loop把数组里的数据逐个调用出来 如果不知道数组是什么,百度一下看看,简单解释就是数组类似魔方 每个小方块就是一条信息。 -->
  35.                       <li><a href="{$v[url]}">{$v[title]}</a></li>
  36.                       {/loop}
  37.                  </ul>
  38.             </div>
  39.      {/pc}
  40. <script type="text/javascript">
  41. $(function(){
  42. startmarquee('announ',22,1,500,3000);
  43. })
  44. </script>
  45. <!-- 上面startmarquee函数主要是实现字幕的滚动。看模板主页最上面有个喇叭,后面应该就是滚动字幕。 -->
  46.             <div class="login lh24 blue">
  47.       <a href="{APP_PATH}index.php?m=content&c=rss&siteid={get_siteid()}" class="rss ib">rss</a>
  48.    
  49.    <span class="rt"><script type="text/javascript">document.write('<iframe src="{APP_PATH}index.php?m=member&c=index&a=mini&forward='+encodeURIComponent(location.href)+'&siteid={get_siteid()}" allowTransparency="true"  width="300" height="24" frameborder="0" scrolling="no"></iframe>')</script></span></div>
  50.     </div>
  51. </div>

  52. <div class="header">
  53. <div class="logo"><a href="/"><img src="{IMG_PATH}v9/logo.jpg" /></a></div>
  54. <!-- 上面div 网站标志  -->
  55.     <div class="search">
  56.      <div class="tab" id="search">
  57.    {php $j=0}
  58.    <!-- 定义一个变量j,初始值为0 -->
  59.    {php $search_model = getcache('search_model_'.$siteid, 'search');}。
  60. <!-- 上一行使用函数getcache,功能是读取缓存文件,其中函数括号里是参数,前面一个参数——'search_model_'.$siteid,表示文件名,后面参数——'search'表示路径。变量$siteid是网站id,可以在网站后台《站点管理》里看到siteid是几?一般一个网站siteid就是1。这样我们可以知道他读取的是那个文件了,就是根目录下\caches\caches_search\caches_data\search_model_1.cache文件,我把这个文件代码贴出来:
  61. <?php
  62. return array (
  63.   1 =>
  64.   array (
  65.     'typeid' => '1',
  66.     'name' => '新闻',
  67.     'sort' => '1',
  68.   ),
  69.   3 =>
  70.   array (
  71.     'typeid' => '3',
  72.     'name' => '图片',
  73.     'sort' => '2',
  74.   ),
  75.   2 =>
  76.   array (
  77.     'typeid' => '2',
  78.     'name' => '下载',
  79.     'sort' => '3',
  80.   ),
  81.   'special' =>
  82.   array (
  83.     'typeid' => '52',
  84.     'name' => '专题',
  85.   ),
  86. );
  87. ?>
  88. 所以返回结果$search_model是个数组,大家对照主页看看网站标志logo旁边,搜索框上面的“新闻”、“图片”、“下载”、“专题”滑动按钮怎么来的吧。但是由于是个数组,还需要逐条读取。
  89. 同时指出:getcache函数位于根目录\phpcms\libs\functions\global.func.php文件中。-->
  90.    {loop $search_model $k=>$v}
  91. <!-- 上面又是loop,从刚才解释知道$search_model是个数组,仍然需要loop一个一个的取出来 -->
  92.    {php $j++;}
  93.    <!-- 这里定义每次读取一个数组元素变量 j就加1-->
  94.     <a href="javascript:;" onclick="setmodel({$v['typeid']}, $(this));" style="outline:medium none;" hidefocus="true" {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>{if $j != count($search_model)}<span> | </span>{/if}
  95. <!-- 上面这部分,看上去复杂,实际上是对刚上面“新闻”、“图片”、“下载”、“专题”四个链接的样式应用的判断。有兴趣的继续看,讲起来比较麻烦,主要是超链接a里面的内容,慢慢说吧。
  96. 首先,你先去主页看看,分别点“新闻”、“图片”、“下载”、“专题”有什么区别,对了就是点那个,那个就加粗了。实际上就是那个加了class=“on”样式。我们可以打开最上面调用的css样式文件验证,位置根目录\statics\css\default_blue.css找到on的定义:
  97. .header .search .tab a.on{ font-weight:700} 文字加粗到700
  98. 下面我们再来看看超链接里面的各项参数:
  99. href="javascript:;" ——表示不做任何操作
  100. onclick="setmodel({$v['typeid']}, $(this));"——表示点击的时候执行函数setmodel
  101. style="outline:medium none;"  表示超链接外轮廓样式
  102. hidefocus="true"——表示超链接在点击的时候不聚焦,就是点击的时候超链接没有外框的虚线框
  103. 上面这些都不难理解。
  104. 下面来看判断,把A超链接里的不重要的参数先取掉。我们来理解一下
  105. 读取第一条数据
  106. {loop $search_model $k=>$v}    此时$v['typeid']=1, $v['name']=新闻,$v['sort']=1,
  107.    {php $j++;} 这里j=0+1=1
  108.    <a {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>
  109.    翻译代码:如果j=1并且变量$tyeid赋值=1,给超链接加样式class="on"。由上面知道j确实为1,所以给变量$tyeid赋值=1,给此时的$v['name'],即“新闻”超链接加上样式class="on"
  110.       {if $j != count($search_model)}<span> | </span>{/if}
  111.    上面一行count($search_model)}是统计$search_model数组元素个数,我们知道看上面的缓存文件知道为4。此时j任然为1所以,判断j不等于4,所以在“新闻”超链接后面显示一个“| ”
  112. {/loop}
  113. 读取第二条数据
  114. {loop $search_model $k=>$v}    此时$v['typeid']=3, $v['name']=图片,$v['sort']=2,
  115.    {php $j++;} 这里j=1+1=2
  116.    <a {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>
  117.    此时j为2,不等于1,所以$typeid不赋值。“图片”超链接不加样式class="on"
  118.       {if $j != count($search_model)}<span> | </span>{/if}
  119.    判断j不等于4,所以在“新闻”超链接后面显示一个“| ”
  120. {/loop}
  121. 读取第三条数据,判断和第二条一样。
  122. 读取第四条数据,最后,j=4了,所以所以在“专题”超链接后面不显示“| ”
  123. 这里这个判断就讲完了。这个判断只在加载页面的时候执行。
  124. 我有一点不理解的就是这句——if $j==1 && $typeid=$v['typeid'],&&前后一个是逻辑操作符==,一个是赋值运算符=。有高手给指定一下。
  125. 下面还需要讲一下,当点击“新闻”、“图片”、“下载”、“专题”四个链接时候,样式的改变。主要是通过调用函数setmodel实现。
  126. setmodel函数位于statics\js\search_common.js中。我们来看看函数
  127. function setmodel(value, id, siteid, q) {
  128.   $("#typeid").val(value);
  129.   $("#search a").removeClass();
  130.   id.addClass('on');
  131.   if(q!=null && q!='') {
  132.    window.location='?m=search&c=index&a=init&siteid='+siteid+'&typeid='+value+'&q='+q;
  133.   }
  134. }
  135. 当页面第一次加载完成后,你现在可以用浏览器浏览主页,用上面的【查看】-【查看源文件】可以看到,“图片”超链接里onclick的代码——onclick="setmodel(3, $(this));",这里的变量$(this)指的是你当前点击的这个超链接a。比如你点”图片“时候,
  136. 函数执行如下:
  137. function setmodel(3,图片超链接) {
  138.   $("#typeid").val(3); 对下面的Form搜索框中id=typeid的input的value赋值为3
  139.   $("#search a").removeClass(); 移除search层内所说有超链接的class样式
  140.   id.addClass('on'); 给"图片超链接"加上class=on的样式
  141.   if(q!=null && q!='') {  这个是搜索的参数传递
  142.    window.location='?m=search&c=index&a=init&siteid='+siteid+'&typeid='+value+'&q='+q;
  143.   }
  144. }
  145. -->
  146.    {/loop}
  147.    {php unset($j);}
  148.    <!--循环读取完了,unset撤销掉变量j-->
  149.   </div>
  150.         <div class="bd">
  151.             <form action="{APP_PATH}index.php" method="get" target="_blank">
  152.    <!-- 这里注意action,事件提交给了index.php文件处理。这里{APP_PATH}的定义看了一下函数没有看明白。高手解释一下。 -->
  153.     <input type="hidden" name="m" value="search"/>
  154.     <input type="hidden" name="c" value="index"/>
  155.     <input type="hidden" name="a" value="init"/>
  156.     <input type="hidden" name="typeid" value="{$typeid}" id="typeid"/>
  157.     <input type="hidden" name="siteid" value="{$siteid}" id="siteid"/>
  158. <!-- 这里注意变量{$typeid}和{$siteid},$typeid我上面已经讲过了,在加载页面和点击那四个超链接的时候会改变。$siteid变量就是1 -->
  159.                 <input type="text" class="text" name="q" id="q"/><input type="submit" value="搜 索" class="button" />
  160.             </form>
  161.    <!-- 上面是搜索框代码,主要的地方我讲解了。 -->
  162.         </div>
  163.     </div>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-11-5 15:52:19 | 显示全部楼层
本帖最后由 jckai2008 于 2010-11-6 23:31 编辑

header.html下半部分学习笔记
  1. <div class="banner"><script language="javascript" src="{APP_PATH}index.php?m=poster&c=index&a=show_poster&id=1"></script></div>
  2. <!-- 这里应该是搜索框右侧的广告代码层 -->
  3. <div class="bk3"></div>
  4. <div class="nav-bar">
  5. <map>
  6. {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
  7. <!--{pc标签:内容模板标签 动作=“内容栏目列表” 栏目id=“0” 调用栏目个数=“25个” 站点=”1“ 排序方式=“栏目添加顺序排序” -->

  8. <ul class="nav-site">
  9. <li><a href="{siteurl($siteid)}"><span>首页</span></a></li>
  10. {loop $data $r}
  11. <!-- 把25个栏目名称调出来,可能没有25个,有几个就显示几个 -->
  12. <li class="line">|</li>
  13. <li><a href="{$r[url]}"><span>{$r[catname]}</span></a></li>
  14. {/loop}
  15. </ul>
  16. {/pc}
  17. </map>
  18. </div>


  19. {if $top_parentid}
  20. <!-- $top_parentid变量时怎么来的?高手解释一下 -->
  21. <div class="subnav">
  22. {pc:content action="category" catid="$top_parentid" num="15" siteid="$siteid" order="listorder ASC"}
  23. <!--{pc标签:内容模板标签 动作=“内容栏目列表” 栏目id=“0” 调用栏目个数=“25个” 站点=”1“ 排序方式=“栏目添加顺序排序”-->
  24. {loop $data $r}
  25. <a href="{$r[url]}">{$r[catname]}</a><span> | </span>
  26. {/loop}
  27. {/pc}
  28. {if $modelid}<a href="{APP_PATH}index.php?m=content&c=search&catid={$catid}">搜索</a>{/if}
  29. </div>
  30. {/if}
  31. </div>
复制代码
回复 支持 反对

使用道具 举报

发表于 2010-11-5 15:58:36 | 显示全部楼层
广告 看签名!!
回复 支持 反对

使用道具 举报

发表于 2010-11-5 16:08:14 | 显示全部楼层
刚开始用PC,不知道怎么做整套模板,要是有教程就好了!
回复 支持 反对

使用道具 举报

发表于 2010-11-5 16:26:32 | 显示全部楼层
是给默认模板标签加注释吗?
回复 支持 反对

使用道具 举报

发表于 2010-11-5 16:34:28 | 显示全部楼层
好东西啊!
回复 支持 反对

使用道具 举报

发表于 2010-11-5 17:35:18 | 显示全部楼层
很好很强大,我已经用PHPCMS完整的做出一套模板,并且还开发了几个模型
回复 支持 反对

使用道具 举报

发表于 2010-11-5 21:08:05 | 显示全部楼层
楼上 强大
我还在阅读源码中
回复 支持 反对

使用道具 举报

发表于 2010-11-5 22:28:33 | 显示全部楼层
回复 1# jckai2008


    支持你,不过现在没时间研究!
回复 支持 反对

使用道具 举报

发表于 2010-11-6 08:52:49 | 显示全部楼层
我帮你顶
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-11-6 23:26:15 | 显示全部楼层
footer.html学习笔记


  1. <!-- 会员名:色影无忌制作 网站:www.askend.com -->
  2. <!-- 页尾文件比较简单 大家用浏览器浏览首页  看看底部-->
  3. <div class="footer">
  4. <p class="info">
  5. {pc:content action="category" catid="1" num="15" siteid="$siteid" order="listorder ASC"}
  6. <!--{pc标签:内容模板标签 动作=“内容栏目列表”  栏目id=“1”  调用栏目=“15条”  站点=“1” 排序方式=“栏目添加顺序”
  7. 这个标签就是调用所有父栏目id,即parentid=1的栏目
  8. -->
  9. {loop $data $r}
  10. <!-- 读取每一个栏目 -->
  11. <a href="{$r[url]}" target="_blank">{$r[catname]}</a> |  
  12. {/loop}
  13. {/pc}
  14. <a href="{APP_PATH}index.php?m=link" target="_blank">友情链接</a>
  15. <!-- 这里特别注意友情链接的herf。 -->
  16. <br />
  17. Powered by <strong><a href="http://www.phpcms.cn" target="_blank">PHPCMS</a></strong> <em>v9 Beta</em> &copy; 2010 <img src="{IMG_PATH}copyright.gif"/>{tjcode()}
  18. <!-- 这一行是版权信息。 -->
  19. </p>
  20. </div>
  21. <script type="text/javascript">
  22. $(function(){
  23. $(".picbig").each(function(i){
  24.   var cur = $(this).find('.img-wrap').eq(0);
  25.   var w = cur.width();
  26.   var h = cur.height();
  27.     $(this).find('.img-wrap img').LoadImage(true, w, h,'{IMG_PATH}s_nopic.gif');
  28. });
  29. })
  30. </script>
  31. <!-- 这个函数的作用是什么,由于看了下发布了帖子后,论坛顶的人少,肯能大家更关注后台使用。暂且不做研究了 -->
  32. </body>
  33. </html>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-11-6 23:27:45 | 显示全部楼层
本帖最后由 jckai2008 于 2010-11-6 23:29 编辑

index.html上半部分学习笔记
  1. <!-- 会员名:色影无忌制作 网站:www.askend.com -->

  2. <!-- index.html主要是对pc标签的调用,我不一一解释了。只解释前面几个。不然又不明白要对照http://v9.help.phpcms.cn/里的标签内容好好看 -->

  3. {template "content","header"}
  4. <!-- 上面一行作用就好像把header。html文件里的代码复制到这里 很好理解-->
  5. <!--main-->
  6. <div class="main">
  7. <div class="col-left">
  8. <div class="news-hot">
  9. <div class="content">
  10. {pc:content action="position" posid="2" order="listorder DESC" num="4"}
  11. <!--{pc标签:内容模板标签 动作=“内容推荐位列表” 推荐位id=“2” 排序方式=“添加信息顺序降序排列” 调用条数=“4条” -->
  12. <!-- 推荐位id,即posid是怎么来的呢?
  13. 登录网站后台【内容】——【内容相关设置】——【推荐位管理】打开这里你就可以看到推荐位id及位置。
  14. 可以看到推荐位所属栏目,即当在该栏目下发布信息的时候就会在发布页面的下面看到相应的推荐位。
  15. 那么该推荐位信息从数据库调用的时候,就是选择该推荐位所属模型和栏目来按序调出信息的。
  16. -->
  17. {loop $data $r}
  18. <!-- 下面就是对推荐位=2的信息逐条显示出来 -->
  19. <h4 class="blue"><a href="{$r[url]}" title="{$r[title]}">{str_cut($r[title],36)}</a></h4>
  20. <p>{if $n==1}<img src="{thumb($r[thumb],90,60)}" width="90"
  21. <!-- 这里thumb函数应该是把缩略图处理显示为宽90像素、高60像素的图片 -->
  22. height="60"/>{/if}{str_cut($r[description],112)}</p>
  23. <!-- 这里str_cut函数应该是把描述内容限制显示112个字节。2个字节一个汉字,就是限制为56个汉字。112这个数字可以根据自己的需要修改 -->
  24. <div class="bk20 hr"><hr /></div>
  25. {/loop}
  26. {/pc}
  27. </div>
  28. </div>
  29. <div class="slide">
  30. <div class="FocusPic">
  31. {pc:content action="position" posid="1" order="listorder DESC" thumb="1" num="5"}
  32. <!-- 这个为标签和上面的一样,thumb="1"表示必须有缩略图,thumb默认为0,即没有缩略图 -->
  33. <div class="content" id="main-slide">
  34. <div class="changeDiv">
  35. {loop $data $r}
  36. <a href="{$r['url']}" title="{str_cut($r['title'],30)}"><img src="{thumb($r['thumb'],310,260)}" alt="{$r['title']}" width="310" height="260" /></a>
  37. {/loop}
  38. </div>
  39. </div>
  40. {/pc}
  41. </div>
  42. <div class="bk10"></div>
  43. <div class="box extend">
  44. <div class="col-left">推广</div>
  45. <div class="col-auto">
  46. {pc:block pos="index_block_1"}
  47. <!-- pc标签:碎片 标识位置="index_block_1" -->
  48. <!-- 登录网站后台【内容】——【内容发布管理】——【碎片管理】——【站点首页】找到中间“推广”两个字,点击旁边蓝色方框“添加碎片”,显示位置:index_block_1,看到没有。按需要添加碎片。 -->
  49.   
  50. {/pc}
  51. </div>
  52. </div>
  53. </div>
  54. <div class="bk10"></div>
  55. <div class="box">
  56. <h5>图片新闻</h5>
  57. {pc:content action="position" posid="12" thumb="1" order="id DESC" num="10"}
  58. <!-- 这个不讲了,和上面一样 -->
  59. <ul class="content news-photo picbig">
  60. {loop $data $r}
  61. <li>
  62. <div class="img-wrap">
  63. <a href="{$r[url]}" title="{$r[title]}"><img src="{thumb($r[thumb],110,0)}"
  64. title="{$r[title]}"/></a>
  65. <!-- thumb函数这里 高为0 应该是表示高不限制 -->
  66. </div>
  67. <a href="{$r[url]}" title="{$r[title]}">{str_cut($r[title],20)}</a>
  68. </li>
  69. {/loop}
  70. </ul>
  71. {/pc}
  72. </div>
  73. <div class="bk10"></div>
  74. {loop subcat(0,0,0,$siteid) $r}
  75. <!-- 这里出现了subcat函数 函数位于phpcms\libs\functions\globl.func.php文件中,有解释。这里当只有一个网站的时候$siteid=1,就表示调出站点1的所有一级栏目,并循环读取显示 -->
  76. {php $num++}
  77. <!-- 这里计算变量$num=$num+1 好像变量没有初始化值-->
  78. <div class="box cat-area" {if $num%2!=0}style=" margin-right:10px"{/if}>
  79. <!-- 这里有个判断,这样涉及层的样式变换,翻译:如果变量num不能把2整除,则应用样式style;反之,能整除就不应用 -->
  80. <h5 class="title-1">{$r[catname]}<a href="{$r[url]}" class="more">更多>></a></h5>
  81. <div class="content">
  82. {pc:content action="lists" catid="$r[catid]" num="1" thumb="1" order="id DESC" return="info"}
  83. <!-- 这里pc标签是调出当前一级栏目的一条信息,必须有缩略图,返回数据变量名为info -->
  84. {loop $info $v}
  85. <!-- 这里把刚上面调出的一条信息显示出来,属于嵌套循环了。嵌套就是循环里面又有一个循环 -->
  86. <p>
  87. <img src="{thumb($v[thumb],90,0)}" width="90" height="60"/>
  88. <strong><a href="{$v['url']}" target="_blank" title="{$v['title']}"{title_style($v[style])}>{str_cut($v['title'],28)}</a></strong><br />{str_cut($v['description'],100)}
  89. <!-- {title_style($v[style])}这个主要是表示如果发布信息的选择了信息的样式,应用该样式 -->
  90. </p>
  91. {/loop}
  92. {/pc}
  93. <div class="bk15 hr"></div>
  94. {pc:content action="lists" catid="$r[catid]" num="5" order="id DESC" return="info"}
  95. <!-- 这里pc标签是调出当前一级栏目的5条信息,前面有了一个有缩略图的,下面的5条信息不带缩略图,返回数据变量名为info -->
  96. <ul class="list lh24 f14">
  97. {loop $info $v}
  98. <!-- 这里把刚上面调出的5条信息显示出来,还是属于嵌套循环了。可以看到其实是一个大循环里有2个并列的小循环 -->
  99. <li>·<a href="{$v['url']}" target="_blank" title="{$v['title']}"{title_style($v[style])}>{str_cut($v['title'],40)}</a></li>
  100. {/loop}
  101. </ul>
  102. {/pc}
  103. </div>
  104. </div>
  105. {if $num%2==0}<div class="bk10"></div>{/if}
  106. <!-- 这里判断,有了上面那个,应该可以自己理解了。翻译:如果变量num能把2整除,就建立一个div层 其实就是两个大栏目层下面一个bk10样式的层 -->
  107. {/loop}
  108. </div>
  109. <div class="col-auto">
  110. <div class="box">
  111. <h5 class="title-2">公告<a href="" class="more"> </a></h5>
  112. <div class="content">
  113. {pc:announce action="lists" siteid="$siteid" num="2"}
  114. <!-- 登录网站后台【模块】——【公告】,这标签主要是调用公告的最新2个信息 -->
  115. <!-- 看http://v9.help.phpcms.cn 公告模块标签 -->
  116. <ul class="list lh24 f14">
  117. {loop $data $r}
  118. <li> <a href="{APP_PATH}index.php?m=announce&c=index&a=show&aid={$r['aid']}">{$r['title']}</a></li>
  119. <!-- 这里注意超链接 aid={$r['aid']这个参数再变 -->
  120. {/loop}
  121. </ul>
  122. {/pc}
  123. </div>
  124. </div>
复制代码
回复 支持 反对

使用道具 举报

发表于 2010-11-6 23:28:18 | 显示全部楼层
大征集!跟帖报名!
大家一起来写模板制作教程教程。自己学习的同时,做好笔记也利于别人学习。要详细啊。 ...
jckai2008 发表于 2010-11-5 15:49


别停啊,大家都来支持你了!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-11-6 23:28:31 | 显示全部楼层
index.html下半部分学习笔记
  1. <div class="bk10"></div>
  2. <div class="box">
  3. <h5 class="title-2">专题<a href="{APP_PATH}index.php?m=special&c=index&a=special&siteid={$siteid}" class="more">更多>></a></h5>
  4. <!-- 同样,这里注意“更多”的超链接很长,用的时候直接复制、粘贴 -->
  5. <div class="content special">
  6. {pc:special action="lists" siteid="$siteid" elite="1" listorder="3" num="2"}
  7. <!-- 同样看专题标签 elite="1"表示现时推荐的专题 listorder="3"3表示什么样的排序方式呢?高手解答-->
  8. {loop $data $r}
  9. {if $n!=1}<div class="hr bk15"></div>{/if}
  10. <!-- 这里判断n不等于1,就显示hr bk15样式的层。但n是多少,初始化了吗,高手解答 -->
  11. <p style="margin:0">
  12. <a href="{$r[url]}"><img src="{$r[thumb]}" width="90" height="70" /></a>
  13. <strong><a href="{$r[url]}">{str_cut($r[title],'18')}</a></strong><br />{str_cut($r['description'],50)}
  14. </p>
  15. {/loop}
  16. {/pc}
  17. </div>
  18. </div>
  19. <div class="bk10"></div>
  20. <div class="box">
  21. <h5 class="title-2"><span class="rt fn f12 tab SwapTab"><span class="fb">热点</span> | <span >评论</span> | <span>关注</span></span>排行</h5>
  22. <div class="tab-content">
  23. <ul class="content digg">
  24. {pc:content action="hits" catid="35" num="10" order="views DESC"}
  25. <!-- 这里是调出栏目id=35的按访问量降序排序的前10条信息 -->
  26. {loop $data $r}
  27. <li><a href="{$r[url]}" target="_blank" title="{$r[title]}"{title_style($r[style])}>{$r[title]}</a></li>
  28. {/loop}
  29. {/pc}
  30. </ul>
  31. <ul class="content digg hidden">
  32. {pc:comment action="bang" num="10" cache="3600"}
  33. <!-- 这里调出最新的10条评论 缓存3600的作用不知道,是不是3600秒还是毫秒后自动更新,高手指点-->
  34. {loop $data $r}
  35. <li><a href="{$r[url]}" target="_blank">{$r[title]}</a></li>
  36. {/loop}
  37. {/pc}
  38. </ul>
  39. <ul class="content digg hidden">
  40. {pc:content action="hits" catid="35" num="10" order="views DESC"}
  41. <!-- 这里调出栏目id=35的数据点击排行前10条信息,并按访问量降序排列-->
  42. {loop $data $r}
  43. <li><a href="{$r[url]}" target="_blank">{$r[title]}</a></li>
  44. {/loop}
  45. {/pc}
  46. </ul>
  47. </div>
  48. </div><div class="bk10"></div>
  49. <div class="box">
  50. <h5 class="title-2">调查问卷<a href="{APP_PATH}index.php?m=vote&c=index&siteid={$siteid}" class="more">更多>></a></h5>

  51. <script language="javascript" src="{APP_PATH}index.php?m=vote&c=index&a=show&action=js&subjectid=1&type=3"></script>
  52. <!--这里是调用了某个投票的js代码。登录网站后台【模块】——【投票】——选中某个投票,点【调用js代码】可以看到相似代码 -->
  53. </div>
  54. </div>
  55. <div class="bk10"></div>

  56. <div class="box blogroll ylink">
  57. <h5><a href="{APP_PATH}index.php?m=link&siteid={$siteid}" hidefocus="true" class="rt">更多>></a>友情链接<a href="{APP_PATH}index.php?m=link&c=index&a=register&siteid={$siteid}" class="red">申请链接</a></h5>
  58. <!-- 这里还是注意申请友情链接的href代码 -->
  59. <div class="bk10"></div>
  60. <ul class="colli imgul">
  61. {pc:link action="type_list" siteid="$siteid" linktype="1" order="listorder DESC" num="8" return="pic_link"}
  62. <!-- 这里pc标签调用8个友情链接,linktype="1"表示是logo链接 -->
  63. {loop $pic_link $v}
  64. <li><a href="{$v['url']}" title="{$v['name']}" target="_blank"><img src="{$v[logo]}" width="88" height="31" /></a></li>
  65. {/loop}
  66. {/pc}
  67. </ul>
  68. {pc:link action="type_list" siteid="$siteid" order="listorder DESC" num="10" return="dat"}
  69. <!-- 这里pc标签调用10个友情链接 ,没有linktype参数,官方说是必须参数,奇怪.同时浏览器中查看首页源代码。下面这个友情链接列表为空-->
  70. <div class="bk10"></div>
  71. <div class="linka">
  72. {loop $dat $v}
  73. {if $type==0}
  74. <!-- 这里有个type类型的判断,是0就显示文字链接,否则就是logo链接 -->
  75. <a href="{$v[url]}" target="_blank">{$v[name]}</a> |
  76. {else}
  77. <a href="{$v[url]}" target="_blank"><img src="{$v[logo]}" width="88" height="31" style="border: 1px solid #FFBE7A;"></a>
  78. {/if}
  79. {/loop}
  80. <!-- 到这里,纳闷的是怎么两个友情链接列表? -->
  81. </div>
  82. {/pc}
  83. </div>
  84. </div>

  85. <script type="text/javascript">
  86. $(function(){
  87. new slide("#main-slide","cur",310,260,1);//焦点图
  88. new SwapTab(".SwapTab","span",".tab-content","ul","fb");//排行TAB
  89. })
  90. </script>
  91. <!-- 这个函数在页面加载就绪第一时间执行,slide和swaptab函数为jquery插件函数,位于页面头部加载的jquery.sgallery.js文件中。功能应该幻灯片切换,想深入了解,但是函数不是看得太明白。有时间再研究。 -->
  92. {template "content","footer"}
复制代码

评分

参与人数 1鲜花 +2 收起 理由
why + 2

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 点击这里注册

本版积分规则

小黑屋|Archiver|phpcms网站管理系统 ( 京ICP备14011169 )

GMT+8, 2019-10-20 07:06 , Processed in 0.262005 second(s), 13 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表