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

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

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

首先打開模板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}"

加上這串代碼后，恭喜你，重要的一步已經(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){} });});

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

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

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

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

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

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

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

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

ygments是一個Python庫，可以用于語法高亮和代碼著色。它支持超過500種編程語言和文本格式，并提供多種輸出格式。在本教程中，我們將介紹如何安裝和使用Pygments。

安裝

要使用Pygments庫，你需要先安裝它。你可以使用以下命令來安裝它：

pip install pygments

使用

一旦你安裝了Pygments庫，你就可以開始使用它來進行語法高亮和代碼著色了。

以下是一個簡單的例子，演示了如何使用Pygments來對Python代碼進行語法高亮：

from pygments import highlight
from pygments.lexers import PythonLexer
from pygments.formatters import HtmlFormatter

code = """
def hello_world():
    print('Hello, World!')
"""

highlighted_code = highlight(code, PythonLexer(), HtmlFormatter())
print(highlighted_code)

在這個例子中，我們首先導入了highlight函數(shù)、PythonLexer和HtmlFormatter類。接著，我們定義了一個包含Python代碼的字符串。然后，我們使用highlight函數(shù)對該字符串進行語法高亮，將其轉換為HTML格式，并將其打印出來。

在這個例子中，我們使用了PythonLexer來指定要高亮的語言類型。Pygments支持多種編程語言，每種語言都有一個對應的Lexer。我們還使用了HtmlFormatter類來指定輸出格式。

其他輸出格式

除了HTML格式外，Pygments還支持多種輸出格式。以下是一些常用的輸出格式：

TerminalFormatter：將高亮后的代碼輸出到終端上。
LatexFormatter：將高亮后的代碼輸出到LaTeX格式的文檔中。
ImageFormatter：將高亮后的代碼輸出為圖片格式。

你可以使用不同的輸出格式來滿足不同的需求。

自定義樣式

Pygments提供了許多預定義的樣式，但是你也可以自定義樣式。你可以使用pygments.styles模塊中的Style類來定義新的樣式。下面是一個簡單的例子，演示如何創(chuàng)建一個新的樣式：

from pygments.style import Style
from pygments.token import Keyword, Name, Comment, String, Error, Number, Operator, Punctuation, Generic

class MyStyle(Style):
    default_style = ""
    styles = {
        Keyword: '#FF0000',
        Name.Function: '#00FF00',
        Comment: '#0000FF',
        String: '#FF00FF',
        Error: '#FF0000',
        Number: '#00FFFF',
        Operator: '#FFFFFF',
        Punctuation: '#FFFFFF',
        Generic: '#FFFFFF'
    }

在這個例子中，我們創(chuàng)建了一個名為MyStyle的新樣式，并將其繼承自Style類。我們定義了一些樣式規(guī)則，指定了不同類型的標記應該如何著色。例如，我們將所有的Keyword標記都著為紅色，將所有的Name.Function標記都著為綠色，等等。

添加新的語言支持

如果你需要支持Pygments中沒有預定義的語言，你可以使用pygments.lexer模塊中的RegexLexer類來創(chuàng)建自己的Lexer。下面是一個簡單的例子，演示如何創(chuàng)建一個新的Lexer：

from pygments.lexer import RegexLexer
from pygments.token import *

class MyLexer(RegexLexer):
    name = 'MyLexer'
    tokens = {
        'root': [
            (r'\d+', Number),
            (r'[a-zA-Z]+', Name),
            (r'#.*', Comment),
            (r'\s+', Whitespace)
        ]
    }

在這個例子中，我們創(chuàng)建了一個名為MyLexer的新Lexer，并將其繼承自RegexLexer類。我們定義了一些規(guī)則，指定了不同的正則表達式應該匹配哪些類型的標記。例如，我們使用\d+來匹配所有數(shù)字，并將其標記為Number類型，使用[a-zA-Z]+來匹配所有字母，并將其標記為Name類型，等等。

其他高級用法

除了自定義樣式和添加新的語言支持外，Pygments還提供了一些其他的高級用法，例如使用自定義過濾器和自定義輸出格式。如果你想深入了解Pygments的高級用法，請查看官方文檔。

總結

Pygments是一個非常有用的Python庫，可以用于語法高亮和代碼著色。在本教程中，我們介紹了如何安裝Pygments，以及如何使用它來對代碼進行語法高亮和著色。我們還簡單介紹了一些常見的輸出格式和高級用法。希望這個教程對你有所幫助，讓你更好地了解Pygments的用法。

言

在前面幾期的博文中，我們討論了如何使用面向對象的方式來編寫Vue代碼，以提高代碼的可維護性和可擴展性。然而，隨著我們探索新的語法和特性，發(fā)現(xiàn)在VSCode中并未找到相應的插件支持，這嚴重影響了我們的開發(fā)體驗。因此，為了讓我們的開發(fā)環(huán)境緊跟最新的語法，從本期開始，我們將陸續(xù)介紹如何自制VSCode語言插件，以適配新的語法。

VSCode語言插件的制作是一個復雜的過程，但在本系列教程中，我們將盡量簡明扼要地介紹每個必要的流程和代碼片段。通過自制插件，我們可以為VSCode增添針對Vue的智能提示、語法高亮、代碼片段以及其他便利功能，極大地提升我們的開發(fā)效率和舒適度。

為什么需要自制VSCode語言插件？

VSCode作為一款輕量級且功能強大的代碼編輯器，受到了廣大開發(fā)者的喜愛。其擁有豐富的擴展生態(tài)系統(tǒng)，幾乎涵蓋了所有主流編程語言和框架。然而，隨著面向對象插件的不斷發(fā)展，新的語法和特性不斷涌現(xiàn)，這些新功能可能并未得到官方插件的支持。

在Vue生態(tài)系統(tǒng)中，由于其靈活性和易擴展性，社區(qū)經(jīng)常會提出新的語法糖、指令、裝飾器等特性。這些新特性對于Vue開發(fā)者來說非常有吸引力，但由于VSCode未提供相應的官方支持，我們的開發(fā)體驗可能會受到限制，比如缺乏智能提示、錯誤提示等功能。

為了解決這一問題，自制VSCode語言插件成為了一種解決方案。通過自己開發(fā)插件，我們可以根據(jù)需要添加新的語法支持，從而讓VSCode完美適配我們使用的Vue版本，提供更加便捷的開發(fā)體驗。

自制VSCode語言插件的復雜性

自制VSCode語言插件是一項挑戰(zhàn)性的任務，需要對插件開發(fā)流程有一定了解，并且熟悉VSCode插件開發(fā)的相關API和機制。不過，本系列教程將盡量降低難度，以簡單易懂的方式呈現(xiàn)插件開發(fā)的關鍵步驟和技巧。

我們將主要關注以下幾個方面(分幾期講)：

語法高亮：通過定義語法規(guī)則，使得Vue代碼在編輯器中能夠得到良好的顏色標識，增加代碼的可讀性。
智能提示：為Vue的特定語法和指令添加智能提示功能，讓開發(fā)者在編寫代碼時能夠得到即時的建議和補全。
錯誤檢查：針對新語法進行錯誤檢查，及時發(fā)現(xiàn)并提示代碼中的問題，避免在編譯過程中產(chǎn)生錯誤。
代碼片段：提供常用代碼片段，簡化重復性的代碼編寫過程。

雖然插件開發(fā)過程相對復雜，但一旦掌握了相關技能，將為我們帶來巨大的便利和滿足感。讓我們一起開啟自制VSCode語言插件的奇妙之旅吧！

創(chuàng)建項目

安裝yo generator-code

bash復制代碼npm install -g yo generator-code

這個腳手架會生成一個可以立馬開發(fā)的項目。

使用yo來生成項目骨架

bash復制代碼yo code
# 根據(jù)引導 一步一步創(chuàng)建所需要的項目骨架
# What type of extension do you want to create? 這一步選擇New Language Support
# URL or file to import, or none for new: 遷移現(xiàn)成的textMate語法 直接回車
# What's the name of your extension? () 輸入拓展名稱 這我輸入vs-template-lang
# What's the identifier of your extension template-lang
# What's the description of your extension? () 輸入插件描述
# Language id: () 這里先隨便輸入 項目中用不到
# Language name: () 這里先隨便輸入 項目中用不到
# File extensions: 拓展名 先隨便寫 后續(xù)也用不到
# Scope names: () source.后綴名
# Initialize a git repository? (Y/n) y

回答了一大堆問題之后，YO會創(chuàng)建一個新的插件，其結構如下

由于我們并沒有創(chuàng)建新的語言，只是在現(xiàn)有的語言基礎上支持新的語法，所以需要刪除生成的package.json中的languages配置。

運行插件

在編輯器內(nèi)按F5，這會在新的開發(fā)窗口中編譯&運行拓展

可以看出，目前template是沒有任何語法高亮以及智能提示的，現(xiàn)在vscode只會template屬性值當作字符串處理，我們需要為其定義不同的語法高亮規(guī)則

語法高亮

語法高亮在代碼編輯器中決定源代碼的顏色和樣式，它的主要職責是為關鍵字（例如JavaScript中的if、for）、字符串、注釋、變量名等語法元素提供著色。在VSCode中，語法高亮是通過使用TextMate語法進行定義的。如果你想深入了解TextMate語法的工作原理和用法，我強烈建議閱讀這篇文章：TextMate語法指南。

TextMate語法是一種強大的語法定義格式，它允許我們明確定義不同語法元素的匹配規(guī)則和樣式信息。在開發(fā)自定義的語法高亮插件時，理解TextMate語法的原理對于正確實現(xiàn)各種代碼元素的高亮非常重要。

通過TextMate語法，我們可以靈活地指定如何匹配特定的語法結構，例如，我們可以定義一個用于匹配JavaScript中的變量名的正則表達式，然后為匹配到的變量名指定特定的顏色和樣式。類似地，我們可以定義其他語法元素的規(guī)則，以實現(xiàn)精確的代碼高亮效果。

總的來說，語法高亮是代碼編輯器中一個非常重要的功能，它不僅使代碼更加美觀，還提供了更好的可讀性和編碼體驗。通過深入理解TextMate語法，并根據(jù)具體語言的特性來定義相應的規(guī)則，我們可以開發(fā)出功能強大、高度定制化的語法高亮插件，為開發(fā)者提供更優(yōu)秀的編輯環(huán)境。

配置grammars
提煉一下我們的需求, 以需求為導向來一步步實現(xiàn)我們的所需的功能:

在ts文件中@Component中的template值需要支持html語法，而且在html的基礎支持vue的模板語法以及我們自定義的語法
在ts文件中@Component中的style值需要支持css語法基于以上的需求，我們在package.json中將我們定義的TextMate規(guī)則作用到ts中，package.json定義如下:

json復制代碼
{ "name": "template-lang", "displayName": "vs-template-lang", "description": "vuGualr template", "version": "0.0.1", "engines": { "vscode": "^1.81.0" }, "categories": [ "Programming Languages" ], "contributes": { "grammars": [ { "path": "./syntaxes/inline-template.json", "scopeName": "inline-template.vg", "injectTo": [ "source.ts" ], "embeddedLanguages": { "text.html": "html", "source.css": "css" } } ] } }

"injectTo": ["source.ts"]：表示將這個語法規(guī)則注入到 source.ts 這個作用范圍中。這意味著當在 TypeScript 文件中遇到符合"./syntaxes/inline-template.json規(guī)則時，會應用 inline-template.vg 這個語法規(guī)則來處理。
"embeddedLanguages": { ... }：用于定義嵌套語言。在這里，它定義了 text.html、source.css 和 source.js 三種嵌套語言。嵌套語言表示在當前語言中可以包含其他語言的代碼塊，例如在 TypeScript 中嵌套 HTML、CSS。
"scopeName": "inline-template.vg"：表示這個語法規(guī)則的作用范圍名稱。作用范圍名稱用于標識文本的語法類型，它會被用于對文本進行語法高亮。

inline-template.json

json復制代碼{
    // 表示這個語法規(guī)則的作用范圍名稱。作用范圍名稱用于標識文本的語法類型
    "scopeName": "inline-template.vg",
    "injectionSelector": "L:meta.decorator.ts -comment -text.html",
    // 表示一系列的匹配規(guī)則
    "patterns": [
      {
        "include": "#inlineTemplate"
      }
    ],
    "repository": {
      "inlineTemplate": {
        // 在@Component中template:開始匹配
        "begin": "(template)\\s*(:)",
        "beginCaptures": {
          "1": {
            "name": "meta.object-literal.key.ts"
          },
          "2": {
            "name": "meta.object-literal.key.ts punctuation.separator.key-value.ts"
          }
        },
        // 用于匹配 `,` 或 `}`，但不會包含在匹配結果中
        "end": "(?=,|})",
        "patterns": [
          {
            // 引用vgTemplate規(guī)則
            "include": "#vgTemplate"
          }
        ]
      },
      "vgTemplate": {
        // 以`或者'或者"開始
        "begin": "\\G\\s*([`|'|\"])",
        "beginCaptures": {
          "1": {
            "name": "string"
          }
        },
        // `\1` 是一個反向引用，表示匹配到的內(nèi)容必須與前面捕獲組中的內(nèi)容相同，
        // 這里指的是 `([`|'|"])` 中匹配到的單引號、雙引號或反引號
        "end": "\\1",
        "endCaptures": {
          "0": {
            "name": "string"
          }
        },
        // 表示匹配到的內(nèi)容應用的作用范圍名稱
        "contentName": "text.html",
        "patterns": [
          {
            // 引用了名為 `text.html.derivative` 的規(guī)則。
            // 這個規(guī)則定義了匹配一般的 HTML 標簽內(nèi)容的語法規(guī)則
            "include": "text.html.derivative"
          }
        ]
      }
    }
  }

"injectionSelector": "L:meta.decorator.ts -comment -text.html"：表示在哪些作用范圍中注入這個語法規(guī)則。L:meta.decorator.ts 表示注入到 TypeScript 中的裝飾器作用范圍中，-comment -text.html 表示排除注釋和 HTML 作用范圍。這樣配置后，inline-template.vg 的語法規(guī)則會應用于 TypeScript 文件的裝飾器中，但不會影響注釋和 HTML 部分，L:代表注入的語法添加在現(xiàn)有語法規(guī)則的左邊。也就是說我們注入的語法規(guī)則會在任何現(xiàn)有語法規(guī)則之前生效
"inlineTemplate"匹配范圍是template:開始到,或者} 但不含,或者}，舉例說明一下:
js復制代碼
@Component({ styleUrls: ['./demo.less'], template: `<div></div>`}) export default class AngularDemo{}
從這個例子來看，結束標志是}但不包含}也就是說真正匹配的范圍是 `<div></div>`注意第一個`前還有一個空格
js復制代碼
@Component({ template: `<div></div>`, styleUrls: ['./demo.less'], }) export default class AngularDemo{}
從這個例子來看，結束標志是,但不包含,也就是說真正匹配的范圍是 `<div></div>`注意第一個`前還有一個空格
插件運行效果
我們可以看到現(xiàn)在template值不是字符串樣式，具備了html的語法高亮了，離目標又進了一步
目前我們還只是對template值這個大的范圍定義了規(guī)則，還有插值語法屬性綁定語法事件綁定語法等沒實現(xiàn), 本文中以插值語法為例，其他語法的實現(xiàn)就不一一詳細描述了。
實現(xiàn)插值語法的高亮效果
改造package.json 由于我們的template語法不僅在行內(nèi)模板生效，也在單獨的html的文件中生效，所以單獨提取template.vg規(guī)則
json復制代碼
"contributes": { "grammars": [ { "path": "./syntaxes/inline-template.json", "scopeName": "inline-template.vg", "injectTo": [ "source.ts" ], "embeddedLanguages": { "text.html": "html", "source.css": "css" } }, { "path": "./syntaxes/template.json", "scopeName": "template.vg", "injectTo": [ "text.html.derivative", "source.ts" ], "embeddedLanguages": { "text.html": "html", "source.css": "css" } } ] }
編寫template規(guī)則
json復制代碼
{ "scopeName": "template.vg", // 在HTML 作用范圍該規(guī)則生效 "injectionSelector": "L:text.html -comment", "patterns": [ { // 插值語法匹配規(guī)則 "include": "#interpolation" } ], "repository": { "interpolation": { "begin": "{{", "beginCaptures": { "0": { "name": "punctuation.definition.block.ts" } }, "end": "}}", "endCaptures": { "0": { "name": "punctuation.definition.block.ts" } }, "patterns": [ { "include": "#expression" } ] }, "expression": { "name": "meta.expression.ng", "patterns": [ { "include": "#identifiers" } ] }, "identifiers": { "patterns": [ { // 變量名匹配規(guī)則 "name": "variable.other.readwrite.ts", "match": "[_$[:alpha:]][_$[:alnum:]]*" } ] } } }
injectionSelector（注入選擇器）來指定在HTML作用范圍內(nèi)生效的規(guī)則，但這個選擇器不會在注釋中中生效。
解釋下為什么在inline-template.vg中不需要引用template.vg規(guī)則。原因在于，inline-template.vg規(guī)則中已經(jīng)聲明了text.html范圍。由于inline-template.vg是在template.vg中嵌套的，它會繼承template.vg的作用范圍，因此我們無需在inline-template.vg中額外引用template.vg的規(guī)則。
通過這種方式，我們可以在不產(chǎn)生沖突的情況下，有效地定義不同范圍內(nèi)的樣式，使得代碼高亮在Vue模板中得到正確的應用，這樣的設計使得我們能夠更加靈活地管理規(guī)則，并確保在不同層級的嵌套中，樣式能夠正確地展示。這是Vue代碼高亮插件開發(fā)中值得關注的一點，也是提高插件質(zhì)量和穩(wěn)定性的重要步驟。
插件運行效果如下:
我們可以看到現(xiàn)在變量高亮正常顯示了，不過目前還有很多問題，插值語法內(nèi)不僅僅只有變量，還有字符串，數(shù)字等。
支持字符串(其他的類似): 在規(guī)則中加入如下規(guī)則即可
json復制代碼
"qstringDouble": { "name": "string.quoted.double.ts", "begin": """, "beginCaptures": { "0": { "name": "punctuation.definition.string.begin.ts" } }, "end": "(")|((?:[^\\n])$)", "endCaptures": { "1": { "name": "punctuation.definition.string.end.ts" }, "2": { "name": "invalid.illegal.newline.ts" } }, "patterns": [ { "include": "#stringCharacterEscape" } ] }, "qstringSingle": { "name": "string.quoted.single.ts", "begin": "'", "beginCaptures": { "0": { "name": "punctuation.definition.string.begin.ts" } }, "end": "(\')|((?:[^\\n])$)", "endCaptures": { "1": { "name": "punctuation.definition.string.end.ts" }, "2": { "name": "invalid.illegal.newline.ts" } }, "patterns": [ { "include": "#stringCharacterEscape" } ] }, "stringCharacterEscape": { "name": "constant.character.escape.ts", "match": "\(x\h{2}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.|$)" }

總結

本文詳細介紹了如何編寫語法高亮插件，為VSCode中的Vue 面向對象插件代碼提供良好的顏色標識，以提升代碼的可讀性。盡管我們在此只給出了一個簡單的示例，但是實際開發(fā)一個完整的語言插件是相當復雜的過程。

在插件開發(fā)的過程中，我們面臨著諸多挑戰(zhàn)，包括對語法規(guī)則的定義、智能提示的實現(xiàn)、錯誤檢查的處理以及代碼片段的提供。這些都需要深入理解VSCode插件開發(fā)的相關API和機制，以及對目標語言的深刻理解。

本文雖然無法詳盡地展示每個細節(jié)，但我們希望通過拋磚引玉，給各位道友提供了關鍵的思路和基本的開發(fā)過程。自制VSCode語言插件是一項具有挑戰(zhàn)性但又極具成就感的任務。隨著我們逐步學習和實踐，我們相信能夠越來越熟練地開發(fā)出功能強大的插件，為自己和其他開發(fā)者帶來更加優(yōu)秀的開發(fā)體驗。

工具篇的道路任重而道遠，本文只是一個起點，未來還有許多知識和技巧等待我們探索和應用。在接下來的系列文章中，我們將持續(xù)探討更多有關VSCode語言插件的內(nèi)容，包括智能提示、錯誤檢查和代碼片段等方面的開發(fā)，敬請期待！

讓我們攜手共進，共同開發(fā)出更加優(yōu)秀的VSCode語言插件，為開發(fā)者的工作帶來更多便利與創(chuàng)造力。未完待續(xù)，敬請期待下一篇的精彩內(nèi)容！

原文鏈接：https://juejin.cn/post/7264176460755566652

在線咨詢

上一篇：2017年最重要的HTML5開發(fā)手冊，傳播正能量
下一篇：整理關于html子頁面刷新父頁面的功能說明

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商