Hyppää sisältöön

HTML-esikatselu-liitännäinen

Täysin todenmukainen, reaaliaikainen esikatselu aktiivisesta HTML-asiakirjasta (ja PHP-asiakirjasta), piirrettynä oikealla selainmoottorilla (QtWebEngine) telakoitavaan paneeliin. Toisin kuin Markdown-esikatselu, tämä piirtää CSS:n, JavaScriptin, verkkokirjasimet ja kaiken muun täsmälleen niin kuin selain tekisi.

Saatavuus — kaikki lataukset eivät sisällä sitä

HTML-esikatselua ajaa QtWebEngine, täysimittainen selainmoottori, ja se on vastaavasti suuri. Siksi se on valinnainen, ja se, mikä lataus sinulla on, ratkaisee, saatko sen.

  • macOS — OctoEdit julkaistaan kahtena pakettina: yhtenä HTML-esikatselun kanssa ja kevyempänä ilman sitä. Valitse lataus, jossa kerrotaan sen sisältävän HTML-esikatselun, niin esikatselu on siellä heti kun käynnistät editorin. Jälkikäteen asennettavaa lisäosaa ei ole: paketti ilman esikatselua ei voi saada sitä myöhemmin, joten lataa sen sijaan toinen.
  • Windows — esikatselun voi myös lisätä olemassa olevaan asennukseen myöhemmin erillisenä HTML-esikatselulatauksena, jonka purat siihen kansioon, johon OctoEdit on asennettu, ja käynnistät sitten editorin uudelleen.

Jos Näytä ▸ HTML-esikatselu puuttuu valikosta, kopiosi ei sisällä esikatselua. Markdown-esikatselu ei tarvitse selainmoottoria ja on aina käytettävissä.

Lähteestä kääntäminen: esikatselu sijaitsee CMake-valinnan MTE_ENABLE_HTML_PREVIEW takana — katso BUILDING.md paketointia ja lisensointia koskevien huomautusten osalta.

Mistä sen löytää

Näytä ▸ HTML-esikatselu avaa (tai sulkee) esikatselutelakan nykyiselle välilehdelle.

Miten se käyttäytyy

  • Reaaliaikainen piirto. Esikatselu piirretään uudelleen kirjoittaessasi (viiveellä; viive löystyy hyvin suurissa tiedostoissa).
  • Täysin todenmukainen. Tyylitiedostot, skriptit, kuvat ja muut resurssit ladataan suhteessa asiakirjan kansioon, joten sivu esikatsellaan niin kuin se näkyisi selaimessa.
  • Linkit kansioihin. Paikalliseen kansioon osoittavan linkin napsauttaminen lataa tuon kansion hakemistoasiakirjan (index.html / index.htm / index.xhtml) hakemistolistauksen sijaan.
  • Avaa selaimessa. Työkalurivi avaa levyllä olevan tiedoston (tai alla olevissa PHP-palvelintiloissa elävän URL-osoitteen) oletusselaimessasi.
  • Paneelin koko. Esikatselu pitää osuutensa ikkunasta kiinteän leveyden sijaan, joten se kasvaa ja kutistuu ikkunan mukana — katso Tallennettu asettelu.

Yksi välähdys, kun ikkuna piirretään CPU:lla

Esikatselu tuo selainmoottorin editorin ikkunaan, ja kun Ikkunan piirtotapa on CPU, ikkuna on luotava uudelleen, jotta sille tehdään tilaa. Siksi editorin ikkuna välähtää kerran — kun avaat HTML-esikatselun istunnossa ensimmäisen kerran, eikä sen jälkeen enää koskaan. Oletus, GPU, välttää tämän kokonaan; katso Asetukset ▸ Yleiset ▸ Ikkunan piirtotapa.

Esikatselun näkyvyys

Esikatselun näkyvyys muistetaan tiedostokohtaisesti, sekä istunnon aikana että uudelleenkäynnistysten yli:

  • Verkkotiedostot (.html, .htm, .xhtml sekä .php / .phtml / .php3 / .php4) avaavat esikatselun itsestään, kun katsot niitä ensimmäistä kertaa.
  • Muut tiedostot eivät tee niin — mutta voit avata esikatselun mille tahansa tiedostolle komennolla Näytä ▸ HTML-esikatselu, ja se piirtää tuon tiedoston HTML:nä.
  • Istunnon sisällä valintasi välilehdelle palautetaan, kun palaat siihen.
  • Uudelleenkäynnistysten yli nimenomainen valintasi tiedostolle muistetaan: käsin tehty sulkeminen pysyy suljettuna seuraavalla kerralla, kun avaat tuon tiedoston, ja esikatselu, jonka avasit tiedostolle, joka ei avaisi sitä itsestään, avautuu uudelleen. Tiedostot, joita et koskaan nimenomaisesti koskettanut, noudattavat automaattisen avauksen oletusta joka kerta.

PHP:n esikatselu

PHP suoritetaan palvelimella, joten QtWebEngine ei voi ajaa sitä suoraan. Valitse, miten .php-tiedostoja käsitellään, kohdassa Asetukset ▸ Liitännäiset ▸ HTML-esikatselu:

Tila Mitä se tekee Parhaiten sopii
Ei käytössä Näyttää ohjesivun; ei koskaan suorita tai hae mitään. PHP-esikatselun kytkemiseen pois.
Suorita PHP:llä (komentorivi) Putkittaa asiakirjan paikallisen php-ohjelman läpi ja piirtää sen tulosteen. Ajetaan PHP:n CLI-SAPI-liittymällä. Mallipohjiin ja itsenäisiin tiedostoihin, jotka tulostavat HTML:ää.
Suorita PHP:llä (sisäänrakennettu palvelin) Palvelee asiakirjaa PHP:n sisäänrakennetun verkkopalvelimen (php -S) kautta, jonka editori käynnistää ja pysäyttää puolestasi. Ajetaan verkko-SAPI-liittymällä. Kokonaisiin sivuihin — phpinfo(), $_SERVER, istunnot, reititys.
Käytä omaa palvelintasi (URL) Kuvaa avoimen tiedoston URL-osoitteeksi palvelimella, jota sinä ajat (Apache, nginx, Docker, php artisan serve …). Olemassa olevaan paikalliseen kehitysympäristöön.

PHP-ohjelman polku ja Päivitä automaattisesti kirjoitettaessa koskevat sekä komentorivi- että sisäänrakennettu palvelin -tiloja. Jätä polku tyhjäksi, jolloin haetaan PATH-muuttujasta ja tavallisista asennuspaikoista (macOS:ssä Finderistä käynnistetty sovellus ei peri komentotulkkisi PATH-muuttujaa, joten anna koko polku, esimerkiksi /opt/homebrew/bin/php).

Komentorivi vastaan sisäänrakennettu palvelin

Nämä kaksi tilaa ajavat molemmat paikallista php-ohjelmaa, mutta eri ympäristöissä (SAPI-liittymissä), ja se muuttaa sitä, mikä toimii:

  • Komentorivi (CLI-SAPI). Nopea ja yksinkertainen — se vain näyttää sen, mitä skripti tulostaa. Mutta phpinfo() piirtyy pelkkänä tekstinä, ja verkko-ominaisuudet kuten $_SERVER, istunnot ja reititys ovat rajallisia tai tyhjiä. Erinomainen tiedostoille, jotka enimmäkseen tuottavat HTML:ää.

  • Sisäänrakennettu palvelin (verkko-SAPI). Editori käynnistää pienen php -S 127.0.0.1:<port> -palvelimen tiedostosi kansion juureen ja lataa sivun HTTP:n yli, joten se piirtyy täsmälleen kuten oikealla palvelimella: phpinfo() on tyylitelty HTML-sivu, $_SERVER on täytetty, ja istunnot sekä resurssi- ja aliresurssipyynnöt toimivat kaikki.

  • Palvelin käynnistetään vasta, kun esikatselet .php-tiedostoa tässä tilassa ensimmäisen kerran, sitä käytetään uudelleen piirtokertojen välillä, se käynnistetään uudelleen, jos vaihdat toisessa kansiossa olevaan tiedostoon, ja se pysäytetään, kun suljet editorin tai poistut tilasta.

  • Se sitoutuu vain osoitteeseen 127.0.0.1, joten siihen ei koskaan pääse verkosta.
  • Myös tallentamattomat muutokset esikatsellaan: elävä puskurisi kirjoitetaan väliaikaiseen tiedostoon asiakirjan kansioon (jotta __DIR__ ja suhteelliset include- ja require-viittaukset ratkeavat oikein), ja sitä palvellaan. Väliaikainen tiedosto korvataan joka piirtokerralla ja poistetaan, kun poistut tai vaihdat tilaa.

Tip

Jos PHP-sivu näkyy tekstinä eikä piirrettynä sivuna, vaihda komentorivi-tilasta sisäänrakennettu palvelin -tilaan — se on CLI- ja verkko-SAPIn ero eikä virhe.

Käytä omaa palvelintasi (URL)

Jos ajat PHP:tä jo verkkopalvelimen takana, osoita esikatselu siihen:

  • Perus-URL — palvelimesi juuri, esimerkiksi http://127.0.0.1:8000.
  • Asiakirjajuuri — paikallinen kansio, jota palvellaan tuossa perus-URL-osoitteessa. Avoin tiedosto kuvataan sen alla olevaksi URL-osoitteeksi. Jätä se tyhjäksi palvellaksesi tiedostoa nimen perusteella perus-URL-osoitteesta. Jos tiedosto on asiakirjajuuren ulkopuolella, esikatselu ilmoittaa siitä, jotta voit korjata kuvauksen.

Kun PHP:tä ei löydy

Komentorivi- ja sisäänrakennettu palvelin -tiloissa esikatselu näyttää lyhyen virheen, joka selittää, miten polku asetetaan tai PHP asennetaan, jos php-ohjelmaa ei löydy. Ei käytössä -tilan ohjesivu linkittää myös PHP-latauksiin ja näyttää, miten palvelin käynnistetään.

Katso myös