Integration of the 1C-Bitrix template
Once again, trying to find a programmer who has worked with CMS 1C-Bitrix in his city, I come across a problem ...
Programmers have worked with different free frameworks like Joomla, WordPress, etc., but when it comes to Beatrix, they all say: “Oh, it's paid, why do I need it when there are a lot of other free ones”. And they do not want to take up the study of something new.
So I began, with the exception of one, they immediately showed me how and why. But the material in the network and I habre I found. Therefore, I’ll start with a simple program, like a normal programmer with knowledge of PHP and at least basic HTML, CSS, JS, to start working with Beatrix.
About the directory structure of the template will not speak, you can read about it here . The first thing you have to face is the integration of the HTML template on the CMS.
')
Suppose you have a ready-made HTML template and you need to integrate it with the system. Let's start with the installation on the server:
Everything at this stage of the installation ends, go directly to the integration of the template. Go to the administration panel in the "Settings". Next, go down the tree of tinctures: Product Settings - Site Templates, click on the button "Add Template"
A standard form for creating a template opens.
Come up with ID (I usually use main), enter the name of the template. The "Description" field is not necessary, it is rather made for developers, so as not to confuse templates, if there are several of them.
This is where the fun began. Usually the HTML page template looks like this:
The main thing is to understand what is related to the template, and what to the content part. In this example, the content part starts between the
If you have CSS, go to the Template Styles tab and paste it there.
At this stage, you can click "Save" and see what happened. But since we do not have pictures and the correct paths are not registered in HTML and CSS, then most likely you will just see the skeleton of the site.
Next, I usually edit files already via FTP. Open your text editor (I have Notepad ++, so I will not write his example) and go to the server. The entire Bitrix template is located at
We turn to the final part and prescribe all the necessary variables of Bitrix. Open the file
We also want to see the site admin panel in the public part of the site:
To display the page title, add the
By the way, I forgot to say if there are additional files, be it JS, CSS, favicon and so on, so as not to prescribe the full long path
Do not forget to edit the path in CSS, save everything and can look at the resulting result.
Oh yes, you still need to apply the created template to the site. To do this, go to "Product Settings - Site List - s1"
Select the template we created and click “Save”, and we can see the result of the work done.
This, of course, does not end the process. But for the beginning it is quite enough. In the following articles we will look at how to add a component to a template and its customization.
Programmers have worked with different free frameworks like Joomla, WordPress, etc., but when it comes to Beatrix, they all say: “Oh, it's paid, why do I need it when there are a lot of other free ones”. And they do not want to take up the study of something new.
So I began, with the exception of one, they immediately showed me how and why. But the material in the network and I habre I found. Therefore, I’ll start with a simple program, like a normal programmer with knowledge of PHP and at least basic HTML, CSS, JS, to start working with Beatrix.
About the directory structure of the template will not speak, you can read about it here . The first thing you have to face is the integration of the HTML template on the CMS.
')
Suppose you have a ready-made HTML template and you need to integrate it with the system. Let's start with the installation on the server:
- Go to the Bitrix site and download the installer ;
- Fill bitrixsetup.php on the server and start the installation.
The first thing the installer offers you is to choose the editor:
Choose the distribution you need (as a rule, this is “Site Management”), if you have a key, enter it and click “Download”. The process has begun ...
- If the unpacking was successful, then you see the welcome window of the installation.
Click "Next", accept the license agreement, set the site in UTF-8 encoding (or not, optional)
- The following are what novice programmers encounter with the “Required System Parameters”, namely:
To solve this problem, go to the server, open the.htaccessfile and find the following lines there
#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8
Uncomment them. We press F5 and everything works ... If it still does not work (and this sometimes happens), then write an appeal to those. hosting support.
- The next step is installing the database. Here I think it is not necessary to paint. Therefore, we go further. If all is well, then you will see the Bitrix installation process:
- We got to the choice of solutions proposed by Bitrix. Since we need a clean system without any additions, select the “Demo site for developers”
- Next we are greeted by the standard "Master"
With it you can set the demo data. We do not need to click "Cancel".
Everything at this stage of the installation ends, go directly to the integration of the template. Go to the administration panel in the "Settings". Next, go down the tree of tinctures: Product Settings - Site Templates, click on the button "Add Template"
A standard form for creating a template opens.
Come up with ID (I usually use main), enter the name of the template. The "Description" field is not necessary, it is rather made for developers, so as not to confuse templates, if there are several of them.
This is where the fun began. Usually the HTML page template looks like this:
<html> <head> <title></title> <link rel="stylesheet" href="..." /> <script type="text/javascript">...</script> </head> <body> <header> <nav>...</nav> </header> <div class="content"> <aside>...</aside> <section>...</section> </div> <footer>...</footer> </body> </html>
The main thing is to understand what is related to the template, and what to the content part. In this example, the content part starts between the
section tag. Therefore, copy the template in the field "Appearance of the site template." Between the tag insert service directive #WORK_AREA# . As a result, your template will look like this:
<html> <head> <title></title> <link rel="stylesheet" href="..." /> <script type="text/javascript">...</script> </head> <body> <header> <nav>...</nav> </header> <div class="content"> <aside>...</aside> <section>#WORK_AREA#</section> </div> <footer>...</footer> </body> </html>
If you have CSS, go to the Template Styles tab and paste it there.
At this stage, you can click "Save" and see what happened. But since we do not have pictures and the correct paths are not registered in HTML and CSS, then most likely you will just see the skeleton of the site.
Next, I usually edit files already via FTP. Open your text editor (I have Notepad ++, so I will not write his example) and go to the server. The entire Bitrix template is located at
/bitrix/templates/_/ , if you have images or additional style files, JS scripts, etc., then copy everything into this folder.
We turn to the final part and prescribe all the necessary variables of Bitrix. Open the file
header.php and start editing. The first thing you need to do is connect the site header output:
… <head> <?$APPLICATION->ShowHead();?> </head> …
We also want to see the site admin panel in the public part of the site:
… <body> <?$APPLICATION->ShowPanel();?> … </body> …
To display the page title, add the
<?$APPLICATION->ShowTitle();?> to the corresponding tag. As a result, we get the following file:
<html> <head> <title><?$APPLICATION->ShowTitle();?> </title> <?$APPLICATION->ShowHead();?> <link rel="stylesheet" href="..." /> <script type="text/javascript">...</script> </head> <body> <?$APPLICATION->ShowPanel();?> <header> <nav>...</nav> </header> <div class="content"> <aside>...</aside> <section>
By the way, I forgot to say if there are additional files, be it JS, CSS, favicon and so on, so as not to prescribe the full long path
/bitrix/…/ there is a special constant SITE_TEMPLATE_PATH . We insert it in the right places:
<link rel="stylesheet" href="<?echo SITE_TEMPLATE_PATH;?>/style.css" />
Do not forget to edit the path in CSS, save everything and can look at the resulting result.
Oh yes, you still need to apply the created template to the site. To do this, go to "Product Settings - Site List - s1"
Select the template we created and click “Save”, and we can see the result of the work done.
This, of course, does not end the process. But for the beginning it is quite enough. In the following articles we will look at how to add a component to a template and its customization.
Source: https://habr.com/ru/post/162881/
All Articles