Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

✏️ Grav-sivujen muokkaaminen etukäyttöliittymästä: asennus ja käyttöoikeudet

✏️ Grav-sivujen muokkaaminen etukäyttöliittymästä: asennus ja käyttöoikeudet

Sisällönhallintaan kirjautuva henkilö avaa hallintapaneelin, etsii sivun 50 muun joukosta, avaa editorin, korjaa otsikon, tallentaa, palaa sivustolle ja päivittää välilehden. Kuusi klikkausta yhtä muokkausta varten. Grav CMS -järjestelmään on olemassa yksinkertainen ratkaisu: Editable with ContentTools -lisäosa upottaa WYSIWYG-editorin suoraan sivuston sivulle. Avaat sivun, klikkaat "muokkaa", korjaat tekstin ja tallennat sen takaisin Markdown-tiedostoon käymättä hallintapaneelissa.

Lisäosaa ei ole päivitetty vuoden 2022 jälkeen (tekijä on virallisesti lopettanut tuen), mutta se toimii vakaasti Grav 1.7 -versiolla ja kattaa perusskenaarion yksinkertaisten Markdown-sivujen muokkaamisesta ilman dynaamista logiikkaa. Asennus vie viisi minuuttia, ja sen jälkeen tekstin muokkaaminen julkisella puolella helpottuu huomattavasti.

Alla on täydellinen opas asennuksesta käyttöoikeuksiin, sisältäen rajoitusten ja vaihtoehdon (Fred) erittelyn.

💡 Pikaopas:

  • Asenna lisäosa GPM:n tai zip-paketin kautta ja kopioi asetukset.
  • Määritä git-sync viemään muutokset repositorioon (valinnainen).
  • Merkitse muokattavat alueet editable-lyhytkoodilla käyttäen yksilöllisiä nimiä.
  • Myönnä site.editable-käyttöoikeudet julkisen puolen käyttäjille.
  • Yhdistä hallinta- ja julkisen puolen istunnot asetuksella session.split: false.
  • Pidä mielessä rajoitus: vain pelkkä Markdown, ei Twig- tai dynaamista sisältöä.

Asennus: GPM:n kautta tai manuaalisesti

Lisäosa asennetaan Grav Package Managerin kautta, joka on vakiotapa minkä tahansa lisäosan asentamiseen Gravissa:

1bin/gpm install editable-contenttools

Suorita komento sivuston juurikansiosta (jossa bin/ sijaitsee). GPM lataa uusimman version ja purkaa sen hakemistoon /user/plugins/editable-contenttools.

Vaihtoehtoisesti voit asentaa manuaalisesti: lataa zip-paketti GitHubista, pura se hakemistoon /user/plugins/ ja nimeä kansio uudelleen muotoon editable-contenttools (ilman -master-päätettä). Rakenteen tulisi näyttää tältä: /user/plugins/editable-contenttools/editable-contenttools.php.

Kopioi asetukset turvalliseen paikkaan

Asennuksen jälkeen muista kopioida asetustiedosto käyttäjähakemistoon:

1cp user/plugins/editable-contenttools/editable-contenttools.yaml user/config/plugins/editable-contenttools.yaml

Tämä vaihe on tärkeä: jos asetukset jäävät lisäosakansioon, ne nollautuvat, kun päivität GPM:n kautta. Vaihtoehtoinen tapa on asentaa Grav Admin -paneelin kautta (Plugins → Add), jolloin järjestelmä luo asetukset automaattisesti hakemistoon user/config/plugins/ eikä manuaalista kopiointia tarvita.

Asetukset: kolme asetusvaihtoehtoa

editable-contenttools.yaml-tiedosto sisältää kolme parametria:

1enabled: true
2git-sync: false
3git-sync-mode: foreground

enabled aktivoi lisäosan. Ilman enabled: true -asetusta editori ei tule näkyviin julkisella puolella, vaikka käyttöoikeudet olisi myönnetty. Oletusarvo on true.

git-sync käynnistää synkronoinnin Git-repositorion kanssa jokaisen tallennuksen jälkeen. Se toimii vain, kun Git Sync -lisäosa on asennettu. Jos sivustosi elää Git -järjestelmässä ja haluat tallentaa jokaisen muutoksen historiaan, aseta tämä arvoon true. Muussa tapauksessa jätä se arvoon false.

git-sync-mode määrittää, odotetaanko synkronoinnin valmistumista ennen hallinnan palauttamista käyttäjälle. foreground tarkoittaa, että "Tallenna"-painike vapautuu vasta, kun commit ja push ovat valmistuneet. background toimii asynkronisesti, mutta joillakin Linux-palvelimilla voi esiintyä ongelmia taustaprosessien kanssa. Useimmissa tilanteissa foreground riittää.

Muokattavien alueiden merkitseminen: [editable]-lyhytkoodi

Esimerkki [editable]-lyhytkoodista Grav-sivun Markdown-tiedostossa

Lisäosa ei tee koko sivusta automaattisesti muokattavaa. Määrittelet, mitä lohkoja voi muokata, käyttämällä [editable]-lyhytkoodia:

1[editable]
2## Section heading
3
4Text that can be edited from the frontend.
5[/editable]

Sivu voi sisältää minkä tahansa määrän tällaisia alueita. Jokaisella alueella on oltava yksilöllinen nimi; muuten ContentTools ei tiedä, minne muutokset tallennetaan.

Nimi-parametri: pakollinen yksilöllisyys

Oletuksena lisäosa antaa nimet automaattisesti (region-0, region-1 ja niin edelleen), mutta on parempi määrittää kuvaavat nimet manuaalisesti:

1[editable name="hero-block"]
2## Main heading
3
4Text that can be edited.
5[/editable]

Kun sivu tallennetaan ensimmäisen kerran frontendin kautta, lisäosa lisää automaattisesti name-parametrin shortcodeen, jos se puuttui. Käytännössä nimet kannattaa määritellä suoraan merkkaamisen yhteydessä, sillä se helpottaa debuggausta (näet selaimen kehittäjätyökaluista, mitä lohkoa olet muokkaamassa).

Kun olet merkinnyt ja tallentanut sivun, vieraile sivustolla käyttäjänä, jolla on site.editable-oikeus, klikkaa vasemmalla olevaa kynäkuvaketta ja muokkaa tekstiä kuten tavallisessa tekstieditorissa. Pidä Shift-näppäintä pohjassa noin kolme sekuntia korostaaksesi kaikki muokattavat alueet.

Voit kokeilla sitä lisäosan demosivustolla (tallennus on poistettu käytöstä, Grav 1.7.46).

Käyttöoikeudet: frontend ja backend

Jotta käyttäjä näkee kynäkuvakkeen, hän tarvitsee muokkausoikeudet. Säännöt eroavat frontend-käyttäjien (sisällönhallinta) ja backend-käyttäjien (ylläpitäjät) välillä.

Frontend-käyttäjät

Käyttäjän on pystyttävä kirjautumaan sisään Grav Login- tai Private Grav -lisäosan kautta. Lisää sen jälkeen seuraava käyttäjätilitiedostoon (user/accounts/username.yaml):

1access:
2 site:
3 login: 'true'
4 editable: 'true'

Ilman site.editable-oikeutta kynäkuvake ei tule näkyviin, vaikka käyttäjä olisi kirjautuneena ja hänellä olisi muita oikeuksia.

Backend-käyttäjät (ylläpitäjät)

Oletuksena Grav pitää admin- ja frontend-istunnot erillään. Jotta ylläpitäjä voi muokata sivuja suoraan sivustolla (kirjautumatta hallintapaneeliin), aseta seuraava system.yaml-tiedostossa (tai hallintapaneelin kautta Configuration → System):

1session:
2 split: false

Tämä yhdistää istunnot: hallintapaneeliin kirjautuminen antaa automaattisesti pääsyn frontend-editoriin. Ylläpitäjä tarvitsee lisäksi admin.super- tai admin.pages-oikeuden käyttäjätilitiedostossaan.

Jos kuvake ei ilmesty kirjautumisen jälkeen, tarkista adminin välimuistiasetukset:

1admin:
2 super: 'true'
3 login: 'true'
4 cache: 'false'

Parametri cache: false poistaa välimuistituksen käytöstä adminille ja saattaa ratkaista ongelman näkymättömän kuvakkeen kanssa.

Rajoitukset: mitä lisäosa ei voi tehdä

Lisäosa toimii yksinomaan puhtaan Markdownin kanssa. Tämä on arkkitehtuurinen rajoitus, ei bugi: ContentTools muokkaa HTML:ää selaimessa, ja lisäosa muuntaa HTML:n takaisin Markdowniksi. Prosessissa kaikki dynaaminen merkintäkoodi korruptoituu. Älä muokkaa sisältöä ContentToolsin kautta, jos se:

  • koostetaan Twig-pohjilla (esimerkiksi modulaariset sivut: lapsilohkot lisää vanhempi dynaamisesti, eikä lisäosa näe niiden lähdekoodia);
  • lisätään muilla lisäosilla (Page Inject ja vastaavat lisäosat lisäävät sisältöä muilta sivuilta, mikä on yksisuuntainen prosessi);
  • muuttuu JavaScriptin avulla selaimessa (liukusäätimet, haitarit ja muut interaktiiviset elementit muunnetaan staattiseksi HTML:ksi);
  • sisältää Gravin Markdown-erikoistageja (kuvat, joissa on ?lightbox- ja ?resize-parametrit, vahingoittuvat HTML → Markdown -muunnoksessa, koska käsittelyparametrit katoavat).

Turvallisuussäännöt ovat yksinkertaiset:

  • Pidä kuvat ja monimutkaiset shortcodet muokattavien alueiden ulkopuolella.
  • Pidä alueet pieninä: määrää ei ole rajoitettu, ja 10 pientä lohkoa on parempi kuin yksi suuri lohko riskeineen.
  • Testaa julkaisun kopiolla tai staging-ympäristössä ennen kuin annat muokkausoikeudet toimittajille.
  • Jos huomaat eroja Markdown-muotoilussa kynäkuvakkeellisen ja kuvakkeettoman version välillä, siirrä kyseinen osa [editable]-alueen ulkopuolelle.

Vaihtoehto: Fred-lisäosa

Jos Editable with ContentTools -lisäosan toiminnallisuus ei riitä, tutustu Frediin, uudempaan Gravin frontend-editoriin, joka myös perustuu ContentToolsiin. Keskeiset erot:

  • Kuvien lataus dialogin kautta (mukana kierto ja peruskäsittely).
  • Sisällön automaattinen paketointi onPageProcessed-tapahtuman kautta, mikä vaatii vähemmän manuaalista shortcode-merkkausta.
  • Aktiivinen kehitys: tekijä ottaa vastaan issueita GitHubissa ja lisää jatkuvasti ominaisuuksia.

Asennus kloonaamalla repositorio hakemistoon /user/plugins/fred:

1cd user/plugins
2git clone https://github.com/BugHunter2k/grav-plugin-fred.git fred

Käyttöoikeudet asetetaan samaan tapaan: site.editor: true käyttäjätilin tiedostossa (huom: site.editor, ei site.editable).

Sekä Editable with ContentTools että Fred ratkaisevat saman ongelman: ne antavat sisällönhallinnoijille työkalun nopeisiin muokkauksiin ilman hallintapaneeliin kirjautumista. Ensimmäinen sopii, jos tarvitset yksinkertaisen, toimivaksi todetun työkalun Markdown-sivuille ilman kokeiluja. Jälkimmäinen toimii, jos haluat enemmän automaatiota ja olet valmis sietämään aktiivisen kehityksen mahdolliset karheudet.

Video: miten ContentTools toimii

Kahden minuutin esittely Grav-sivun muokkaamisesta selaimessa: tekijä näyttää, miten muokattavat alueet korostetaan, muutokset tehdään ja sisältö tallennetaan takaisin Markdowniin. Hyvä tapa nähdä lisäosa toiminnassa ennen asennusta.

⁉️🤔 Usein kysytyt kysymykset

Miksi kynäkuvake ei ilmesty asennuksen jälkeen?

Tarkista neljä asiaa. Ensinnäkin enabled: true lisäosan asetuksissa (user/config/plugins/editable-contenttools.yaml). Toiseksi käyttäjällä on oltava site.editable-oikeus käyttäjätilitiedostossaan. Kolmanneksi backend-käyttäjillä session.split-arvon on oltava false tiedostossa system.yaml. Neljänneksi tyhjennä Gravin välimuisti: bin/grav clear-cache. Yleensä ongelma on joko käyttöoikeuksissa tai jaetuissa istunnoissa.

Voinko muokata modulaarisia sivuja?

Et. Modulaariset sivut kootaan alasivuista Twig-pohjien avulla, mikä on yksisuuntainen prosessi: lisäosa ei pysty "purkamaan" lopputulosta takaisin osiin. Frontendissa näet valmiin HTML:n, mutta lähde (alamoduulien erilliset Markdown-tiedostot) sijaitsee muissa kansioissa, eikä lisäosa tiedä, minne muutokset tallennetaan. Modulaarisilla sivuilla käytä Gravin tavallista hallintapaneelia.

Mitä tapahtuu, jos jätän kuvan [editable]-alueen sisälle?

Gravin Markdown-erikoismerkinnät kuville (parametreilla ?lightbox, ?resize, ?cropResize) vaurioituvat HTML:stä Markdowniin -muunnoksessa. Itse kuva pysyy paikallaan (<img>-tagi muuntuu tavalliseksi Markdowniksi ![](url)), mutta käsittelyparametrit katoavat. Johtopäätös: pidä parametreja sisältävät kuvat aina muokattavan alueen ulkopuolella. Jos kuva on yksinkertainen (ilman parametreja), voit teknisesti jättää sen sisälle, mutta käytännössä on turvallisempaa siirtää kaikki media [editable]-alueen ulkopuolelle.

Lisäosan tekijä on hylännyt sen. Onko sen käyttö turvallista?

Tekijä ilmoitti virallisesti tuen päättymisestä vuonna 2022, ja viimeisin commit on elokuulta 2024 (yhteensopivuuspäivitys Grav 1.7:lle). Lisäosa on vakaa Grav 1.7:ssä eikä vaikuta tietoturvan kannalta kriittisiin komponentteihin: se toimii vain Markdown-sisällön kanssa eikä sillä ole pääsyä palvelimen operaatioihin. Jos suunnittelet siirtymistä Grav 2.0:aan, harkitse Frediin tutustumista tai odota virallista frontend-muokkausratkaisua (uusia TinyMCE:hen ja Prosemirroriin perustuvia lähestymistapoja keskustellaan foorumilla).

Mitä eroa on Editable with SimpleMDE:llä ja ContentTools-versiolla?

Editable with SimpleMDE käyttää samaa lähestymistapaa (frontend-muokkaus), mutta visuaalisen editorin sijaan se tarjoaa SimpleMDE Markdown -editorin live-esikatselulla. Se sopii niille, jotka haluavat kirjoittaa merkkausta käsin ja nähdä lopputuloksen editorin oikealla puolella WYSIWYG-tilan sijaan. Molemmat lisäosat ovat samalta tekijältä (bleutzinn), ja molemmat on hylätty vuodesta 2022 lähtien.

Kannattaako frontend-editori asentaa Graville vuonna 2026

Jos sivustosi pyörii Grav 1.7:llä, koostuu yksinkertaisista Markdown-sivuista ja sisällönhallinnoijat ovat kyllästyneitä kirjautumaan hallintapaneeliin paria muokkausta varten, asenna Editable with ContentTools. Viisi minuuttia asennukseen, minimaalinen konfigurointi, ja muokkaamisesta tulee yhden klikkauksen toimenpide. Avaa sivu, klikkaa kynää, korjaa teksti, tallenna. Ei sivulistojen selaamista, ei välilehtien vaihtelua.

Uusissa projekteissa tai kun suunnittelet siirtymistä Grav 2.0:aan (julkaisua odotetaan vuonna 2026, joskaan tarkkaa päivämäärää ei ole), harkitse Frediä: sitä kehitetään aktiivisemmin ja se saa todennäköisemmin yhteensopivuuden CMS:n toisen version kanssa. Joka tapauksessa frontend-muokkaus säästää kymmeniä klikkauksia ja minuutteja aikaa jokaisessa muokkauksessa, mikä on erityisen huomattavaa sivustoilla, joilla sisältöä päivitetään usein. Kokeile testiympäristössä ja päätä, kuinka paljon tämä lähestymistapa nopeuttaa työnkulkuasi.