modx devrim eğitimi. MODX Devrimi - Temel öğretici. Temel şablonu düzenleme

Önceki eğitimlerde modx'i kurup yapılandırdık ve ayrıca siteyi oluşturmak için gerekli olacak paketleri kurduk. Bugünün öğreticisi, normal HTML/CSS/JS tasarımını MODX Revo'ya taşımakla ilgilidir. Tasarımı nereden alabilirim, makalede şöyle yazdım: MODX şablonları - bunlar nedir, nereden alabilirim (indirin, sipariş verin, satın alın). Sitem için, themeforest'ta 17 $'a Brightbox adlı hazır, ücretli, duyarlı bir önyükleme şablonu seçtim (demosunu ve açıklamasını görmek için adına tıklayın). Kesinlikle herhangi birini kullanabilirsiniz, bunlar dolu ve ücretsizdir - bu nedenle büyük olasılıkla tüm esneme ilkesini daha iyi anlayacaksınız.

Tema HTML Yapısı

Hemen hemen her temanın html, css, js ve resim dosyaları vardır + çoğunda ayrıca php dosyaları vardır - form işleyicileri.

Benim durumumda, varlıklar klasöründe css ve js dosyaları (ilgili dizinlerde), resimler klasöründe - resimler ve kırmızı dosyalar (kırmızı dosyalarınız olmayabilir - hepsi varsayılan tarayıcıya bağlıdır) - bunlar html Dosyalar.

Bir şablonu Modx'e aktarma

En kolay yol, klasörleri olan tüm dosyaları (html hariç) web sitesinin köküne koymaktır. Ama ben daha zor yolu seçeceğim. Modx'im sertleştiğinden ve bir asset dizinim olmadığı için, sitenin sitenin kök dizinine varlıklardan (css ve js alt klasörleri) içerikleri ve kök dizinine de görüntüleri yükleyeceğim.

Daha önce bir şablon dizini oluşturdum ve tüm dosyaları içine attım - siz de aynısını yapabilirsiniz.

Temel şablonu düzenleme

Soldaki ağaçta "Öğeler" sekmesine gidin ve ilk şablonu açın (yalnızca LMB veya RMB'ye tıklayıp düzenle'yi seçebilirsiniz).

Onu sileriz ve index.html'deki (sitenin köküne koymadığımız) kodla değiştiririz.

Html dosyasını normal bir not defteri ile açabilirsiniz, ancak örneğin özel bir düzenleyici kullanmak daha iyidir.

Kaydedin ve sitenin ana sayfasına gidin.

Ana sayfa şu anda çarpık görünüyor.

Bunun nedeni, komut dosyalarına ve css'e giden yolların değişmesidir.

Yolları Düzenleme

Artık yollar böyle görünüyor.

Bu arada, biraz garip bir konu, genellikle yol / ve \ eğik çizgisinden geçer, hadi bunu düzeltelim.

Ace paketini zaten yüklediyseniz, o zaman kolayca ve basitçe bir değiştirme ile arama yapabilirsiniz, bunu yapmak için kodu tıklayın ve ardından Ctrl + H tuş bileşimine basın (Linux ve pencerelerde çalışır), \ girin üst alana ve / alt alana ve tümüne basın.

MODx resmi sitesi

http://modx.com/

Web siteleri oluşturmak için öğreticilerMOD x

Parçacık Seçenekleri

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

Dağıtımın en son sürümü http://modx.com/download/evolution/ adresinden indirilebilir.

Bir site oluşturma sırasıMOD xevrim

1. Barındırıcı tarafından belirlenen bir önekle bir veritabanı ve bir kullanıcı oluşturun, böylece daha sonra config.inc.php dosyasını düzenlemenize gerek kalmaz.
2. MODX'i kurun. Ayarları yapın.
3. Site şablonunu varlıklar/şablonlar klasörüne kopyalayın.
4. index.html şablon kodunu Minimal Şablonlar şablonuna kopyalayın.
5. İçeri yolu tarif et

   .

6. Komut dosyalarına, resimlere, stillere (img, link, scrypts) giden yolları ayarlayın. Örneğin,

7. Sitede kaç şablon olacağını belirleyin.
8. Tüm sayfalarda ortak olan parçaları seçin, bunlar parça olacaktır. Parçalar, çift kıvrık parantez içinde görüntülenir. Örneğin, ((KAFA))
9. Sitenin ana menüsü ayrı bir yığına taşınabilir. .
10. Sitedeki menü ve site haritası Wayfinder snippet'i tarafından görüntülenir. Wayfinder snippet'inin açıklaması.
11. Açıklamalar, resimler, bağlantılar ... dahil olmak üzere kaynakların bir listesi Ditto snippet'i olarak görüntülenir. Ditto snippet'inin açıklaması ve örnekleri.
12. İçerik haritaları gezinme zinciri, İçerik haritaları snippet'i tarafından oluşturulur. Breadcrumbs snippet'inin açıklaması.
13. Site, AjaxSearch snippet'i kullanılarak aranır. AjaxSearch snippet'inin açıklaması.
14. Geri bildirim formu - eForm snippet'i. eForm snippet'ini kullanarak geri bildirim formu oluşturmaya bir örnek.
15. Phx eklentisi, bir TV parametresinde görüntü olup olmadığını kontrol etmek, ebeveyn özelliklerini belirlemek vb. için tasarlanmıştır.
16. Ek olarak birkaç stilin kaydedilmesi gerekir.
17. Siteyi hostinge aktardıktan sonra:

Herkese merhaba arkadaşlar! Bu, MODX sistemini tanıyacağımız, gerekli eklentileri yükleyeceğimiz ve temel çerçeve kurulumunu gerçekleştireceğimiz CMF MODX Devrimi hakkında temel bir eğitimdir.

Serin

İğnele

Temel MODX Ders Kaynakları:

• pdoTools Belgeleri: docs.modx.pro/components/pdotools/

MODx eklentilerini yükleme ve yapılandırma

Düzenlemek Gelişmiş MODx sürümü, kurulum sırasında yönetici klasörünün çağrılacağını belirtiyoruz Süper.

Olması Gereken MODx Eklentileri

MODx için en popüler ve en çok kullanılan eklentiler:

1. as- MODx kod düzenleyici;
2. Koleksiyonlar- kaynak koleksiyonlarının görüntülenmesi ve yönetimi;
3. pdoAraçlar- bir dizi temel araç MODx;
4. Biçimlendir- MODx'te formlarla çalışın;
5. phpThumbOf- MODx'te görüntülerle çalışın;
6. TinyMCE / CKEditor (isteğe bağlı)- MODx için metin WYSIWYG editörü;
7. translit- MODx'te URL harf çevirisi;
8. MİGX- MODx'te ek alanlar eklendi;
9. otomatik şablon- Şablonların kaynaklara "Akıllı" otomatik ataması.

MODx Revolution temel ayarları

"Sistem Ayarları"na gidin.

1. Bölüm: Kolay URL'ler

   • Takma ad çevirisi: Rusça;
   • Kolay URL'ler kullanın: Evet;
   • Katı Dostu URL Modu: Evet;
   • Tüm bağlamlarda yinelenen URI'leri kontrol edin: Evet;
   • İç içe URL'ler kullanın: Evet;
   • Ayrıca yeniden adlandırmayı unutmayın ht.access v .htaccess sitenin kökünde.

2. Bölüm: Kontrol Paneli

   • Açıklamayı üst menüde göster: HAYIR.

3. Bölüm: Web sitesi

   • Hata sayfası 404 "Belge bulunamadı": Kaynak Kimliği 404;
   • Varsayılan olarak yayınla: Evet;
   • sitenin adı: Projenizin adı.

4. Bölüm: Sistem ve Sunucu

   • X-Powered-By başlığı gönder: HAYIR.

5. Ad alanı: as

   • Yazı Boyutu: 18 piksel;
   • Esnek sekme: HAYIR;
   • Sekme boyutu: 2;
   • Editör teması (isteğe bağlı): ambiyans, kaos, krom, bulutlar, cloud_midnight, kobalt, crimson_editor, şafak, dreamweaver, eclipse, github, boşta_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, terminal, textmate, yarın, yarın_gece, yarın_gece_mavi, yarın_gece_parlak, yarın_gece_seksenli, alacakaranlık, canlı_mürekkep, xcode;
   • Ek olarak, bir tema oluşturabilirsiniz. malzeme Ace editöründe. Talimat:

     MODx Ace Malzeme Teması 1. Sistem Ayarları > "ace" Ad Alanı: Yazı Tipi Boyutu: 15px Düzenleme Alanı Yüksekliği: 560 Görünmez Karakterler: Evet Esnek Sekme: Hayır Sekme Boyutu: 2 Editör Teması: Tomorrow_night 2. Dosyalar: Dosya Sistemi > süper > şablonlar > varsayılan > css > index.css: (Sona ekleyin) .ace_editor(line-height: 1.4!important;font-family: "Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace !important) .ace_gutter(color:#666E79!important) .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!important) .ace_meta.ace_tag.ace_tag-name(color:#DF6A73!important) .ace_entity.ace_other.ace_attribute-name(color:#D2945D!important) .ace_string(color:#90C378) !önemli) 3. Menü aracılığıyla önbelleği temizleyin.

Oluşturulan temel kaynaklar

1. Sayfa 404- "Belge bulunamadı" ayarı için sayfa. Menüde gösterme;
2. site haritası- çıktı kaynağı [] . Boş şablon. Menüde gösterme. İçerik Türü: XML. Aranamaz. HTML düzenleyicisini kullanmayın;
3. robotlar- çıktı kaynağı robots.txt. Boş şablon. Menüde gösterme. İçerik türü: metin. Aranamaz. HTML editörünü kullanmayın.

Neden MODx ve nasıl böyle bir hayata geldiğim hakkında yazmıyorum. Kimin umurunda - benim . Ayrıca, bu derse geldiyseniz, yalnızca site oluşturmakla değil, MODx'te site oluşturmakla da ilgilendiğinizi varsayacağız. Zaten varsayılana sahip olduğunuzu varsayalım:

• yüklü bir işletim sistemine sahip bilgisayar (veya dizüstü bilgisayar) (önemli değil)
• dürtmek veya tıklamak için fare
• tıklamak veya kaydırmak için klavye
• izlemek
• internet girişi
• web siteleri yapmak için büyük istek

Bu arada, hepsi dizüstü bilgisayar gibi bir cihaza oldukça iyi uyuyor. Ve sık sık ülkede çalışmayı planlıyorsanız, onu satın almak daha iyidir. Arkanıza yaslanın ve bundan sonra yazacağım şeyi tekrarlayın, başaracaksınız!

Başlamak için, tüm noktaları ve virgülleri yerleştiriyoruz - bir ders planı. Hemen alıp web sitesi yapmak imkansız olduğu için bunu yavaş yavaş öğreneceğiz. Bu nedenle, belki ilk dersler size biraz sıkıcı veya basit gelebilir - beceriler kazandıkça görevler daha karmaşık hale gelecektir.

MODx'i Keşfetmek Bir kartvizit sitesi oluşturarak başlamak en iyisidir. Bu, yalnızca sistemin temel ilkelerini anlamanıza değil, aynı zamanda daha karmaşık ve ilginç problemler oluşturmak için gerekli olan ayırt edici özellikleri öğrenmenize de yardımcı olacaktır. Bu arada, bu bir web stüdyosu kazanmanın üç balinasından biridir ve sadece yardım almakla kalmaz, aynı zamanda iyi para da kazanabilirsiniz (bunu hızlı bir şekilde yaparsanız ve çok sayıda müşteri bulursanız).

Kartvizit sitesi nedir?

Kartvizit sitesi, birkaç web sayfasından oluşan ve bir kuruluş, mal veya hizmetler, fiyat listeleri ve iletişim bilgileri hakkında temel bilgiler içeren küçük bir sitedir.

Aslında, çıplak html'de 4 sayfalık bir kartvizit sitesi yapılabilir, ancak böyle bir siteyi sürdürmek çok daha zordur - en az bir sayfa eklerken, her şeyi yeniden yapmak gerekecektir. Bu yüzden içerik yönetim sistemleri sıradan bir içerik yöneticisinin veya site sahibinin hayatını büyük ölçüde kolaylaştırır.

Modex'te site nasıl yapılır?

Siteyi geliştirmeye başlamadan önce işyerini hazırlamamız gerekiyor. Bu nedenle MODx CMS/CMF sisteminin en son sürümünün bulunduğu resmi siteye gidip indiriyoruz. Resmi site biraz Rusça konuşuyor, ancak bu, MODx Evolution'ın en son sürümünü indirmemizi engellemeyecek.Bu yazının yazıldığı sırada, MODx'in en son sürümü 1.0.8'dir. (Kelimenin tam anlamıyla bu dersin yayınlanmasından sonraki gün, MODx Evolution 1.0.9'un yeni bir sürümü duyuruldu. Ayrıntılar için habré http://habrahabr.ru/post/173667/)

Dikkatli ol: MODx 1.0.8 de en son sürümdür, ancak kontrol sisteminin farklı bir koluna aittir, bu nedenle MODx ile yeni tanışmaya başlıyorsanız, Devrim 2'yi kurmak için acele etmeyin. Evrim.

Ardından, bilgisayarınıza bir web sunucusu kurmanız veya hemen bir barındırma üzerinde bir site geliştirmeye başlamanız gerekir. Ben ikinci seçeneği tercih ediyorum çünkü localhost'tan site transferi sırasında bazen beklenmeyen hatalar oluşabiliyor. Her zaman böyledir.