免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [版型教學] 首页N格缓存版（免后台安装） [打印本頁]
作者: 无界    時間: 2017-5-17 01:30     標題: 首页N格缓存版（免后台安装）

本帖最後由 无界 於 2017-5-17 14:25 編輯

原创：首页N格缓存版（免后台安装）


1、在官方基础上自制首页N格缓存版，免去官方后台安装，卸载了也不怕！
2、可以随意投放，增加或减少选项卡。
3、免去flash调用，可以在不支持flash的手机或ipad上浏览最新图片。
4、增加鼠标移入放大图片功能。
5、简体/繁体可以自行修改

截图：
QQ截图20170517010749.png

预览网址：
http://ishowstyle.imotor.com/

安装方法：
1、首先进入后台--工具--数据调用--导入--选择文件
导入下边文件
discuz_request_20170517.zip (2.22 KB)

2、新建模板命名为dxshow放入下边代码
  1. <!-- 自制N格 v1.0 -->
  2. <script type="text/javascript" src="http://ojmd62ynn.bkt.clouddn.com/dxshow/title.js"></script>
  3. <script type="text/javascript" src="http://ojmd62ynn.bkt.clouddn.com/dxshow/dxshowcss.js" ></script>
  4. <script type="text/javascript" src="http://ojmd62ynn.bkt.clouddn.com/dxshow/dxshow.js" ></script>

  6. <style type="text/css">
  7. .xshow table {border:none;background:{WRAPBG};}
  8. .xshow .txt_con td{padding:5px;}
  9. .xshow .txt td{padding:0;vertical-align:top;}
  10. .xshow ul{width:100%;height:20px;background:url('http://ojmd62ynn.bkt.clouddn.com/dxshow/listbg.gif') repeat-x;overflow:hidden;}
  11. .xshow .txt span{float:right;}
  12. .xshow .txt_con{border-bottom: 1px solid #E6E7E1;}
  13. .xshow .fiveline{padding: 0 5px;}
  14. .xshow .border {border-right: 1px solid #EFEFEF;}
  15. .xshow .header td {text-align: center;height: 31px;border-bottom: 3px solid #EFEFEF;}
  16. .xshow .fiveline img{margin:2px 6px 0 0;}
  17. #tbca_01 img{cursor: pointer;transition: all 0.6s;}  
  18. #tbca_01 img:hover{transform: scale(1.1);}
  19. </style>

  21. <div class="xshow">
  22. <table cellspacing="0" cellpadding="0" width="100%">
  23. <tr class="header">
  24.       <td class="border"><h3>≡ 论坛图片 ≡</h3></td>
  25.       <td class="border"><h3>≡ 最新帖子 ≡</h3></td>
  26.       <td class="border"><h3>≡ 最新回复 ≡</h3></td>
  27.       <td class="border"><h3>≡ 本周热门 ≡</h3></td>
  28. <td><h3>≡ 今日发帖 ≡</h3></td>
  29.     </tr>
  30. <tr class="txt_con">
  31. <td width="28%" class="border">
  32.     <div id="tbca_01">
  33. {eval request('自制N格_精彩图片');}
  34. <script type="text/javascript">new dk_slideplayer("#tbca_01",{width:"100%",height:"196px",fontsize:"12px",time:"5000"});</script>
  35.     </div>
  36. </td>
  37.       <td width="20%" class="border">
  38.         <table cellpadding="0" cellspacing="0" class="txt">
  39.           <tr>
  40.             <td><img src="http://ojmd62ynn.bkt.clouddn.com/dxshow/list.gif" alt="" /></td>
  41.             <td width="100%">
  42.               <div>
  43. {eval request('自制N格_最新主题');}
  44.               </div>
  45.             </td>
  46.           </tr>
  47.         </table>
  48.       </td>
  49.       <td width="20%" class="border">
  50.         <table cellpadding="0" cellspacing="0" class="txt">
  51.           <tr>
  52.             <td><img src="http://ojmd62ynn.bkt.clouddn.com/dxshow/list.gif" alt="" /></td>
  53.             <td width="100%">
  54.               <div>
  55. {eval request('自制N格_最新回复');}
  56.               </div>
  57.             </td>
  58.           </tr>
  59.         </table>
  60.       </td>
  61.       <td width="20%" class="border">
  62.         <table cellpadding="0" cellspacing="0" class="txt">
  63.           <tr>
  64.             <td><img src="http://ojmd62ynn.bkt.clouddn.com/dxshow/list.gif" alt="" /></td>
  65.             <td width="100%">
  66.               <div>
  67. {eval request('自制N格_本周热门');}
  68.               </div>
  69.             </td>
  70.           </tr>
  71.         </table>
  72.       </td>
  73. <td>
  74.         <table cellpadding="0" cellspacing="0" class="txt">
  75.           <tr>
  76.             <td><img src="http://ojmd62ynn.bkt.clouddn.com/dxshow/list.gif" alt="" /></td>
  77.             <td width="100%">
  78.               <div>
  79. {eval request('自制N格_今日发帖');}
  80.               </div>
  81.             </td>
  82.           </tr>
  83.         </table>
  84. </td>
  85. </tr>
  86. <tr>
  87.       <td colspan="4" class="fiveline">
  88. {eval request('自制N格_会员排行');}
  89.       </td>
  90. </tr>
  91. </table>
  92. </div>
  93. <!-- 自制N格 end -->
複製代碼
3、打开discuz模板找到
  1. <div id="wrap"{if $infosidestatus['allow'] < 2} class="wrap s_clear"{else} class="wrap with_side s_clear"{/if}>
複製代碼
在下边加
  1. {subtemplate dxshow}
複製代碼
即可。
祝你成功！

圖片附件: QQ截图20170517010749.png (2017-5-17 01:21, 178.94 KB) / 下載次數 3688
http://258club.com/discuz/attachment.php?aid=77510&k=43b5d70c140558ea1801c99fd885a256&t=1732325160&sid=o18tZ5



附件: discuz_request_20170517.zip (2017-5-17 01:25, 2.22 KB) / 下載次數 3618
http://258club.com/discuz/attachment.php?aid=77511&k=c61559be76d346219d471c3c38093c8a&t=1732325160&sid=o18tZ5
作者: 4rphotoclub    時間: 2017-5-17 05:47

看帖回帖那是一定要的：
  喜!我終於占一了;坐到沙發!
作者: 夜影o夜空    時間: 2017-5-17 16:39

这个教程还真是美观，我来看看一下
作者: bossll    時間: 2017-5-17 21:00

辛勞無界版主，在次分享很好教學
感恩你
作者: 4rphotoclub    時間: 2017-5-20 08:35

回復 1# 無界


3、免去flash調用，可以在不支持flash的手機或ipad上瀏覽最新圖片。

我也安裝了這個插件；但好像沒有發揮功效～
作者: 无界    時間: 2017-5-20 08:51

回復 5# 4rphotoclub


    给个地址我看看
作者: 4rphotoclub    時間: 2017-5-20 10:12

回復 6# 无界

http://4rphotoclub.joinbbs.net/index.ph
作者: 无界    時間: 2017-5-20 10:28

回復 7# 4rphotoclub


    代码里的数据调用不要修改如
{eval request('自制N格_会员排行');}
不要改为繁体
作者: 4rphotoclub    時間: 2017-5-20 11:06

本帖最後由 4rphotoclub 於 2017-5-20 11:15 編輯

回復 8# 無界

原來如此

明白了

好的

謝謝你

終於成功了

如果這樣應該可以有繁體字版本和簡體字版本推出就更加棒了

始終在華人社會裡，不少人是使繁體字的論壇。
作者: 网雨霏霏    時間: 2017-5-20 11:41

哇塞，你太牛了
早出这个教程的话，我就不用辛苦的到处找这个首页n格的插件了
作者: 我來自他郷    時間: 2017-5-21 18:30

进来学习下，因为我目前使用的手机上看不到N格里的最新图片。
作者: nanmengxi    時間: 2018-7-11 13:13

回復 6# 无界


    没用啊 http://668ziyuan.66rt.com/
作者: macheng    時間: 2018-7-24 08:43

回復 1# 无界


    版大，安装了你的N格后发现不兼容，显示也不完美，你给看看
http://mc0713.66rt.com/index.php
作者: macheng    時間: 2018-7-27 17:45

按你说的步骤安装后直接不显示的
作者: YoTHc閻羅    時間: 2018-8-6 23:38

謝謝分享
作者: ericko    時間: 2020-6-23 22:49

"新建模板"在后台哪儿？没找到！

5.jpg

圖片附件: 5.jpg (2020-6-23 22:48, 137.18 KB) / 下載次數 2615
http://258club.com/discuz/attachment.php?aid=80779&k=9eeb58be85b6bcc62e1e91753c798ba9&t=1732325160&sid=o18tZ5

作者: 無名.    時間: 2020-6-23 23:26

回復 16# ericko

2.JPG

圖片附件: 2.JPG (2020-6-23 23:25, 84.93 KB) / 下載次數 2561
http://258club.com/discuz/attachment.php?aid=80780&k=eaa4b5795b26992616e82940140027c4&t=1732325160&sid=o18tZ5

作者: ericko    時間: 2020-6-24 11:32

咦？！我这儿没有耶～难怪找不到。。。
那这样该怎么办？

模板.jpg

圖片附件: 模板.jpg (2020-6-24 11:31, 178.61 KB) / 下載次數 2664
http://258club.com/discuz/attachment.php?aid=80781&k=857f6670974afa142c187392ce86a54e&t=1732325160&sid=o18tZ5

作者: 無名.    時間: 2020-6-24 18:18

回復 18# ericko

只有申请论坛的admin账号才能修改模板
作者: ericko    時間: 2020-6-25 17:01

回復  ericko

只有申请论坛的admin账号才能修改模板
無名. 發表於 2020-6-24 18:18

喔~原来如此
我改用admin登入就找到了，谢谢！
作者: ericko    時間: 2020-6-25 17:18

原创：首页N格缓存版（免后台安装）

3、打开discuz模板找到
<div id="wrap"{if $infosidestatus['allow'] < 2} class="wrap s_clear"{else} class="wrap with_side s_clear"{/if}>
複製代碼

无界 發表於 2017-5-17 01:30


这段代码在discuz模板的哪个分项里？

6.jpg

7.jpg

圖片附件: 6.jpg (2020-6-25 17:18, 52.61 KB) / 下載次數 2680
http://258club.com/discuz/attachment.php?aid=80783&k=24744cf9de520fa06da984f32680367c&t=1732325160&sid=o18tZ5



圖片附件: 7.jpg (2020-6-25 17:18, 131.57 KB) / 下載次數 2773
http://258club.com/discuz/attachment.php?aid=80784&k=2a2faa9c72674ed4d8ffe52086d59425&t=1732325160&sid=o18tZ5

作者: WHSKY    時間: 2020-7-21 07:45

我觉得这个不错，很有直观感，大家不妨学习学习，好的话直接使用各自论坛，增加论坛的美化，谢谢



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://258club.com/discuz/) Powered by Discuz! 7.2