織夢DedeCms程式碼高亮怎麼實現

黄文Rex發表於2024-08-23

織夢DedeCMS實現程式碼高亮可以透過多種方法來完成，以下是一些常見的方法：

方法一：使用PHP標籤實現當前欄目高亮

  1. 在模板檔案中使用PHP標籤：

    • 在織夢的模板檔案中，可以使用 {dede:php} 標籤來嵌入 PHP 程式碼，實現當前欄目的高亮顯示。
    • 例如，可以使用以下程式碼片段來獲取當前欄目的 ID，併為其新增高亮樣式：
      php
      {dede:php} $GLOBALS['thisid'] = intval($refObj->id); {/dede:php}

  2. 為當前欄目新增類：

    • 獲取到當前欄目的 ID 後，可以為當前欄目的連結新增一個特定的 CSS 類，以實現高亮效果。
    • 例如，可以在模板檔案中使用類似這樣的程式碼：
      php
      {dede:type typeid='1'} <li class="{if $thisid == $typeid}active{/if}"> <a href="[field:link/]">[field:title/]</a> </li> {/dede:type}
    • 這裡使用了一個 {if $thisid == $typeid}active{/if} 條件判斷，如果當前欄目的 ID ($thisid) 等於當前迴圈中的欄目 ID ($typeid)，則新增一個 active 類。

  3. 定義CSS樣式：

    • 在 CSS 檔案中定義 .active 類的樣式，以實現高亮效果：
      css
      .active a { background-color: #ff0; color: #000; }

方法二：使用JavaScript實現當前文章標題高亮

  1. 在文章標題中顯示文章ID：

    • 在文章標題的 HTML 標籤中加入文章的 ID，例如：
      html
      <h1 id="a_[field:id/]">[field:title/]</h1>

  2. 使用JavaScript設定高亮：

    • 使用 JavaScript 來獲取當前文章的 ID，併為當前文章的標題新增高亮樣式。
    • 例如，可以在頁面載入完成後使用 JavaScript 程式碼：
      javascript
      document.addEventListener("DOMContentLoaded", function() { var currentId = "123"; // 假設這是當前文章的 ID var titleElement = document.getElementById('a_' + currentId); if (titleElement) { titleElement.style.color = "#ff0"; titleElement.style.backgroundColor = "#000"; } });

方法三：使用CSS偽類實現高亮

  1. 利用CSS偽類：
    • 如果你使用的是動態生成的頁面，並且可以透過 URL 引數等方式確定當前頁面的文章 ID，可以使用 CSS 偽類 :nth-of-type() 來實現高亮。
    • 例如，假設當前文章的 ID 是 1，可以使用如下 CSS 選擇器：
      css
      li:nth-of-type(1) a { background-color: #ff0; color: #000; }

這些方法可以幫助你在織夢DedeCMS中實現程式碼高亮。如果你需要更具體的實現細節或遇到問題，請隨時告訴我。

相關文章