Discuz! 建站记录

木綿 发表于 2018-5-22 14:05
更改了论坛首页的DIY模板样式：换了排版；帖子列表增加了板块信息。不知道大家喜欢以前的还是现在的呢？

...

新版好一些。看不懂php啊，我现在在尽量避免服务器脚本，尽量使用网页脚本增加可移植性，不过论坛没办法。

今天增加了每个版块下面的主题分类。

我觉得论坛的形式比本地记录或者博客等形式好，就是因为它能同时做到多人使用和清晰分类。也不难理解论坛也成为了一些资源站的网站形式。

然而增加了分类查看之后发现了一个bug：


主题显示又错位了。我还奇怪，明明定义了“width:60px”，怎么又强行变成了20px呢？往上一看才发现，有一行separator line，class是“emptb”。它跟有置顶帖的时候的separator line不是同一个，之前只往另一个separator line里加了一列。

于是很简单的，在这个class=emptb的separator line里加上一行<td width="60px"></td>：


显示就正常了。也许以后引入新功能之后会发现更多的bug……

木綿 发表于 2018-5-22 14:05
更改了论坛首页的DIY模板样式：换了排版；帖子列表增加了板块信息。不知道大家喜欢以前的还是现在的呢？

...

我那个圆圆的头像画风有点不合群啊。

今天导入了几个表情包。直接把文件夹放入\static\image\smiley里，然后进后台→界面→表情管理，命个名，再更新一下CSS缓存就可以了。

突然想提个需求，能不能把查看新消息的接口放在可以直接点击的地方，手机不太好触发那个动画效果。

应群众的要求，今天改了一下页首的样式。

以前是光秃秃的banner，只有一个圈圈显示头像。当鼠标移动到头像附近时会显示这么个下拉菜单：


然后才能点击里面的内容。不过这种操作在手机上不好触发，于是我还是决定把里面这些可以点击的项目都搬出来。反正上边栏空着也是空着。

现在改完以后是这样的：


有什么消息提醒之类的，对应项目上会有提示。

---

仔细看了下代码，这个内容归“header.php”这个文件管。我用的这个template里，自定义的header.php里有这么一段：

1. <!--{ad/headerbanner/wp a_h}-->
   
2.     <!--{template common/header_m_top}-->
   
3.                 <!--{hook/global_header}-->

复制代码

把内容扔给了“header_m_top.php”。我又打开header_m_top.php，里面有这么一段：

1. <a href="javascript:;" id="qmenu" onMouseOver="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
   
2.       <!--{template common/header_userstatus_dl}-->

复制代码

我仔细inspect过了html，关于这个下拉菜单的内容确实都在“header_userstatus_dl.php”这个文件里。于是我复制了一个“header_userstatus_dl_ellie.php”让上述代码的第二行调用。把中间显示的部分改成：

1. <div class="m-user-ellie y">
   
2.         <div class="m-uimg"><a href="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G[uid],middle)}--></a></div>
   
3.         <!--{if $_G[member][newprompt]}--><div class="m-umem-ellie">$_G[member][newprompt]</div><!--{/if}-->
   
4.         <span class="y">
   
5.         <strong class="vwmy{if $_G['setting']['connect']['allow'] && $_G[member][conisbind]} qq{/if}"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}">{$_G[member][username]}</a></strong>
   
6.         <!--{if $_G['group']['allowinvisible']}-->
   
7.                 <span id="loginstatus">
   
8.                         <a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onclick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>
   
9.                 </span>
   
10.         <!--{/if}-->
    
11.         <span class="pipe">|</span>
    
12.         <a href="home.php?mod=spacecp&ac=usergroup" id="g_upmine" class="showmenu" onmouseover="delayShow(this, showUpgradeinfo)">{lang usergroup}: $_G[group][grouptitle]</a>
    
13.         <!--{hook/global_usernav_extra1}-->
    
14.         <span class="pipe">|</span>
    
15.         <a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onmouseover="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a>
    
16.         <span class="pipe">|</span>
    
17.         <a href="home.php?mod=space&do=notice" id="myprompt" onmouseover="showMenu({'ctrlid':'myprompt'});">{lang remind}<!--{if $_G[member][newprompt]}-->($_G[member][newprompt])<!--{/if}--></a><span id="myprompt_check"></span>
    
18.         <!--{hook/global_usernav_extra4}-->       
    
19.         <span class="pipe">|</span>
    
20.         <a href="home.php?mod=spacecp">{lang setup}</a>
    
21.         <span class="pipe">|</span>
    
22.         <a href="home.php?mod=space&do=pm" id="pm_ntc"{if $_G[member][newpm]} class="new"{/if}>{lang pm_center}</a>
    
23.         <span class="pipe">|</span>
    
24.         <a href="member.php?mod=logging&action=logout&formhash={FORMHASH}" style="font-weight:bold">{lang logout}</a>
    
25.     <!--{hook/global_usernav_extra3}-->
    
26.        
    
27.         <!--{if empty($_G['cookie']['ignore_notice']) && ($_G[member][newpm] || $_G[member][newprompt_num][follower] || $_G[member][newprompt_num][follow] || $_G[member][newprompt])}--><script language="javascript">delayShow($('myprompt'), function() {showMenu({'ctrlid':'myprompt','duration':3})});</script><!--{/if}-->
    
28.         <!--{if $_G['setting']['taskon'] && !empty($_G['cookie']['taskdoing_'.$_G['uid']])}-->
    
29.                 <span class="pipe">|</span><a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a>
    
30.         <!--{/if}-->
    
31.         <!--{if ($_G['group']['allowmanagearticle'] || $_G['group']['allowpostarticle'] || $_G['group']['allowdiy'] || getstatus($_G['member']['allowadmincp'], 4) || getstatus($_G['member']['allowadmincp'], 6) || getstatus($_G['member']['allowadmincp'], 2) || getstatus($_G['member']['allowadmincp'], 3))}-->
    
32.                 <span class="pipe">|</span><a href="portal.php?mod=portalcp"><!--{if $_G['setting']['portalstatus'] }-->{lang portal_manage}<!--{else}-->{lang portal_block_manage}<!--{/if}--></a>
    
33.         <!--{/if}-->
    
34.     <!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->
    
35.                 <span class="pipe">|</span><a href="admin.php" target="_blank">{lang admincp}</a>
    
36.         <!--{/if}-->
    
37.         <!--{if $_G['uid'] && $_G['adminid'] == 1 && $_G['setting']['cloud_status']}-->
    
38.                 <span class="pipe">|</span><a href="admin.php?frames=yes&action=cloud&operation=applist" target="_blank">{lang cloudcp}</a>
    
39.         <!--{/if}-->
    
40.     <!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->
    
41.                 <span class="pipe">|</span><a href="forum.php?mod=modcp&fid=$_G[fid]" target="_blank">{lang forum_manager}</a>
    
42.         <!--{/if}-->
    
43.         <!--{hook/global_usernav_extra2}-->
    
44.         <span style="padding-right:50px"> </span>
    
45.         </span>
    
46.        
    
47. </div>

复制代码

并在“extend_common.css”里添加了相应的格式：

1. /*Ellie's addition*/
   
2. .m-user-ellie{position:relative;z-index:300;margin-top:-12px;width:900;height:62px;line-height:62px}
   
3. .m-user-ellie .m-uimg{position:absolute;top:0;right:0;z-index:102;width:50px;height:50px; overflow:hidden;border:6px solid #1bbc9b;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
   
4. .m-user-ellie .m-uimg a{width:50px;height:50px;display:block; overflow:hidden;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
   
5. .m-user-ellie .m-uimg img{width:50px;min-height:50px;}
   
6. .m-user-ellie .y{position:relative;padding:0 20px 0 20px;color:#FFF}
   
7. .m-user-ellie .y a{color:#FFF;line-height:40px;cursor:pointer}
   
8. .m-user-ellie .m-umem{position:absolute;top:0;right:40px;z-index:103;overflow:hidden;width:20px;height:20px;border:2px solid #1bbc9b;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#FFF;color:#ef8c39;text-align:center;line-height:20px}
   
9. /*END*/

复制代码

更新css缓存查看结果。反复调试了几次样式，现在好像差不多了。

木綿 发表于 2018-5-26 05:46
应群众的要求，今天改了一下页首的样式。

以前是光秃秃的banner，只有一个圈圈显示头像。当鼠标移动到头像 ...

这里需要点个赞，站长太敬业了。
感觉现在已经比较完善了，至少从用户的角度讲，用起来已经比较舒服了。插入图片相关的功能可能手机还不太好操作，不过需要严格排版的帖子本身也得电脑来写，应该问题不大。

如果真的无聊，可以加入以下用户的金钱可以买徽章之类的功能，可能过于复杂了。@@脑洞太大

透明的星尘 发表于 2018-5-26 07:24
这里需要点个赞，站长太敬业了。
感觉现在已经比较完善了，至少从用户的角度讲，用起来已经比较舒服了。 ...

其实有手机版，不过手机版啥都没有，光秃秃的都是字特别难看。。我决定还不是不开手机版了。。

也许可以尝试配置一个wordpress站用着试试，我觉得那个文艺一些，这个discuz比较接地气。
可以把wordpress和这个站同时放上去的，方便对比着玩。

白隼 发表于 2018-5-26 12:21
也许可以尝试配置一个wordpress站用着试试，我觉得那个文艺一些，这个discuz比较接地气。
可以把wordpress ...

挖坑。在不务正业的路上越走越远的预感……
这论坛里全是资深不务正业者- -还是得学习一个（把唯一务正业的那个踢出去算了@炼金博士 ）