企业CMS网站建设第六课：CMS网站个人模版开发实战——列表页常用标签的使用

迈不过友情╰ 2022-01-22 13:49 221阅读 0赞

**知识点：**列表页常用标签的了解、列表页模板调用head的方法、面包屑导航的调用方法。

**本次课目标：**继续网站模板制作，利用dedecms标签完成网站列表页面对后台相关数据的调用。

# 1、列表页模板调用head #

**提出问题：**当前列表页模板，头部head信息没有写，不利于SEO优化。希望列表页模板能够调用后台数据，这样每一个列表页的标题显示的将不一样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

**解决思路：**使用dedecms标签来调用列表页的head信息。

**第一步：**使用[织梦标签生成器工具][Link 1]生成列表页head调用所需要的dedecms标签

<title>{dede:field.title/}_{dede:global.cfg_webname/}</title>
    <meta name="keywords" content="{dede:field name='keywords'/}" />
    <meta name="description" content="{dede:field name='description' function='html2text(@me)'/}" />

**第二步：**修改列表页模板文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1][]

**注意：**将原有的HTML源码<title>无标题文档</title>删掉，再添加要替换的dedecms相关标签代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2][]

**第三步：**生成后台数据，预览效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3][]

**常见问题：**模板修改，且后台更新以后，发现没有什么变化？检查网站后台是否有数据。

**查看方法：**后台核心→栏目管理→选中一个栏目后，点击右边的【更改】→【高级】，可以看到该栏目是否设置相关信息，如果设置了，那么前台可以正确调用数据，否则调用的是空数据，前台直观反应是没有变化，但实际查看源代码，可以看到已经进行了调用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4][]

# 2、面包屑导航的调用方法 ——当前位置 #

**面包屑导航的作用：**面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5][]

**提出问题：**当前列表页模板，面包屑导航是我们写html页面时候写上去的，甚至没有给标签添加a链接，因此无法实现面包屑导航的作用。

**解决思路：**使用dedecms标签来调用【当前位置】信息。

**第一步：**使用[织梦标签生成器工具][Link 2]生成列表页head调用所需要的dedecms标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6][]

{dede:field name='position'/}

**第二步：**修改列表页模板文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7][]

**注意：**将原有的HTML源码【首页 >> 汽车坐垫推荐】删掉，再添加要替换的dedecms相关标签代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 8][]

**第三步：**生成后台数据，预览效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 9][]

**注意：**如果模板修改后，发现a链接的样式不再适合（如颜色冲突等），可以适当修改css样式表。

# 3、调用列表页文章 #

**提出问题：**列表页的文章都是重复的，并没有实现后台数据的调用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 10][]

**解决思路：**使用dedecms标签来调用文章信息。

**第一步：**找到列表页模板文件对应的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 11][]

**注意：**找到要调用的代码，分析，我们需要调用：**文章标题+描述+缩略图**

**第二步：**使用[织梦标签生成器工具][Link 3]生成列表页head调用所需要的dedecms标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 12][]

**注意：**调用文章条数，需要根据自己的html网页原来有的模板来设置，另外我们还需要在原有标签的基础上天加一些属性，用来设置调用文章的图片信息、标题信息、文章摘要信息。

{dede:list pagesize="5" titlelen="24" infolen="200" imgwidth="280" imgheight="186"}
    
    
    {/dede:list}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 13][]

找到原来写的html代码，将li标签删除到只剩下一对，然后进行相关内容的调用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 14][]

**第三步：**生成后台数据，预览效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 15][]

**注意：**如果模板修改后，该列表页下面没有文章，那么意味着该栏目xi下在后台没有文章，因此调用了0篇文章，也即是没有显示文章。

# 4、给列表页添加分页 #

**第一步：**使用工具生成列表页分页所需要的dedecms标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 16][]

**第二步：**修改列表页模板文件

当时设计html页面时没有设计翻页，所以要在网站中部主体下面，新添加一个div，并且设定div样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 18][]

**第三步：**生成后台数据，预览效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 19][]

============这里是结束分割线================

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: /images/20220122/828f784076f142d3aaf26350dabd51af.png
[Link 1]: http://tools.dedecms.com/dedetag_maker/system.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1]: /images/20220122/71a9e359ea61419da6db52e1a86926fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2]: /images/20220122/f6ca2aed20b6468a9a37e30565d05681.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3]: /images/20220122/05ba25b5cce5436eaee2072df013bf5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4]: /images/20220122/e21e47d252e54da09e4c44743ef2a6b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5]: /images/20220122/aff0b110cbd143d0a1cb2d5ff52854a4.png
[Link 2]: http://tools.dedecms.com/dedetag_maker/article.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6]: /images/20220122/afc344e284be4110a921d5681b9c128c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7]: /images/20220122/ffdca327e41740cb9331cf9a64cbce87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 8]: /images/20220122/0d154a4077fb487abd4e51a35d932140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 9]: /images/20220122/7edad7c6c97b49ad837127a59affa42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 10]: /images/20220122/c9b878b67d4d49ecb10057b7cecc9422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 11]: /images/20220122/8f1853c1bfcd4dae8faccee7adb4019c.png
[Link 3]: http://tools.dedecms.com/dedetag_maker/lists.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 12]: /images/20220122/77a0ed99cdd74b9db52b28a6134bd4c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 13]: /images/20220122/a7567ab0e8ee48a18679e2415cab20fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 14]: /images/20220122/8679c8bb22fc4d4d9669f10aada6e201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 15]: /images/20220122/a9e76c0cecc743a19928e49a72b7c109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 16]: /images/20220122/45b88ea10e6a44bea519ce5d1a8f918a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 17]: /images/20220122/392498b018284371b205b7b7a4851983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 18]: /images/20220122/e58eceec81d649ad8943236022820d5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 19]: /images/20220122/c22e448ce5dc482a9874d638b2469083.png