آموزش انقلاب modx. MODX Revolution - آموزش پایه. در حال ویرایش قالب پایه

در آموزش های قبلی modx را نصب و پیکربندی کردیم و همچنین پکیج هایی که برای ساخت سایت مورد نیاز خواهند بود را نصب کردیم. آموزش امروز در مورد انتقال طراحی معمولی HTML/CSS/JS به MODX Revo است. از کجا می توانم طرح را دریافت کنم، در مقاله نوشتم: قالب های MODX - آنها چیست، از کجا می توانم آنها را دریافت کنم (دانلود، سفارش، خرید). برای سایت خود، یک قالب آماده بوت استرپ ریسپانسیو پولی در themeforest با قیمت 17 دلار به نام روشن باکس انتخاب کردم (برای دیدن نسخه نمایشی و توضیحات آن روی نام کلیک کنید). شما می توانید کاملاً از هر کسی استفاده کنید ، آنها کامل و رایگان هستند - بنابراین به احتمال زیاد کل اصل کشش را بهتر درک خواهید کرد.

ساختار HTML تم

تقریباً هر تم دارای فایل‌های html، css، js و تصویری است + بسیاری از آنها نیز فایل‌های php دارند - handlers فرم.

در مورد من، در پوشه دارایی ها فایل های css و js (در دایرکتوری های مربوطه) وجود دارد، در پوشه تصاویر - تصاویر و فایل های قرمز (ممکن است رنگ قرمز نداشته باشید - همه اینها به مرورگر پیش فرض بستگی دارد) - اینها html هستند. فایل ها.

انتقال یک قالب به Modx

ساده ترین راه این است که فقط تمام فایل های دارای پوشه (به جز html) را در ریشه وب سایت قرار دهید. اما من مسیر سخت تر را انتخاب می کنم. از آنجایی که modx من سخت شده است و دایرکتوری assets ندارم، محتویات را از assets (زیرپوشه‌های css و js) به ریشه سایت و تصاویر را نیز در root آپلود می‌کنم.

قبلاً یک دایرکتوری الگو ایجاد کردم و همه فایل ها را در آن ریختم - شما می توانید همین کار را انجام دهید.

در حال ویرایش قالب پایه

در درخت سمت چپ، به تب "Elements" بروید و الگوی اولیه را باز کنید (شما فقط می توانید LMB یا RMB را کلیک کنید و ویرایش را انتخاب کنید).

آن را حذف می کنیم و کد index.html را جایگزین آن می کنیم (که در ریشه سایت قرار نداده ایم).

شما می توانید فایل html را با یک دفترچه یادداشت معمولی باز کنید، اما بهتر است برای مثال از یک ویرایشگر خاص استفاده کنید.

ذخیره کنید و به صفحه اصلی سایت بروید.

صفحه اصلی در حال حاضر کج به نظر می رسد.

این به این دلیل اتفاق افتاد که مسیرهای اسکریپت و css تغییر کرده است.

ویرایش مسیرها

اکنون مسیرها به این شکل هستند.

به هر حال، یک موضوع کمی عجیب است، معمولا مسیر از یک اسلش /، و \، بیایید این را برطرف کنیم.

اگر قبلا بسته ace را نصب کرده اید، می توانید به راحتی و به سادگی با جایگزینی جستجو کنید، برای این کار روی کد کلیک کنید و سپس کلید ترکیبی Ctrl + H (در لینوکس و ویندوز کار می کند) را فشار دهید، \ را وارد کنید قسمت بالا و / در قسمت پایین و همه را فشار دهید.

وب سایت رسمی MODx

http://modx.com/

آموزش ساخت وب سایت درMODx

گزینه های قطعه

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

آخرین نسخه توزیع را می توانید در http://modx.com/download/evolution/ دانلود کنید

دنباله ایجاد یک سایت درMODxسیر تکاملی

1. یک پایگاه داده و یک کاربر با پیشوند تعیین شده توسط میزبان ایجاد کنید تا بعداً نیازی به ویرایش فایل config.inc.php نداشته باشید.
2. MODX را نصب کنید. تنظیمات را انجام دهید.
3. قالب سایت را در پوشه assets/templates کپی کنید.
4. کد قالب index.html را در قالب Minimal Templates کپی کنید.
5. داخل مسیر را تجویز کند

   .

6. مسیرهایی را برای اسکریپت ها، تصاویر، سبک ها (IMG، لینک، رمزگذاری) تنظیم کنید. مثلا،

7. تعیین کنید که چه تعداد قالب در سایت وجود دارد.
8. قسمت های مشترک برای همه صفحات را انتخاب کنید، آنها تکه خواهند بود. تکه ها در پرانتزهای مجعد دوتایی نمایش داده می شوند. به عنوان مثال، ((HEAD))
9. منوی اصلی سایت را می توان به یک قسمت جداگانه منتقل کرد. .
10. منوی سایت و نقشه سایت توسط قطعه Wayfinder نمایش داده می شود. شرح قطعه Wayfinder.
11. لیستی از منابع، شامل توضیحات، تصاویر، پیوندها ... به عنوان یک قطعه Ditto نمایش داده می شود. توضیحات و نمونه هایی از قطعه Ditto.
12. زنجیره ناوبری breadcrumbs توسط قطعه Breadcrumbs ارائه می شود. شرح قطعه Breadcrumbs.
13. سایت با استفاده از قطعه AjaxSearch جستجو می شود. شرح قطعه AjaxSearch.
14. فرم بازخورد - قطعه eForm. نمونه ای از ایجاد فرم بازخورد با استفاده از قطعه eForm.
15. افزونه Phx برای بررسی عدم وجود تصویر در پارامتر تلویزیون، تعیین ویژگی های والدین و غیره طراحی شده است.
16. علاوه بر این لازم است چندین سبک ثبت شود.
17. پس از انتقال سایت به هاست:

سلام به همه دوستان! این یک آموزش اولیه در CMF MODX Revolution می باشد که در آن با سیستم MODX آشنا شده و افزونه های لازم را نصب کرده و راه اندازی اولیه فریم ورک را انجام می دهیم.

سرد

آن را سنجاق کنید

منابع درسی پایه MODX:

• مستندات pdoTools: docs.modx.pro/components/pdotools/

نصب و پیکربندی پلاگین های MODx

نصب پیشرفتهنسخه MODx، در حین نصب نشان می دهیم که پوشه مدیریت فراخوانی می شود فوق العاده.

پلاگین های ضروری MODx

محبوب ترین و پرکاربردترین افزونه ها برای MODx:

1. آس- ویرایشگر کد MODx.
2. مجموعه ها- نمایش و مدیریت مجموعه منابع؛
3. pdoTools- مجموعه ای از ابزارهای اساسی MODx؛
4. FormI- کار با فرم ها در MODx.
5. phpThumbOf- کار با تصاویر در MODx.
6. TinyMCE / CKEditor (اختیاری)- ویرایشگر متن WYSIWYG برای MODx.
7. ترجمه- نویسه‌گردانی URL در MODx.
8. MIGX- اضافه شدن فیلدهای اضافی در MODx.
9. الگوی خودکار- تخصیص خودکار "هوشمند" الگوها به منابع.

تنظیمات اولیه MODx Revolution

به "تنظیمات سیستم" بروید.

1. بخش: URL های دوستانه

   • آوانویسی مستعار:روسی؛
   • از URL های دوستانه استفاده کنید:آره؛
   • حالت URL دوستانه دقیق:آره؛
   • URI های تکراری را در همه زمینه ها بررسی کنید:آره؛
   • از URL های تو در تو استفاده کنید:آره؛
   • فراموش نکنید که نام را نیز تغییر دهید ht.access V htaccessدر ریشه سایت

2. بخش: کنترل پنل

   • نمایش توضیحات در منوی بالا:خیر

3. بخش: وب سایت

   • صفحه خطای 404 "سند یافت نشد":شناسه منبع 404;
   • انتشار به طور پیش فرض:آره؛
   • نام سایت:نام پروژه شما

4. بخش: سیستم و سرور

   • ارسال هدر X-Powered-By:خیر

5. فضای نام: آس

   • اندازه فونت: 18 پیکسل؛
   • زبانه نرم:خیر؛
   • اندازه برگه: 2;
   • موضوع ویرایشگر (اختیاری):محیط، هرج و مرج، کروم، ابرها، نیمه شب، کبالت، ویرایشگر زرشکی، سپیده دم، دریم باف، کسوف، github، انگشتان بیکار، katzenmilch، kr، kuroir، مربی‌خوار، مربی‌خوار_نرم، تک_صنعتی، monokai__dark، ترمینال، پستل فردا_شب، فردا_شب_آبی، فردا_شب_روشن، فردا_شب_دهه هشتاد، گرگ و میش، جوهر_پر جنب و جوش، xcode;
   • علاوه بر این، می توانید یک موضوع بسازید مواددر ویرایشگر آس دستورالعمل:

     تم مواد MODx Ace 1. تنظیمات سیستم > فضای نام "ace": اندازه قلم: 15 پیکسل ارتفاع ناحیه ویرایش: 560 کاراکتر نامرئی: بله برگه نرم: بدون اندازه برگه: 2 موضوع ویرایشگر: فردا_شب 2. فایل‌ها: Filesystem > super > templates > default > css > index.css: (در پایان اضافه کنید) .ace_editor(line-height: 1.4!important;font-family: "Menlo"، "Ubuntu Mono"، "Consolas"، "source-code-pro"، monospace !مهم) .ace_gutter(color:#666E79!important) .ace_active-line,.ace_gutter-active-line(color-background:#2A2F38!important) .ace_gutter,.ace_gutter (color-background: #272B33.import! ace_meta.ace_tag(color:#A6B2C0!مهم) .ace_meta.ace_tag.ace_tag-name(color:#DF6A73!important) .ace_entity.ace_other.ace_ویژگی-نام(رنگ:#D2945D:#890col). !مهم) 3. کش را از طریق منو پاک کنید.

منابع پایه تولید شده

1. صفحه 404- صفحه برای تنظیم "سند یافت نشد". در منو نشان داده نشود؛
2. نقشه سایت- منبع خروجی [] . قالب خالی در منو نمایش داده نشود. نوع محتوا: XML. قابل جستجو نیست از ویرایشگر HTML استفاده نکنید.
3. روبات ها- منبع خروجی robots.txt. قالب خالی در منو نمایش داده نشود. نوع مطلب: متنی قابل جستجو نیست از ویرایشگر HTML استفاده نکنید.

در مورد اینکه چرا MODx و چگونه به چنین زندگی رسیدم، نمی نویسم. چه کسی اهمیت می دهد - به من خوش آمدید. ما همچنین فرض می کنیم که اگر به این درس آمدید، نه تنها به ایجاد سایت، بلکه به ایجاد سایت در MODx علاقه دارید. بیایید فرض کنیم که شما قبلاً پیش فرض را دارید:

• کامپیوتر (یا لپ تاپ) با سیستم عامل نصب شده (مهم نیست)
• ماوس را به نوک زدن یا کلیک کردن
• صفحه کلید برای کلیک کردن یا کشیدن انگشت
• نظارت کنید
• دسترسی به اینترنت
• تمایل زیادی برای ساخت وب سایت

به هر حال، همه اینها به خوبی در دستگاهی مانند لپ تاپ جا می شود. و اگر قصد دارید اغلب در کشور کار کنید، بهتر است آن را خریداری کنید. بنشین و آنچه را که در ادامه خواهم نوشت تکرار کن و موفق می شوی!

برای شروع، ما تمام نقاط و کاما را قرار می دهیم - یک طرح درس. از آنجایی که گرفتن و ساخت سریع وب سایت غیرممکن است، به تدریج این را یاد خواهیم گرفت. بنابراین، شاید اولین درس ها برای شما کمی خسته کننده یا ساده به نظر برسد - با کسب مهارت ها، وظایف دشوارتر می شوند.

کاوش در MODxبهتر است با ایجاد یک سایت کارت ویزیت شروع کنید. این به شما کمک می کند نه تنها اصول اولیه سیستم را درک کنید، بلکه ویژگی های متمایز مورد نیاز برای تنظیم مشکلات پیچیده تر و جالب تر را نیز بیاموزید. به هر حال، این یکی از سه نهنگ کسب درآمد یک استودیوی وب است و بر روی آنهاست که نه تنها می توانید دستی به دست آورید، بلکه پول خوبی نیز به دست آورید (اگر این کار را سریع انجام دهید و مشتریان زیادی پیدا کنید).

سایت کارت ویزیت چیست؟

سایت کارت ویزیت یک سایت کوچک است که از چندین صفحه وب تشکیل شده و حاوی اطلاعات اولیه در مورد یک سازمان، کالا یا خدمات، لیست قیمت و اطلاعات تماس است. (ج) ویکی پدیا

در واقع، یک سایت کارت ویزیت 4 صفحه ای را می توان با html خالی ساخت، اما حفظ چنین سایتی بسیار سخت تر است - هنگام اضافه کردن حداقل یک صفحه، لازم است همه چیز را دوباره انجام دهید. بنابراین سیستم های مدیریت محتوازندگی یک مدیر محتوای معمولی یا صاحب سایت را تا حد زیادی تسهیل می کند.

نحوه ساخت سایت در modex

قبل از شروع توسعه سایت، باید محل کار را آماده کنیم. بنابراین با آخرین نسخه سیستم MODx CMS/CMF به سایت رسمی رفته و آن را دانلود می کنیم. سایت رسمی به زبان روسی کمی صحبت می کند، اما این مانع از دانلود آخرین نسخه MODx Evolution نمی شود.در زمان نگارش این مقاله، آخرین نسخه MODx 1.0.8 است. (به معنای واقعی کلمه یک روز بعد از انتشار این درس، نسخه جدید MODx Evolution 1.0.9 اعلام شد. جزئیات در habré http://habrahabr.ru/post/173667/)

مراقب باش: MODx 1.0.8 نیز آخرین نسخه است، اما از یک شاخه متفاوت از سیستم کنترل، بنابراین اگر به تازگی با MODx آشنا شده اید، برای نصب Revolution 2 عجله نکنید. درس های این دوره به طور خاص برای سیر تکاملی.

در مرحله بعد، باید یا یک وب سرور بر روی رایانه خود نصب کنید یا بلافاصله شروع به توسعه یک سایت در هاست کنید. من گزینه دوم را ترجیح می دهم، زیرا گاهی اوقات خطاهای غیرمنتظره ای ممکن است در هنگام انتقال سایت از لوکال هاست رخ دهد. همیشه همینطور است.