Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 日韩不卡一区,91精品国产综合成人,天堂一区二区三区精品 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          Z-BlogPHP主題導(dǎo)航高亮的方法（附j(luò)s、php、CSS代碼）
          
        
           
          
	
	
          
		
                        
          常玩ZblogPHP的用戶是不是經(jīng)常在主題里發(fā)現(xiàn)主題自帶導(dǎo)航高亮功能，并且還可以給文章頁(yè)加上當(dāng)前分類(lèi)的高亮，下面我們來(lái)看看，這種方法到底是怎么實(shí)現(xiàn)的呢，是不是很炫酷呢。
          首先我想說(shuō)一下，這是我在制作主題過(guò)程中遇到的問(wèn)題，我是想給我的主題加上導(dǎo)航高亮的小功能，要是沒(méi)有這功能主題怎能變得有特色，于是我借鑒了許多主題模板后，得出了方法和代碼：
          首先打開(kāi)模板template文件夾，找到所存放導(dǎo)航欄的文件，在導(dǎo)航欄的父級(jí)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}"
          加上這串代碼后，恭喜你，重要的一步已經(jīng)完成了。
          然后找到模板下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){} });});
          這是，在你的導(dǎo)航欄父級(jí)div容器加上id hamburgermenu，然后在導(dǎo)航欄ul上加上class dhgl，這時(shí)，網(wǎng)站已經(jīng)能夠識(shí)別導(dǎo)航所在頁(yè)面了！
          這樣一個(gè)簡(jiǎn)單的導(dǎo)航高亮邏輯判斷就完成了，要顯示出導(dǎo)航高亮，還要加上css樣式。
          在主題style文件夾上的主題主css樣式上加入a標(biāo)簽的樣式：
          #hamburgermenu .dhgl li a.on{background:#333;color:#fff;}
          background和color后面的顏色也是需要自己自定義的，你可以改成自己的顏色，看著不錯(cuò)就可以了哦。
          原理：第一步的php判斷是通過(guò)php的邏輯type判斷，首頁(yè)就顯示index，如果是分類(lèi)頁(yè)文章頁(yè)就輸出分類(lèi)id等，然后js判斷l(xiāng)i的id，是否和php的首頁(yè)、分類(lèi)id符合，符合就輸出on class，然后css給on加上樣式
          來(lái)源：捷閃站長(zhǎng)網(wǎng)，轉(zhuǎn)載請(qǐng)保留出處和鏈接！
          本文鏈接：http://www.z18zs.com/read/180.html
          天南地北大拜年# 一起領(lǐng)紅包>根據(jù)您提供的代碼，這是一個(gè)使用 jQuery 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航欄動(dòng)態(tài)位置調(diào)整、滾動(dòng)到特定內(nèi)容區(qū)域時(shí)高亮導(dǎo)航項(xiàng)，以及用戶留言和評(píng)價(jià)功能的網(wǎng)頁(yè)。下面是對(duì)這些功能的報(bào)告：
          ### 1. 導(dǎo)航欄位置調(diào)整
          - **功能描述**: 導(dǎo)航欄的位置會(huì)根據(jù)瀏覽器窗口的大小動(dòng)態(tài)調(diào)整，以確保它在視覺(jué)上居中顯示。
          - **實(shí)現(xiàn)方法**: 使用 jQuery 監(jiān)聽(tīng) `resize` 事件，實(shí)時(shí)計(jì)算導(dǎo)航欄的寬度，并動(dòng)態(tài)設(shè)置其 `right` CSS屬性。
          ### 2. 滾動(dòng)導(dǎo)航高亮
          - **功能描述**: 當(dāng)用戶滾動(dòng)到網(wǎng)頁(yè)的某個(gè)特定內(nèi)容區(qū)域時(shí)，對(duì)應(yīng)的導(dǎo)航項(xiàng)會(huì)被高亮顯示。
          - **實(shí)現(xiàn)方法**: 首先，獲取每個(gè)內(nèi)容區(qū)域的位置頂部值并存入數(shù)組。然后，監(jiān)聽(tīng) `scroll` 事件，根據(jù)滾動(dòng)位置判斷當(dāng)前處于哪個(gè)內(nèi)容區(qū)域，并使用 `.addClass("selected")` 來(lái)高亮當(dāng)前導(dǎo)航項(xiàng)。
          ### 3. 用戶留言功能
          - **功能描述**: 用戶可以在網(wǎng)頁(yè)上留下自己的意見(jiàn)或建議。
          - **實(shí)現(xiàn)方法**: 使用 HTML 的 `` 元素創(chuàng)建一個(gè)多行文本輸入框，并通過(guò) jQuery 監(jiān)聽(tīng)按鈕點(diǎn)擊事件來(lái)處理留言的提交。
          ### 4. 星級(jí)評(píng)價(jià)功能
          - **功能描述**: 用戶可以通過(guò)點(diǎn)擊星星圖標(biāo)來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行評(píng)價(jià)。
          - **實(shí)現(xiàn)方法**: HTML 使用 `` 元素創(chuàng)建星星圖標(biāo)，并通過(guò) jQuery 來(lái)監(jiān)聽(tīng)點(diǎn)擊事件，根據(jù)點(diǎn)擊的星星圖標(biāo)更新頁(yè)面上的評(píng)級(jí)顯示。
          ### 5. 功能完善建議
          - **用戶體驗(yàn)**: 增加留言提交后的反饋機(jī)制，如提示用戶留言成功或出現(xiàn)錯(cuò)誤。
          - **交互設(shè)計(jì)**: 對(duì)于星級(jí)評(píng)價(jià)，可以增加更多的交互效果，如星星點(diǎn)擊效果，以及評(píng)價(jià)后的結(jié)果展示。
          - **響應(yīng)式設(shè)計(jì)**: 確保網(wǎng)頁(yè)在不同設(shè)備上均有良好的顯示效果，包括手機(jī)和平板電腦。
          - **性能優(yōu)化**: 對(duì)于 `scroll` 和 `resize` 事件，應(yīng)考慮節(jié)流（throttle）或防抖（debounce）技術(shù)，以避免過(guò)度事件處理導(dǎo)致的性能問(wèn)題。
          ### 6. 錯(cuò)誤和警告
          - **代碼錯(cuò)誤**: 在您的代碼中，有幾個(gè)問(wèn)題需要解決。比如，變量 `sectionHeightArray` 應(yīng)該在 `$(window).scroll` 事件處理函數(shù)外部聲明，否則它可能無(wú)法正確引用。此外，按鈕點(diǎn)擊事件處理函數(shù)沒(méi)有提供，需要補(bǔ)充相應(yīng)的代碼來(lái)處理用戶的交互。
          - **跨瀏覽器兼容性**: 需要確保所有的 jQuery 代碼在不同的瀏覽器上都能正常工作，特別是舊版本的瀏覽器。
          ### 7. 安全性
          - **XSS防范**: 確保從用戶那里收集的數(shù)據(jù)在插入到網(wǎng)頁(yè)上之前進(jìn)行了適當(dāng)?shù)那謇?，以防止跨站腳本（XSS）攻擊。
          整體而言，該網(wǎng)頁(yè)的交互功能對(duì)于用戶參與和反饋提供了良好的基礎(chǔ)，但在發(fā)布前需要進(jìn)行詳細(xì)的測(cè)試和優(yōu)化以確保最佳的用戶體驗(yàn)和性能。類(lèi)圖（15分）：
          主題：智能家居控制系統(tǒng)
          描述：為一個(gè)智能家居控制系統(tǒng)繪制組件圖，展示系統(tǒng)中各個(gè)組件如用戶界面、數(shù)據(jù)存儲(chǔ)、設(shè)備控制等的關(guān)系
          行代碼就能讓我的網(wǎng)站支持代碼高亮的工具庫(kù)，也支持在 Vue 中使用，強(qiáng)烈推薦給大家。
          關(guān)于 highlight.js
          highlight.js 是一款使用 javascript 開(kāi)發(fā)代碼高亮工具庫(kù)，能夠讓網(wǎng)頁(yè)上的代碼顯示接近我們使用的代碼編輯器的高亮樣式，從而看起來(lái)更舒服，增強(qiáng)閱讀體驗(yàn)。
          highlight.js 官網(wǎng)截圖
          highlight.js 的技術(shù)特性
          • 支持 197 種開(kāi)發(fā)語(yǔ)言和 246 種代碼高亮風(fēng)格主題
          • 自動(dòng)開(kāi)發(fā)語(yǔ)言檢測(cè)
          • 支持多種語(yǔ)言混合代碼同時(shí)高亮
          • 支持任何 HTML 標(biāo)簽，不僅僅是<code></code>
          • 支持 npm 安裝，可以在 Vue.js 中使用，也可以在 node.js 中使用
          • 無(wú)依賴(lài)，與任何 js 框架兼容
          為什么要用 highlight.js
          常來(lái)我網(wǎng)站的小伙伴都知道，我的文章有一個(gè)欄目是“前端”，主要推薦一下實(shí)用的前端開(kāi)源項(xiàng)目或者組件庫(kù)，寫(xiě)技術(shù)類(lèi)文章免不了要貼代碼，我的網(wǎng)站基于 wordpress 搭建，此前我一直為找一款代碼高亮插件煩惱，但大部分 wordpress 的代碼高亮插件實(shí)在太臃腫，出來(lái)的樣式又不美觀。大多時(shí)候是截圖 VsCode 的代碼界面，甚至還用過(guò) codepng 這個(gè)工具把代碼變成圖片貼在文章中，但這樣做是美觀了，但也存在2個(gè)問(wèn)題：
          • 長(zhǎng)代碼圖片會(huì)縮放，閱讀體驗(yàn)不佳
          • 搜索引擎不識(shí)別，對(duì) SEO 不友好
          最終還是找到了 highlight.js，完美解決了上面兩個(gè)問(wèn)題，而且配置簡(jiǎn)單，演示漂亮，定制化簡(jiǎn)單。不禁感嘆：用純前端的方式解決，才能精準(zhǔn)控制，實(shí)現(xiàn)想要的效果。
          使用教程：為我的網(wǎng)站添加代碼高亮功能
          下面以我的網(wǎng)站為例，展示將 highlight.js 用在我們的項(xiàng)目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安裝，我的網(wǎng)站基于 wordpress 開(kāi)發(fā)，主題是自己寫(xiě)的，最簡(jiǎn)單的方式就是在文章詳情頁(yè)引入 highlight.js 和主題樣式。
          雖然 highlight.js 支持幾百種開(kāi)發(fā)語(yǔ)言，但為了將文件體積控制到最小，我們可以點(diǎn)擊“get version”按鈕進(jìn)入下載頁(yè)，通過(guò)勾選我們需要的開(kāi)發(fā)語(yǔ)言，來(lái)構(gòu)建最輕量的庫(kù)。
          下載解壓后得到的 highlight.min.js 就是我們需要引入的 js 文件，主題樣式都在 style 文件夾里，我選擇了一個(gè)比較喜歡的 monokai-sublime 主題，只需要一個(gè) css 文件，然后初始化：
          <link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>
          就是這么簡(jiǎn)單，highlight.js 會(huì)自動(dòng)將文章中的 <pre><code></code></pre> 代碼進(jìn)行識(shí)別語(yǔ)言并且高亮，一切就是這么簡(jiǎn)單。為了讓代碼顯示更協(xié)調(diào)，我用幾行 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;
}
          當(dāng)然 highlight.js 也能在 vue 項(xiàng)目中使用，安裝：
          npm install highlight.js
          在 Vue 文件中使用 (通過(guò) 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>
          需要注意的是，自動(dòng)識(shí)別模式不能100%識(shí)別出代碼所屬的開(kāi)發(fā)語(yǔ)言，識(shí)別錯(cuò)誤會(huì)導(dǎo)致高亮樣式是別的語(yǔ)言的，這種情況下可以手動(dòng)設(shè)置一個(gè) class 來(lái)精準(zhǔn)控制：
          <pre><code class="language-javascript">...</code></pre>
          官網(wǎng)提供了詳盡的使用文檔，有更多代碼高亮的控制，但不足的就是 highlight.js 沒(méi)有顯示行號(hào)的支持，需要通過(guò)再引入一個(gè)庫(kù) (highlightjs-line-numbers.js) 或者自行實(shí)現(xiàn)。
          免費(fèi)開(kāi)源說(shuō)明
          highlight.js 是一款基于 BSD 許可證開(kāi)源的 javascript 工具庫(kù)，任何個(gè)人和公司都可以免費(fèi)下載用于自己的項(xiàng)目，包括商用項(xiàng)目。
          關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。
          ↓↓點(diǎn)擊查看本次分享的網(wǎng)址以及代碼高亮效果
          highlight.js - 讓網(wǎng)頁(yè)上的代碼高亮美化的免費(fèi)開(kāi)源工具庫(kù)｜那些免費(fèi)的磚
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲欧洲日韩国产一区二区三区|
亚洲综合一区二区精品导航|
亚洲一区二区三区国产精品|
亚洲欧洲一区二区|
激情久久av一区av二区av三区|
中文字幕一精品亚洲无线一区|
日韩在线视频不卡一区二区三区
|
中文乱码人妻系列一区二区|
又硬又粗又大一区二区三区视频|
国产一区二区三区美女|
国产精品高清视亚洲一区二区
|
久久久国产精品亚洲一区|
三上悠亚一区二区观看|
精品视频在线观看一区二区三区|
国产精品揄拍一区二区|
日产亚洲一区二区三区|
亚洲AV成人一区二区三区AV|
99精品久久精品一区二区|
精品国产一区二区三区AV性色|
精品无码一区二区三区水蜜桃|
性色AV一区二区三区无码|
精品少妇人妻AV一区二区|
日本一区二区三区免费高清|
亚洲蜜芽在线精品一区|
亚洲蜜芽在线精品一区|
国产成人精品久久一区二区三区|
日韩人妻不卡一区二区三区|
精品人妻中文av一区二区三区|
91在线视频一区|
亚洲日韩精品国产一区二区三区|
无码国产精品一区二区免费I6|
伊人久久一区二区三区无码|
中字幕一区二区三区乱码|
国产精品久久一区二区三区|
2021国产精品一区二区在线|
国产主播福利一区二区|
成人精品一区二区激情|
国产成人片视频一区二区
|
亚洲AV无码一区二区三区牲色|
亚洲AV无码一区二区大桥未久|
精品亚洲福利一区二区|