微构网络

Discuz主题列表页面修改成小米风格可能出现的问题原因及修复方案

2015-10-13 10:43 栏目:技术教程 查看(11,453)

大家都知道小米论坛也是基于Discuz的开发的,只不过他们进行了深度二次开发,以至于看上去没有了Discuz的一些特征。也许是小米这个品牌火的原因,很多人就开始模仿小米的风格,特别是主题列表;总之现在不管是OPPO、360论坛这些比较知名的社区,还是一些小的论坛,大家都似乎想把列表改成小米那种风格。不过我个人也觉得小米的那种风格比Dz默认的要好看很多。

eee3

但大家也知道,Discuz的主题列表是使用table来控制布局了,我可以这么说,现在的很多前端工程师都特别讨厌这种布局,大家可以看到那些大的论坛自己进行二次开发的时候已经把table给移除掉了。也是因为table的存在导致我们进行二次开发时候可能会出现一些问题。

虽然Dsicuz使用了模版分离,但是在一些页面模版还是在做很多逻辑性的东西,比如主题列表中的一个小图标,可能就会在模版中出现几十行的代码,这样就给我们的修改带来很大的麻烦(因为看得都晕)。但是即使你在forumdisplay_list.htm中把一切都修改成你所想要的,比如把原来的五列修改成两列,或者干错用div代替table来控制布局,但是你会发现还是有问题(这个问题实际上很多现在在应用中心的第三方同类模版是存在的)。
比如说Discuz有一个这样的功能,当我们打开某个板块,然后这个板块有新的回复;页面会自动显示“该板块有新回复”,然后我们点击会发现可以加载新的内容到最开头。而就是这样的场景,就会出问题;因为这是通过ajax来请求的,因此这些新内容并没有在这个模版文件中,而是在其他位置。这样就导致了如图(下面是依然修改成table来控制布局,但改成了两列的)。

eee3

因此不管是保持table来控制布局,还是用div来替换table,我们都得找到那些通过ajax请求加载过来的数据的模版,比如刚才所说的就位于forum/ajax_threadlist.htm。其中如下代码正是相应的模版文件:

newthread[{$i}] = {'tid':$thread[tid], 'thread': {'icn':{'className':'icn','val':'$icon'}<!--{if $_G['forum']['ismoderator']}-->, 'o':{'className':'o','val':'<input type="checkbox" value="{$thread[tid]}" name="moderate[]" onclick="tmodclick(this)">'}<!--{/if}--> ,'common':{'className':'new fn','val':'{if !$_G['setting']['forumdisplaythreadpreview']}<a class="tdpre y" href="javascript:void(0);" onclick="javascript:previewThread(\'$thread[tid]\', \'$thread[id]\');">{lang preview}</a>{/if}$thread[threadurl]'}, 'author':{'className':'by','val':'<cite>$thread[authorurl]</cite><em><span>{$thread[dateline]}</span></em>'}, 'num':{'className':'num','val':'<a href="forum.php?mod=viewthread&tid={$thread[tid]}">{$thread[replies]}</a><em>{$thread[views]}</em>'}, 'lastpost':{'className':'by','val':'<cite>$thread[lastposterurl]</cite><em><a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost">{$thread[lastpost]}</a></em>'}}};

比如我改成与我修改forumdisplay_list.htm的一致的,就是如下代码;当然我还是建议如果要修改这部分,就干脆修改成了div来控制布局(因为我并不喜欢用table来控制布局)。

newthread[{$i}] = {'tid':$thread[tid], 'thread': {'icn':{'className':'icn','val':'<a href="home.php?mod=space&uid=$thread[authorid]" c="1" ><!--{avatar($thread[authorid],small)}--></a> '},'common':{'className':'new fn','val':'<p><!--{if $_G["forum"]["ismoderator"]}--><input type="checkbox" value="{$thread[tid]}" name="moderate[]" onclick="tmodclick(this)"><!--{/if}-->$thread[threadurl]</p><div class="tinfo cl"><span class="z"><i>{lang author} </i>$thread[authorurl]<i{if $thread["istoday"]} class="xi1"{/if}>{$thread[dateline]}</i><span class="pipe">/</span><i>{lang lastpost} </i><i><a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost">{$thread[lastpost]}</a></i> </span><span class="y"><em class="ico_reply">{$thread[replies]}</em><em class="ico_see">{$thread[views]}</em></span></div>'}}};

这样就完成了这一部分的问题,实际上Discuz很多地方都是通过ajax来请求数据,而且请求过来的数据是已经带了模版的,如果请求过来的与本身的布局不一致就会造成问题,这一点要特别注意。

转载请注明出处:Discuz主题列表页面修改成小米风格可能出现的问题原因及修复方案 - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)