Silverstripe-teemat – miten sivuston ulkoasua muokataan?

Tiivistelmä

Verkkosivuston ulkoasu syntyy monesta osasta. Värit, kirjasimet, sisältöalueiden leveydet ja kuvien mittasuhteet vaikuttavat ensivaikutelmaan. Valikkojen, lomakkeiden ja painikkeiden toteutus puolestaan ratkaisee…

Silverstripe CMS:ssä ulkoasua rakennetaan sivupohjilla, tyylitiedostoilla ja tarvittaessa JavaScriptillä. Näistä voidaan muodostaa teema, joka kokoaa sivuston esitystavan yhteen kokonaisuuteen.

Sisällöntuottajan ei tarvitse hallita kaikkea tätä tekniikkaa. On kuitenkin hyödyllistä ymmärtää, mitkä muutokset tehdään hallintapaneelissa ja milloin tarvitaan kehittäjää. Samalla vältyt tilanteelta, jossa ulkoasun ongelmaa yritetään korjata muokkaamalla sisältöä väärällä tavalla.

Mitä Silverstripe-teema sisältää?

Silverstripen teema on kokoelma sivupohjia ja selaimelle tarkoitettuja resursseja. Siihen voivat kuulua esimerkiksi CSS-tyylit, JavaScript-tiedostot ja ulkoasussa käytettävät kuvat.

Teeman tehtävänä on määrittää, miltä sisältö näyttää kävijälle. Se voi sisältää sivuston yhteisen ylätunnisteen, navigaation, sisältöalueet ja alatunnisteen.

Silverstripen teema voidaan säilyttää erillään sovelluksen omasta koodista. Käytettävät teemat ja niiden hakujärjestys määritellään projektin asetuksissa. Silverstripen teemaohje.

Kaikissa projekteissa ulkoasu ei kuitenkaan sijaitse yhdessä helposti tunnistettavassa teemakansiossa. Osa sivupohjista voi tulla sovelluksesta tai asennetuista moduuleista.

Siksi olemassa olevan sivuston muokkaaminen kannattaa aloittaa rakenteen selvittämisestä. Pelkkä yhden CSS-tiedoston löytäminen ei vielä kerro, mistä kaikki näkyvät tyylit muodostuvat.

Mitä voi muuttaa hallintapaneelissa?

Hallintapaneelissa voidaan muuttaa niitä ulkoasuun liittyviä tietoja, jotka sivuston kehittäjä on tehnyt muokattaviksi.

Tällaisia voivat olla esimerkiksi:

Sivuston logo.
Sivun pääkuva.
Sisältölohkojen järjestys.
Painikkeen teksti ja kohde.
Valmiiden taustavärien valinta.
Sisältöalueen ennalta määritelty esitystapa.

Näiden asetusten olemassaolo riippuu toteutuksesta. Silverstripe-asennuksessa ei pidä olettaa olevan yleistä ulkoasueditoria, jolla kaikki värit ja rakenteet vaihdetaan.

Jos haluat muuttaa koko sivuston kirjasinta tai navigaation rakennetta, työ kuuluu usein teemaan tai muihin lähdetiedostoihin.

Kysy ylläpitäjältä, mitkä asiat on tarkoitettu sisällöntuottajan säädettäviksi. Näin vältät kiertotavat, kuten tyhjien kappaleiden lisäämisen välistyksen muuttamiseksi.

Sivupohja muodostaa sivun rakenteen

Silverstripen omat sivupohjat käyttävät .ss-tiedostopäätettä. Ne voivat sisältää HTML-rakennetta sekä muuttujia ja ehtoja, joiden avulla järjestelmä tuo sivulle oikean sisällön.

Esimerkiksi seuraava katkelma näyttää sivun otsikon ja sisältötekstin:

<article class="content-page">
  <h1>$Title</h1>
  <div class="content-page__body">
    $Content
  </div>
</article>

Tämä on sivupohjan osa, ei kokonainen asennettava teema. Muuttujien toiminta riippuu siitä, mitä tietoja kyseisessä sivupohjassa on käytettävissä.

Silverstripen sivupohjat voivat tulla omasta projektista, teemasta tai moduulista. Sivupohjien perusteet.

Otsikon ympärillä oleva HTML kertoo rakenteen, mutta varsinainen fonttikoko ja väri määritellään tavallisesti CSS:ssä. Tämä erottelu helpottaa saman sisältörakenteen käyttämistä eri näytöillä.

Yhteiset osat vähentävät päällekkäistä työtä

Sivuston logoa, päävalikkoa ja alatunnistetta ei kannata kopioida erikseen jokaisen sivun pohjaan. Yhteiset osat voidaan jakaa uudelleenkäytettäviin sivupohjakatkelmiin.

Silverstripen sivupohjakieli tukee sisällyttämistä esimerkiksi seuraavasti:

<% include Header %>

<main id="main-content">
  $Layout
</main>

<% include Footer %>

Esimerkki edellyttää, että Header– ja Footer-katkelmat löytyvät projektin sivupohjarakenteesta. $Layout liittyy sivukohtaisen sisältöasettelun renderöintiin.

Sisällyttämisen syntaksi kuuluu Silverstripen sivupohjakieleen, ja ulomman sivupohjan sekä sisältöasettelun suhdetta käsitellään sivupohjien periytymisohjeessa.

Kun yhteystietojen esitystapa muuttuu, yhteisen alatunnisteen korjaaminen voi riittää. Muutoksen vaikutukset täytyy silti tarkistaa eri sivutyypeillä.

CSS määrittää värit, mitat ja typografian

CSS-tyyleillä säädetään muun muassa tekstin ulkoasua, taustavärejä, reunuksia ja sisältöalueiden välistyksiä.

Aiemman sivupohjaesimerkin sisältöalueelle voisi määrittää seuraavan tyylin:

.content-page {
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1rem;
  color: #202630;
  line-height: 1.6;
}

.content-page h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
}

.content-page img {
  max-width: 100%;
  height: auto;
}

Esimerkki keskittää sisältöalueen, rajoittaa sen leveyttä ja antaa reunoille tilaa. Otsikon koko mukautuu näytön leveyteen määritellyissä rajoissa.

Käytä riittävän tarkkoja luokkia. Koko sivuston kaikkiin elementteihin kohdistuva sääntö voi muuttaa myös lomakkeita tai muita alueita, joita et tarkoittanut käsitellä.

Tee yksi ymmärrettävä muutos kerrallaan ja tarkista sen vaikutus selaimessa.

Tyylitiedoston täytyy myös latautua

CSS-tiedoston tallentaminen projektikansioon ei yksin tuo sitä sivulle. Tiedosto täytyy liittää mukaan sivuston käyttämällä tavalla.

Silverstripe tarjoaa tähän Requirements-toiminnon, jolla hallitaan CSS- ja JavaScript-resurssien lataamista. Resurssien täytyy myös olla verkkopalvelimen saatavilla.

Projektissa voidaan käyttää esimerkiksi Composerin resurssien julkaisumäärityksiä. Niiden muuttamisen jälkeen resurssit voidaan tuoda julkiseen hakemistoon komennolla:

composer vendor-expose

Komento ei korvaa puuttuvia asetuksia eikä rakenna automaattisesti Sass- tai JavaScript-lähdekoodia. Se palvelee resurssien saataville tuomista Silverstripen määrittämällä tavalla. Silverstripen resurssiohje.

Tarkista projektin omat kehitysohjeet ennen komentojen suorittamista. Sivustolla voi olla erillinen rakennusvaihe, jonka tuottamaa CSS-tiedostoa selain käyttää.

Teeman käyttöönotto tehdään asetuksissa

Silverstripen teemoja voidaan määritellä YAML-asetustiedostossa. Esimerkiksi app/_config/themes.yml voi sisältää seuraavan rakenteen:

SilverStripe\View\SSViewer:
  themes:
    - '$public'
    - 'oma-teema'
    - '$default'

Tässä oma-teema viittaa tavallisesti hakemistoon themes/oma-teema. Määritysten järjestys vaikuttaa siihen, mistä sivupohjia ja resursseja etsitään.

Älä korvaa olemassa olevaa teemalistaa tutkimatta sen tarkoitusta. Käytössä voi olla useita toisiaan täydentäviä teemoja.

Silverstripen ohje neuvoo myös tyhjentämään järjestelmän välimuistin uusien teematiedostojen tai asetusten käyttöönoton yhteydessä. Teemojen määrittäminen.

Ensimmäinen kokeilu kannattaa tehdä kehitys- tai testiympäristössä. Virheellinen määritys voi vaikuttaa useaan sivuun samanaikaisesti.

Säilytä muutokset päivityksiä kestävässä paikassa

Asennettujen ohjelmistopakettien tiedostoja ei yleensä kannata muokata suoraan. Composerin päivitys voi korvata niihin tehdyt muutokset.

Silverstripen projektirakenteessa vendor sisältää riippuvuuksia, kun taas oman sovelluksen tiedostot kuuluvat tavallisesti app-hakemistoon. Silverstripen hakemistorakenne.

Moduulien sivupohjia voidaan tarvittaessa korvata oman projektin sivupohjilla Silverstripen hakusääntöjen mukaisesti. Tämä edellyttää oikeaa hakemistopolkua ja tiedostonimeä. Sivupohjien korvaaminen.

Kirjaa muutokset versionhallintaan ja kuvaa niiden tarkoitus. Päivityksen yhteydessä on silloin helpompi tarkistaa, vaikuttaako muuttunut moduuli omaan ulkoasutoteutukseen.

Myös korvatut sivupohjat tarvitsevat ylläpitoa. Niihin eivät automaattisesti siirry kaikki alkuperäisen moduulin myöhemmät parannukset.

Tee ulkoasusta toimiva eri näytöillä

Responsiivisuus tarkoittaa, että sisältö mukautuu käytettävissä olevaan tilaan. Pelkkä työpöytänäkymän pienentäminen ei aina riitä.

Tarkista erityisesti:

Pitkien otsikoiden rivittyminen.
Navigaation käyttäminen puhelimella.
Kuvien ja videoiden leveydet.
Lomakekenttien koko.
Painikkeiden riittävä tila.
Taulukoiden käyttäytyminen kapealla näytöllä.

Kokeile sivua sekä oikealla puhelimella että selaimen erikokoisissa ikkunoissa. Huomioi myös pitkät sanat ja tavallista suurempi tekstimäärä.

Älä suunnittele pelkästään yhdelle esimerkkisivulle. Teeman pitäisi kestää sisällöntuottajien tavalliset tarpeet ilman, että jokainen uusi otsikko vaatii CSS-korjauksen.

Testaa lisäksi näppäimistöllä liikkuminen ja kohdistuksen näkyminen.

Selvitä, miksi muutos ei näy

Jos muokkaus ei ilmesty sivulle, aloita tarkistamalla, latautuuko oikea tiedosto. Selaimen kehittäjätyökalujen verkkonäkymä näyttää resurssin osoitteen ja mahdollisen latausvirheen.

Tyypillisiä syitä ovat:

Muokkaat tiedostoa, jota sivusto ei käytä.
Lähdetiedostoa ei ole rakennettu julkaistavaan muotoon.
Resurssi ei ole julkisesti saatavilla.
Toinen CSS-sääntö ohittaa muutoksen.
Välimuistissa on vanha versio.

Silverstripen resurssien lataaminen ja julkaiseminen ovat erillisiä tarkistettavia vaiheita. Requirements-ohje.

Tutki selaimesta elementin lopulliset tyylit ennen uuden korjaussäännön lisäämistä. Toistuvat ohitukset voivat tehdä CSS:stä vaikeasti ylläpidettävää, vaikka yksittäinen ongelma näyttäisi hetkeksi ratkenneen.

Julkaise ulkoasumuutos tarkistettuna

Ennen tuotantoon siirtämistä tarkista etusivu, tavallinen sisältösivu ja kaikki muutoksesta riippuvat sivutyypit. Kokeile myös virheilmoituksia, tyhjiä sisältöalueita ja pitkiä lomaketekstejä.

Varmista, että:

Vanha sisältö näkyy edelleen oikein.
Linkit ja painikkeet toimivat.
Sivulle ei synny vaakasuuntaista vieritystä.
Kuvat säilyttävät mittasuhteensa.
Teksti erottuu taustasta.
Palautustapa aikaisempaan versioon on tiedossa.

Pieni värimuutos ja kokonainen teemauudistus tarvitsevat erilaajuisen tarkistuksen. Sovita työ muutoksen vaikutuksiin.

Hyvä Silverstripe-ulkoasu tukee sisältöä ja pysyy hallittavana myös myöhemmin. Selkeä tiedostorakenne, rajatut muutokset ja oikeilla sisällöillä testaaminen tekevät jatkokehityksestä huomattavasti helpompaa.