eyoucms導航的二級欄目怎樣增加高亮？

在 EyouCMS 中為導航欄的二級欄目（下拉菜單）設置高亮，是一個提升網站用戶體驗的重要細節。它能讓用戶清晰地知道自己當前位于網站的哪個欄目下。核心原理是：在對應的欄目頁面下，為該欄目的 Html 元素添加一個特定的高亮樣式類（如 active或 current）。

方法一：使用系統內置的導航標簽高亮（推薦，最標準）

EyouCMS 的導航標簽通常內置了高亮判斷功能。你需要確保你的導航代碼使用了正確的系統標簽和變量。

步驟：

找到導航模板文件： 這個文件通常是 header.html或 nav.html，位于你的模板目錄下（如 /template/pc/）。

檢查并修改導航代碼： 確保你的導航菜單使用的是 EyouCMS 的系統標簽，例如 {:channel()}或 {:nav()}，并正確使用了高亮變量。

下面是一個標準的、支持一級和二級高亮的導航代碼示例：

<PRe class="ybc-pre-component ybc-pre-component_not-math"><ul class="navbar"> {eyou:channel type='top' row='10' id='field'} <li class="nav-item {if $field.id == $content.toplevelid}current{/if}">  <a href="{$field.typedir}" {if $field.current}class="active"{/if}>{$field.typename}</a>  {if $field.children}  <ul class="sub-menu"> {eyou:channel type='son' typeid='$field.id' id='field2'} <li class="sub-item {if $field2.id == $content.typeid}current{/if}">  <a href="{$field2.typedir}" {if $field2.current}class="active"{/if}>{$field2.typename}</a> </li> {/eyou:channel} </ul> {/if} </li> {/eyou:channel} </ul>

代碼關鍵點解釋：

一級欄目高亮判斷： {if $field.id == $content.toplevelid}current{/if}

$content.toplevelid是當前頁面的頂級欄目ID。如果當前欄目的ID ($field.id) 等于這個頂級欄目ID，就為這個 <li>標簽添加 current類。

二級欄目高亮判斷： {if $field2.id == $content.typeid}current{/if}

$content.typeid是當前頁面的直接欄目ID。如果二級欄目的ID ($field2.id) 等于這個直接欄目ID，就為這個二級欄目的 <li>標簽添加 current類。

當前欄目鏈接高亮： {if $field2.current}class="active"{/if}

使用系統自帶的 $field2.current變量來判斷是否為當前欄目，并為 <a>標簽添加 active類。

編寫css樣式：

在你的CSS文件（如 style.css）中，為 .current和 .active類定義高亮樣式。

/* 一級欄目項高亮樣式 */
.navbar .nav-item.current {
    background-color: #f0f0f0; /* 背景色 */
}

/* 欄目鏈接高亮樣式 */
.navbar .nav-item a.active,
.navbar .sub-item a.active {
    color: #ff0000; /* 字體顏色 */
    font-weight: bold;
}

/* 二級欄目項高亮樣式 */
.navbar .sub-item.current {
    background-color: #e0e0e0;
}

方法二：使用Javascript輔助高亮（靈活備用方案）

如果方法一因模板原因不生效，或者你需要更靈活的控制，可以使用JavaScript。原理是獲取當前頁面的欄目ID，然后為對應的導航元素添加高亮類。

步驟：

在模板中輸出當前欄目ID： 在 header.html的 <body>標簽后，輸出當前欄目的ID，方便JavaScript讀取。

<script type="text/javascript">
    var currentTypeId = {$content.typeid}; // 當前欄目ID
    var currentTopLevelId = {$content.toplevelid}; // 當前頂級欄目ID
</script>

編寫JavaScript代碼： 在頁面加載后，遍歷導航元素，為匹配的欄目添加高亮類。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 獲取所有導航鏈接
    var navLinks = document.querySelectorAll('.navbar a');
    
    navLinks.forEach(function(link) {
        // 假設你的鏈接的href包含欄目ID，例如 /type/123.html
        var href = link.getAttribute('href');
        // 使用正則表達式從URL中提取欄目ID
        var match = href.match(/type\/(\d+)\.html/);
        
        if (match) {
            var typeIdInHref = match[1];
            // 如果提取到的ID等于當前頁面的欄目ID，則為其父級<li>添加高亮類
            if (parseInt(typeIdInHref) === currentTypeId) {
                link.classList.add('active');
                // 同時高亮其父級<li>元素
                var parentLi = link.closest('li');
                if (parentLi) {
                    parentLi.classList.add('current');
                }
            }
        }
    });
});
</script>

注意： 此方法需要根據你網站的實際URL結構來調整正則表達式 (/type\/(\d+)\.html/)。

總結與建議

方法	優點	缺點	推薦度
方法一：系統標簽	標準、高效、準確，完全利用系統變量，無需額外計算。	需要模板代碼符合規范。	★★★★★（首選）
方法二：JavaScript	靈活，不依賴特定的模板標簽，適用于各種復雜情況。	相對復雜，依賴URL規則，如果JS被禁用則失效。	★★★☆☆（備用）