»论坛 › 资源分享 › Discuz! › Discuz! 自己动手 DIY 首页 N 格
返回列表 发新帖
查看: 109|回复: 0

Discuz! 自己动手 DIY 首页 N 格

[复制链接]
  • 大
  • 中
  • 小
boonkiong 网站创始人认证 网站管理员认证

1524

主题

34

回帖

4258

积分

管理员

贡献
0
威望
0
金币
2700
社区币
0
发表于 2026-7-14 19:50:52 | 显示全部楼层 |阅读模式

一. 首先自定义 n 格的外框架及两个 diy 域，打开 template/default/forum/discuz.htm 文件，查找：

  1. <!--[diy=diy_chart]--><div id="diy_chart" class="area"></div><!--[/diy]-->
复制代码


上方添加（这里提供三种方案）

1. 圆角有陰影的 n 格框架

  1. <!---------------------------------------首页N格---------------------------------------->
  2. <fieldset style="width:100%; margin:0 auto; border:solid 1px #c2bec2; -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;-moz-box-shadow: 3px 3px 5px #a8a3a8; -webkit-box-shadow: 3px 3px 5px #a8a3a8; box-shadow: 3px 3px 5px #a8a3a8;">
  3.        <div class="bm_h cl" style="background-color: #F0F8FF;">
  4.           <span class="o">
  5.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  6.           </span>
  7.            <h2>
  8.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  9.            </h2>
  10.         </div>
  11.         <div id="n_lattice" style="padding-bottom:8px;">
  12.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  13.         </div>        
  14.      </fieldset>
  15.      <div style="padding-bottom:8px;"></div>
  16. <!-------------------------------------------首页N格end---------------------------------------->
复制代码

2. 圆角沒陰影的 n 格框架

  1. <!-----------------------------------------首页N格----------------------------------------->
  2. <fieldset style="width:100%; margin:0 auto; border:solid 1px #c2bec2; -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">
  3.        <div class="bm_h cl" style="background-color: #F0F8FF;">
  4.           <span class="o">
  5.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  6.           </span>
  7.            <h2>
  8.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  9.            </h2>
  10.         </div>
  11.         <div id="n_lattice" style="padding-bottom:8px;">
  12.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  13.         </div>        
  14.      </fieldset>
  15.      <div style="padding-bottom:8px;"></div>
  16. <!----------------------------------------首页N格end-------------------------------------->
复制代码

3. 直角沒陰影的 n 格框架

  1. <!-------------------------------------首页N格-------------------------------------------->
  2. <div style="width:100%; margin:0 auto; border:solid 1px #c2bec2;">
  3.        <div class="bm_h cl" style="background-color: #F0F8FF;">
  4.           <span class="o">
  5.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  6.           </span>
  7.            <h2>
  8.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  9.            </h2>
  10.         </div>
  11.         <div id="n_lattice" style="padding-bottom:5px;">
  12.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  13.         </div>
  14.      </div>
  15.      <div style="padding-bottom:8px;"></div>
  16. <!-------------------------------------------首页N格end-------------------------------------->
复制代码

代码说明：

#F0F8FF
这是 n 格最上方栏目的背景色
可以改成自己的色码

如果这里修改了色码
那等一下 diy 模块样式背景色时
模块样式背景色也要修改一致

<!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->

<!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->

这是自定义 diy 域
前后数字須一致才行

如果之前有自定义 diy 域
要小心数字不要重复即可

二. 开始 diy

1. 时间和推荐主题及发帖按钮部分

1) 拉一个 100% 框架到这个位置

2917.jpg

2) 編輯框架标题
框架标题:这里留空
設置好后按確定即可

2918.jpg

3) 拉一个静态模块
模块标识:时间和推薦主题及发帖按钮
数据來源:選擇自定义 html
其它按照自己的需求设置
设置好后填入代码按确定即可

填入代码

  1. <table>
  2. <tr><td>
  3. <!--时间代码开始-->
  4. <iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:120px;height:110px;"src="http://clocklink.com/html5embed.php?clock=004&timezone=GMT0800&color=pink&size=80&Title=&Message=&Target=&From=2016,1,1,0,0,0&Color=pink"></iframe>
  5. <!--时间代码结束-->
  6. </td><td style="width:100%; " align="center">
  7. <!--推荐主题代码开始-->
  8. <div id="up_zzjs">
  9. <div id="marqueebox">
  10. <a href="主题地址" target="_blank"><div style="color:#FF60AF; font-size:13px;">主题名称</div></a>
  11. <a href="主题地址" target="_blank"><div style="color:#00AEAE; font-size:13px;">主题名称</div></a>
  12. <a href="主题地址" target="_blank"><div style="color:#EA7500; font-size:13px;">主题名称</div></a>
  13. <a href="主题地址" target="_blank"><div style="color:#02DF82; font-size:13px;">主题名称</div></a>
  14. <a href="主题地址" target="_blank"><div style="color:#2894FF; font-size:13px;">主题名称</div></a>
  15. <a href="主题地址" target="_blank"><div style="color:#E800E8; font-size:13px;">主题名称</div></a>
  16. <a href="主题地址" target="_blank"><div style="color:#808040; font-size:13px;">主题名称</div></a>
  17. <a href="主题地址" target="_blank"><div style="color:#9F35FF; font-size:13px;">主题名称</div></a>
  18. </div>
  19. </div>

  21. <style type="text/css">
  22. #up_zzjs{width:700px;height:100px;line-height:20px;overflow:hidden;}
  23. </style>

  25. <script language="javascript">
  26. function startmarquee(lh,speed,delay) {
  27. var p=false;
  28. var t;
  29. var o=document.getElementById("marqueebox");
  30. o.innerHTML+=o.innerHTML;
  31. o.style.marginTop=0;
  32. o.onmouseover=function(){p=true;}
  33. o.onmouseout=function(){p=false;}
  34. function start(){
  35. t=setInterval(scrolling,speed);
  36. if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
  37. }
  38. function scrolling(){
  39. if(parseInt(o.style.marginTop)%lh!=0){
  40. o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
  41. if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
  42. }else{
  43. clearInterval(t);
  44. setTimeout(start,delay);
  45. }
  46. }
  47. setTimeout(start,delay);
  48. }
  49. startmarquee(20,20,1500);
  50. </script>
  51. <!--推荐主题代码结束-->
  52. </td><td>
  53. <!--发帖按钮代码开始-->
  54. <div class="posting"><a onclick="showWindow('nav', this.href, 'get', 0)" href="forum.php?mod=misc&action=nav">
  55. <img src="http://i.imgur.com/fcQU7sR.png" title="發新帖">
  56. </div>

  58. <style>
  59. .posting{overflow:hidden;height:110px;}
  60. </style>
  61. <!--发帖按钮代码结束-->
  62. </td></tr>
  63. </table>
复制代码

2919.jpg

模块标题:这里留空
设置好后按确定即可

2920.jpg

4) 编辑模块样式
外边距:上下左右都设置为 0
背景顏色:设置 #F0F8FF
这里要和修改文件时的背景色一致
设置好后按确定即可

2921.jpg

5) 都设置完成後按保存即可
点击发帖按钮时
会跳出板块选单
然后选择板块来发帖

点击收起和展开按钮时
n 格自动收起和展开

2922.jpg

发帖图标
2923.jpg

代码说明

代码中有注明代码开始代码结束
这些文字按保存后前台不会显示

主要是让站长们知道哪段代码作用是什么
还有就是方便以后查找修改之用
如果不喜欢也可以删除即可 (不影响原本代码)

时间代码部分
可以到这个页面来选择你想要的颜色和设置
获取代码后请记得参考我给的代码比对一下数值设置
才不会有移位或是不对称的情形

http://clocklink.com/gallery/view/html5-004

如果这种样式的时钟你不喜欢的话
也可以点选左边选项
挑选自己喜欢的时钟样式来使用

推荐主题部分
这里设置了 8 个主题
你也可以自己再新增 (参考代码再新增即可)

这部份你也可以改用公告或是论坛规定等主题
也可以改成文字广告又或者格言之类的词来使用
也可以改成贴心问候语或是音乐盒等等
看你个人的喜好而定即可 (或是一段时间改一下样式)
如果都不喜欢的话可以把这段代码删除即可

发帖按钮部分

  1. http://i.imgur.com/fcQU7sR.png
复制代码


这是发帖按钮的图片完整网址
改成你自己的即可

2. n 格的框架配置

1) 拉一个 1-3 框架
再拉一个 2-1 框架
然后在 2-1 框架中拉两个 tab 框架
最后再拉一个 100% 框架
如果不喜欢显示新会员的话
最后 100% 框架可以不要拉
或者你现在想用
以后不想用了
再删除这个框架即可

2924.jpg

2) 编辑 1-3 框架标题
框架标题:这里留空
设置好后按确定即可

2925.jpg

编辑 2-1 框架标题
框架标题:这里留空
设置好后按确定即可

2926.jpg

编辑两个 tab 框架标题
框架标题:这里留空
切换类型:设置滑过
设置好后按确定即可

2927.jpg

2928.jpg

编辑右边 tab 框架样式
外边距:右 2px

2929.jpg

编辑 100% 框架标题
框架标题:这里留空
设置好后按确定即可

2930.jpg

3. 最新图片部分

1) 拉一个帖子模块
模块标识:最新图片
模块分类:帖子模块
数据来源:最新帖
显示条数:10
显示样式:[内置]帖子图片幻灯片
其它部分按照你的需求设置
设置好后按确定即可

2931.jpg

模块标题:最新图片
位置:居左 偏移量:90px
字体颜色:#0066CC
背景图片:/static/image/common/title.png
设置好后按确定即可

2932.jpg

2) 编辑最新图片属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <div class="module cl slidebox">
  2. <ul class="slideshow">
  3. [loop]
  4. <li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>
  5. [/loop]
  6. </ul>
  7. </div>

  9. <script type="text/javascript">
  10. runslideshow();
  11. </script>

  13. <style>
  14. .slideshow span.title{background-color:#FF79BC; opacity: 0.6;}
  15. </style>
复制代码

3) 编辑最新图片样式
上边框:3px 实线 颜色:#339999
外边距:上 0 右 2px 下 0 左 2px
设置好后按确定即可

2933.jpg

4) 都设置完成后按保存即可

代码说明

#FF79BC
这是主题名称的背景颜色
你可以改成自己要的色码

4. 最新帖子部分

1) 拉一个帖子模块
模块标识:最新帖子
模块分类:帖子模块
数据来源:最新帖
显示条数:10
显示样式:[内置]帖子标题+作者
其它部分按照你的需求设置
设置好后按确定即可

2934.jpg

模块标题:最新帖子
位置:居左 偏移量:-14px
设置好后按确定即可

2935.jpg

2) 编辑最新帖子属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--数字代码开始->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;">
  41. <b>10</b>
  42. </div>
  43. <!--数字代码结束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;">
  48. <em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font>   <a href="{url}"
  49. title="版塊: {forumname}
  50. 发表: {author} {dateline}
  51. 浏览: {views}
  52. 回复: {lastpost}"
  53. {target}>{title}</a></li>
  54. [/loop]
  55. </div>
  56. </td></tr>
  57. </table>

  59. <style>
  60. .frame-tab .tb .a a {border-top: solid 3px #339999; background: #FFFFFF; font-weight: 700; color: #0066CC;}
  61. .frame-tab .tb-c {padding: 1px 0px;}
  62. .xl1 li {height: 1.9em;}
  63. </style>
复制代码

3) 都设置完成后按保存即可
左边数字是方型 (下一个热门主题时提供圆型数字)
会提供两种方案有方型和圆型
你可以搭配或是单独使用一种样式
显示帖子所在版块名称
滑鼠移到主题时会显示相关资讯

2936.jpg

另外新手站长可能不知道
diy 时可以挑选一个主题
点击右边的编辑进入

2937.jpg

可以设置固定主题的位置
设置高亮粗体等等功能

2938.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

5. 热门帖子部分

1) 拉一个帖子模块
模块标识:热门帖子
模块分类:帖子模块
数据来源:热门帖
显示条数:10
显示样式:[内置]帖子标题+作者
其它部分按照你的需求设置
设置好后按确定即可

2939.jpg

模块标题:热门帖子
设置好后按确定即可

2940.jpg

2) 编辑热门帖子属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--数字代码开始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  41. <b>10</b>
  42. </div>
  43. <!--数字代码结束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font>   <a href="{url}"
  48. title="版塊: {forumname}
  49. 发表: {author} {dateline}
  50. 浏览: {views}
  51. 回复: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码

3) 都设置完成后按保存即可
左边数字是圆型
你可以搭配或是单独使用一种样式
显示帖子所在版块名称
滑鼠移到主题时会显示相关资讯

2941.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

6. 主题分类部分

1) 拉一个帖子模块
模块标识:主题分类
模块分类:帖子模块
数据来源:最新帖
所在版块:勾选有主题分类的版块
显示条数:10
显示样式:[内置]帖子标题+作者
其它部分按照你的需求设置
设置好后按确定即可

2942.jpg

模块标题:主题分类
设置好后按确定即可

2943.jpg

2) 编辑主题分类属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--数字代码开始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;">
  41. <b>10</b>
  42. </div>
  43. <!--数字代码结束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font><font color="3366FF">[<a href="{typeurl}" title="{typename}"{target}><font color="3366FF">{typename}</font></a>]</font>   <a href="{url}"
  48. title="版塊: {forumname}
  49. 发表: {author} {dateline}
  50. 浏览: {views}
  51. 回复: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码


3) 都设置完成后按保存即可
左边数字是方型
你可以搭配或是单独使用一种样式
显示帖子所在版块名称及主题分类名称
滑鼠移到主题时会显示相关资讯

这里看到主题分类有三种颜色
主要是 diy 调用后台设置
你的后台如果有设置颜色
前台就会显示颜色

2944.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

7. 分类信息部分

1) 拉一个帖子模块
模块标识:分类信息
模块分类:帖子模块
数据来源:高级自定义
所在版块:勾选有分类信息的版块
分类信息:勾选要显示的分类信息
显示条数:10
显示样式:[内置]帖子标题+作者
其它部分按照你的需求设置
设置好后按确定即可

2945.jpg

模块标题:分类信息
设置好后按确定即可

2946.jpg

2) 编辑分类信息属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--數字代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  41. <b>10</b>
  42. </div>
  43. <!--數字代碼結束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font><font color="3366FF">[<a href="{sorturl}" title="{sortname}"{target}><font color="3366FF">{sortname}</font></a>]</font>   <a href="{url}"
  48. title="版塊: {forumname}
  49. 發表: {author} {dateline}
  50. 瀏覽: {views}
  51. 回覆: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码

3) 都设置完成后按保存即可
左边数字是圆型
你可以搭配或是单独使用一种样式
显示帖子所在版块名称及分类信息名称
滑鼠移到主题时会显示相关资讯

2947.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

8. 即时聊天部分

1) 拉一个静态模块
模块标识:即时聊天
数据来源:自定义html
其它部分按照你的需求设置
设置好后填入代码按确定即可

填入代码

这里不提供代码
如果提供我的代码共用一个聊天室的话
你和我的站聊天内容会同时显示在一起

2948.jpg

模块标题:即时聊天
设置好后按确定即可

2949.jpg

2) 都设置完成后按保存即可

2950.jpg

代码说明

建议你到这个网站
申请一个免费的聊天室

https://www.cbox.ws/

虽然是免费的聊天室
但功能还是很强大的

申请好后获取代码来使用
会有一个类似的后台
可以对聊天室进行管理

后台功能

可以自定义风格样式
可以自定义语词过滤
可以自定义表情符号
可以查看留言者的 ip
可以禁止或解禁留言者的 ip
可以管理删除不雅留言等等

当然如果你觉得还不够的话
也可以升级到付费
功能更多更强大

个人觉得免费的就很好用了

9. 发帖达人部分

1) 拉一个会员模块
模块标识:发帖达人
数据来源:发帖排行
显示条数:4
显示样式:[内置]头像+用户名+发帖数 (有序)
其它部分按照您的需求设置
设置好后按确定即可

2951.jpg

模块标题:发帖达人
位置:居左 偏移量:-14px
设置好后按确定即可

2952.jpg

2) 编辑发帖达人属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table style="width:100%">
  2. <tr><td style="padding-left: 8px;">
  3. <!--排名代码开始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>冠军</b>
  6. </div>
  7. <div style="height:30px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>亞军</b>
  10. </div>
  11. <div style="height:20px; padding-bottom:8px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>季军</b>
  14. </div>
  15. <div style="height:30px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>殿军</b>
  18. </div>
  19. <div style="height:0px;"></div>
  20. <!--排名代码结束-->
  21. </td><td>
  22. <div class="module c l xl xl1" style="padding-top: 10px; height:252px;">
  23. [loop]
  24. <li style="height:63px;">
  25. <a href="{url}" c="1"{target}><img class="vm" src="{avatar}" width="40" height="40" alt="{title}" /></a>
  26. </li>
  27. [/loop]
  28. </div>
  29. </td><td style="widht:100%;" text-align:center;">
  30. <div class="module cl xl xl1" style="height:252px;">
  31. [loop1]
  32. <li style="padding-right: 75px; height:63px;">
  33. <fieldset style="width:150%; margin:0 auto; border:1px solid #4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background-color:#F0F8FF; padding-left: 10px;">
  34. <dd><font color="#4BA5F0"><b>用戶名：</b></font><a href="{url}" title="{title}" c="1"{target}><font color="#4BA5F0"><b>{title}</b></font></a></dd>
  35. <dd><font color="#339999"><b>发帖数：{posts}</b></font></dd>
  36. <dd><font color="#B15BFF"><b>积分数：{credits}</b></font></dd>
  37. </fieldset>
  38. </li>
  39. [/loop1]
  40. </div>
  41. </td></tr>
  42. </table>

  44. <style>
  45. .xl1 img {
  46. width: 40px;
  47. height: 40px;
  48. background: #fff;
  49. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  50. border-style: solid;
  51. border-width: 1px;
  52. border-radius: 20%;
  53. padding: 2px;}
  54. </style>
复制代码

3) 都设置完成后按保存即可
显示排名及作者头像
显示用户名及发帖数和积分数

2953.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

10. 心情点播部分

1) 拉一个记录模块
模块标识:心情点播
数据来源:最新记录
显示条数:10
显示样式:[内置]头像+作者+内容
其它部分按照你的需求设置
设置好后按确定即可

2954.jpg

模块标题:心情点播
设置好后按确定即可

2955.jpg

2) 编辑心情点播属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <div style="padding-bottom:5px; padding-top:5px;">
  2. <marquee direction="up" onMouseOver=this.stop() onMouseOut=this.start() behavior="alternate" width="100%" height="156px;" scrollamount="1">
  3. <div class="module cl xld">
  4. [loop]
  5. <dl class="cl">
  6. <dd class="m" style="padding-left: 5px;"><a href="home.php?mod=space&uid={uid}" c="1"{target}>
  7. <img src="{avatar}" width="40" height="40" alt="{username}" />
  8. </a></dd>
  9. <dt><a href="home.php?mod=space&uid={uid}" title="{username}"{target}>{username}</a> <em class="xg1 xw0">{dateline}</em></dt>
  10. <dd><a href="{url}"{target}>{title}</a>  <a href="/home.php?mod=space&do=home&view=me" target="_blank"><font color="964BF0">[我的]</font></a> <a href="/home.php?mod=space&do=home&view=we" target="_blank"><font color="964BF0">[好友的]</font></a></dd></font>
  11. </dl>
  12. [/loop]
  13. </div>
  14. </marquee>
  15. </div>

  17. <fieldset style="width:96%; margin:0 auto; border:1px solid #4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background-color:#F0F8FF;">
  18. <br>
  19. <table align="center">
  20. <tr><td>
  21. <font color="#FF60AF"><b>多久没和大家分享心情了    <p>
  22. 即刻分享你的点点滴滴吧<p></font>
  23. <font color="964BF0">.................</font><a href="/home.php?mod=space&do=home&view=all" target="_blank"><font color="#964BF0"> &#4326; 更多心情&#4326; </font></a></font></b></td>
  24. <td style="padding-left: 5px;">
  25. <a href="/home.php" target="_blank"><img src="/static/image/common/mood_input_btn.png"></a>
  26. </td></tr>
  27. </table>
  28. <br>
  29. </fieldset>

  31. <style>
  32. .xld img {
  33. width: 40px;
  34. height: 40px;
  35. background: #fff;
  36. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  37. border-style: solid;
  38. border-width: 1px;
  39. border-radius: 20%;
  40. padding: 2px;}
  41. </style>
复制代码

3) 都设置完成后按保存即可
心情点播会上下滚动
点击我的可以查看自己发布的动态
点击好友的可以查看好友发布的动态
点击更多心情时可以查看更多动态
点击发布时可以到发布页面发布动态

2956.jpg

代码说明

代码中的色码部分
您可以改成自己要的色码

11. 新会员部分

1) 拉一个会员模块
模块标识:新会员
数据来源:新会员
显示条数:15
显示样式:[内置]会员头像列表
其它部分按照你的需求设置
设置好后按确定即可

2957.jpg

模块标题:这里留空
设置好后按确定即可

2958.jpg

2) 编辑新会员属性
模块模板:将原本的代码替换掉
设置好后按更新即可

替换代码

  1. <table>
  2. <tr><td>
  3. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; ">
  4. <b>新会员</b>
  5. </div>
  6. </td><td>
  7. <div class="module cl ml mls">
  8. <ul>
  9. [loop]
  10. <li>
  11. <a href="{url}" c="1"{target}><img src="{avatar}" width="48" height="48" alt="{title}" /></a>
  12. <a href="{url}" title="{title}"{target}>{title}</a>
  13. </li>
  14. [/loop]
  15. </ul>
  16. </div>
  17. </td></tr>
  18. </table>

  20. <p align=center><img src="http://i.imgur.com/cVfux14.gif"></p>

  22. <style>
  23. .mls img {
  24. background: #fff;
  25. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  26. border-style: solid;
  27. border-width: 1px;
  28. border-radius: 50%;
  29. height: 45px;
  30. padding: 2px;
  31. width: 45px;}
  32. </style>
复制代码

2959.jpg

3) 编辑新会员样式
外边距:上 0 右 2px 下 0 左 2px

2960.jpg

4) 都设置完成后按保存即可

2961.jpg

代码说明

代码中的色码部分
你可以改成自己要的色码

  1. http://i.imgur.com/cVfux14.gif
复制代码

这是分隔线图片完整网址
改成你自己的即可
如果不想要的话
可以删除那段图片代码即可

border-radius: 50%
这是头像圆角的百分比
愈小的话愈接近方型
你可以适度的调整

三. n 格完成

你可以自己改成自己想要的样式
也可以选择不同的数据来源来使用
然后再参考给的代码来添加 (比如数字顺序等)
不想要的模块也可以随时删除
想要时再添加即可

另外不好意思
不提供懒人包 (导入文件)
主要想让站长们能自己手动操作
来增加对 diy 的一些印象

圆角有阴影的 n 格

2962.jpg

圆角没有阴影的 n 格

2963.jpg

直角没有阴影的 n 格

2964.jpg


来源：https://discuz.dismall.com/thread-3801637-1-1.html
作者：dicky57

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|网站地图|文强阁

相关侵权、举报、投诉及建议等，请发 E-mail：admin@discuz.vip

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖
返回顶部