Jagamisviis:

Muuda koodi Visual Studio Code for the Webiga (eelvaade)

[See teema on eelväljaande dokumentatsioon ja võib muutuda.]

Disainistuudiost saad saidi koodi redigeerida Visual Studio Code abil Web jaoks. See funktsioon võimaldab teil redigeerida staatilist sisu, HTML-i, CSS-i Liquidi ja JavaScripti järgmiste veebisaidi metaandmete jaoks:

Metaandmed Sisu
Täiustatud vormid (mitmeetapilised vormid) JavaScript
Põhivormid JavaScript
Sisulõigud Kogu toetatud sisu koodilõigu sisu
Loendid JavaScript
Veebifailid Vaadake ja laadige alla meediafaile. Redigeerige teksti (koodi) faile.
Veebilehti Kõik toetatud sisu (keele kohta), JavaScript ja CSS
Veebi mallid Kogu toetatud sisu

Märkus.

Te ei saa luua metaandmete kirjeid, vaid ainult lisada ja redigeerida sisu, koodi ning vaadata/alla laadida failimanuseid.

Visual Studio Code for the Web pakub tasuta, nullinstallita Microsoft Visual Studio Code kogemust, mis töötab täielikult sinu brauseris, võimaldades sul sirvida saidikoodi ja teha kergeid koodimuudatusi kiiresti ja turvaliselt. Lisainfo: Visual Studio Code veebikogemuse jaoks.

Oluline

  • See on eelvaate funktsioon.
  • Eelvaatefunktsioonid ei ole mõeldud kasutamiseks tootmises ja nende funktsioonid võivad olla piiratud. Need funktsioonid on saadaval enne ametlikku väljastamist, et kliendid saaksid sellele varakult juurdepääsu ja võiksid tagasisidet anda.

Demo Visual Studio Code for Web kasutamisest saidi Power Pages muutmiseks.

Märkus.

  • Esimest korda Visual Studio Code Web laadimine võib võtta aega, kuna selle funktsiooni jaoks paigaldatakse vajalikud laiendused.
  • Faili loomise, kustutamise ja ümbernimetamise toiminguid ei toetata.
  • See funktsioon kasutab Power Platform Toolsi veebilaiendit. Veebilaiendeid piirab brauseri liivakast ja seega on neil tavaliste laienditega võrreldes piirangud.
    • Power Platform CLI-d ei toetata.
    • Power Platform Toolsi veebilaienduse funktsioonid on piiratud Power Pages koodi redigeerimise kogemusega.
    • See funktsioon pole saadaval Government Community Cloudis (GCC), Government Community Cloudis (GCC High) ja kaitseministeeriumis (DoD). Nende piirkondade kasutajad kasutavad koodi redigeerimiseks Portaalide haldusrakendust. Vt Koodi redigeerimine portaalide haldusrakenduses lisateabe saamiseks.

Kujundusstuudios saadaoleva koodi redigeerimine

Saate alustada oma saidi koodi muutmist Visual Studio Code for the Web abil Power Pages avalehelt, valides Edit rippmenüüst Muuda saidi koodi valiku.

Disainistuudios saate koodi redigeerida ka järgmistest valdkondadest:

  • Veebilehe koodi redigeerimine tööruumis Lehed
  • Päisemalli kood tööruumist Lehed
  • Kohandatud CSS koodi redigeerimine stiili tööruumis
  • Redigeerige kohandatud JavaScripti koodi mitmeetapiliste vormide jaoks
  • Redigeerige kohandatud JavaScripti koodi tavavormide jaoks
  • Refigeerige loendite kohandatud JavaScripti
  • Redigeerige sisu koodilõike
  • Veebimallide redigeerimine
  • Vaadake ja laadige alla meedia veebifaile (pildid)
  • Tekstipõhiste veebifailide redigeerimine (CSS, JavaScript, muu)

Vaadakem, kuidas neid valdkondi kasutades koodi redigeerida.

Veebilehe koodi redigeerimine tööruumis Lehed

Kui avad Power Pages Design Studio, näed Pages menüüs Edit code valikut1 ja ekraani paremas ülanurgas2.

Redigeerige koodi tööruumist Lehed.

Päisemalli kood tööruumist Lehed

Valige Redigeeri saidipäist ja seejärel Redigeeri koodi, et avada koodiredaktor.

Redigeerige koodi päisest Lehed.

Redigeerige kohandatud CSS-koodi tööruumist Kujundus

Avage Kujundustööruum ja valige saadaval kohandatud CSS menüü Redigeeri koodi, et avada koodiredaktor.

Redigeerige koodi kohandatud CSS-st.

Power Pages Tegevuste vaade

Power Pages Actions vaade, mis on kättesaadav File Exploreri allosas, võimaldab hallata Power Pages saite otse redaktoris. See vähendab vajadust üle minna Power Pages Design Studio'le, võimaldades arendajatel kiiresti toimetajas tavalisi ülesandeid täita.

Saadaolevad toimingud

  • Eelvaate sait
    See toiming tühjendab konfiguratsiooni vahemälu ja avab saidi VS Code'is. See võimaldab arendajatel eelvaadata ja testida saidikoodi muudatusi ilma, et peaks konteksti vahetama Power Pages Design Studio'sse.

  • Open Power Pages disainistuudios
    Pärast koodi muutmist kasuta seda tegevust, et minna Power Pages Design Studiosse. See on kasulik autentimispakkujate, veebirollide ja muude saidisätete konfigureerimiseks, mida ei saa koodiredaktoris redigeerida.

  • Avage VS Code Desktopis
    Kui VS Code Desktop on installitud, avab see toiming saidi töölauarakenduses. Samuti käivitab see saidi allalaadimise, tagades, et kood on kohapeal saadaval ja redigeerimiseks valmis.

Power Pages Tegevuste vaade VS Code.

Liitmise konfliktist teatamine

Kui teete koostööd teiste arendajatega, võib ette tulla olukordi, kus töötate sama lähtekoodiga. Juhul, kui püüate salvestada muudatusi vananenud faili, saate teate, et muudatusi võrrelda või üle kirjutada.

Võrreldes koodi, kuvatakse praegune kood koos teie koodiga ja lubab teil tagasi pöörduda olemasolevate muudatuste juurde, aktsepteerida iga muudatust eraldi või kasutada teie muudatusi ja kirjutada olemasolev sisu üle.

Liitke koodi konfliktid.

Teil on võimalik vaadata viimast sisu ja kas liita või üle kirjutada kood või jätta muudatused kõrvale.

Õpetus: Muuda saidi koodi Visual Studio Code for the Web abil

Selles juhendis juhendad saidi koodi redigeerimist Visual Studio Code for Webiga.

1. samm: Muuda saidikoodi Visual Studio Code for the Web abil

  1. Ava oma veebileht Power Pages Design Studio

  2. Tehke paremas ülanurgas valik Muuda koodi

    Avamine Visual Studio Code. aastal disainistuudiost.

  3. Vali kinnitusdialoogist Open Visual Studio Code.

  4. Logi sisse Visual Studio Code'i, kasutades oma keskkonna mandaateandmeid.

  5. Oodake kuni rakenduse Power Platform Tools veebilaiend käivitub ja veebilehe kood laetakse vasakusse aknasse.

2. etapp: sisu ja koodi uuendamine

  1. Vasakul asetsev avastaja laadib vastavad veebisaidi konfiguratsiooni metaandmed, mida saab muuta rakenduse Visual Code for the Webi abil.

    Avastaja menüü pealkirjata tööruumi jaoks, mis näitab veebifaile.

  2. Tehke vastavates metaandmefailides muudatusi ja vajutage muudatuste salvestamiseks klahvikombinatsiooni Ctrl+S.

  3. Avage kujundusstuudio ja valige Sünkrooni, et eemaldada kõik uuendused oma praeguses kujundusstuudio seansis.

    liides, mis võimaldab kasutajal valida Sync nupu, et sünkroniseerida Visual Studio Code muudatused Design studio.

  4. Valige Preview et näha muudatusi Power Pages saidil.

Visual Studio Code'i kasutamine veebis või Visual Studio Code Desktopis

Kasutajad saavad redigeerida, siluda ja eelvaadata lehe muudatusi Visual Studio Code for the Web abil ilma väliseid tööriistu kasutamata. Visual Studio Code Desktop pakub teisi täiustatud funktsioone kogu saidi metaandmete muutmiseks ning integreerimiseks GitHub, raamistikude ja pideva integreerimise/pideva arenduse (CI/CD) protsessidega.

Funktsioon VS Code veebi jaoks VS Code töölaud
Looge uue veebisaidi konfiguratsiooni metaandmete kirjed No Piiratud veebilehtede, lehemallide, veebimallide, sisulõikude ja veebifailidega.
Otsene saidi redigeerimine Ja No
Saidi metaandmete redigeerimine Piiratud veebilehtede, sisulõikude, tavavormide, mitmeetapiliste vormide, loendite ja veebimallide redigeerimisega. Kõik Power Pages metaandmete konfiguratsioonid
Saidi eelversioon Planeeritud Planeeritud
Power Platform CLI tugi No Ja
Täiustatud protsessori ja salvestusruumiga seotud töövoog - ReactJS või muu raamistiku loomise tööriista tugi No Ja
GitHub integratsioon koos võimalustega nagu koodi sisseregistreerimine, väljavõtmine, konfliktide haldamine ja ühendamine. No Ja

Koodi redigeerimine Portaali haldusrakenduses

Märkus.

  • Visual Studio Code for the Web kasutamine veebilehtede muutmiseks ei ole toetatud Government Community Cloudis (GCC), Government Community Cloudis (GCC High) ega Kaitseministeeriumis (DoD). Nendes piirkondades saavad kasutajad kasutada portaalihalduse rakendust , et teha muudatusi.

Kui regioon ei toeta Web jaoks Visual Studio Code, siis koodiredaktori ikooni / valimine käsurebas avab Portal Management rakenduse.

Liikuge vastavatele kirjetele jaotistes Veebilehed, Tavavormid, Mitmeetapilised vormid, Loendid või Veebimallid, et koodi redigeerida.

Tüüp Koodi asukoht
Veebileht Valige veebilehe kirje. Valige veebilehe sisukirje jaotisest Lokaliseeritud sisu . Lehe koopiat saab redigeerida vahekaardi Üldineväljal Kopeeri (HTML).Kohandatud JavaScripti ja kohandatud koodi saab redigeerida vahekaardil Täpsemalt. CSS
Põhivorm Valige põhivormi kirje. Redigeerige kohandatud JavaScripti vahekaardil Lisasätted.
Mitmeetapiline vorm Valige mitmeastmelise vormi kirje.Valige mitmeastmeline vormietapp vahekaardil Vormi etapid. Redigeerige kohandatud JavaScripti vahekaardil Vormisuvandid .
Loend Valige loendikirje. Redigeerige kohandatud JavaScripti vahekaardil Suvandid .
Veebimall Valige veebimalli kirje. Redigeeri allikat vahekaardil Üldine.

Salvestage kirje ja vaadake üle oma veebisaidi eelversioon, et oma koodi testida.

Vaata ka

  • Last updated on