修改dz論壇首頁板塊以tab標(biāo)題樣式展示

TaC

這是幾天前折騰出來的，分享一下。

默認(rèn)文件下，多少年了，官方一直以展開整個板塊為默認(rèn)方式。有時總感覺有點(diǎn)占用頁面空間，特別是板塊多的時候。
下面將分享由 Trae 解決的板塊展示問題。

- 1.創(chuàng)建了一個可水平滾動的標(biāo)題欄，所有分區(qū)標(biāo)題都集中在一行顯示；
- 2.實(shí)現(xiàn)了鼠標(biāo)劃動懸停時切換顯示對應(yīng)分區(qū)內(nèi)容的功能；
- 3.添加了點(diǎn)擊標(biāo)題跳轉(zhuǎn)到對應(yīng)分區(qū)頁面的鏈接功能；
- 4.修復(fù)了頁面滾動、間距累積和底部間距過大等布局問題；
- 5.確保了右側(cè)邊欄的正常顯示和整體頁面布局的穩(wěn)定性。

怎么操作呢。
打開論壇首頁文件，查到：

• <div class="bm bmw {if $cat['forumcolumns']} flg{/if} cl">
  

默認(rèn)文件約344行，找到它上面的這二行代碼：

• <!--{loop $catlist $key $cat}-->
•                         <!--{hook/index_catlist $cat['fid']}-->
  

接著在<!--{loop $catlist $key $cat}-->上面添加以下代碼：

• <!-- 添加可滾動的分類tab容器 -->
• <style type="text/css">
• /* 分類標(biāo)簽容器 */
• .category-tabs-wrapper {
•     width: 100%;
•     overflow-x: auto;
•     overflow-y: hidden;
•     white-space: nowrap;
•     -webkit-overflow-scrolling: touch;
•     scroll-behavior: smooth;
•     margin: 10px 0;
•     padding: 5px 0;
•     position: relative;
•     clear: both;
• }
• /* 滾動條樣式 */
• .category-tabs-wrapper::-webkit-scrollbar {
•     height: 6px;
• }
• .category-tabs-wrapper::-webkit-scrollbar-track {
•     background: #f1f1f1;
•     border-radius: 3px;
• }
• .category-tabs-wrapper::-webkit-scrollbar-thumb {
•     background: #888;
•     border-radius: 3px;
• }
• .category-tabs-wrapper::-webkit-scrollbar-thumb:hover {
•     background: #555;
• }
• /* 分類標(biāo)簽樣式 */
• .category-tab {
•     display: inline-block;
•     padding: 8px 12px;
•     margin-right: 6px;
•     background: #f5f5f5;
•     border-radius: 3px;
•     cursor: pointer;
•     min-width: 80px;
•     text-align: center;
•     transition: all 0.2s ease;
•     box-sizing: border-box;
• }
• .category-tab:hover {
•     background: #e8e8e8;
• }
• .category-tab.active {
•     background: #0066cc;
•     color: white;
• }
• .category-tab a {
•     text-decoration: none;
•     font-weight: bold;
•     display: block;
•     font-size: 13px;
• }
• .category-tab.active a {
•     color: white;
• }
• /* 內(nèi)容容器 - 調(diào)整底部間距 */
• .category-content-container {
•     position: relative;
•     margin: 15px 0 0 0; /* 只保留上邊距，移除下邊距 */
•     clear: both;
•     min-height: 200px; /* 減小最小高度 */
•     padding-bottom: 0; /* 確保沒有底部內(nèi)邊距 */
• }
• /* 確保右側(cè)邊欄正常顯示 */
• #sd {
•     float: right !important;
•     display: block !important;
• }
• /* 確保內(nèi)容區(qū)域位置穩(wěn)定 */
• .bm {
•     position: relative;
•     clear: both;
•     margin-bottom: 0 !important; /* 強(qiáng)制移除底部邊距 */
• }
• #ct {
•     position: relative;
•     clear: both;
• }
• /* 修復(fù)底部間距問題的關(guān)鍵樣式 */
• .category-content-container + * {
•     margin-top: 10px !important; /* 限制內(nèi)容容器后的元素上邊距 */
• }
• /* 移除可能的多余空元素 */
• .category-content-container .bm {
•     margin-bottom: 0 !important;
• }
• </style>
• <!-- 分類標(biāo)簽容器 - 添加鏈接 -->
• <div class="category-tabs-wrapper" id="category-tabs">
•     <!--{loop $catlist $key $cat}-->
•         <div class="category-tab" id="tab_$cat[fid]">
•             <!-- 添加真實(shí)鏈接，使用fid構(gòu)建forumdisplay頁面URL -->
•             <a href="forum.php?gid=$cat[fid]">$cat[name]</a>
•         </div>
•     <!--{/loop}-->
• </div>
• <!-- 固定的內(nèi)容容器 -->
• <div class="category-content-container" id="content-container">
•     <!-- 這里將動態(tài)加載對應(yīng)的分區(qū)內(nèi)容 -->
• </div>
• <script type="text/javascript">
• jQuery(function($) {
•     // 計算每個tab的百分比寬度
•     var tabs = $('.category-tab');
•     var tabCount = tabs.length;
•     // 為每個tab設(shè)置寬度
•     tabs.each(function() {
•         var percentWidth = Math.min(20, Math.max(10, 80 / tabCount));
•         $(this).css('width', percentWidth + '%');
•     });
•     // 設(shè)置第一個tab為激活狀態(tài)
•     tabs.first().addClass('active');
•     // 獲取所有分區(qū)內(nèi)容元素
•     var categoryContents = $('div[id^="category_"]');
•     // 保存原始分區(qū)內(nèi)容到變量中，然后從DOM中移除
•     var contentMap = {};
•     categoryContents.each(function() {
•         var id = $(this).attr('id');
•         var fid = id.replace('category_', '');
•         contentMap[fid] = $(this).html();
•         $(this).remove(); // 從DOM中移除原始內(nèi)容
•     });
•     // 初始顯示第一個分區(qū)內(nèi)容
•     if (tabs.length > 0) {
•         var firstTabId = tabs.first().attr('id');
•         var firstFid = firstTabId.replace('tab_', '');
•         if (contentMap[firstFid]) {
•             $('#content-container').html(contentMap[firstFid]);
•             // 移除內(nèi)容中可能導(dǎo)致間距過大的元素
•             $('#content-container .bm').css('margin-bottom', '0');
•         }
•     }
•     // 添加觸摸滑動支持
•     var isScrolling = false;
•     var startX, endX;
•     $('#category-tabs').on('touchstart', function(e) {
•         startX = e.originalEvent.touches[0].clientX;
•         isScrolling = true;
•     });
•     $('#category-tabs').on('touchend', function(e) {
•         endX = e.originalEvent.changedTouches[0].clientX;
•         var diff = startX - endX;
•         if (Math.abs(diff) > 50) {
•             $(this).scrollLeft($(this).scrollLeft() + diff);
•         }
•         setTimeout(function() { isScrolling = false; }, 100);
•     });
•     // 鼠標(biāo)懸停時切換分區(qū)內(nèi)容 - 注意不阻止點(diǎn)擊事件
•     tabs.hover(function() {
•         if (isScrolling) return;
•         // 更新激活狀態(tài)
•         tabs.removeClass('active');
•         $(this).addClass('active');
•         // 獲取對應(yīng)的分區(qū)ID
•         var tabId = $(this).attr('id');
•         var fid = tabId.replace('tab_', '');
•         // 動態(tài)加載對應(yīng)的分區(qū)內(nèi)容到固定容器中
•         if (contentMap[fid]) {
•             $('#content-container').html(contentMap[fid]);
•             // 移除內(nèi)容中可能導(dǎo)致間距過大的元素
•             $('#content-container .bm').css('margin-bottom', '0');
•         }
•     });
•     // 為鏈接添加單獨(dú)的點(diǎn)擊處理，確保正常跳轉(zhuǎn)
•     $('.category-tab a').on('click', function(e) {
•         // 這里不需要阻止默認(rèn)行為，允許鏈接正常跳轉(zhuǎn)
•         // 用戶點(diǎn)擊時會跳轉(zhuǎn)到forumdisplay頁面
•     });
•     // 添加鍵盤左右鍵支持
•     $(document).keydown(function(e) {
•         if (e.keyCode == 37) {
•             $('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() - 200);
•         } else if (e.keyCode == 39) {
•             $('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() + 200);
•         }
•     });
• });
• </script>
  

問題解決，當(dāng)然，細(xì)節(jié)上，可能還需你自己調(diào)節(jié)，和美化一下，以適合你網(wǎng)站的風(fēng)格。

TaC

以上是在已經(jīng)修改的一級分類下的板塊樣式的基礎(chǔ)上，修改而來。由 trae AI提供的原始數(shù)據(jù)。
至于，沒有前面工作，沒測試過。

重點(diǎn)是，在后臺/論壇，一級板塊下的橫排數(shù)目。請根據(jù)網(wǎng)站需求，應(yīng)對更改和使用。
上面方法真的非常簡單，添加的位置就一個地方，一步到位，不用修改其它。但是要隱藏原來標(biāo)題欄代碼，即 隱藏或刪除標(biāo)題所在的diy標(biāo)簽以內(nèi)的所有代碼。


另外，便于日后管理，請駁離樣式代碼到目前使用的模板樣式文件中，其它放到論壇首頁文件里，即上面所說的文件位置里。
并做好注釋，便于日后程序升級時，方便查找，復(fù)制到升級的文件中。

TaC

注意，如果操作前，開啟了論壇首頁邊欄，并且，板塊下，還有DIY模塊（我原來板塊這里是刪除了的，使得的是邊欄掛件。升級x5，又整出來了）。在板塊效果出現(xiàn)后，可能右邊欄跑到下面（我在修改過的板塊邊欄添加了其它模塊，應(yīng)該不是這個原因）。
并且無法移動，這時就在右邊重新DIY模塊，或添加代碼，再刪除以前的邊欄板塊。不然，當(dāng)你DIY模塊后，下面的邊欄卻又跑到開始讓它去，卻不去的地方，模塊重復(fù)。
這些將根據(jù)你的模板現(xiàn)狀來操作，和調(diào)整。

所以，在決定操作前，要考慮好，整個首頁是否需要開啟邊欄，以免增加工作量。
至于原因，不詳，可能DIY模塊代碼放的位置不對，也懶得去找了。只要板塊效果達(dá)到，就可以了。

TaC

下面是效果圖，不包括下面的板塊信息。只是紅框里的標(biāo)題優(yōu)化。

板塊信息這塊，更改的地方不是一個，所以，有需要的，再說了。因?yàn)樗窃谄渌鍓K代碼基礎(chǔ)上，修改來的，涉及到其它代碼，樣式。

一定

地址放出來看看效果