帝国cms在首页调用指定几个栏目的所有文章和用js实现分页的方法
发布时间:2019-09-02 21:51:17作者:魏义齐阅读:()
先说明白我的问题:我博客有两个主题技术与生活,四个栏目是技术,四个栏目是生活,我要在首页调用技术类所有文章并实现分页。
先来说调用指定几个栏目的所有文章,用不着php,我是在群友提示下重新看了灵动标签,用灵动标签就可以,只需要把指定几个栏目的id写在''里并用,隔开就可以,比如:
下面来说怎么用js实现分页,js是在墨鱼部落格找到的,原文地址:https://www.moyublog.com/notes/415.html,但是用到我的网站后出现了乱码,解决方法很简单,新建一个文本文档把代码复制过去,然后另存为,编码选UTF-8,再新建一个js把代码复制回来乱码问题就解决了。
具体使用是在你原来的ul增加id="list",并写样式display: none,然后在原来的ul下面再增加一个ul,类名id="list2",这个ul用来移植上面隐藏的ul的内容,在新增的ul下面调用js,这里我将其改为了index-page.js,原文所说的在</head>前调用的js我改成了page-function.js,整体代码如下:
然后说样式,样式全在class="ctrlPages"的span里,分页按钮在a标签里,这个大家f12慢慢写样式,我提供下我写的:

我觉得当前页和页码提示都没用所以在page-function.js将相关代码删除,小样式也是在这个js里修改。下面是改好后的效果

我的js下载
2019年9月29日补充:js实现分页有个缺陷,就是一次性加载完所有列表信息,这个大家查看源代码就可看到,如果你的首页没有使用缓存技术那还是建议做成加载或者用自定义列表吧。
先来说调用指定几个栏目的所有文章,用不着php,我是在群友提示下重新看了灵动标签,用灵动标签就可以,只需要把指定几个栏目的id写在''里并用,隔开就可以,比如:
[e:loop={'1,12,13,16',10000,0,0}]
[/e:loop]
再来说分页,刚开始我给青姐看我在首页调用技术类所有文章的代码问她怎么实现分页,她告诉我这样调用实现不了分页,得用自定义列表,她的文章:https://www.yangqq.com/jstt/web/956.html,但我在操作过程中自定义列表提交后空白,检查不出是什么原因,而且我的首页是动态首页,我在index.php里还加了防采集和把原来phpcms站动态链接改成404的代码,那么青姐这个方法在我的网站使用就有缺陷了。下面来说怎么用js实现分页,js是在墨鱼部落格找到的,原文地址:https://www.moyublog.com/notes/415.html,但是用到我的网站后出现了乱码,解决方法很简单,新建一个文本文档把代码复制过去,然后另存为,编码选UTF-8,再新建一个js把代码复制回来乱码问题就解决了。
具体使用是在你原来的ul增加id="list",并写样式display: none,然后在原来的ul下面再增加一个ul,类名id="list2",这个ul用来移植上面隐藏的ul的内容,在新增的ul下面调用js,这里我将其改为了index-page.js,原文所说的在</head>前调用的js我改成了page-function.js,整体代码如下:
<ul id="list" class="new-articles" style="display: none;"></ul>
<ul id="list2"></ul>
<script src="[!--news.url--]skin/你的文件夹/js/index-page.js"></script>
这个时候前台调用就没问题了,但是你发现样式乱了,上面说了id="list2"的ul用来移植id="list"的ul的内容,id="list"的ul还隐藏了,那么你给id="list2"的ul加上你原来ul的class类名就行了。然后说样式,样式全在class="ctrlPages"的span里,分页按钮在a标签里,这个大家f12慢慢写样式,我提供下我写的:
/*分页*/
span.ctrlPages {
display: block;
width: 90%;
text-align: center;
line-height: 2.0;
margin: auto;
margin-bottom: 15px;
}
span.ctrlPages a {
border: solid 1px #C6C4C4;
padding: 2px 5px 2px 5px;
color: #333;
}
span.ctrlPages a.curPage {
background-color: #FD9D01;
padding: 3px 5px 3px 5px;
color: #fff;
border: none;
}
效果如下:
我觉得当前页和页码提示都没用所以在page-function.js将相关代码删除,小样式也是在这个js里修改。下面是改好后的效果

我的js下载
2019年9月29日补充:js实现分页有个缺陷,就是一次性加载完所有列表信息,这个大家查看源代码就可看到,如果你的首页没有使用缓存技术那还是建议做成加载或者用自定义列表吧。
相关阅读
-
无相关信息
上一篇:帝国cms上传不了大的图片如何解决?下一篇:帝国cms发送邮件设置教程,使注册用户通过邮件激活账号
赞助本站
原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包
最新会员
-
weiyiqi
- 从纯技术角度谈phpcms和帝国cms的优缺点(2091)
- 帝国cms“建立目录不成功,请检查目录权限”的解决方法(1726)
- 帝国cms内容页图片如何自适应(1043)
- 帝国cms如何让文章id从1开始(完美解决)(929)
- 帝国cms解决代码高亮方法二(820)
- 帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应(735)
- 帝国cms如何实现全站搜索功能(722)
- 帝国cms调用二级栏目代码(附参考结构和文档)(627)
- 帝国cms编辑器集成codesnippet代码高亮插件后为其添加行号的方法(534)
- 帝国cms会员中心修改资料表单模板在哪修改(374)
- 帝国cms实现代码高亮方法三(2021-07-04)
- 帝国cms接入QQ和微博登录的教程及插件下载(2019-11-01)
- 帝国cms7.5如何调用最新注册会员的头像及用户名(2019-10-27)
- 除会员中心外,帝国cms如何向已登录的会员显示其会员名即登录状态(2019-10-26)
- 使用帝国备份王恢复帝国网站后台备份的数据至数据库的教程(2019-10-21)