Discuz7.0!数据调用功能实例 有更新!

  aluaa

    没有登录的用户请注册登录
    首先要安装UCenter和Discuz
    在Discuz后台中,

    设置的位置在论坛后台 => 工具 => 数据调用中,如下图所示: 一、创建论坛基本数据的调用 点击导航上面的“添加”,会出现下拉菜单,里面包括了所有可以创建的调用项目:主题列表、版块列表、会员排行、论坛统计、主题附件、边栏方案、自定义,如下图所示:

    点击“添加”,选择“会员排行”,出现设置界面。在设置页面中分为两部分,数据调用模板和预览的显示区,数据调用基本信息和调用规则的设置区。
    1、数据调用模板和预览的显示区,该区域主要显示数据调用显示用的模板,和对调用结构预览显示,如下图所示:


    在”主题列表”数据调用时,数据是循环调用多条数据,我在论坛中至少发表十个主题,以便我们调用与调整。调用数据的数目在下边”主题列表”编辑中找到显示数据条数,在这里修改,如下图所示:


    接下来我们点击”预览”,如下图所示:


    数据调用模板显示区会刷新,在上方出现“预览”区,其中包括内部调用代码、外部调用代码、
    调用数据预览,如下图所示:


    在”主题列表”数据调用中,数据的排列顺序是有一定规则的,排列顺序的修改在下边”主题列表”编辑中的主题排列方式,如下图所示:


    接下来我们开始调用数据,修改代码。我们把以下代码输入到代码编辑框中,
    <div style=“float:left;”>[show=1]{prefix}[/show]</div>
    <div class=“div_left_sun”><span style=“float:left;”>{subject}</span><span class=“content_title_sun”>回复数:{replies}
    发布时间:{dateline}</span></div>

    如下图所示:


    我们在这里调用“主题名称{subject}”, “主题发布时间{dateline}”,“回复数{replies}”,“前缀图标{prefix}”,写一条代码将循环调用出数据库中的多条数据。我们 想在数据前加一张前缀图片作为排行顺序。如果我们只想显示一张前缀图片就要利用自定义标签[show=order][/show]来嵌套,所以代码为 [show=1]{prefix}[/show]。
    接下来我们将list.gif这张图片保存在本地,然后上传到images/default文件夹下

    右键,目标另存为
    接下来在“主题列表”设置中,找到前缀图标,修改成images.default/list.gif,如下图所示:


    修改后,点击“预览”,如下图所示:


    在这里大家发现数据调用出的格式与样式有一些偏差,这里我们可以再代码编辑区添加CSS样式来修改,这样我们可以利用代码中标签的class属性来添加样式,在代码编辑区的已写如的HTML代码前写入以下代码:
    <style>
    .div_left_sun{width:420px;font-size:12px;height:17px;line-height:17px;padding-left:6px;padding-top:2px;border-bottom:#B6BBC1 dotted 1px;}
    .content_title_sun{float:right;font-size:12px;}
    </style>

    如下图所示:


    接下来点击“预览”,如下图所示:


    OK,我们已经看到我们想要达到的效果了,但是我们发现如果标题的字节太多会影响到浏览的格式,而且我们调用了“回复数”,应该按照“回复数”来排列。
    在“主题列表”编辑选项中找到“标题最大字节数”,修改成24。找到“主题排列方式”,修改成“按回复数倒序排序”。如下图所示:




    设置完成后,点击“预览”,如下图所示:


    这样我就完成了。接下来点击“提交”,如下图所示:


    下面的步骤就是在前台显示效果了,复制内部调用中的代码,如下图所示:



    找到templates/default文件夹下的discuz.htm文件
    找到以下代码:
    {subtemplate header}

    在下边添加: <div class="wrap" style="background-color:#FFF; height:250px; border-bottom:#999 dashed 1px;"> <div style="width:450px; float:left; margin:24px;"> {eval request('主题列表_4L4');}</div> </div> 描红部分是在后台“内部调用”中复制的代码。 修改后保存文件。 登陆论坛,如下图所示: 大功告成!如果大家想有选项卡的效果可以在templates/default文件夹下的discuz.htm文件中编辑javascript代码,并多调用几组自己想要调用的数据,做成N格首页排行的效果。