杨泽业：给mipcms文章列表页，文章发布时间的右侧添加栏目及标签详细教程
网站服务商杨泽业：给mipcms文章列表页，文章发布时间的右侧添加栏目及标签详细教程今天我把我的网站首页和栏目列表页，文章发布时间的右侧，添加了文章所在的栏目分类，以及该文章的
网站服务商杨泽业：给mipcms文章列表页，文章发布时间的右侧添加栏目及标签详细教程
今天我把我的网站首页和栏目列表页，文章发布时间的右侧，添加了文章所在的栏目分类，以及该文章的标签。
文章的栏目我是早就添加了的，文章的标签，是今天添加的，其实我早就该添加了，想象到，添加了标签，电脑上面看起来还好，手机上面显示的话，肯定很难看的就一直没有添加。
实际上是自己脑袋不开窍，完全可以设置成电脑显示，手机不显示的，我网站上面的二维码图片就是这样干的，而标签调用，却没有想到。好了，废话就不多说了，下面来正式的：
一、实现为什么要转文章列表里面，添加文章分类和本文章标签？
1.1、添加了文章的分类，更加容易显示你有哪些的文章分类，大多数看见你的文章的分类，只是看见顶级栏目分类，二级的不一定看见，而文章列表页调用，就会显示出二级栏目，这样的话，更加利于用户体验和网站运营。
1.2、添加了文章的标签，更加吸引用户点击。便签基本上都是自己设置的文章核心的关键词，是最值得推荐的信息点，所以把标签显示在文章的列表页面，更加吸引用户点击网站内容，以及文章标签。
1.3、添加了分类和标签，这也是增加了关键词密度的，利于搜索引擎抓取页面内容，利于网站权重的提升。
1.4、文章发布时间的右侧，有足够多的空间，来显示栏目和标签的位置，空着不如补满。
二、接下来讲讲怎么添加了文章分类和标签了。
2.1、打开文章列表模块文件template/default/block/article-list.html里面的第15行的：
<span>{$v['publish_time']|date='Y-m-d',###}</span>
2.2、如果只是添加文章分类的话，就改成：
<span>{$v['publish_time']|date='Y-m-d',###} @<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>
2.3、如果添加了文章分类还要添加，标签的话，就改成：
<span>{$v['publish_time']|date='Y-m-d',###} @<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>
<span class="tags">{miptag:tags value="vo" itemIds='$v[uuid]'} <a href="{$vo.url}" data-type="mip" data-title="{$vo.name}" title="{$vo.name}">{$vo.name}</a>{/miptag:tags} </span>
2.4、如果你想把文章的标签，只是在电脑显示，手机不显示的话，代码改成：
2.4.1、代码：
<span>{$v['publish_time']|date='Y-m-d',###} @<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>
<span class="dnxs"><span class="tags">
{miptag:tags value="vo" itemIds='$v[uuid]'}
<a href="{$vo.url}" data-type="mip" data-title="{$vo.name}" title="{$vo.name}">{$vo.name}</a>
{/miptag:tags}
</span></span>
2.4.2、上面为什么电脑显示，手机不显示呢？因为我自定义了一个叫做dnxs的css标签，接下来在去默认模板的css里面的末尾添加这个css属性内容：
2.4.3、打开当前css样式表文件，在末尾添加以下css代码：
@media screen and (max-width: 1200px) { .dnxs{display:none; }
}
上面的意思是，浏览器的页面分辨率大于1200px的话，那就是电脑了，可以显示这个标签，如果不是电脑，是手机的话，现在的主流手机的屏幕宽度是不会超过1200px的。
好了，今天的给mipcms文章列表页，文章发布时间的右侧添加栏目及标签详细教程就到此结束了，网站效果可以浏览本站的首页和栏目页，欢迎你关注本站的其他mipcms教程。精彩mipcms教程我们明天见！
猜你喜欢