MODX Revolution - Basic tutorial. MODX Revolution - Basic Tutorial Section: Friendly URLs
In previous lessons, we installed and configured modx, and also installed the packages that will be necessary to create a website. Today is a lesson about transferring regular HTML/CSS/JS design to MODX Revo. Where you can get the design I wrote in the article: MODX templates - what they are, where to get them (download, order, buy). For my site, I chose a ready-made paid adaptive bootstrap template on themeforest for $17 called brightbox (click on the name to see its demo and description). You can use absolutely any one, there are plenty of them and they are free - this way you will most likely better understand the whole principle of tension.
HTML Theme Structure
Almost every theme has html, css, js and image files + many also have php files - form handlers.
In my case, the assets folder contains css and js files (in the corresponding directories), the images folder contains images and red files (yours may not be red - it all depends on the default browser) - these are html files.
Transferring a template to Modx
The easiest way is to simply upload all files and folders (except html) to the root of the website. But I'll take a more difficult route. Since my modx is hardened and I don’t have an assets directory, I will upload the contents from assets (css and js subfolders) to the root of the site and images to the root too.
Previously, I created a template directory and put all the files in it - you can do the same.
Editing a Basic Template
In the tree on the left, go to the “Elements” tab and open the initial template (you can simply left-click or right-click and select edit).
We delete it and replace it with the code from index.html (which we did not add to the root of the site).
You can open an html file using a regular notepad, but it is better to use a special editor, for example.
Save and go to the main page of the site.
The main page now looks crooked.
This happened because the paths to the scripts and css changed.
Editing paths
The paths now look like this.
By the way, this is a bit of a strange topic, usually the path goes through a slash /, and \, let’s fix that.
If you have already installed the ace package, then you can easily and simply do a search with replacement, to do this, click on the code and then press the key combination Ctrl+H (works on Linux and Windows), enter \ in the upper field, and / in the lower field and press all.
In previous lessons, we installed and configured modx, and also installed the packages that will be necessary to create a website. Today is a lesson about transferring regular HTML/CSS/JS design to MODX Revo. Where you can get the design I wrote in the article: MODX templates - what they are, where to get them (download, order, buy). For my site, I chose a ready-made paid adaptive bootstrap template on themeforest for $17 called brightbox (click on the name to see its demo and description). You can use absolutely any one, there are plenty of them and they are free - this way you will most likely better understand the whole principle of tension.
HTML Theme Structure
Almost every theme has html, css, js and image files + many also have php files - form handlers.
In my case, the assets folder contains css and js files (in the corresponding directories), the images folder contains images and red files (yours may not be red - it all depends on the default browser) - these are html files.
Transferring a template to Modx
The easiest way is to simply upload all files and folders (except html) to the root of the website. But I'll take a more difficult route. Since my modx is hardened and I don’t have an assets directory, I will upload the contents from assets (css and js subfolders) to the root of the site and images to the root too.
Previously, I created a template directory and put all the files in it - you can do the same.
Editing a Basic Template
In the tree on the left, go to the “Elements” tab and open the initial template (you can simply left-click or right-click and select edit).
We delete it and replace it with the code from index.html (which we did not add to the root of the site).
You can open an html file using a regular notepad, but it is better to use a special editor, for example.
Save and go to the main page of the site.
The main page now looks crooked.
This happened because the paths to the scripts and css changed.
Editing paths
The paths now look like this.
By the way, this is a bit of a strange topic, usually the path goes through a slash /, and \, let’s fix that.
If you have already installed the ace package, then you can easily and simply do a search with replacement, to do this, click on the code and then press the key combination Ctrl+H (works on Linux and Windows), enter \ in the upper field, and / in the lower field and press all.
Hello everyone, friends! This is a basic tutorial on CMF MODX Revolution, in which we will get acquainted with the MODX system, install the necessary plugins and perform basic configuration of the framework.
Cool
Stammer
Basic MODX Lesson Resources:
- pdoTools Documentation: docs.modx.pro/components/pdotools/
Installing and configuring MODx plugins
Install Advanced version of MODx, during installation we indicate that the admin folder will be called super.
Must-have MODx plugins
The most popular and most frequently used addons for MODx:
- Ace- MODx code editor;
- Collections- display and management of resource collections;
- pdoTools- a set of basic MODx tools;
- FormIt- working with forms in MODx;
- phpThumbOf- working with images in MODx;
- TinyMCE / CKEditor (optional)- text WYSIWYG editor for MODx;
- translit- URL transliteration in MODx;
- MIGX- Added additional fields to MODx;
- AutoTemplate- "Smart" automatic assignment of templates to resources.
MODx Revolution Basic Settings
Go to "System Settings".
Section: Friendly URLs
- Transliteration of pseudonyms: russian;
- Use friendly URLs: Yes;
- Strict friendly URL mode: Yes;
- Check for duplicate URIs in all contexts: Yes;
- Use nested URLs: Yes;
- Don't forget to also rename ht.access V .htaccess at the root of the site.
Section: Control Panel
- Show description in top menu: No.
Section: Website
- 404 "Document not found" error page: Resource ID 404;
- Publish by default: Yes;
- Site name: The name of your project.
Section: System and server
- Send X-Powered-By header: No.
Namespace: ace
- Font size: 18px;
- Soft tab: No;
- Tab size: 2;
- Editor theme (optional): ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, vibrant_ink, xcode;
- In addition, you can make a theme Material in the Ace editor. Instructions:
MODx Ace Material Theme 1. System Settings > Namespace "ace": Font Size: 15px Editing Area Height: 560 Invisible Characters: Yes Soft Tab: No Tab Size: 2 Editor Theme: tomorrow_night 2. Files: Filesystem > super > templates > default > css > index.css: (Add at the end) .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 !important) 3. Clear cache through the menu.
Created base resources
- Page 404- page for setting “Document not found”. Do not show in menu;
- sitemap- resource for withdrawal [] . Blank template. Do not show on menu. Content type: XML. Not searchable. Do not use an HTML editor;
- robots- resource for withdrawal robots.txt. Blank template. Do not show on menu. Content type: text. Not searchable. Do not use an HTML editor.