This article describes the creation of a simple website using Site and some other Webasyst apps.
1. Adding new site mydomain.com
The creation of a new website begins with adding it to the common site list in section Site → My sites.
You may skip this first step if you already have a site with the necessary address.
Check whether a site is available at this address.
If no site opens then you first need to register its domain name and then link it to the server directory where Webasyst is installed.
By default, a new site consists of an empty home page and utilizes the standard design theme called Default. Let us add new sections to the site, for the Blog and Photos apps, add another page to it, and try to change its design a little.
2. Site map setup
The main site structure is defined by its routing settings, which consist of a list of rules distributing the entire website address space over various apps. The website routing rules are configured in the Site’s Site map section.
Now we have only one, main, section, which consists of a single page belonging to the Site app. So far, the site’s address space is occupied by this app only, which means that it will handle all site visitor request.
Let us add more sections to the site — for Blog and Photos apps.
We have placed the Blog app at mydomain.com/blog/; therefore, any request at a URL starting with mydomain.com/blog/ (e.g., /blog/2011/?tag=updates, /blog/announcements/new-app-released/, etc.) will be handled by the Blog app. The same applies to the Photos app.
All other URLs, which do not match the mydomain.com/blog/ and mydomain.com/photos/ addresses, will be passed on to the Site app because its section is selected as the main one — it is listed at the top of the site section list and displays a homepage icon.
In the main site menu, you now will see new links opening the new sections corresponding to the Blog and Photos apps.
3. New page
Let us add a new page names “About us” available at mydomain.com/about/.
A link to this new page will appear in the main site menu.
Site pages can be nested within each other. The maximum nesting level is not limited.
4. Variables
We will add another page titled “Feedback” to offer a web form to site visitors for sending messages to you. It is easy to do so using the built-in block variable of the Site app. In section Variables → Codes & blocks, copy the one-line snippet of the block variable with the site.send_email_form identifier.
Paste the copied snippet to the HTML code of the new page.
Here is how a web page with a feedback form might look on your site.
Other apps, except for Site, may also offer various useful variables such as the list of latest uploaded photos or published blog comments. Besides, you can create your custom variables containing plain text or also HTML and Smarty code.
5. Design
Now let us change the website appearance a little by making some changes to the design templates.
Save the changes and reload the browser tab with your site to view the result.
When you save design settings for the first time, Webasyst automatically makes a modified copy of design theme and saves it to a different server directory. Since this moment, all future modifications to the design theme will be stored within that separate directory to guarantee that the original theme remains unchanged. Later on, you can revert all your changes to this original design version and start experimenting again.
Read more about design themes ›
Try to open the website section linked to the Blog app, and you will see that the changes we have made have affected this section, too. This is because the edited file header.section.html is shared between the design themes of Site and Blog, even though each app has its own design theme. In this case, the Blog’s theme is a child theme of that of the Site app and inherits all changes made to the files that are marked as common for both of them.
It may also be the other way around: both Site’s and Blog’s themes can contain a file with the same name, which is, however, not marked as common. Then editing this file in one theme will not affect the other at all.
The way a certain design theme works with template files is defined by its internal structure defined by the developer. Any template file can be marked as common for several themes, otherwise each file is considered independent by default.
6. One more site section
Let us add another section to the site map setup, with the URL mydomain.com/shop/.
The new section has the same appearance as all the previously created sections because it uses the same design theme.
Now we will make it look a little different from the rest of the site. To do so, we will need a separate design theme applied to this site section. You can quickly create a new design theme by copying (cloning) any existing theme.
Let us apply this copied theme to the site section at mydomain.com/shop/.
And make some changes to the new theme’s files to make it look a little different.
Now the two site sections existing within the same Site app — mydomain.com/ and mydomain.com/shop/ — have different appearance because they are now using separate design themes.
7. Main menu $wa->apps()
Note that adding new sections to the set map always resulted in the appearance of a new item in the main menu. This was caused by the site setting that generates the $wa->apps() array.
$wa->apps() is the array facilitating the website building process. It is used in design themes to generate the main navigation menu and represents a link between the site structure settings and the website menu links. Whenever a new site map section is added in the settings, a corresponding link appears in the site menu.
If you need the menu structure to be different from that of the site map settings (e.g., if your website has a complex structure or if only some of the available items should be included in the menu, etc.), then you can easily “detach” the $wa->apps() array from the current site map settings by switching to the manual configuration mode of the website menu.
The $wa->apps() array is supposed to help you faster create a website, but its use is not a requirement. Depending on your needs, you may choose to either use the automatically generated or manually defined contents of the $wa->apps() array or not to use it at all and to specify the desired navigation menu directly in your HTML templates or variable blocks.
8. Cheatsheet
In design templates and in site pages, you can use most of the functionality provided by the Smarty template engine. In the HTML editor within Webasyst, you can always find a button opening the built-in cheatsheet containing the list of the basic available variables and methods.
As an example, we will add a welcome message and information about the user’s device to a site page.
Look how this information is displayed on your site.
Done! We have described the basic site-building functionality provided by Webasyst: main menu and site map setup, selection and modification of design themes, adding site pages, using blocks and cheatsheet variables. Try it all yourself to create a website with Webasyst!
