Hogyan hozzunk létre egy webhelyet a modx-on

Ez a webhely elsősorban azok számára szól, akik webfejlesztést szeretnének tenni. Megismerheti a helyszíni épületek anyagait, a tervezéstől a tervezéstől, a felépítésektől és a kész weboldalak befejezésétől. Hamarosan a webhelyen hasznos anyagok, tippek, leckék, szolgáltatások és linkek nagy gyűjteményévé válnak, amelyek segítenek egy tapasztalt webfejlesztőnek és kezdőknek is.
További információ erről a blogról

Hamarosan a blog lesz a cikksorozat létrehozása „oldalon a semmiből”, „Tedd a rugalmas, funkcionális blog”, „Internet-üzlet a CMS / CMF MODx» és még sok más. Ne váltson.
Vigyázz az új cikkek megjelenítésére a webhelyen. RSS feed.

Ebben a leckében megteremtjük az oldal főmenüt. A MODx-ben van egy beépített megoldás dinamikus menük rendezésére a webhelyen - ez a Wayfinder-részlet felhasználásával történik. Ó igen, teljesen elfelejtettem. Még nem mondtam el neked a MODx egyik alapfeltételeiről. Ez a kifejezés "töredék".

Snippet a PHP kód, amelyet hívhatunk a sablonból. A kódrészlet műveletének eredménye a hívás helyére kerül. A MODx alapértelmezettként mellékelt kivonatok listájának megtekintéséhez kövesse az adminisztrációs panel lapjait: Elemek → Elemek kezelése → Snippets. Mindegyik szerkeszthető. De amíg kitalálod, mi a helyzet, azt tanácsolom, hogy ne szerkesztesz semmit. Miért van szükségünk ezekre a részletekre? És szükség van arra, hogy dinamikus logikát biztosítsanak a webhelyen. Például, ha dinamikus menüt hoz létre, bizonyos feltételek mellett kiadja az adatbázisból származó tartalmat, általánosan rendezze a visszajelzési űrlapot a MODx API-n keresztül elérhető műveletekhez. Most egy példaért mindent meg fogsz érteni.

A hívást a kódrészlet neve adja, a szögletes zárójelek között felkiáltójelekkel. Ha például egy adott részlet neve Nev, akkor a hívás a következő struktúrában történik, amelyet a sablonba helyeznek:

Amellett, hogy felhívja a kódrészletet, a feldolgozáshoz különböző paraméterértékeket is elküldhetünk, ha azt a megadott kódrészlet támogatja. Általában minden egyes kódrészletnek tartalmaznia kell egy támogatott paramétert, amelyen a kódrészlet eredményei függenek.

Bizonyos paraméterértékek közléséhez az építést használjuk:

[! Name_snippet? paraméter1 = `érték ' paraméter2 = "érték". ]

Azt is szeretném hozzátenni, hogy a fentiekben leírták a hívást egy nem gyorsítótáras részletre. Ha a munka eredményét a gyorsítótárba kell helyezni, akkor a hívást a kódrészlet nevével kell ellátni, kettős szögletes zárójelben. Ie egy elnevezett nevű részlethez a gyorsítótárazott hívás a következő lesz:

Amikor hívja a tárolt eredményét a részlet a cache, és újratölti az oldalt kódrészlet nem hajtunk végre újra, és a hívást azonnal esetben az előző eredményt hozott a gyorsítótárból.

Nos, most már tudod, mi a "részlet", és továbblépünk. Ahogy fent írtam, a MODx dinamikus menük szervezéséhez a beépített Wayfinder-részletet fogjuk használni.

A Wayfinder munkájának eredménye egy számozatlan lista kimenete, amelynek elemei a lap dokumentumokhoz kapcsolódnak azon oldal számára, amelyre ezt a kódrészletet hívjuk. Például, ha van egy dokumentumszerkezetünk, ahogy az az alábbi ábrán látható

akkor ha a kódrészletet a főoldalra hívjuk

munkájának eredménye a 4 gyermek oldalra mutató linkek listája. A lista úgy néz ki, mint:

Figyelem: egy ilyen hívással gyermekelemeket kell létrehozni, mert ha nem léteznek, akkor a kódrészlet nem fog semmit kiadni. Ez a hívás nem alkalmas arra, hogy a menüt a webhelyen rendezzék, mivel a főmenüt nemcsak a főoldalon, hanem a webhely összes gyermekoldalán is meg szeretnénk jeleníteni. Ebben az esetben azt szeretnénk, hogy az összes oldalon lévő menü azonos elemekből álljon. Ehhez a Wayfinder-kódrészletet hívjuk fel, és ezzel egyidejűleg átadjuk a startId paraméternek, amelybe a dokumentum azon azonosítóját írjuk, amelynek linkjei a gyermek oldalakra kerülnek. Hadd emlékeztessem önöket arra, hogy a dokumentum azonosítója a MODx dokumentumfa zárójelben feltüntetett száma.

A hívás így fog kinézni:

Ebben az esetben, bármilyen oldalra, amelyre a Wayfinder-részletet hívjuk, a lista a főoldal (ID = 1) gyermekeihez fűződő linkekből készül, nem pedig a hívás kezdeményezéséről.

Most nézzük meg, mi a sablon fő helyszíne. Ha emlékszel a menüre, egy darabban tároltunk egy HEADER nevű emblémával. És mit látunk?

A menü egy egyszerű rendezetlen lista, amelyet egy id = "topnav" tárolóba helyeznek. Ez azt jelenti, hogy a menü HTML-jelölése normál lista lesz, és az egész feladat felveti a korábban összekapcsolt CSS-fájlt. De már tudjuk, hogy ez a rendezetlen listát dinamikusan lehet kiadni a MODx-nek. Ezért töröljük ezt a kódot a HEADER csomagból

Ahelyett, hogy a Wayfinder-kódrészletet a startId = `1` paraméterrel adjuk át.

Nézzük meg a létrehozott főmenü forráskódját:

Felhívjuk a figyelmet arra, hogy a Wayfinder kivonat automatikusan hozzon létre egy osztályt az aktív menüelemnek, class = "active", és annak neve még egybeesik az "aktív" osztályunkkal a mi esetünkben. Ezért a menüben történő navigáláskor az aktív elem zölden kiemelve jelenik meg, mint eredetileg a sablonban.

Alapértelmezésben az aktív Wayfinder menüpont mindig generál class = „aktív”, így ha a sablon leírja egy másik osztályba, változtassa meg a CSS fájlban. Ha megnézzük újra a forráskódját a generált lista, akkor látni fogja, hogy az utolsó elem a menü jelzi alapértelmezett osztály az elmúlt, azt is szem előtt tartani, mivel gyakran a design az utolsó menüpont előírják, stílusok külön-külön. Ebben az esetben, akkor az utolsó osztály az ő tervezése.

Vessünk egy pillantást a menüpontokra. Amint azt a főmenüben látjuk, nincs elem, "kezdőlap". Mivel a startId paramétert a főoldal kezdeti paramétereként definiáltuk, egy főmenüből származó, a gyermekek számára készült erőforrásokból álló menü állt rendelkezésünkre. Hozzá egy linket a honlap különböző módokon, nem lesz sok a terhelés és a kínáljanak a legoptimálisabb módját kellett kihasználni azonnal. Ehhez a legegyszerűbb módja annak, hogy változtatni a dokumentum szerkezeti fa úgy nézett ki, mint így.

Annak érdekében, hogy a menü megjelenjen, a startId-ban írjuk be a gyökérkönyv azonosítóját. Mindig "0" lesz. Ezt tesszük, mert ez volt az utolsó alkalom a HEADER darabban:

Ezután a főmenüben a korábbi menüelemek mellett egy újabb "Kezdőlap" lesz, mivel ezek az elemek a gyökerekhez képest gyermekek. De ha az oldalaid megegyeznek az enyémmel, akkor észre fogod venni, hogy a menü nem illeszkedik a logóval megegyező sorba, mert a nevük túl hosszú. Ez nagyon jó. Kérdezd meg miért. És azért, mert példát mutathatok egy másik mezőre az erőforrás-szerkesztő oldalon, amiről korábban beszéltem, és amelynek segítségével ezek a problémák megoldhatók.

Annak érdekében, hogy a menü nem csúszik a logó alá, meg kell változtatnunk egy vagy két menüpont hosszát. A mi esetünkben a legjobb, ha egyszerűen csak a "Home" szót írjuk a "Home" cím helyett. Ezt az erőforrás nevének megváltoztatása nélkül is elvégezheti. Csak menj az oldalra, ahol az erőforrás szerkesztése "Home Page" névvel és a "Menüpont" mezőbe írja be a rövid címünket - "Home".

Mentés és voila! Kiváló eredményt értünk el. Az elem neve megváltozott, és a menü már nem csúszik a logó alatt.

Most már van egy kész főmenüünk, amelyen keresztül a MODx dokumentumfában létrehozott oldalakon keresztül navigálhatunk.

Annak érdekében, hogy részletesebben megismerhessük a Wayfinder-részlet részleteit, vegyünk még néhány példát.

Minél kisebb a számjegy, annál korábbi a menüben szereplő elem. Ezért az erőforrások szerkesztésekor az egyes oldalakhoz beállíthatja a hely megfelelő értékét a menüben. A menüben a fentiekben leírt sorrendbe rendezéshez a következő értékeket állíthatom be: "Pozíció a menüben":

Szintén gyakran el kell távolítania a menüelemeket a menüből. Például, amíg nincs hírünk, nem szeretnénk megjeleníteni ezt az elemet a menüben. Nem probléma, a "Hírek" erőforrás szerkesztésére szolgáló oldalra lépünk, és eltávolítjuk a "Közzététel a menüben" jelölőnégyzetet, amely után ez az elem nem fog megjelenni.

Ezután a "Hírek" erőforrás neve a dokumentumfában világosszürke lesz.

Erre valójában a menü megszervezése vége. Megtanultuk, hogyan jelenítsük meg a dinamikus menüt a MODx-ben a beépített Wayfinder-részlet felhasználásával. Ennek során a gyakorlatban már megpróbálta rendezni a menüpontokat, és eltávolítani a szelektív elemeket a kijelzőn a menüben.

Az egyetlen dolog, amit tanácsot szeretnék adni, hogy a főmenüt egy külön darabkába vegye. Ehhez létre kell hoznia egy MAIN-MENU darabot, és be kell illesztenie a kódrészletet a tartalommal keretezett tartalomba