Sisältö
- Asenna ExpressionEngine 2
- Mitä rakennamme
- Työskentely kanavien kanssa
- Publish Forms -toiminnon käyttäminen
- Luokat luodaan
- Mallien asettaminen
Verkkosuunnittelijana tai kehittäjänä on elintärkeää, että sinulla on salkku, joka näyttää sivustosi kävijöille suorittamasi projektit. Kunkin käyttämien tekniikoiden luettelointi tuo vähän ylimääräistä. EllisLabin ExpressionEngine käsittelee tällaista sisältöä helposti hallittavien kanavien (Data Channel) kautta. Tässä opetusohjelmassa tutkitaan niiden käyttöä.
Asenna ExpressionEngine 2
Tarvitset lisensoidun kopion ExpressionEngine 2: sta, jos sinulla ei vielä ole kopiota, voit ostaa sen ExpressionEngine-verkkosivustolta. EllisLab ei enää tarjoa ilmaista versiota ohjelmistosta, mutta tarjolla on useita erilaisia lisenssejä, mukaan lukien 99,95 dollarin freelancer-lisenssi, jonka avulla voit luoda verkkoläsnäolon yrityksellesi.
Löydät vaiheittaiset asennusohjeet tuotteen verkkosivustolta sekä paljon resursseja, joiden avulla pääset aloittamaan ExpressionEnginen käytön työssäsi.
Mitä rakennamme
Tässä opetusohjelmassa luomme sivuston kuvitteelliselle SuperDuper Design Studiosille. Sivusto koostuu kahdentyyppisistä sivuista: etusivu ja työnäkymäsivut. Kotisivulla on luettelo viimeaikaisesta työstä.
Jokainen projektikuva johtaa projektin omalle työnäkymäsivulle. Tämä sisältää suuren kuvakaappauksen verkkosivustosta, lyhyen kirjoituksen ja luettelon projektissa käytetyistä tekniikoista.
Työskentely kanavien kanssa
Kun luot sivustoja ExpressionEnginen avulla, rakennat sisältöä kanavien perusteella. Tämä on ensimmäinen vaihe SuperDuper Design Studios -salkkusivuston luomisessa.
Koska tämä on vain perussivusto, meidän on luotava vain yksi kanava nimeltä Work.
Valitse ExpressionEngine-ohjauspaneelista Järjestelmänvalvoja -painike ylhäällä, vie hiiri Kanavanhallinta ja valitse Kanavat. Jos sinulla on uusi ExpressionEngine 2 -asennus, sinun ei pitäisi nähdä yhtään kanavaa.
Napsauta harmaata Luo uusi kanava -painiketta oikeassa yläkulmassa. Haluamme meidän Koko kanavan nimi olla Työ. Ohjelmiston pitäisi nyt luoda automaattisesti Lyhyt nimi sinulle: tässä tapauksessa työ. Tätä pientä nimeä käytämme malleissamme, kun näytämme projektimerkintöjä Kanavan merkinnät tag.
Alla Luodaanko uudet mallit tälle kanavalle? Varmista Ei on valittu. Klikkaus Lähetä kanavan luomiseksi.
Kun tämä on tehty, sinulla pitäisi nyt olla Työ kanava listattu Kanavanhallinta sivu. Sen Kanavanhallinta -sivulla Muokkaa asetuksia. vuonna Kanavan lähetysasetukset -osassa, varmista Muutako URL-osoitteet ja sähköpostiosoitteet automaattisesti linkeiksi? vaihtoehto on asetettu Ei. Tämä asetus estää ExpressionEngine-yritystä luomasta hyperlinkkejä URL-osoitteilla mukautetuissa kentissä.
Nyt kun olemme luoneet kanavamme, voimme luoda mukautettuja kenttiä sisällön täyttämiseksi.
Publish Forms -toiminnon käyttäminen
Julkaisulomakkeita käytämme ExpressionEnginen sisällön luomiseen. Ne koostuvat mukautetuista kentistä, jotka luomme ja määritämme kanavalle.
Valitse Järjestelmänvalvoja -painike uudelleen, vie hiiri Kanavanhallinta ja valitse sitten Kanavakentät. Ennen kuin voimme luoda mukautettuja kenttiä, meidän on luotava mukautettu kenttäryhmä. Napsauta harmaata Luo uusi kanavakenttäryhmä -painiketta oikeassa yläkulmassa uuden ryhmän luomiseksi. Se, jonka haluamme luoda, on Työ kanava. Kumman tahansa kanavaryhmän seurannan helpottamiseksi sinun on yritettävä pitää molemmat nimet samoina, joten nimeä ryhmä Työ ja napsauta Lähetä luoda se.
Nyt kun olemme luoneet ryhmämme, olemme melkein valmiita lisäämään kentät itse. Jos tarkastelet tämän opetusohjelman ensimmäistä kuvaa, huomaat, että hakemistosivu sisältää otsikon ja kuvan jokaiselle luettelossa olevalle projektille.Jotta voimme näyttää kuvia, meidän on määritettävä latauskohde, joka pitää kaikki portfolion kuvat.
Klikkaa Sisältö -painiketta ohjauspaneelin yläosassa ja valitse Tiedostot, sitten Tiedoston latausasetukset. Napsauta oikealla olevaa harmaata Luo uusi lähetyskohde -painiketta. Sinun tulee esittää alla oleva lomake.
Täytä lomake antamalla kuvaava nimi, kelvollinen palvelimen polku (voit käyttää jo olemassa olevaa / images / uploads -hakemistoa) ja URL-osoite. Hakemiston, johon haluat tallentaa kuvat, on jo oltava olemassa, joten muista luoda se ensin palvelimellesi.
Tiedämme, että luomamme hakemisto pitää sisällään vain portfolion kuvamme, joten voimme asettaa Sallitut tiedostotyypit että Vain kuvat. Tarkastellessamme mallejamme tiedämme, että työn yksityiskohtasivuilla Suurin kuvan leveys on 960 pikseliä ja Suurin kuvan korkeus on 400 pikseliä, joten voimme asettaa nämä lomakkeelle. Sen sijaan, että meidän on ladattava kaksi erilaista kuvaa, yksi työn yksityiskohtia varten (960x400) ja toinen hakemistosivulle (301x200), voimme asettaa Kuvankäsittelyt.
Alla Kuvankäsittelyt, voimme lisätä ylimääräisen kuvakoon hakemistosivulle lisäämällä a Lyhyt nimi olla nimeltään Koti ja aseta Muuta tyypin kokoa että Rajaa, Leveys arvoon 301 ja Korkeus 200: een. Tämä luo sitten kuvastamme automaattisesti rajatun version, jota voimme käyttää hakemistosivulla. Älä unohda napsauttaa punaista painiketta + -merkin kanssa. Kun olet tehnyt tämän, napsauta Lähetä -painiketta.
Olemme nyt valmiita aloittamaan mukautettujen kenttien lisäämisen. Klikkaa Järjestelmänvalvoja -painike uudelleen, vie hiiri Kanavanhallinta ja valitse sitten Kanavakentät vaihtoehto. Alla Kanavakentät Valitse Työ aiemmin luomamme ryhmän nimi.
Klikkaa Luo uusi kanavakenttä oikeassa yläkulmassa ja sinun pitäisi nähdä lomake. Kullekin kentälle on useita asetuksia. Käymme läpi tämän yhdessä, sitten teet muut yksin.
ExpressionEnginen mukautetut kentät voivat olla erilaisia kenttätyyppejä. On olemassa yleisiä kenttätyyppejä, kuten tekstinsyöttökentät ja tekstialueet, mutta sinulla voi olla jopa Suhde- tai Tiedosto-kenttä tiedostojen tai kuvien lataamista varten. Projektikuvassamme haluamme käyttää Tiedosto kenttätyyppi. Valitse se luettelosta.
Kentän otsikko on lomaketunniste, joka näkyy julkaistun lomakkeen kentän vieressä. Haluamme, että tämä nimi on mahdollisimman selkeä. Käytetään etikettiä Projektikuva. Kentän nimi on tapa, jolla viittaamme tähän kenttään malleissamme. sen on oltava yksi sana, mutta se voi sisältää alaviivan tai viivan. Mieluummin nimitila kentät käyttämällä kanavan nimen etuliitettä. Tämä helpottaa niiden kanavien muistamista, mitkä kentät kuuluvat kanaviin. Kirjoita työ_kuva kentän nimeksi.
Varten Kenttäohjeet, kuvaile lyhyesti, mitä tähän kenttään tulisi lisätä. Jokaisella projektilla on oltava kuva, joten varmista Onko tämä pakollinen kenttä? on asetettu Joo. Voimme jättää Kentänäyttö järjestys on 1, joten kenttä näkyy ensin.
Alla Kentän asetukset voimme asettaa Tiedostotyyppi että Kuva koska tiedämme, että lataamme vain kuvia. Voimme sitten asettaa Sallittu hakemisto aiemmin luomaamme hakemistoon.
Lomakkeen tulisi näyttää samanlaiselta kuin alla.
Kun olet onnellinen, napsauta punaista Lähetä -painiketta kentän tallentamiseksi.
Tämä on vasta ensimmäinen kanavakenttä. Seuraavaksi meidän on luotava kenttiä muulle siepattavalle sisällölle. (ExpressionEngine luo automaattisesti kentän otsikolle, joten meidän ei tarvitse huolehtia siitä.) Alla ovat muut kentät, jotka meidän on luotava.
• Projektin URL-osoite
Tyyppi: Tekstinsyöttö
Kentän otsikko: Projektin URL-osoite
Lyhyt nimi: työ_url
Onko tämä pakollinen kenttä? Ei
Tämän kentän tekstin oletusmuotoilu: Ei mitään
• Hankkeen kuvaus
Kentän tyyppi: Textarea
Kentän otsikko: Hankkeen kuvaus
Lyhyt nimi: työ_desc
Onko tämä pakollinen kenttä? Joo
Tämän kentän tekstin oletusmuotoilu: Ei mitään
Kanavakenttäryhmän käyttämiseksi se on määritettävä kanavalle. Mene Järjestelmänvalvoja -painike, vie hiiri Kanavanhallinta ja valitse Kanavat. Napsauta Work-kanavan vieressä Muokkaa ryhmän tehtäviä. Varten Kenttäryhmä vaihtoehto, valitse Työ ja napsauta sitten Päivittää tehtävän suorittamiseksi. Nyt, jos valitset Sisältö -painike, vie hiiri Julkaista ja valitse Työ sinun pitäisi nähdä Work-kanavamme julkaisulomake.
Luokat luodaan
Nyt kun olemme luoneet kaikki kanavakenttämme, olemme valmiita luomaan luokkamme, jotka meidän on lueteltava projektissa käytettävät tekniikat.
Valitse Järjestelmänvalvoja , vie hiiri Kanavanhallinta ja valitse sitten Luokat. Sinulle pitäisi näyttää sivu, jolla ei ole luokkia. Jos haluat luoda joitain luokkia, valitse harmaa Luo uusi luokan ryhmä -painiketta oikeassa yläkulmassa. Kirjoita lomakkeeseen luokan nimi ja napsauta sitten punaista Lähetä -painiketta. Päätin soittaa luokkiini Salkuteknologiat.
Nyt kun olemme luoneet luokkaryhmän, voimme luoda joitain luokkia kullekin tekniikalle. Valitse Lisää / muokkaa luokkia, sitten harmaa Luo uusi luokka -painiketta.
vuonna Luo uusi luokka täytä kaikki haluamasi teknologialuokan tiedot ja napsauta punaista Lähetä -painiketta. Tässä esimerkissä meidän ei tarvitse lisätä vanhempaluokkia. Loin uuden luokan kullekin seuraavista.
- HTML5
- CSS3
- jQuery
- VÄHEMMÄN
- PHP
Luokkaryhmän käyttämiseksi se on määritettävä kanavalle. Mene Järjestelmänvalvoja -painike, vie hiiri Kanavanhallinta ja valitse Kanavat. Napsauta Work-kanavan vieressä Muokkaa ryhmän tehtäviä. Varten Luokkaryhmä vaihtoehto, valitse Projektiteknologiat ja napsauta sitten Päivittää tehtävän suorittamiseksi. Nyt, jos valitset Sisältö -painike, vie hiiri Julkaista ja valitse Työ, sinun pitäisi nähdä Work-kanavan julkaisulomake. Jos napsautat Luokat -välilehdellä, sinun pitäisi nähdä kaikki juuri luomasi luokat.
Jatka julkaisulomaketta käyttämällä ja lisää kolme työmerkintää sivustoosi eri tekniikoilla, jotka on valittu kullekin Luokat-välilehdelle. Tarvitsemme näitä merkintöjä seuraavassa osiossa, kun aloitamme mallien käsittelyn.
Mallien asettaminen
Ennen kuin voimme alkaa näyttää mitään sisältöä, meidän on ensin luotava mallit. Klikkaa Design -painiketta ruudun yläosassa ja alla Mallit, valitse Mallinhallinta.
Klikkaa Uusi ryhmä -painiketta uuden luomiseksi Malliryhmä. Nimeämiskäytäntömme mukaisesti nimämme sen Työ. Jätä loput lomakkeesta sellaisenaan ja napsauta sitten Lähetä luoda ryhmä. Sinun pitäisi nähdä valittu ryhmä ja malli nimeltä 'hakemisto'. ExpressionEngine luo hakemistomallin automaattisesti jokaiselle malliryhmälle. Vaikka emme käytä sitä, emmekä käytä tätä opetusohjelmaa, malli vaaditaan, eikä sitä voi poistaa.
Haluamme myös luoda Malliryhmä olla nimeltään Sivusto. Luotaessamme tätä ryhmää haluamme varmistaa, että tarkistamme vaihtoehdon tehdä hakemistomallista sivuston etusivu. Sinulla pitäisi nyt olla kaksi malliryhmää: Työ ja Sivusto. Meidän on luotava yksi malli työhön näkymä. Tätä mallia käytetään ExpressionEnginen näyttämään yksittäiset projektisivut. Sivustoryhmän hakemistomalli on kotisivumme.
Kun määritysprosessi on valmis, olemme valmiita tuomaan sivustomme eloon. Aloittamiseksi sinulla on oltava staattiset mallit (index.html ja view.html) tämän artikkelin käsillä. Löydät ne tämän opetusohjelman Varat-latauksesta, Staattiset tiedostot -hakemistosta. Samasta hakemistosta löydät kansion nimeltä css. Varmista, että olet ladannut tämän palvelimellesi.
Aloitetaan etusivulta. Kopioi index.html Sivustoryhmän hakemistomalliin. Lataa sivuston kotisivu selaimeesi ja sinun pitäisi nähdä staattinen malli. Aloitamme luettelosta hankkeista. Etsi ensimmäinen div luokan kanssa "workItem". Haluamme kääriä a kanava: merkinnät tag-pari tämän div: n ympärillä.
Jos tarkastelet staattista HTML-koodia, huomaat, että ensimmäisellä ja viimeisellä kohteella on luokka "ensimmäinen" ja "kestää". Tämä on niin, että kolme kohdetta hahmonnetaan kunnolla samalla etäisyydellä. Käytämme mallissamme vain yhtä luettelokohteen merkinnän esiintymää, koska ExpressionEngine silmukkaa kaikki merkinnämme läpi ja tulostaa kaiken kanava: merkinnät tag jokaiselle tuotteelle. Jotta luokka voidaan lisätä ensimmäiseen ja viimeiseen kohteeseen, kanavallamme on oltava kytkin kanavalla: merkinnät.
Koodimme näyttää tältä:
h2> Viimeaikainen työ / h2> div id = "viimeaikainen työ"> {exp: kanava: merkinnät kanava = "työ"} div ensin || viimeinen "}"> a href = "{title_permalink = 'työ / näkymä'}"> {work_image: home wrap = "image"} / a> a href = "{title_permalink = 'work / view'}"> h3> {title} / h3> / a> / div> {/ exp: kanava: merkinnät} / div>
Kun hakemistosivu on valmis (näet tuloksen alla), voimme nyt siirtyä Work-malliryhmään, joka sijaitsee Work-malliryhmässä. Avata view.html staattisten tiedostojen hakemistosta ja kopioi sisältö ExpressionEnginen näkymämalliin.
Meidän on vain lisättävä yksi bitti koodia näkymämalliin, jotta se näyttää portfolion merkinnän, jota olemme napsauttaneet etusivun luettelosta. ExpressionEngine näyttää merkinnän URL-osoitteen perusteella.
Koodimme näyttää tältä:
{exp: channel: records channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "categories"> h3> Työ oli mukana? / h3> ul> li> HTML5 / li> li> CSS3 / li> li> JQuery / li> li> Photoshop / li> / ul> / div> / div > / div> {/ exp: kanava: merkinnät}
Jos napsautat projektia sivuston kotisivulta, sen pitäisi nyt ladata kyseisen projektin näkymäsivu.
Meillä on vielä yksi tehtävä tehtävä, eli tehdä luokista dynaamisia. Tämä ei välttämättä näytä yhtä helpolta kuin muu kirjoittamamme koodi, koska meidän on yhdistettävä kaksi tunnistetta, jotta voimme antaa meille juuri tarvitsemamme. Katsotaanpa, mitä molemmat tagit tekevät.
Sisällä kanava: merkinnät -tunnistetta, voimme käyttää sisäänrakennettua luokkiin -tunniste näyttää projektiin liittyvien luokkien nimet, mutta tämä antaa meille vain sen, mitä haluamme tekstinä, mikä tekee elämästämme vaikeaa luokkien muotoilussa.
Tämän koodi näyttää tältä:
{categories} {category_name} {/ categories}
On kuitenkin olemassa toinen tunniste, jota voisimme käyttää, joka esittelee luokat meille mukavana järjestämättömänä luettelona, jota on paljon helpompi muotoilla CSS: n avulla. Ainoa ongelma tässä on, että se näyttää kaikki luokkamme, ei vain ne, jotka olemme valinneet projektiin.
Tämän koodi näyttää tältä:
{exp: channel: categories style = "sisäkkäin"} {category_name} {/ exp: channel: categories}
Tarvitsemme näiden kahden yhdistelmän. Jos katsot dokumentaatiota, huomaat, että {exp: channel: categories} tagissa on näytä vaihtoehto, joka ottaa luokan luokkien id-merkkijonon (tunnukset erotetaan |: lla). Kun otat tämän käyttöön työnäkymäsivulla, lopullisen koodin tulisi näyttää tältä:
{exp: channel: records channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "categories"> h3> Työ oli mukana? / h3> {exp: channel: categories style = "nested" show = "{categories} {category_id} | {/ categories}"} {category_name} {/ exp: kanava: luokat} / div> / div> / div> {/ exp: kanava: merkinnät}
Salkusivustosi pitäisi nyt olla valmis. Miksi et jatkaisi sivujen lisäämistä siihen ja käyttäisit muita ExpressionEnginen tarjoamia ominaisuuksia, kuten yhteyssivun yhteydenottolomake?
