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

  • 时间:
  • 浏览:412次
  • 来源:网站服务商官网 网址: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


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

猜你喜欢

视频教程:在自己的电脑上安装phpstudy软件,创建本地网站环境,搭建各种网站

我们做网站的人经常要安装各种网站程序,看看这个网站程序适合不适合自己的要求,这个网站源码到底是否可用等,本地安装测试,要比上传到虚拟主机或者服务器上面修改要方便得多。php中文

2019-07-24  分类:基础知识  浏览:215次


免费在线智能AI文章伪原创工具源码

免费在线智能AI文章伪原创工具源码出售本工具源码不写入数据库,上传到任意支持php的网站空间即可,部分空间需要开启相关的参数,才能正确使用。伪原创工具的工作原理是:使用谷歌翻译

2019-07-19  分类:小工具  浏览:283次


网站服务商diy模板更新

更新的地方有:1、6月19日增加了两个栏目单页面模板。2、6月22日修改了文章详情页的字体大小和间距。3、6月23日调整了上一篇、下一篇和猜你喜欢的位置。4、6月24日,在上一篇、下一篇的上方,增加一个回到目录的提示与地址。

2019-07-01  分类:本站公告  浏览:268次


杨泽业:mipjz网站的MIP数据提交到神马搜索的实现方法

今天早上研究了一下,怎么把mipjz程序的文章链接和标签链接推送到神马搜索里面。我们的程序是mip的,神马搜索页也支持MIP数据提交。神马搜索里面只是提供了api,没有提交的入

2019-07-01  分类:mipcms  浏览:351次


工信部批复设立中国自己的域名根服务器

6月26日,工信部发布通告《工业和信息化部关于同意中国互联网络信息中心设立域名根服务器(F、I、K、L根镜像服务器)及域名根服务器运行机构的批复》及《工业和信息化部关于同意互联

2019-06-28  分类:行业资讯  浏览:256次


给你的网站添加百度商桥的在线沟通的功能

今天我访问我的一个买了我的mip网站模板的客户的网站,发现了他的网站添加了百度商桥的在线沟通的功能。我认为添加了商桥的代码,肯定就不能通过百度mip的验证了。但是,我错了。我经

2019-06-21  分类:基础知识  浏览:390次


景安虚拟主机免费一键开启https安全访问的方法

今天在杨泽业网站建设交流群(群号:187388018)群友普密斯精密仪器问我:“群主,你网站上有把mipcms加上https的教程吗?”我回答说:“没有,你遇到什么问题了,直接

2019-06-20  分类:基础知识  浏览:322次


网站服务商diy模板618更新:全站删除文章缩略图,让网站访问更加快速

网站服务商讯:网站服务商站长杨泽业基于mipjz官方模版制作的diy模板,在2019年6月18日进行更新:全站删除文章缩略图,让网站访问更加快速。本次删除的缩略图的地方有首页列

2019-06-17  分类:本站公告  浏览:254次


给网站添加网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:基础知识  浏览:302次


网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:建站百科  浏览:194次