Kuidas luua kohandatud VuePressi teema Vuetify abil

Kui olete juba VuePressist kuulnud, võiksite teada saada, et see on Vue.js Looja Evan You võimsalt minimaalselt staatiline saitide generaator. VuePress teeb tekstimahukate dokumentide veebisaitide loomise lihtsaks, palju lihtsamaks kui Nuxt.js.

Kuid kas teadsite, et VuePressil on Vue peale ehitatud kohandatud kujundussüsteem, mis võimaldab teil luua oma täielikult esiletoodud ja kohandatud funktsioonidega teemasid?

Selles artiklis käsitleme lähemalt, kuidas saate alustada oma kohandatud teema loomist, mõnda parimat tava, mida tuleks järgida, ja kuidas integreerida kasutajaliidese mustriteeki nagu Vuetify kiireks paigutuse loomiseks.

Võtame näiteks VuePressi dokumentatsiooni veebisaidi ise. See kasutab vaiketeemat. Vaiketeema tuleb karbist välja paljude kohandatud funktsioonidega, nagu sisseehitatud otsing, kohandatavad navigeerimis- ja külgribad ning isegi automaatselt loodud GitHubi link ja lehe redigeerimise lingid, mis on suurepärased, kui majutate oma veebisaiti kasutades GitHubi lehed.

VuePressi veebisait

Saate luua teemasid, mis on täpselt sama esiletõstetud kui vaiketeema. Kui olete varem arendamiseks kasutanud Vue.js, näete kohandatud teema loomisel, et arenduskogemus on sarnane. Oma kohandatud teema silumiseks saate kasutada isegi Vue DevToolsi.

Alustame siis

VuePressi projekti seadistamine

Esiteks veenduge, et VuePress oleks teie süsteemi installitud.

npm install -g vuepress

Looge oma VuePressi veebisaidi kaust järgmise käsuga: mkdir my-vuepress-project.

VuePressi olemasoleva projektiga integreerimise kohta lisateabe saamiseks klõpsake siin.

Sisu struktureerimine

VuePressi ilu seisneb selles, et see võimaldab teil oma sisu struktureerida vastavalt oma soovidele. Iga teie projekti märgistusfail kompileeritakse staatiliseks HTML-failiks.

Näiteks võib teie projekt olla üles ehitatud järgmiselt:

Nii et kui teie projektis on sisu, kuidas alustada selle sisu kuvamiseks kohandatud teema loomist?

Kohandatud teema VuePress loomine

Ülaltoodud kaustastruktuuri näites võisite märgata kausta nimega .vuepress. Selles kaustas asuvad teie konfiguratsioon ja kõik VuePress-spetsiifilised failid. Samuti lähevad sinna teie kohandatud teemafailid.

Kohandatud teema loomiseks looge projekti VuePress kataloogis .vuepress sees teemakataloog ja looge siis fail Layout.vue.

Komponent Layout.vue

Komponent Layout.vue on fail, mida VuePress otsib teie teema kutsumisel. Seda kutsutakse üks kord iga teie VuePressi projekti märgistusfaili jaoks.

Näiteks kutsutakse sellele neli korda meie näidisstruktuuriga, millel on neli märgistusfaili (.md).

Veebisaidi sisu renderdamine teie teema sees.

Lihtsaim teema võib olla lihtsalt üks komponent Layout.vue järgmise märgistusega:

Rendeeritava praeguse .md-faili kompileeritud sisu on saadaval spetsiaalse globaalse komponendina .

Veel üks viis, kuidas mõelda faili Layout.vue üle, on teie teema lähtepunkt, sest tegelikkuses nõuab täielikult viimistletud teema enamat kui vaid ühte faili.

VuePressi teema struktureerimine

Milline on kohandatud VuePress-teema soovitatav struktuur? Kehtivaid reegleid pole, kuid paljud vabas looduses olevad teemad on üles ehitatud järgmiselt:

See struktuur võimaldab teil korraldada oma üksikud lehepaigutused (näiteks postituse ja avalehe) paigutuste kaustas ja seejärel hoida üksikud komponendid (mida need paigutused kasutavad) komponentide kaustas.

Integreerige kasutajaliidese mustrite kogu nagu Vuetify oma kohandatud teemasse

Lõppkokkuvõttes on VuePressi kohandatud teemad lihtsalt Vue-rakendused, nii et saate teha kõike, mida teete tavaliselt oma rakenduste sees. Näiteks saate hõlmata kasutajaliidese mustriteeki oma kohandatud teemasse alates npm.

Terminalist sisestage CD oma .vuepress kausta ja tehke siis npm install vuetify - salvestage, et Vuetify saaksite oma kohandatud teema juurde.

Nüüd saate täielikult kasutada kõiki teema sisemisi teeke ja saate teemafaile täielikult kohandada.

Home.vue

Post.vue

Teema kohandamine lehe andmetega

Kui teil on paigas kaustade struktuur ja individuaalsed paigutuskomponendid, siis kuidas neid üksikuid komponente saidil Layout.vue renderdada?

Teie individuaalsete märgistusfailide puhul pakub VuePress teile palju kohandamisvõimalusi. Võite oma märgistusfailide ülaosale lisada YAML-i esiprobleemi, andmeseeria keele, mida tavaliselt kasutatakse konfigureerimisel, ja VuePress tõlgendab seda teie jaoks automaatselt.

Iga kord, kui faili Layout.vue kutsutakse, on teie failis määratletud YAML koos teiste VuePressi loodud metaandmetega saadaval ka teie komponendil Layout.vue sellisel kujul. $.

Näiteks faili / guides/getting-started.md töötlemisel võib teie see. $ Lehemuutuja välja näha järgmine:

{
  "viimati ajakohastatud": 1524847549000,
  "path": "/ guides/getting-started.html",
  "pealkiri": "Juhendid - alustamine",
  "esikülg": {}
}

Seejärel saate neid andmeid kasutada teema kohandamiseks oma maitse järgi. Näiteks üks asi, mida võite teha, on erineva HTML / CSS-i paigutuse muutmine erinevaks välimuseks, sõltuvalt faili teest.

Veel üks sisestatav muutuja on see. $ Sait, mis annab teile teavet kogu teie veebisaidi kohta.

{
  "pealkiri": "VuePress",
  "description": "Vue-toega staatiline saitegeneraator",
  "alus": "/",
  "lehed": [
    {
      "viimati ajakohastatud": 1524027677000,
      "tee": "/",
      "pealkiri": "VuePress",
      "esikülg": {}
    },
    ...
  ]
}

Üks näide selle kohta, mida saate selle.

Selle saidi $ ja selle $ $ omadused sisestatakse kausta .vuepress igasse komponenti.

Kõigi teie komponentidesse sisestatud andmete kohta lisateabe saamiseks klõpsake siin.

Lisaressursid

Siin on GitHubis kolm kohandatud VuePressi teemat, mida saate kasutada omaenda loomise viitena.

  • Indigo
  • Yubisaki
  • Valle

Võite ka need otse installida.

Klõpsake siin, et õppida neid teemasid otse oma projekti installima.

Järeldus

Lõppkokkuvõttes annab VuePressi teema loomine teile sama palju paindlikkust kui rakenduse Vue.js loomine. Võite oma teema kujundada viisil, mis sobib teile kõige paremini.

Selles postituses tutvustasime mõningaid parimaid tavasid, andmeid, mida saate kasutada oma teemakomponentide sees, ja ka seda, kuidas integreerida paigutuse loomiseks kasutajaliidese teegiga nagu Vuetify.

Hoidke lugemist

  • VuePress vs Nuxt.js
  • Kiirendage VueToolsi abil arengut
  • Kuidas luua Vue.js üleminekuid