联系官方销售客服

1835022288

028-61286886

求助 版主:官方研发技术组
列表页的这种翻页代码是多少怎么做的
类型:迅睿CMS 更新时间:2021-11-02 10:05:08

模板标签里面

{xunruicms_img_title}列表页的这种翻页代码是多少,怎么做的



回帖
  • 官方研发技术-张锋
    #1楼    官方研发技术-张锋
    2021-11-01 10:13:29
    Chrome 0
    栏目页的模板标签生成工具:https://www.xunruicms.com/doc/code/lists.html
  • 老油条
    #2楼    老油条
    2021-11-01 14:42:30
    Chrome 0
    官方研发技术-张锋 找不到 😥
  • beggo
    #3楼    beggo
    2021-11-01 15:47:40
    Chrome 0

    分页标签变量写法:

    {$pages}

    系统会自动生成分页html文件,查看源代码可以看出效果:

    <ul class="pagination">
      <li><span class='page-numbers current'>1</span></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_2.html">2</a></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_3.html">3</a></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_4.html">4</a></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_5.html">5</a></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_6.html">6</a></li>
      <li><a class="page-numbers" target="_blank" href="/news/index_2.html" >下一页</a></li>
    </ul>


    针对这种系统生成出来的分页样式,如果没写css的话,访问页面就会错乱效果,如下图:


    image


    解决方案:


    方案一、懒人方案

    1、直接把下面的css复制到你的css文件中

    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px; }
    .pagination > li {
        display: inline; }
    .pagination > li > a,
    .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        line-height: 1.42857;
        text-decoration: none;
        color: #337ab7;
        background-color: #fff;
        border: 1px solid #ddd;
        margin-left: -1px; }
    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
        margin-left: 0;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px; }
    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px; }
    .pagination > li > a:hover, .pagination > li > a:focus,
    .pagination > li > span:hover,
    .pagination > li > span:focus {
        z-index: 2;
        color: #23527c;
        background-color: #eeeeee;
        border-color: #ddd; }
    .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
    .pagination > .active > span,
    .pagination > .active > span:hover,
    .pagination > .active > span:focus {
        z-index: 3;
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
        cursor: default; }


    2、再访问页面,效果如下:


    image



    方案二、个性化方案,自定义分页样式方案

    https://www.xunruicms.com/doc/571.html

    满意答案
  • 老油条
    #4楼    老油条
    2021-11-02 10:05:08
    Chrome 0
    @beggo:感谢,已解决