školení modx revoluce. MODX Revolution - Základní návod. Úprava základní šablony

V předchozích tutoriálech jsme nainstalovali a nakonfigurovali modx a také nainstalovali balíčky, které budou potřeba k vytvoření webu. Dnešní tutoriál je o portování běžného HTML/CSS/JS designu do MODX Revo. Kde mohu získat návrh, jsem psal v článku: Šablony MODX - co to je, kde je mohu získat (stáhnout, objednat, koupit). Pro svůj web jsem si vybral hotovou placenou responzivní bootstrap šablonu na themeforest za 17 $ s názvem brightbox (kliknutím na název zobrazíte její demo a popis). Použít můžete úplně kohokoli, jsou plné a zdarma – s největší pravděpodobností tedy lépe pochopíte celý princip strečinku.

Struktura HTML tématu

Téměř každé téma má soubory html, css, js a obrázky + mnoho má také soubory php - manipulátory s formuláři.

V mém případě jsou ve složce aktiv soubory css a js (v odpovídajících adresářích), ve složce obrázky - obrázky a červené soubory (možná nemáte červené - vše závisí na výchozím prohlížeči) - to jsou html soubory.

Přenos šablony do Modx

Nejjednodušší způsob je vložit všechny soubory se složkami (kromě html) do kořenového adresáře webu. Ale půjdu tou těžší cestou. Vzhledem k tomu, že můj modx je zesílený a nemám adresář aktiv, nahraji obsah z aktiv (podsložky css a js) do kořenového adresáře webu a obrázky také do kořenového adresáře.

Předtím jsem vytvořil adresář šablony a hodil do něj všechny soubory - můžete udělat totéž.

Úprava základní šablony

Ve stromu vlevo přejděte na kartu „Prvky“ a otevřete výchozí šablonu (stačí kliknout na LMB nebo RMB a vybrat upravit).

Smažeme jej a nahradíme kódem z index.html (který jsme nevložili do kořenového adresáře webu).

Soubor html můžete otevřít běžným poznámkovým blokem, ale je lepší použít například speciální editor.

Uložte a přejděte na hlavní stránku webu.

Domovská stránka teď vypadá křivě.

Stalo se to proto, že se změnily cesty ke skriptům a css.

Úpravy cest

Cesty nyní vypadají takto.

Mimochodem, trochu zvláštní téma, obvykle cesta vede přes lomítko /, a \, opravíme to.

Pokud jste již nainstalovali balíček ace, můžete snadno a jednoduše vyhledat náhradu, klikněte na kód a poté stiskněte kombinaci kláves Ctrl + H (funguje na Linuxu a Windows), zadejte \ v horní pole a / v dolním poli a stiskněte vše.

Oficiální stránky MODx

http://modx.com/

Návody na tvorbu webových stránek naMODx

Možnosti úryvků

http://wiki.modxcms.com/index.php/Category:Snippets

Nejnovější verzi distribuce lze stáhnout na http://modx.com/download/evolution/

Sekvence vytváření webu naMODxvývoj

1. Vytvořte databázi a uživatele s prefixem určeným hostitelem, abyste později nemuseli upravovat soubor config.inc.php.
2. Nainstalujte MODX. Proveďte nastavení.
3. Zkopírujte šablonu webu do složky aktiv/šablony.
4. Zkopírujte kód šablony index.html do šablony Minimal Templates.
5. Uvnitř předepsat cestu

   .

6. Nastavit cesty ke skriptům, obrázkům, stylům (img, link, scrypts). Například,

7. Určete, kolik šablon bude na webu.
8. Vyberte části společné pro všechny stránky, budou to kusy. Bloky jsou zobrazeny ve dvojitých složených závorkách. Například ((HEAD))
9. Hlavní nabídku webu lze přesunout do samostatného bloku. .
10. Nabídka na webu a mapa webu jsou zobrazeny pomocí fragmentu Wayfinder. Popis úryvku Wayfinderu.
11. Seznam zdrojů, včetně popisů, obrázků, odkazů... se zobrazí jako úryvek Ditto. Popis a příklady úryvku Ditto.
12. Navigační řetězec drobečkové navigace je vykreslen fragmentem drobečkové navigace. Popis fragmentu Breadcrumbs.
13. Stránky se prohledávají pomocí úryvku AjaxSearch. Popis úryvku AjaxSearch.
14. Formulář zpětné vazby – úryvek elektronického formuláře. Příklad vytvoření formuláře zpětné vazby pomocí úryvku elektronického formuláře.
15. Plugin Phx je určen ke kontrole nepřítomnosti obrazu v parametru TV, určení rodičovských vlastností atd. .
16. Je nutné dodatečně zaregistrovat několik stylů.
17. Po převedení webu na hosting:

Zdravím všechny, přátelé! Toto je základní návod na CMF MODX Revolution, ve kterém se seznámíme se systémem MODX, nainstalujeme potřebné pluginy a provedeme základní nastavení frameworku.

chladný

Připnout

Základní zdroje lekce MODX:

• Dokumentace k pdoTools: docs.modx.pro/components/pdotools/

Instalace a konfigurace zásuvných modulů MODx

Nainstalujte Pokročilý verze MODx, při instalaci označujeme, že bude volána složka admin super.

Nutné MODx pluginy

Nejoblíbenější a nejpoužívanější doplňky pro MODx:

1. Eso- editor kódu MODx;
2. Sbírky- zobrazení a správa sbírek zdrojů;
3. pdoTools- sada základních nástrojů MODx;
4. FormIt- práce s formuláři v MODx;
5. phpThumbOf- práce s obrázky v MODx;
6. TinyMCE / CKEditor (volitelné)- textový WYSIWYG editor pro MODx;
7. přeložit- přepis URL v MODx;
8. MIGX- Přidána další pole v MODx;
9. automatická šablona- "Inteligentní" automatické přiřazování šablon ke zdrojům.

Základní nastavení MODx Revolution

Přejděte na „Nastavení systému“.

1. Sekce: Přátelské adresy URL

   • Přepis aliasu: Ruština;
   • Používejte přátelské adresy URL: Ano;
   • Přísný režim přátelské adresy URL: Ano;
   • Zkontrolujte duplicitní identifikátory URI ve všech kontextech: Ano;
   • Použít vnořené adresy URL: Ano;
   • Nezapomeňte také přejmenovat ht.access PROTI .htaccess v kořenovém adresáři webu.

2. Sekce: Ovládací panely

   • Zobrazit popis v horním menu: Ne.

3. Sekce: Webové stránky

   • Chybová stránka 404 „Dokument nenalezen“: ID zdroje 404;
   • Publikovat ve výchozím nastavení: Ano;
   • Název webu: Název vašeho projektu.

4. Sekce: Systém a server

   • Odeslat záhlaví X-Powered-By: Ne.

5. Jmenný prostor: eso

   • Velikost písma: 18px;
   • Měkká záložka: Ne;
   • Velikost karty: 2;
   • Téma editoru (volitelné): ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, solarized_ondardar, solar_light, solarized_ondardar zítra_noc, zítra_noc_modrá, zítřejší_noc_jasná, zítřejší_noc_osmdesátých let, soumrak, zářivý_ink, xcode;
   • Kromě toho můžete vytvořit téma materiál v editoru Ace. Návod:

     Motiv materiálu MODx Ace 1. Nastavení systému > "ace" Prostor názvů: Velikost písma: 15 px Výška oblasti úprav: 560 Neviditelné znaky: Ano Měkká karta: Ne Velikost karty: 2 Téma editoru: zítra_noc 2. Soubory: Systém souborů > super > šablony > výchozí > css > index.css: (Přidat na konec) .ace_editor(line-height: 1.4!important;font-family: "Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace !important) .ace_gutter(color:#666E79!důležité) .ace_active-line,.ace_gutter-active-line(background-color:#2A2F38!important) .ace_scroller,.ace_gutter (background-color: #272B33!important) . ace_meta.ace_tag(color:#A6B2C0!důležité) .ace_meta.ace_tag.ace_tag-name(color:#DF6A73!důležité) .ace_entity.ace_other.ace_attribute-name(color:#D2945D!důležité) .ace_string(color:#) !important) 3. Vymažte mezipaměť pomocí nabídky.

Generované základní zdroje

1. Strana 404- stránka pro nastavení "Dokument nenalezen". Nezobrazovat v nabídce;
2. mapa webu- výstupní zdroj [] . Prázdná šablona. Nezobrazovat v nabídce. Typ obsahu: XML. Nelze prohledávat. Nepoužívejte editor HTML;
3. robotů- výstupní zdroj robots.txt. Prázdná šablona. Nezobrazovat v nabídce. Typ obsahu: text. Nelze prohledávat. Nepoužívejte editor HTML.

O tom, proč MODx a jak jsem k takovému životu přišel, nepíšu. Koho to zajímá - vítejte na mém . Budeme také předpokládat, že pokud jste přišli na tuto lekci, pak máte zájem nejen o vytváření webů, ale o vytváření webů na MODx. Předpokládejme, že již máte výchozí:

• počítač (nebo notebook) s nainstalovaným operačním systémem (na tom nezáleží)
• myší šťouchnout nebo kliknout
• klávesnice pro kliknutí nebo přejetí prstem
• monitor
• Přístup na internet
• velká chuť dělat webové stránky

Mimochodem, všechno se to docela dobře vejde do zařízení, jako je notebook. A pokud plánujete často pracovat v zemi, je lepší si ji koupit. Pohodlně se usaďte a zopakujte si, o čem budu psát příště, a uspějete!

Pro začátek umístíme všechny body a čárky – plán lekce. Vzhledem k tomu, že není možné okamžitě vzít a udělat web, naučíme se to postupně. Proto se vám možná budou první lekce zdát trochu nudné nebo jednoduché – jak budete získávat dovednosti, úkoly se budou komplikovat.

Prozkoumání MODx Nejlepší je začít vytvořením stránky vizitek. To vám pomůže nejen porozumět základním principům systému, ale také se naučíte charakteristické rysy, které jsou nutné k nastavení složitějších a zajímavějších problémů. Mimochodem, toto je jedna ze tří velryb výdělku webového studia a právě na nich můžete nejen získat ruku, ale také vydělat dobré peníze (pokud to uděláte rychle a najdete spoustu klientů).

Co je to stránka s vizitkami?

Stránka vizitek je malá stránka, která se skládá z několika webových stránek a obsahuje základní informace o organizaci, zboží nebo službách, ceníky a kontaktní informace. (c) Wikipedia

Ve skutečnosti lze vizitkový web o 4 stránkách udělat na holém html, ale udržovat takový web je mnohem těžší - při přidání alespoň jedné stránky bude nutné vše předělat. Tak redakční systémy výrazně usnadňují život běžnému správci obsahu nebo majiteli stránek.

Jak vytvořit web na modex

Než se pustíme do vývoje webu, musíme připravit pracoviště. Proto přejdeme na oficiální stránky s nejnovější verzí systému MODx CMS/CMF a stáhneme si ji. Oficiální stránka mluví málo rusky, ale to nám nezabrání ve stažení nejnovější verze MODx Evolution.V době psaní tohoto článku je nejnovější verze MODx 1.0.8. (Doslova druhý den po vydání této lekce byla oznámena nová verze MODx Evolution 1.0.9. Podrobnosti na habré http://habrahabr.ru/post/173667/)

Buď opatrný: MODx 1.0.8 je také nejnovější verze, ale jiné větve řídicího systému, takže pokud se s MODx teprve začínáte seznamovat, nespěchejte s instalací Revolution 2. Lekce v tomto kurzu budou psány speciálně pro Vývoj.

Dále musíte buď nainstalovat webový server na váš počítač, nebo okamžitě začít s vývojem webu na hostingu. Dávám přednost druhé možnosti, protože někdy může dojít k neočekávaným chybám při přenosu webu z localhostu. Je to tak vždycky.