Skabeloner til modx evo. Designintegration i MODX Revolution: Single Page Template
I dag vil vi vælge et passende design i form af et færdiglavet HTML-layout til det projekt, der skal implementeres. Vi vil også konfigurere visningen af indholdet af enkelte websider.
Så som kildemateriale til at skabe Modex-sideskabeloner, valgte jeg et layout kaldet "simplemagazine-01" fra TemplatesDock:
Som du kan se ovenfor, svarer strukturen af et "simpelt magasin" fuldt ud til en klassisk blog: to kolonner, hovedmenuen øverst, overskrifter til højre og andre hjælpeelementer. Derudover arbejdede webdesigneren og HTML-koderen også på skabelonen indvendig side uden at forsømme de grundlæggende elementer i typografi:
Det er faktisk det, vi skal bruge for at komme i gang.
Download Design Integration i MODX Revolution: E1. Efter godkendelse på dit websted ved hjælp af den indbyggede filhåndtering(se faneblad Filer træ af elementer til højre) oprette nyt katalog ringede skabeloner i mappen "aktiver" og derefter i denne nye - kald det "simplemagazine":
2. B kontekstmenu den oprettede skabelonmappe, vælg "Upload filer", hvis du foretrækker at uploade filer ved hjælp af indbyggede værktøjer...
Nå, for at spare min egen tid, uploader jeg bare design-, javascript- og css-mapperne til /assets/templates/simplemagazine. Fantastisk, de nødvendige filer til fremtidige sideskabeloner er blevet placeret på deres pladser. Lad os derefter gå videre til selve integrationsprocessen.
1. Gå til fanen Ressourcer i elementtræet. Indtast navnet på skabelonen og dens beskrivelse, indsæt det fulde indhold af filen "subpage.html" i kodefeltet - gør alt som vist på skærmbilledet nedenfor:
2. Mellem tags... tilføj et basislink. Dette er nødvendigt, så du kan omdefinere stier til stilarter og klientscripts ved hjælp af relative links.
3. Nu omdefinerer vi stierne til stilene og scripts, og erstatter stierne med dem, der ligner følgende. For eksempel var det i den originale markering:
Jeg håber, at princippet er klart. Men hvis dette eksempel er en tom sætning for læseren (!), så anbefaler jeg indtrængende at læse htmlbook.ru - om måder at tilføje stilarter til en side. Du gør det samme med JavaScript-inkluderinger.
ResultaterHilsen, kære læsere! I tidligere lektioner lavede vi de indledende MODX-indstillinger, installerede de vigtigste tilføjelsespakker og konfigurerede MODX CNC. Nu begynder det sjove. I dag vil vi tale om, hvad MODX-skabeloner er, og hvor man kan få dem (download, bestil, køb).
Hvad er en MODX skabelonEn MODx-skabelon er i det væsentlige en almindelig HTML/CSS/JS-skabelon med MODX-syntakstags skrevet inde i den for bedre dynamisk funktionalitet. Så hvis du ikke er dårlig til HTML/CSS, så integration almindelig HTML/CSS skabelon i MODX vil ikke forårsage problemer. Takket være denne funktion er MODX meget praktisk for webdesignere. Nå, lad os nu gå videre til den mest interessante del.
Hvor kan man hente skabeloner til modxHer har vi tre måder:
Den første mulighed er velegnet til webdesignere, eller i det mindste dem, der er flydende i Adobe Photoshop og har et godt kendskab til HTML og CSS.
Den anden mulighed er velegnet til dig, hvis du har det svært med Adobe Photoshop og CSS, fordelen ved denne mulighed er, at du ikke skal spilde din tid (på tegning, layout osv.), men du bliver nødt til at betale for det, og det er ikke et faktum, at de vil tegne dig og derefter lave en skabelon af høj kvalitet. Her er de sider, hvor du sandsynligvis vil finde en performer, , , du kan også kontakte mig med dette spørgsmål.
Nå, den 3. mulighed er velegnet til dig, hvis du i det mindste har lidt forståelse for HTML og CSS. Kræver minimal investering og tager ikke meget tid (stiliser lidt på din egen måde, lav små redigeringer osv. For kunder med et lille budget bruger jeg normalt denne mulighed.
Som en del af de lektioner, der er lagt ud på denne blog, vil jeg lave en hjemmeside fra bunden, alt efter hvad jeg har kommissorium. Hvis du bare skal lære at oprette hjemmesider på MODX, så download skabelonen, jeg har oprettet, og eksperimenter med den (layoutet og layoutet kan findes i Bootstrap 4-lektionerne).
Hvis du vil have din egen skabelon, for en sikkerheds skyld, vil jeg give en liste over websteder, hvor du kan downloade dem.
En liste over websteder, hvor du nemt kan finde en skabelon med et fremragende design til ethvert webstedstema.Jeg vil straks bemærke, at du ikke behøver at tro, at skabelonsider er dårlige. Ingen!
Det dårlige er, når der hældes mange "penge" ind på siden (et unikt forfatterdesign, den dyreste dedikerede server i Tyskland eller Holland, betalt motor, såsom "1C-Bitrix: Site Management - Business" for 60.000 rubler, den sejeste "SEO-specialist" med fakturering pr. sekund blev ansat, Yandex.Direct blev lanceret for 100.000 rubler. i let driftstilstand osv.), men resultatet er nul! Det her er virkelig slemt! Jeg vil sige det er ret dårligt!
Bemærk venligst, at skabelonen for den fremtidige plads skal vælges med maksimal reserve for fremtiden. Hvad betyder det? Siden vil ikke fungere i et år eller to med dette design, men tiden står ikke stille - teknologier ændrer sig. Derfor er det dumt at vælge skabeloner yngre end 2014.
Tabellayout er en anakronisme!
Den skabelon du vælger skal opfylde de grundlæggende krav:
For at opnå det sidste punkt bruges normalt den mest almindelige, populære og fleksible CSS-ramme Twitter Bootstrap. Versioner, helst højere end 3.5. Nu er det version 4.
Siderne præsenterer både rene HTML-skabeloner og skabeloner (temaer) til forskellige CMS(WordPress, Joomla, Drupal). Desuden er prisen på sidstnævnte flere gange dyrere. Som du måske har gættet, giver temaskabeloner ikke mening for CMS MODX. Hvis du overvejer at købe en af skabelonerne, hvorfor så betale for meget for en særlig temaskabelon, hvis du kan købe den hos simpel HTML meget billig (lad os sige for $15, dvs. omkring 550 rubler). Derudover tilbyder sælgeren nogle helt identiske skabeloner, både CMS-orienterede og almindelig HTML. Fx som et særskilt emne for WordPress skabelon koster $75, men i almindelig HTML-form koster det $15.
Temaskabeloner er kun egnede, hvis du ikke har fundet en almindelig HTML-skabelon, der opfylder dine behov eller kundens behov.
Jeg tror, du finder ud af det.
Men i denne artikel vil jeg tale lidt om noget andet, om moduler. Jeg skriver denne artikel af den grund, at der er meget lidt information om dette emne på internettet. Jeg har slet ikke fundet sådanne oplysninger i det russiske segment.
Mere specifikt kan du ved hjælp af moduler oprette tilføjelser med dine egne grænseflader, for eksempel til masseredigering af dokumenter eller til at administrere en online butik, hvilket vil være praktisk for brugeren. Oprettelse af et nyt modul indlysende. Bare gå til fanen moduler->modulstyring og til højre øverste hjørne klik på knappen nyt modul, så udfyld alle de felter, du skal bruge, og klik på Gem, jeg er sikker på, at ingen vil have nogen problemer med dette. Efter du har gemt modulet, vil det dukke op i moduler fanebladet Modulkode Det er fantastisk at lave moduler, men nogle gange har vi et mærkeligt ønske om at dette modul skal gøre noget... Modulkodefeltet er ansvarlig for alt hvad modulet gør. ; det er simpelthen skrevet i den php-kode, der vil blive udført, så snart du går ind i dit modul. Bemærk, at du ikke kan bruge et åbnings- og lukketag her, så hvis du vil vise nogle html kode, vær forberedt på at skrive output det via standard ekkostrømmen eller stille et krav til en fil, hvor denne kode vil være i en mere bekvem form. Jeg anbefaler selvfølgelig at holde fast i koden separate filer. Traditionelt er modulfiler placeret i mappen "/assets/modules/(Modulenavn)", så opret en tilsvarende mappe i denne mappe og referer til den i modulkoden.
// Da alle modx konstanter og klasser er tilgængelige for dig, brug MODX_BASE_PATH require_once(MODX_BASE_PATH."assets/modules/newmodule/index.php");
Nu vil denne kode blive eksekveret, når dit modul starter.
Lad os nu prøve at gøre noget nyttigt, for eksempel at vise alle dokumenter med en bestemt skabelon på ét sted, dette er praktisk, for eksempel i tilfælde, hvor du har mange produkter på dit websted, og de er spredt på tværs af kategorier. For at gøre dette kan vi bruge funktionerne i modx selv eller for eksempel gennem $modx->runSnippet metoden få alle dokumenterne gennem det elskede Ditto af alle evolutionister, kort sagt fuldstændig handlefrihed. Men først vil vi fokusere på noget meget simpelt og simpelthen få disse dokumenter gennem indpakningen for at arbejde med databasen givet $modx->db.
// Ikke den mest korrekte, men hurtige og overskuelige måde at vise dokumenter med et link til sig selv $docs = $modx->db->query("SELECT id, pagetitle FROM modx_site_content WHERE template="8"")->fetch_all (); foreach($docs as $doc)( $docId = $doc; $docTitle = $doc; echo "
$docTitle
"; }Hvis vi nu går til modulet, vil vi ikke se de smukkeste, men stadig links til alle dokumenter med id = 8.
Men hvad skal vi gøre, hvis vi ikke vil gå ind i koden og skrive skabelon-id'et der?
Konfigurationer i MODX For at konfigurere variabler til vores applikation er der såkaldte konfigurationer i plugins og moduler, i dem kan du indstille så mange variabler du vil med forskellige inputtyper, som vil være tilgængelige som definerede variable i koden. Konfigurationer konfigureres på fanen Egenskaber i formularen JSON-array og derefter, efter lagring, konverteres de automatisk til en smuk plade på konfigurationssiden. Her er et eksempel på udfyldelse af egenskabsfanen.( "card_template": [ ( "label": "Produktkort", "type": "streng", "default": "", "desc": "produktkort skabelon-id") ], "price_tv": [ ( "label": "Pris", "type": "streng", "default": "", "desc": "tv-id for den parameter, der er ansvarlig for prisen") ] )
Her burde der heller ikke være nogen spørgsmål. Herefter kan vi genopbygge vores kode, så skabelon-id'et er taget fra denne variabel kaldet $kort_skabelon.
AndyShop Modulnavn tpResources = new WebFXTabPane(document.getElementById("andyShopPane"), true); Produkter tpResources.addTabPage(document.getElementById("Produkter")); Ordrer tpResources.addTabPage(document.getElementById("Ordrer")); 
Nå, nu har vi en meget kortfattet side, som kan vises til kunden.
Hvorfor MODX EVO I dag er det i et høfligt samfund sædvanligt at bagvaske den evolutionære gren af MODX-udvikling på alle mulige måder. Jeg er ikke enig i denne udtalelse og mener, at selv med et så stærkt værktøj som MODX Revolution, har dens ældre bror stadig ret til at eksistere. Det skyldes i høj grad, at EVO efter min mening er mere velegnet til at udvikle virksomhedshjemmesider og tilpassede landingssider.For det første på grund af dens mere åbenlyse syntaks og fraværet af mange værktøjer, der overbelaster grænsefladen. For det andet på grund af det faktum, at den med udgivelsen af version 1.2 fra december 2016 begyndte at komme med et brugervenligt tema. Og for det tredje føles Evolution-adminpanelet virkelig hurtigere end Revo. Hvad angår fællesskabet og den brede vifte færdige løsninger, vinder den unge fighter helt sikkert her.
For et par måneder siden stiftede jeg bekendtskab med modx-motoren. Først var det meget svært, selvom der er nok tutorials om det. Men nogle af dem er forældede, nogle var til andre versioner. Men generelt fandt jeg ud af motorens arbejde og muligheder, jeg ville også installere en smuk modx-skabelon, men så løb jeg ind i et problem - der er ingen skabeloner til modx som sådan. Først blev jeg ked af det, men så gik det op for mig, hvor fedt det er, fordi du kan vedhæfte enhver html-skabelon til modh, og samtidig opdele den i bidder (skabelondetaljer), som du vil! I denne artikel vil jeg fortælle dig, hvordan du nemt installerer en modx-skabelon, deler den op i dele, og hvordan du redigerer modx-skabeloner.
Det vigtigste er at finde en simpel html-skabelon. Gerne adaptiv – så den åbner på forskellige enheder med forskellig skærmbredde. Vi antager, at du har fundet en (selvom i vores tilfælde absolut enhver html-skabelon vil gøre det). Dernæst skal du enten uploade filerne til hostingen eller oprette sider der og kopiere indholdet. Men lad os tage det trin for trin, og hvordan jeg gør det.
Trin-for-trin instruktioner til oprettelse og tilpasning af din modx skabelon
Så vi har en skabelon - et sæt html- og css-filer, muligvis også scripts.
1. Gå til modx admin panel, Elements-Templates fanen, og klik på plustegnet.
3. Klik på Gem. Det er det, vores skabelon er klar. Men for at kontrollere dens funktion skal du oprette en testside. For at gøre dette skal du oprette en ny ressource (side), vælge vores nyoprettede skabelon og klikke på Gem. Glem ikke at markere feltet Udgivet.
Åbn nu vores side (ved manuelt at indtaste adressen i browseren eller tilføje den til menuen for nemheds skyld). Hvis du gjorde alt korrekt, skulle siden åbne med din nye html skabelon, installeret på modx.
Din egen modx-skabelon: billeder og css-stile vises ikke
Selvom skabelonen højst sandsynligt ikke åbner, som den skal første gang. Vær forsigtig med placeringen af filerne. Normalt kan skabelonen "flyde" og blive vist uden billeder. Det skyldes alt sammen, at stien til filerne er indtastet forkert.
De skal ses på i selve skabelonfilen og placeres, hvor du uploadede den til hostingen. For eksempel uploadede jeg filer til assets/template/test_shab / mappen, så i skabelonen skrev jeg noget som assets/template/test_shab/img/favicon.ico osv. Alle filstier skal ændres, da alle filer som standard er placeret i mappen med skabelonen, men i modx er det bedre at uploade dem et sted (men dette er mere for nemheds skyld for ikke at tilstoppe systemet).
Sådan viser du modx-indhold på din skabelon Hvis din skabelon åbner, og alle billederne vises, er det godt. Men det er ikke alt. Selve indholdet, der er registreret via modx-administrationspanelet, vises ikke. Hvorfor? For det er ikke nævnt i skabelonen! Vi har lige kopieret al koden fra html-skabelonen. I stedet for indhold i skabelonen skal du tilføje en [[*indhold]]-klump, som er ansvarlig for at vise alt modx indhold
. I skabeloneditoren ser det sådan ud:
Det er her vi slutter for nu. Hvis noget ikke virker, så spørg. Det er ikke alt, du skal stadig dele din skabelon op i bidder for at gøre det mere bekvemt at vise indhold og arbejde med webstedet.
MODX er et avanceret og kraftfuldt indholdsstyringssystem, der tilbyder en hurtig og nem måde for brugere at oprette, administrere og tilpasse deres hjemmeside og blog, selvom de har ringe eller ingen viden om programmering. Hvis du ønsker at skabe en fantastisk funktionel hjemmeside med forholdsvis mindre budget, så er MODX-temaer de bedste muligheder for dig. Her deler vi toppen, som du kan prøve til din virksomheds hjemmeside og give den det ønskede udseende. Base er et minimalistisk og rent MODX-tema, der kommer med et fuldt responsivt design og er ideelt til enhver kreativ virksomhed eller virksomhedshjemmeside. Dette tema er baseret på Bootstrap-ramme 3, kommer med funktioner som 3 hjemmevarianter, nethinden klar design, 600+ skrifttyper, veldokumenteret, glat rulning, træk og drop kortkoder.
MDx Adorn er et rent, minimalistisk og moderne MODX-tema lavet specielt til virksomheder. Det er et 100 % responsivt design kodet med HTML5 og CSS og bygget med Bootstrap framework. Den har funktioner som meget nemme tilpasningsmuligheder, SEO & rich snippets, RTL-layout, ubegrænsede farver, 404-fejlside, ubegrænsede farver og mere.
Club Cube er et andet vidunderligt responsivt MODX-tema designet til natklubber og DJ'er. Den kommer med et iøjnefaldende og moderne design med funktioner som twitter Bootstrap, medieskyder, SEO klar, 20 unikke sider, responsivt design, brugerdefinerede animationer, gyldig HTML5 & CSS3 kode og mere. Få dette MODX-tema downloadet i dag.
MDx Sharp er et smart, rent, moderne, stilfuldt og fleksibelt MODX-tema, der tilbyder alt i én hjemmesideløsning til virksomheder. Dette tema er ideelt til alle typer virksomhedsnicher. Dens vigtigste funktioner inkluderer HTML5 & CSS3, 404 fejlside, ubegrænsede farver, flere skydere, responsivt design, RTL-layout og mere.
Giv din virksomhed, eller portefølje en professionel og iøjnefaldende platform med dette stilfulde og avancerede MODX-tema ved navn STYZO. De vigtigste funktioner i dette tema inkluderer HTML5 & CSS3-kode, fuldt tilpasselig, brugerdefinerede animationer, kubeportefølje, blogsektion, filtrerbar portefølje, Ajax-formular og mere. Få det downloadet online nu!
Prøv Superawesome, et multifunktionelt MODX-tema med en moderne og ren fragtside designet til app- eller produktfremvisning. Dette tema, der er let at konfigurere og administrere, indeholder funktioner såsom et responsivt design, højopløsningsbaggrund, 500+ mock-ups, brønddokumentation, baseret på Bootstrap 3, brugerdefineret layout og et robust adminpanel.
MDx Uber er ideelt MODX-tema til produkt- eller servicebaserede virksomheder og organisationer. Det kan også bruges til blogs, porteføljer, fotografering og . HTML5, CSS3, SEO klar, bygget med Bootstrap 2.3, ubegrænsede farvemuligheder, Google-skrifttyper, flex-skyder og BX-skyder og responsivt layout er nogle af hovedfunktionerne i dette tema.
MDx Apostle er et af de bedste MODX-temaer med et fuldt responsivt design og Bootstrap 2.3-understøttelse. Den er ideel til virksomheder, porteføljer, virksomheder, kreative hjemmesider, blogs og mere. Det følger med Google web skrifttyper, flex-skyder og BX-skyder, jQuery, nem tilpasning, sammenklappelig sidebjælke, et galleri med en lysboks og flere funktioner.
Tredd Studio er en anden mulighed for dig, hvis du leder efter et professionelt, rent og moderne MODX-tema til din hjemmeside. Dette tema er ideelt til porteføljer, fotografering, personlige blogs, produkt- eller app-udstilling og mere. Dette fuldt tilpassede tema kommer med et fuldt responsivt design med funktioner som HTML5 & CSS3-kode, filtrerbar portefølje og mere.
MDx Cygne er et professionelt og stilfuldt designet til fotografer til at fremvise deres kreative fotograferingsarbejde, portfolio og mere. Dette tema kommer med et fuldt responsivt design, brugerdefinerede farveindstillinger, sammenklappelige skydere, jQuery, flex skyder og BX skyder, Google skrifttyper og flere spændende funktioner. Så prøv det og vis dine fotografiske færdigheder professionelt frem.
Dualitet er et MODX-tema på én side, der er ideelt til app- eller produktudstilling, portefølje, landingsside s, virksomheder og mere. Dette tema har som et responsivt design, Bootstrap3 CSS-ramme, moderne enkeltsidet design, isotop premium plug-in, parallakseeffekter, brønddokumentation og mere. Download dette tema på én side, og begynd at oprette en professionel landingsside til din virksomhed.
Neat er et vidunderligt responsivt modulært MODX-tema designet til fotografering, rejsewebsteder, virksomheder, virksomheder og mere. Det tilbyder dig spændende funktioner som et responsivt design, avancerede temaindstillinger, flere indlægsformater, berøringsaktiveret uglekarrusel, en-sides glat rulningslayout og mere. Prøv dette modulære MODX-tema og lav en professionel, ren og moderne hjemmeside til din virksomhed.
Farver er et enkeltsidet MODX-tema lavet til app- eller produktudstilling, virksomheder, virksomheder og mere. Dette tema kommer med funktioner som et responsivt design, 3 skabeloner, flere farveindstillinger, rullemenu, formatuddrag, to menuer, TV til billeder, CSS/JS/billedfiler og mere. Få dette vidunderlige tema downloadet, og lav en dejlig hjemmeside til din virksomhed.
Alle disse skabeloner er testet og betroet af utallige mennesker over hele verden. Det bedste ved at bruge MODX-temaer er, at selv en ufaglært bruger nemt kan oprette og administrere sin hjemmeside med dem. Uanset om du bruger et hel- og flersidet eller et enkeltsidet MODX-tema, vil du blive forsynet med avancerede funktionaliteter, funktioner og et brugervenligt miljø, der gør det ganske enkelt for dig at oprette en funktionel hjemmeside til din virksomhed.