导航菜单
首页 >  » 正文

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',###}&nbsp;@<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>


2.3、如果添加了文章分类还要添加,标签的话,就改成:

<span>{$v['publish_time']|date='Y-m-d',###}&nbsp;@<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>

&nbsp;<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',###}&nbsp;@<a href="{$v['categoryInfo']['url']}">{$v['categoryInfo']['name']}</a></span>

&nbsp;<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属性内容:

打开当前css样式表文件,在末尾添加以下css代码:

@media screen and (max-width: 1200px) { .dnxs{display:none; }}

上面的意思是,浏览器的页面分辨率大于1200px的话,那就是电脑了,可以显示这个标签,如果不是电脑,是手机的话,现在的主流手机的屏幕宽度是不会超过1200px的。

0.211650s