您当前的位置:主页 > 教程合集 > 工具推荐网站首页工具推荐

为博客文章页侧边添加上/下一篇按钮

发布时间:2016-01-17编辑:余斗阅读:(0)字号:
    在访问其他站长的鸿运国际手机登录首页时候,特别是wordpress博客,余斗发现很多网站的内容页的侧边都有两个按钮,用来控制点击就跳转到下一篇,这个细节很好,用户体验不错。 因为余斗的博客采用DedeCMS搭建,没有Wordpress那么方便能快速实现点击按钮就跳转下一篇或上一篇,余斗花了点时间修改了dede底层文件,终于实现这个功能,效果如下: 为博客文章页侧边添加上/下一篇按钮 接下来,余斗就说说如何在DedeCMS下实现文章页侧边添加上/下一篇按钮。 首先,我们要修改Dede自身的上/下一篇控制文件,Dede自己的调用上/下一篇标签为

    {dede:prenext get='pre'/} //调用上一篇
    {dede:prenext get='next'/}//调用下一篇
     
    这里直接生成的格式是”上一篇:无效搜索结果页面对优化的影响“这样的,直接带了上一篇文字并且是锚文本格式,这样无法运用到图片按钮中吗,我们打开include/arc.archives.class.php文件,找到第821行,把

    $this->PreNext['pre'] = "上一篇:<a href="http://lailaikeji.com/#39;$mlink'>{$preRow['title']}</a>" ";
     
    修改为

      $this->PreNext['pre'] = "<a href="http://lailaikeji.com/#39;$mlink'" title='上一篇:{$preRow['title']}'>{$preRow['title']}</a> ";
     
    把第826行的

      $this->PreNext['pre'] = "上一篇:没有了 ";
     
    修改为

    $this->PreNext['pre'] = "没有了";
     
    把第833行的

      $this->PreNext['next'] = "下一篇:<a href="http://lailaikeji.com/#39;$mlink'">{$nextRow['title']}</a> ";
     
    修改为

      $this->PreNext['next'] = "<a href="http://lailaikeji.com/#39;$mlink'" title='{$nextRow['title']}'>{$nextRow['title']}</a> ";
     

    把第838行的


      $this->PreNext['next'] = "下一篇:没有了 ";
     
    修改为

      $this->PreNext['next'] = "没有了";
     
    这就实现了调用标签dede:prenext生成的链接是锚文本格式,不带上/下一篇,修改这里之后要注意,如果我们的文章页中以前调用上/下一篇的格式中没有带上/下一篇,此时一定要加上,例如:

            <div class="nextinfo">
    <p>上一篇:{dede:prenext get='pre'/}</p>
    <p>下一篇:{dede:prenext get='next'/}</p>
            </div>
     
    修改完底层文件,我们在实际引用时这样操作,在文章页中底部之上的位置添加代码:

    <div class="prevs">{dede:prenext get='pre'/}</div>
    <div class="nexts">{dede:prenext get='next'/}</div>
     
    在css文件中添加:

    /*上一篇 下一篇*/
    .nexts{line-height:0;font-size:0;overflow:hidden;}
    .prevs{line-height:0;font-size:0;overflow:hidden;}
    .prevs a{background: url("../images/arrow.png") 0px -3px no-repeat;display: block;height: 95px;left: 50%;margin-top: -10%;position: fixed;text-indent: -999em;top: 50%;width: 60px;margin-left: -50%;}
    .nexts a{background: url("../images/arrow.png") -70px -3px no-repeat;display: block;height: 95px;right: 50%;margin-top: -10%;position: fixed;text-indent: -999em;top: 50%;width: 60px;margin-right: -50%;}
    .prevs a:hover{background: url("../images/arrow.png") 0px -103px no-repeat;display: block;}
    .nexts a:hover{background: url("../images/arrow.png") -70px -103px no-repeat;display: block;}
     
    前面文章如何隐藏div块一文中提到如何隐藏这个div块,这里就用得上。按钮上,余斗用的是css sprite技术,把四个按钮集合在一起,加快了加载速度,大家可以根据自己的情况进行选择。 为博客文章页侧边添加上/下一篇按钮 这样就生成了两个上/下一篇文章的按钮在页面两侧,而且是固定位置,如果没有上一篇或下一篇文章,则为空,是不是很方便,如果你也是DedeCMS建站,也可以去试试。
关键字词上一篇 下一篇 文章页 按钮
余斗余斗
  1. 转载请注明: 为博客文章页侧边添加上/下一篇按钮_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 工具推荐 分类下,于2016-01-17最后更新
利用百度开发者制作自定义尺寸的地图
Win10怎么打开自带的IE浏览器
手机扫一扫 随身带着看
鸿运国际手机登录首页