杨泽业:给mipcms文章列表页,文章发布时间的右侧添加栏目及标签详细教程

  • 时间:
  • 浏览:465次
  • 来源:网站服务商官网 网址:https://www.wzfws.com

网站服务商杨泽业:给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属性内容:


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

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

}


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


好了,今天的给mipcms文章列表页,文章发布时间的右侧添加栏目及标签详细教程就到此结束了,网站效果可以浏览本站的首页和栏目页,欢迎你关注本站的其他mipcms教程。精彩mipcms教程我们明天见!

本文地址:https://www.wzfws.com/lanmujibiaoqian.html


网站服务商经典语录
欢迎关注我的微信和微信公众号

猜你喜欢

mipjz模版今日小幅更新:详情页末尾的文章来源调用网站名称和当前栏目

今天是2019年的六一儿童节,今天本站更新了文章末尾的文章来源的调用方式,文章来源由原来的网站名称改成网站名称+当前栏目名称,来源地址就往下一行显示。原来是:文章来源:网站服务

2019-06-01  分类:本站公告  浏览:424次


mipjz模板更新:网站服务商的diy模版的tag标签页面模版更新

网站服务商(wzfws.com)站长杨泽业于2019年5月16日更新了标签列表页(diy/tag/tag.html)本次的更新属于小幅度的更新。原来的tag列表页模版,和官方的

2019-05-16  分类:本站公告  浏览:332次


超链接标签<a>

HTML<a>标签标签定义及使用说明<a>标签定义超链接,用于从一个页面链接到另一个页面。<a>元素最重要的属性是href属性,它指定链接的

2019-05-07  分类:建站百科  浏览:479次


声明标签 <!DOCTYPE>

HTML声明标签<!DOCTYPE>位于文档中的最前面的位置,处于<html>标签之前。<!DOCTYPE>声明不是一个HTML标签;它是用

2019-05-07  分类:建站百科  浏览:291次


注释标签<!--...-->

欢迎你来到建站百科学习HTML标签:标签,注释标签,HTML注释标签。标签定义及使用说明注释标签用来在源文档中插入注释。注释不会在浏览器中显示。您可使用注释对您的代码进行解释,

2019-05-07  分类:建站百科  浏览:436次


网站服务商详情页地址全面改造升级:去掉栏目地址,直接显示文章地址

网站服务商(wzfws.com)2019年4月25日公告:为了更好的增加用户体验效果,本站详情页地址全面改造升级:去掉栏目地址,直接显示文章地址。经过几个月的运营,网站服务商站

2019-04-25  分类:本站公告  浏览:248次


杨泽业:让mipcms侧边栏的部分栏目文章按标签样式显示(小众需求)

网站服务商杨泽业:让mipcms侧边栏的部分栏目文章按标签样式显示(小众需求)本站添加了一个叫做建站百科的栏目,因为百科是词条,字数肯定不会像普通文章那样长了,如果按照普通的文

2018-10-30  分类:mipcms  浏览:526次


杨泽业:mipcms的虚拟主机伪静态怎么设置?宝塔伪静态怎么设置?二级栏目伪静态设置汇总?

网站服务商杨泽业:mipcms的虚拟主机伪静态怎么设置?宝塔伪静态怎么设置?二级栏目伪静态设置汇总?使用mipcms搭建网站的人越来越多,使用mipcms网站的环境也是不同的,

2018-10-25  分类:mipcms  浏览:529次


杨泽业:给mipcms文章列表页,文章发布时间的右侧添加栏目及标签详细教程

网站服务商杨泽业:给mipcms文章列表页,文章发布时间的右侧添加栏目及标签详细教程今天我把我的网站首页和栏目列表页,文章发布时间的右侧,添加了文章所在的栏目分类,以及该文章的

2018-10-18  分类:mipcms  浏览:466次


杨泽业:mipcms模板开发者必须熟悉的模板结构、调用标签和调用代码合集(持续更新中)

网站服务商杨泽业:mipcms模板开发者必须熟悉的模板结构、调用标签和调用代码合集(持续更新中)网站服务商即将推出新的网站模板,供大家免费使用,同时也希望更多的人学会开发属于自

2018-10-16  分类:mipcms  浏览:837次