Z-BlogPHP主題導航高亮的方法（附js、php、CSS代碼）

常玩ZblogPHP的用戶是不是經常在主題里發現主題自帶導航高亮功能，并且還可以給文章頁加上當前分類的高亮，下面我們來看看，這種方法到底是怎么實現的呢，是不是很炫酷呢。

首先我想說一下，這是我在制作主題過程中遇到的問題，我是想給我的主題加上導航高亮的小功能，要是沒有這功能主題怎能變得有特色，于是我借鑒了許多主題模板后，得出了方法和代碼：

首先打開模板template文件夾，找到所存放導航欄的文件，在導航欄的父級div容器，也可以是header、nav、section等，在class="" 后面加上

data-type="{if $type=='article'}article{elseif $type=='page'}page{elseif $type=='index'}index{else}category{/if}" data-infoid="{if $type=='article'}{$article.Category.ID} {elseif $type=='page'}{$article.ID}{elseif $type=='index'} {else}{$category.ID}{/if}"

加上這串代碼后，恭喜你，重要的一步已經完成了。

然后找到模板下script文件夾，找到模板主js，加上如下代碼。

jQuery(document).ready(function($){ var datatype=$("#hamburgermenu").attr("data-type"); $(".dhgl>li ").each(function(){ try{ var myid=$(this).attr("id"); if("index"==datatype){ if(myid=="nvabar-item-index"){ $("#nvabar-item-index a:first-child").addClass("on"); } }else if("category"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("article"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("page"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-page-"+infoid){ $("#navbar-page-"+infoid+" a:first-child").addClass("on"); } } }else if("tag"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-tag-"+infoid){ $("#navbar-tag-"+infoid+" a:first-child").addClass("on"); } } } }catch(E){} });});

這是，在你的導航欄父級div容器加上id hamburgermenu，然后在導航欄ul上加上class dhgl，這時，網站已經能夠識別導航所在頁面了！

這樣一個簡單的導航高亮邏輯判斷就完成了，要顯示出導航高亮，還要加上css樣式。

在主題style文件夾上的主題主css樣式上加入a標簽的樣式：

#hamburgermenu .dhgl li a.on{background:#333;color:#fff;}

background和color后面的顏色也是需要自己自定義的，你可以改成自己的顏色，看著不錯就可以了哦。

原理：第一步的php判斷是通過php的邏輯type判斷，首頁就顯示index，如果是分類頁文章頁就輸出分類id等，然后js判斷li的id，是否和php的首頁、分類id符合，符合就輸出on class，然后css給on加上樣式

來源：捷閃站長網，轉載請保留出處和鏈接！

本文鏈接：http://www.z18zs.com/read/180.html

天南地北大拜年# 一起領紅包>根據您提供的代碼，這是一個使用 jQuery 來實現網頁導航欄動態位置調整、滾動到特定內容區域時高亮導航項，以及用戶留言和評價功能的網頁。下面是對這些功能的報告：

### 1. 導航欄位置調整

- **功能描述**: 導航欄的位置會根據瀏覽器窗口的大小動態調整，以確保它在視覺上居中顯示。

- **實現方法**: 使用 jQuery 監聽 `resize` 事件，實時計算導航欄的寬度，并動態設置其 `right` CSS屬性。

### 2. 滾動導航高亮

- **功能描述**: 當用戶滾動到網頁的某個特定內容區域時，對應的導航項會被高亮顯示。

- **實現方法**: 首先，獲取每個內容區域的位置頂部值并存入數組。然后，監聽 `scroll` 事件，根據滾動位置判斷當前處于哪個內容區域，并使用 `.addClass("selected")` 來高亮當前導航項。

### 3. 用戶留言功能

- **功能描述**: 用戶可以在網頁上留下自己的意見或建議。

- **實現方法**: 使用 HTML 的 `` 元素創建一個多行文本輸入框，并通過 jQuery 監聽按鈕點擊事件來處理留言的提交。

### 4. 星級評價功能

- **功能描述**: 用戶可以通過點擊星星圖標來對網頁進行評價。

- **實現方法**: HTML 使用 `` 元素創建星星圖標，并通過 jQuery 來監聽點擊事件，根據點擊的星星圖標更新頁面上的評級顯示。

### 5. 功能完善建議

- **用戶體驗**: 增加留言提交后的反饋機制，如提示用戶留言成功或出現錯誤。

- **交互設計**: 對于星級評價，可以增加更多的交互效果，如星星點擊效果，以及評價后的結果展示。

- **響應式設計**: 確保網頁在不同設備上均有良好的顯示效果，包括手機和平板電腦。

- **性能優化**: 對于 `scroll` 和 `resize` 事件，應考慮節流（throttle）或防抖（debounce）技術，以避免過度事件處理導致的性能問題。

### 6. 錯誤和警告

- **代碼錯誤**: 在您的代碼中，有幾個問題需要解決。比如，變量 `sectionHeightArray` 應該在 `$(window).scroll` 事件處理函數外部聲明，否則它可能無法正確引用。此外，按鈕點擊事件處理函數沒有提供，需要補充相應的代碼來處理用戶的交互。

- **跨瀏覽器兼容性**: 需要確保所有的 jQuery 代碼在不同的瀏覽器上都能正常工作，特別是舊版本的瀏覽器。

### 7. 安全性

- **XSS防范**: 確保從用戶那里收集的數據在插入到網頁上之前進行了適當的清理，以防止跨站腳本（XSS）攻擊。

整體而言，該網頁的交互功能對于用戶參與和反饋提供了良好的基礎，但在發布前需要進行詳細的測試和優化以確保最佳的用戶體驗和性能。類圖（15分）：

主題：智能家居控制系統

描述：為一個智能家居控制系統繪制組件圖，展示系統中各個組件如用戶界面、數據存儲、設備控制等的關系

行代碼就能讓我的網站支持代碼高亮的工具庫，也支持在 Vue 中使用，強烈推薦給大家。

關于 highlight.js

highlight.js 是一款使用 javascript 開發代碼高亮工具庫，能夠讓網頁上的代碼顯示接近我們使用的代碼編輯器的高亮樣式，從而看起來更舒服，增強閱讀體驗。

highlight.js 官網截圖

highlight.js 的技術特性

支持 197 種開發語言和 246 種代碼高亮風格主題
自動開發語言檢測
支持多種語言混合代碼同時高亮
支持任何 HTML 標簽，不僅僅是<code></code>
支持 npm 安裝，可以在 Vue.js 中使用，也可以在 node.js 中使用
無依賴，與任何 js 框架兼容

為什么要用 highlight.js

常來我網站的小伙伴都知道，我的文章有一個欄目是“前端”，主要推薦一下實用的前端開源項目或者組件庫，寫技術類文章免不了要貼代碼，我的網站基于 wordpress 搭建，此前我一直為找一款代碼高亮插件煩惱，但大部分 wordpress 的代碼高亮插件實在太臃腫，出來的樣式又不美觀。大多時候是截圖 VsCode 的代碼界面，甚至還用過 codepng 這個工具把代碼變成圖片貼在文章中，但這樣做是美觀了，但也存在2個問題：

長代碼圖片會縮放，閱讀體驗不佳
搜索引擎不識別，對 SEO 不友好

最終還是找到了 highlight.js，完美解決了上面兩個問題，而且配置簡單，演示漂亮，定制化簡單。不禁感嘆：用純前端的方式解決，才能精準控制，實現想要的效果。

使用教程：為我的網站添加代碼高亮功能

下面以我的網站為例，展示將 highlight.js 用在我們的項目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安裝，我的網站基于 wordpress 開發，主題是自己寫的，最簡單的方式就是在文章詳情頁引入 highlight.js 和主題樣式。

雖然 highlight.js 支持幾百種開發語言，但為了將文件體積控制到最小，我們可以點擊“get version”按鈕進入下載頁，通過勾選我們需要的開發語言，來構建最輕量的庫。

下載解壓后得到的 highlight.min.js 就是我們需要引入的 js 文件，主題樣式都在 style 文件夾里，我選擇了一個比較喜歡的 monokai-sublime 主題，只需要一個 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是這么簡單，highlight.js 會自動將文章中的 <pre><code></code></pre> 代碼進行識別語言并且高亮，一切就是這么簡單。為了讓代碼顯示更協調，我用幾行 css 控制了包裹層的圓角以及背景顏色、字體大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

當然 highlight.js 也能在 vue 項目中使用，安裝：

npm install highlight.js

在 Vue 文件中使用 (通過 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自動識別模式不能100%識別出代碼所屬的開發語言，識別錯誤會導致高亮樣式是別的語言的，這種情況下可以手動設置一個 class 來精準控制：

<pre><code class="language-javascript">...</code></pre>

官網提供了詳盡的使用文檔，有更多代碼高亮的控制，但不足的就是 highlight.js 沒有顯示行號的支持，需要通過再引入一個庫 (highlightjs-line-numbers.js) 或者自行實現。

免費開源說明

highlight.js 是一款基于 BSD 許可證開源的 javascript 工具庫，任何個人和公司都可以免費下載用于自己的項目，包括商用項目。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址以及代碼高亮效果

highlight.js - 讓網頁上的代碼高亮美化的免費開源工具庫｜那些免費的磚

在線咨詢

上一篇：十天搭建前端監控系統(四) Js監控img、css、js文件加載失敗
下一篇：協作繪圖應用程序：在畫布上繪制形狀

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商