Blog létrehozása 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.
A mai leckében részletesen ismertetem, hogyan jelenítsük meg a blogbejegyzések bejelentését egy oldal lebontásával, míg a gyakorlatban néhány további kiterjesztés működtetését vesszük figyelembe.
Figyelem: azok, akik csak most kezdik megismerni a MODx-ot, hasznos lesz először olvasni egy pár leckét az előző kurzusról a Ditto kódrészlet munkájáról és az oldal navigáció végrehajtásáról. Ezekből a leckékből részletesebben megismerkedhet a Ditto kódrészletek munkájával, és részletesebben a "SplitPagination" munkával. Ezek a készségek hasznosak lesznek az Ön számára a lecke átadásakor. Szintén hasznos lesz a kezdők számára a TV paramétereinek olvasása a MODx-ben.
Így, miután következetesen végrehajtottuk a kilenc pontban jelzett tevékenységeket, a blogkészítményeknek a szükséges funkcionalitással és tervezéssel kapcsolatos kiadásait eredményezik.
Folytassuk a fenti lépések részletes leírását.
Kötegcímke létrehozásaLinkek és TV-paraméterek címkéi
A MODx Evolution termékcímkéinek dinamikus kibocsátásával kényelmesen megvalósítható a kódrészlet taglinkek használata. Ez a kódrészlet a jegyzet címkék listáját jeleníti meg referenciaként, amelyet vesszővel írnak be, amikor a forrást a TV-paraméterben szerkesztik. A tagLinkek használatához először TV-paramétert kell létrehoznia a szövegbevitel típusával.
Hozzon létre egy TV nevű címkét. Ehhez lépjen az Elemek fülre → Elemek kezelése → Beállítások (TV) → Új beállítás (TV).
TV-paraméter létrehozásakor töltse ki az alábbi mezőket:
A paraméter neve a címkék.
Cím - címkék.
Leírás - Címkék jegyzéke jegyzetek a blog. Vesszővel elválasztva.
A bemenet típusa - szöveg.
Sablon hozzáférés - belső oldal. Figyelem: feltétlenül jelölje be a sablont, amely ezt a paramétert (TV) használja.
Miután létrehozta a TV-paraméterek címkéit, létrehozunk egy új kódrészletláncot. Menjen az Elemek fülre → Elemek kezelése → Snippets elemre, és kattintson az "Új részlet" linkre.
A létrehozáskor az alábbi mezőket töltjük ki:
A kódrészlet neve tagLinkek.
Leírás - kimeneti címkék bejegyzésekben.
Snippet kód (php) - itt átmásoljuk a fájl tartalmát. A lekérdezés végén található lecke végén letöltheti a kódrészlet kódját is.
A létrehozott kódrészlethez tartozó hívás a bejelentés kimenetének sablonjában fog megjelenni, amelyet később létrehozunk. Aztán meg fogom adni a fő paramétereit.
Telepítse a TVimageResizer beépülő modult és hozzon létre egy TV-képparamétert
Töltse ki a következő mezőket a TV létrehozásakor:
A paraméter neve image-post.
Cím - Kép.
Leírás - Kép a jegyzetekhez.
A bemenet típusa - kép.
A vizuális komponens kép. Figyelem: ha ezt a vizuális összetevőt választja, akkor további képzési mezőkre lesz szüksége. Azt javaslom, hogy azonnal töltsd ki az Alternate Text mezőt, hogy ne hagyd az alt attribútumot üresen a kép megjelenítésekor, mert ebben az esetben a kód nem felel meg a webes szabványoknak. Azt javaslom írni [+ pagetitle +], azaz. Az IMG címke alt attribútumában az oldal címe kerül leírásra.
Sablon hozzáférés - belső oldal. Ne felejtse el ezt a pipa jelölését is.
Miután létrehozta a TV-paraméterek képsorát, telepítjük a TVimageResizer beépülő modult.
Mielőtt létrehozna egy plug-int az irányítási rendszerbe, a plug-in fájlokat át kell másolnia a megfelelő mappába. Az eszközök / plugins / könyvtárban hozza létre a tvimageresizer mappát, és csomagolja ki az archívum tartalmát.
Határozzuk meg, hogy mi kell használni a TvimageResizer plugint a mi konkrét esetben, és mit akarunk a kimeneten.
Tegyük fel, hogy létre kell hozni miniatűrök automatikusan, két különböző méretek és arányok: 500x200px - bejelentések és megjegyzi 40x40px - alkalmazásra levezetéséhez véletlen megjegyzések a jobb oldali oszlopban a helyszínen. Ez azt jelenti, hogy minden, a TV-hez csatlakoztatott képen két miniatűr jön létre, amelyek különböző mappákba kerülnek.
Miután átmásolta az archívum tartalmát a bővítményhez tartozó mappába, létrehozni egy plugint a webhely adminisztrációs területén. Elemek → Elemek kezelése → Plug-inek → Plug-in létrehozása.
Új bővítmény létrehozásakor töltse ki a mezőket:
A plugin neve TVimageResizer.
Leírás - Plugin a TV paraméterekhez csatolt képek miniatűrjének létrehozásához.
Plugin kód (php) - meg kell adni a MODX_BASE_PATH.assets / plugins / tvimageresizer / TVimageResizer.inc.php '; (vagyis e sor használatával adja meg a TVimageResizer.inc.php fájl helyét)
Lépjen a következő "Konfiguráció" fülre és a "Konfiguráció a plug-in" mezőbe, és másolja a következő tervet.
tv_ids = TV azonosító; string; 8 dirs = Hüvely mappák, karakterlánc, közepes
Ezután lesz egy táblázat a paraméterek listájával és a paraméterek megadott értékeivel.
Mi fut át az alapvető paramétereket a dokumentációban leírt a csatlakozót, amely a területén található egy mappát dugó eszközök / plugins / tvimageresizer / docs / readme_ru.txt.
TV-azonosítók - azon TV-paraméterek azonosításai, amelyekre átméretezésre van szükség (ha több van, írjon be vesszőt).
Ennek a mezőnek az értelmében adja meg az újonnan létrehozott TV-paraméterek képsorának azonosítóját. Győződjön meg róla, hogy az azonosítót helyesen adta meg, ellenkező esetben a beépített bővítmény nem működik. Megtekintheti bármelyik TV azonosítóját az Elemek lapon → Elemek kezelése → Beállítások (TV). A paraméter neve melletti zárójelben feltüntetett szám az azonosítója.
Thumb mappák - a mappában, amelyben a kép másolata kerül betöltésre. Több mint egy elválasztót is megadhat "
mini, a legmelegebbek azok a mappák nevei, amelyekben különböző méretű miniatúrákat helyeznek el. A beépülő modul automatikusan létrehoz egy mappát az adott nevekkel.
A létrehozott miniatűr szélessége - szélessége. Több mint egy elválasztót is megadhat "
40, azaz. a létrehozott indexkép, amely a mappában lesz elhelyezve, a szélesség 500 képpont lesz, a mini mappához tartozó miniatűr pedig 40 képpont széles lesz.
Magasság - a létrehozott indexkép magassága. Több mint egy elválasztót is megadhat "
40, ezzel jelezve a közepes és a mini mappákban lévő miniatűrök magasságát.
Vágás - kivágási képek (pontosan a megadott méretekkel határozható meg). crop_resized - csökkenti + crop; fill_resized - arányosan csökkenti, a mezők kitöltésével színes (Háttérszín).
Corners százalékos vágás - kerek sarkok (a méret a szög százalékban). Több különböző képet is megadhat a szeparátoron keresztül "
Vízjel kép elérési útja (png) - a vízjel elhelyezése (a PNG kép elérési útja). Több különböző képet is megadhat a szeparátoron keresztül "
Csak név mentése - mentse a képfájl nevét a mezőbe.
Minőség - képminőség.
Háttérszín - a háttérszín (ezt figyelembe veszik a sarkok lekerekítésekor).
Képek átnevezése - képek átnevezése. Minden kép át lesz nevezve a dátummal: d.m.y_H.i.
Tükörhatás - a tükör visszaverődésének hatása.
Frissítse az összes képet - frissítse az összes képet a "Cache ürítése" gombra kattintva.
Miután betöltötte a bővítmény konfigurációját, menjen a következő "Rendszeres események" fülre, és válassza ki a rendszerkövetelmények közül a rendszerkövetelményeket. Jelöljük be az OnSiteRefresh és az OnBeforeDocFormSave parancsot.
Létrehozza a részleteket datarus
Töltse ki a következő mezőket:
A kódrészlet neve datarus.
Kódrészlet (php) - itt adjuk meg a fájl tartalmát. A lekérdezés végén található lecke végén letöltheti a kódrészlet kódját is.
Ebben a szakaszban telepítettük azokat a fő kiterjesztéseket, amelyekre szükségünk van, amikor létrehozunk sablont a jegyzetek megjelenítéséhez.
Regisztrálj címkéket a blogbejegyzésekhez, és csatolja a képet TV paraméterekkel
Annak érdekében, hogy láthassuk a cikkek bejelentésének teljes verzióját, minden blog cikkhez ki kell töltened a címkék listáját, és csatolnunk kell a képet. Az üres TV-paraméterek kitöltése érdekében sikerült szerkeszteni a MODx dokumentumfájlban található erőforrásokat.
A "Kép" és "Címkék" TV-paraméterek feltöltése után Ditto sablon kimenetet hozunk létre.
Hozzon létre egy Ditto kimeneti sablont
Hozzunk létre egy darab nevet, például minipost és tegyük egy struktúra alapján készült a HTML layout darab FŐ speciális címkék MODx, TV kimeneti paramétereket, és indítsa el a korábban létrehozott töredék.
Helyezze be a minipost részébe az alábbi kódot:
[+ pagetitle +]
[[TagLinks? id = `[+ id +]` tv = `tags` szeparátor = `,` elem = `span` fap = `1` path = `index.html` címke = ``]]
[+ image-post +]
[+ introtext +]
Ebben a sablonmintában a következő speciális MODx címkéket használják:
[+ pagetitle +] - a "Cím" mezőben szereplő erőforrás neve, amelyet az erőforrás szerkesztésekor kitöltünk.
] - Az oldal URL-címe.
[+ introtext +] - az oldal rövid leírása, az "Absztrakt (bevezető)" mező tartalma, amelyet az erőforrás szerkesztésekor kitölt.
[+ szerző +] - annak a felhasználónak a neve, aki létrehozta a jegyzetet. Az alapértelmezés szerint szükséges név vagy becenév megjelenítéséhez kattintson a Felhasználók → Kezelői lapok elemre, és töltse ki a "Teljes név" mezőt a kezelőprofil szerkesztésekor. A mező tartalma megjelenik a weboldalon.
Megjegyezzük, hogy a sablon kiadási MODx speciális címkéket úgynevezett tervezési [+ TAG_NAME +], míg az oldalon a „tartalma a forrás” és a honlap sablonokat, hogy hívja MODx speciális címkéket építőipari [* TAG_NAME *].
Azon a helyen, ahol a jegyzet címkéit el kell helyezni, az újonnan létrehozott kódrészletlista hívása a következő:
[[TagLinks? id = `[+ id +]` tv = `tags` szeparátor = `,` elem = `span` fap = `1` path = `index.html` címke = ``]]
Az 500-200 képpontos csonkkép helyett egy TV paraméterhívást helyezünk be. Mint emlékszünk, a TVimageResizer plug-in használatával a TV-készülékhez csatolt képparaméter alapján automatikusan létrejön a szükséges méretű miniatűr.
[[Datarus? MyDate = `[+ pub_date +]`]]
[[Ditto? tpl = `minipost` összegezze = `7` mélység = `5` hideFolders = `1` paginate = '1` dateSource = 'pub_date` sortBy = `pub_date` dateFormat = `..% m.% y% H:% M` tagData = `tags` tagDelimiter = `,`]]
A kódrészletben megadott paraméterek:
tpl = `minipost` - elküldi a kódrészletnek azt a darabot, amelyben a létrehozott kimeneti sablon tárolódik;
paginate = '1' - engedélyezi a rekordok számozását;
tagData = `tags` az a TV-paraméter neve, amelyben a cikkek címkéit tárolják;
tagDelimiter = `,` egy karakter, amely határoló lesz a címkék között.
Készletdarab létrehozása megegyezik a Szétválogatással
Szükségünk van erre a részletre annak érdekében, hogy a listát ellipszis segítségével töröljük meg nagyszámú oldallal. " ”.
Menjünk a Elemek lap → Elemek kezelése → Snippets → Új snippet elemre.
Töltse ki a következő mezőket
A kódrészlet neve megegyezik a SplitPagination lehetőséggel.
Leírás - a részletezéshez használt kódrészlet.
Snippet kód (php) - itt átmásoljuk a fájl tartalmát. A lekérdezés végén található lecke végén letöltheti a kódrészlet kódját is.
Oldal-navigáció létrehozása
A kódrészlet létrehozása után szerkesztjük azt a fődarabot, amelybe a Ditto hívást helyeztük el, és közvetlenül a kódrészlet felépítése után hozzáadjuk a következő kódot:
Ennek eredményeképpen a fődarabnak a következő szerkezettel kell rendelkeznie:
Annak ellenőrzéséhez, hogyan működik a lapozás megosztása, ideiglenesen megadhatja a paramétert összegezzen egy kis számot a kódrészletben, például 1.
Ie a cikkek bejelentéseinek nyilvántartása közeledett ahhoz, amire szükségünk van. Még néhány pontot korrigálni kell.
Most meg fogjuk szerkeszteni a CSS-fájlt, hogy regisztráljuk a regisztrálási stílusokat az oldal navigáció és címkék oldalán.
A stílusok hozzáadása az eszközökhöz / sablonok / blog / css / coolblue.css fájlhoz lapozási navigáció létrehozásához (írja le a háttér- és szövegszíneket, a megjelenítési kereteket, a betűméreteket, a behúzásokat és egyéb CSS-stílusokat).
Most írjunk fel egy jelölési stílust. A coolblue.css stílusok CSS-fájljában találjuk az osztály utáni info leírását.
és cserélje ki a következő kódot:
Itt hozzárendelhetünk színt, betűméretet, behúzást, stílusokat, ha lebegünk a link fölé, és hozzáadunk egy hátteret a címke képéhez.
Módosított CSS-fájl letölthető a lecke végén a lecke fájljaival.
Példaként idézem a CSS stílusokat, de bárki számára tetszés szerint készíthet stílusterveket. A legfontosabb dolog az alapvető CSS készségek.