dede仿站第四课:为了他(她)套上它

  • A+
所属分类:dede仿站

干掉它,那个让你朝思暮想的它,如果你是直接点击进来的,建议回头看看,那么多爷爷奶奶叔叔阿姨哥哥姐姐弟弟妹妹在看第一第二课第三课的内容呢:

dede仿站第一课:打好基础功

dede仿站第二课:安装一个网站

dede仿站第三课:干掉一个网站

 

懂它的规则

一、三大标签

网站三大标题,标题(title),关键词(kewords),描述(description)尤为重要,关于seo的内容可以看下之前在一个QQ群里人家的培训内容(http://www.lijinlong.cc/seo/seorm/535.html),有空我自己写份自己的理解。

  1. <title>{dede:global.cfg_webname/}</title>
  2. <meta name="description" content="{dede:global.cfg_description/}" />
  3. <meta name="keywords" content="{dede:global.cfg_keywords/}" />

将上述内容替换掉网页源代码里面,如下图

dede仿站第四课:为了他(她)套上它

各对应后台位置

  • title  后台 - 系统设置 - 系统基本参数 - 网站名称
  • kewords 后台 - 系统设置 - 系统基本参数 - 站点默认关键字(多个关键词用,分隔)
  • description  后台 - 系统设置 - 系统基本参数 - 站点描述

 

二、导航标签

  1. {dede:channel row="10" type="top"}
  2. {dede:channel row="需要的条数" type="顶级栏目"}
  3. <li><a href='[field:typeurl/]' ><span>[field:typename/]</span></a></li>
  4. <li><a href='栏目的链接' ><span>栏目的名称</span></a></li>
  5. {/dede:channel}

卧槽,这个要怎么套上去啊?看不懂了

注:类似 <!-- 他的栏目 --> 这样是网页的标记,方便大家能看懂

  1. <!-- 获取栏目标签 -->
  2. {dede:channel row="10" type="top"}
  3. <li><a href='[field:typeurl/]' [field:rel/]><span>[field:typename/]</span></a></li>
  4. {/dede:channel}
  5. <!-- 他的栏目 -->
  6. <ul class="nav_ul">
  7.     <li>
  8.       <div class="big_nav"><a href="http://www.lijinlong.ccc" title="首页">首页</a></div>
  9.     </li>
  10.     <li class="menuii">
  11.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/" title="dede">dede</a></div>
  12.     </li>
  13.     <li class="menuii">
  14.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/" title="dede仿站">dede仿站</a></div>
  15.     </li>
  16.     <li class="menuii">
  17.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedemuban/" title="dede模板">dede模板</a></div>
  18.     </li>
  19.     <li class="menuii">
  20.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedejiaocheng/" title="dede教程">dede教程</a></div>
  21.     </li>
  22.     <li class="menuii">
  23.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedeanli/" title="dede案例">dede案例</a></div>
  24.     </li>
  25.     <li class="menuii">
  26.       <div class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedebiaoqian/" title="dede标签">dede标签</a></div>
  27.     </li>
  28.   </ul>
  29.   <!-- 变身 -->
  30.   <ul class="nav_ul">
  31.     <li>
  32.       <div class="big_nav"><a href="http://www.lijinlong.ccc" title="首页">首页</a></div>
  33.     </li>
  34.     {dede:channel row="10" type="top"}
  35.     <li class="menuii">
  36.       <div class="big_nav"><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a></div>
  37.     </li>
  38.     {/dede:channel}
  39.   </ul>

看懂了吗,最简单的原理就是找相同,然后在其中替换掉一条,修改为标签,然后把其余的给删除掉。

更多关于:dede标签之栏目标签的运用

 

三、幻灯片标签

其实幻灯片的标签等同于新闻标题,只是一个表现出来的是是展现图片,一个是展示文字。

模仿站的幻灯片文件内容

  1. <!--banner--开始-->
  2. <div id="banner_tabs" class="flexslider">
  3.   <ul class="slides">
  4.     <li><a  href="http://www.lijinlong.cc"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  5.     <li><a href="http://www.lijinlong.cc"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  6.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  7.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  8.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  9.   </ul>
  10.   <ul class="flex-direction-nav">
  11.     <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  12.     <li><a class="flex-next" href="javascript:;">Next</a></li>
  13.   </ul>
  14.   <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  15.     <li class="activebannaer"><a>1</a></li>
  16.     <li><a>2</a></li>
  17.     <li><a>3</a></li>
  18.     <li><a>4</a></li>
  19.     <li><a>5</a></li>
  20.   </ol>
  21. </div>
  22. <!--banner--结束-->

知识点:

  • 文章自定义属性的调用(flag="f",其中f为幻灯片,更多请查看系统--系统设置--自定义稳当熟悉)
  • 缩略图的调用(简单测试,先用缩略图作为测试,后期涉及到开发的时候,再来更新)
  • 数字标签调用

完成版代码:

  1. <!--banner开始-->
  2. <div id="banner_tabs" class="flexslider">
  3.   <ul class="slides">
  4.   <!-- 后台文章勾选自定义属性幻灯片的前五篇内容 -->
  5.   {dede:arclist row="5" flag="f"}
  6.     <li><a  href="[field:arcurl/]"><img width="1920" height="380" alt="" style="background: url('[field:litpic/]') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  7.     {/dede:arclist}
  8.   </ul>
  9.   <!-- 幻灯片上面的左右切换按钮 -->
  10.   <ul class="flex-direction-nav">
  11.     <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  12.     <li><a class="flex-next" href="javascript:;">Next</a></li>
  13.   </ul>
  14.   <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  15.   <!-- 循环输出数字,比方有有5个,下面就产生1-5的数字 -->
  16.   {dede:arclist row="5" flag="f"}
  17.     <li class="activebannaer"><a>[field:global.autoindex/]</a></li>
  18. {/dede:arclist}
  19.   </ol>
  20. </div>
  21. <!--banner结束-->

 

四、新闻标签

如果你看懂了上面的幻灯片内容,事实上你修改资讯的模板就变得很轻松了,看下面的代码:

  1. <!-- 新闻中心模块开始 -->
  2.     <div class="NewsBox">
  3.       <ul>
  4.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1311.html" title="dede仿站第一课:打好基础功">dede仿站第一课:打好基础功 </a><span>2017-01-16</span></li>
  5.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1333.html" title="dede仿站第二课:安装一个网站">dede仿站第二课:安装一个网站 </a><span>2017-01-13</span></li>
  6.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1341.html" title="dede仿站第三课:干掉一个网站">dede仿站第三课:干掉一个网站 </a><span>2016-12-24</span></li>
  7.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1373.html" title="dede仿站第四课:为了他(她)套上它">dede仿站第四课:为了他(她)套上它 </a><span>2016-12-23</span></li>
  8.       </ul>
  9.     </div>
  10.   </div>
  11. <!-- 新闻中心模块结束 -->

套上标签后代码,从上往下看,显示网址的数量为5条,网站目录的ID为5,文章的网站,文章的标题,时间的标签。

知识点:

  • 时间的标签的运用
  1. <!-- 新闻中心模块开始 -->
  2.     <div class="NewsBox">
  3.       <ul>
  4.       {dede:arclist row="5"  type="5" }
  5.         <li><a href="[field:arcurl/]" title="[field:title /]">[field:title /] </a><span>[field:pubdate function='strftime("%y-%m-%d",@me)'/]</span></li>
  6.         {/dede:arclist}
  7.       </ul>
  8.     </div>
  9.   </div>
  10. <!-- 新闻中心模块结束 -->

首页的大部分的标签,通过上述的标签转化而来。

给今天努力的自己鼓个掌,多尝试一下,先不要急着搞其他的,先把这些内容消化了。

聊点其他的

一直想办法把文字的说的更详细一点,但是又怕说得太复杂,所以想制作视频来做这个教程。但是一想互联网上面的关于这个视频教程太多太多了,以至于做出来是否也是在浪费精力。

如果:

  • 你想听视频课程
  • 你想需要更多更全面的知识
  • 你需要seo的知识
  • 你需要网站后面发布的一些模板案例的源码
  • 如果。。。

那你:

  • 愿意支付88元(前十位,后十位188,后面288。。。。没有了)
  • 加我QQ聊聊吧,我想听听你的意见。
李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: