MODX Devrimi - Temel öğretici. MODX Devrimi - Temel Ders Bölümü: Kolay URL'ler

Ö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.

Ö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.

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.