# Exolog Reference Manual
Exolog is an open source (soon!) Open Source CMS.

## ExoAdmin
ExoAdmin is the admin panel of Exolog CMS where you can have access to all you need to create and maintain a website. For accessing ExoAdmin you need to login into your account of Exolog. For doing so you can use the shortcut `Shift+Control+X` or you can use `/exo_admin` after the website URL. Once logged in, you can see the first page of Exolog, "Dashboard". You can see the version of your Exolog here and whether there is an update or not.
### Logout
Clicking on the email address on the top right of the screen you can logout from your account.

### Profile
Clicking on the email address on the top right of the screen you can access your profile options (Users). Also if you are logged in as admin, you can have access to other user's accounts and their settings. For learning more about this part you can read [Users](https://).

## Exolog Front-End Editor
Front-End Editor of Exolog is where users can edit the content of the website directly. It is accessible when you are logged in and checking the pages of the website.

For activating the editor, you should click on "Edit" and then you can have access to the setting of each element by hovering and clicking on them.
### Edit page
Once you click on Edit, without clicking on any element, you have only one option named "Edit page". This option is used for editing the content of the page form. This setting is the same environment that you can have access to in Reactions in Exolog Admin. You can edit the fields of the reaction for the related page here.

### Field Info
When you click on any element, you will have the option "Field info". Here you can see the related entity type of the element, ID, and field.

### Custom Setting
Here you can add a variety of options to Front-end editor so you and the user can use them. These options include adding images, choosing different formats, and so on.

#### Bold
Adding the option to make the text **Bold**.
#### Italic
Adding the option to make the text *Italic*.
#### Underline
Adding the option to add underline to the text.
#### Strikethrough
Adding the option for strikethrough for the text.
#### Align Left
Adding the option for left alignment.
#### Align Right
Adding the option for right alignment.
#### Align Center
Adding the option for center alignment.
#### Justify
Adding the option for justifying the text.
#### Formats
Adding the option for choosing different formats. If you didn't set a CSS file, the Formats will be the default styles. If you want to have your formats, you should set the custom CSS.

#### Paragraph
Here you can have access to different text elements such as paragraph, heading (from h1 to h6) and Preformatted.
#### Font Family
This option would give the option to choose the font family.
#### Font Sizes
This option would let you change the font size.
#### Cut
The option for cut something.
#### Copy
The option for copy something.
#### Paste
The option for paste something.
#### Bulleted list
The option for creating a bulleted list.
#### Numbered list
The option for creating a numbered list.
#### Decrease indent
The option for decreasing the indent.
#### Increase indent
The option for increasing the indent.
#### Blockquote
#### Undo
The option for undo.
#### Redo
The option for redo.
#### Clear Formatting
This option would clear formattings for the selected text (such as italic, bold and so on)
#### Subscript
The option for adding subscript.
#### Superscript
The option for adding superscript.
#### Horizontal Line
This option adds a horizontal line. This horizontal line is actually `<hr>` element. You only using CSS can change the style of this part such as color, size, and alignment.
#### Insert/edit link
This option would let you add a link to the text.
#### Remove link
This remove would let you add a link to the text.
#### insert/edit image
#### Special characters
#### Paste as text
#### Print
#### Anchor
#### Find and Replace
#### Show blocks
#### Show invisible characters
#### Source Code
#### Fullscreen
#### Insert date/time
#### Insert/edit video
#### Nonbreaking space
#### Table
#### Left to Right
#### Right to Left
#### Emoticons
#### Text color
#### Background color
#### Filemanager
#### CSS editor
#### Table of contents
#### Template variables
#### User forms
### Block Controller
## Editions
Edition is where you can set the main properties of the website such as domain, header, footer and the settings related to mail template.

### Variables
#### Header and footer
The header and footer are the same for all the pages so it would make sense to set it just once for all pages. For doing so we use variables in Editions so every page created would have a header and footer by default. The variables will be added to the main page blade.

{{Vars::edition('unit_head',null,['component'=>'head'])}}

The fields for the header and footer will be set in payload.

#### Search variable
For having a search variable you should use the field-name with `search_` prefix so you can have access to the search setup.
In search setup, you can set the form and fields where the user can search.
In the related view in Resources, you can add it as an ordinary var.

{{Vars::edition('search_clubs')->input(['permalink'=>$page['permalink']])}}

### Properties
#### Domains
Here you can set the domain name for this specific edition.
## Forms
Here you can have access to all options related to forms. Forms in Exolog is more than the form used for the users in frontend like a contact form. In Exolog forms are used for collecting data for pages, page blocks, URLs, and so on.
On Forms first page you can see a list of created forms. You can also create groups for forms on the left sidebar or search in forms on the right side. By default you have forms "pageblock", "page", and "systemurl". In this part you can also creat a new form.
### Creating a form
For creating a new form you can whether use the default empty form to start from scratch or you can use predefined forms of Exolog like "systemurl", "mail_template", and so on.

### Form Fields
#### Predefined fields
##### publish
##### no_sitemap
##### meta_title
##### title
##### menu_title
##### alias
##### permalink
##### old_permalinks
#### Available field types
##### Text
##### Text Area
##### Radio Group
##### Checkbox
##### Select
##### File Upload
##### Number
##### Password
##### User
##### Template
##### Picture
##### Container
##### View
##### Unit
##### Captcha Field
##### Hidden Input
##### Date
##### DateTime
### systemurl
### page
### pageblock
## Reactions
## Templates
## Users
#### Alternative e-mail
Here you can set an alternative e-mail for your account.
#### Password
Here you can set a new password.
#### 2-Step Verification
For using 2-step verification you should use the Google Authenticator app (available on [iOS](https://apps.apple.com/us/app/google-authenticator/id388497605) and [Android](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1).
#### Language
Here you can choose the language of your ExoAdmin dashboard. The languages available now are Dutch, English, Russian, and Ukrainian.
#### Confirmstring
#### Email-bounce
#### Last browser
Here you can see the last browser used to open the account.
#### Related reactions
On the top, you can have access to all related reactions created by this account.
#### Download vCard
### User groups
## Files
## Resources
Resources is where you can find all files of your Exolog website including Laravel stuff. So for creating related views, controllers, and so on you need to use this part. Exolog is running based on the Laravel framework so having a basic knowledge of Laravel would be helpful. For more information about Laravel, you can check their [documentation](https://laravel.com/docs/8.x/installation).

### Views
Views are the basis of the separate blocks of a page on your Exolog website (including header and footer). Using them you can create a template for each part of the webpage easily. They are stored in the `resources/views` directory. You can create your views using `.blade.php` extension. The `.blade.php` informs Exolog that the file is using blade template (For more information check [Blade](https://)). Blade files let you create HTML blocks with some additional features like loops and so on. You can see an example of blade file below:

<div class="default content_four_columns">
    {{$unit->getOne(['tag' => 'div', 'class' => 'content_four_columns__container'])}}
    {{$unit->getTwo(['tag' => 'div', 'class' => 'content_four_columns__container'])}}
    {{$unit->getThree(['tag' => 'div', 'class' => 'content_four_columns__container'])}}
    {{$unit->getFour(['tag' => 'div', 'class' => 'content_four_columns__container'])}}
</div>

Views in Exolog are oftentimes nested within subdirectories by default. You can use "Dot" notation to reference nested views. For example, if you are loading a view named "menu" from "partials" directory you may use `partials.menu`.
### Blade Template
Exolog is based on [Blade Template Engine](https://laravel.com/docs/8.x/blade) which enables us to create flexible HTML blocks for our webpage. In order to create a blade file, you need to follow the blade syntax.
#### Loops
One of the things that you always will need is creating a loop. These loops function identically to their PHP counterparts. You can see an example of a loop in blade here below:

@foreach ($unit->getBlocks()->getReactsTree() as $react)
    {{$react->getPicture()}}
@endforeach

#### If Statements
You can create an if statement using `@if`, `@elseif`, `@else`, and `@endif`. These directives function identically to their PHP counterparts. You can see an example of IF Statement in a loop below:

            @foreach($react['children'] as $item)
                @if ( count($item->getMedia()->getReactsTree()) == 0)
                <li class="menu_item" data-id="{{ $item['react_id'] }}">
                    {{ $item->getMenuTitle(['tag' => 'a', 'href' => $item->getPermalink() ]) }}
                </li>
                @else
                <li class="menu_item" data-id="{{ $item['react_id'] }}">
                    {{ $item->getMenuTitle(['tag' => 'a', 'href' => $item->getMedia()->getReactsTree()[0]["permalink"]]) }}
                </li>
                @endif
            @endforeach

#### Webp images
`.webp` is an image format developed by Google. This image format will compress the image significantly without losing quality. In Exolog you can convert the images automatically to webp so you can reduce load speed. For doing so you can render the image as a webp file.

        <a  href="{{$unit->getUrl()->getData()}}">
            {{$unit->getLogo(['src' => '160w74h100q1c','type' => 'image/webp'])}}
        </a>

As you can see, you can set the height and width of the rendered image by numbers before "w" for width and "h" for height.
#### Exolog Front-End Controller
You should make your users (the owner of the website) able create or edit pages as he/she wants only in front-end editor. For doing so, sometimes you need to add a controller to your pageblock so the user can have access to it in Front-end editor. You can put this controller where it is convenient for the end-user.
As an example you can see in this header we put the controller for adding/editing languages of the website.
By clicking on this controller, the user can access the related reactions and edit them.

        <nav class="header__links">
            <button class="header__menu_icon" type="button">
                <i class="fas fa-bars"></i>
            </button>
            <span class="header__back"><i class="fas fa-arrow-left"></i></span>
            <div class="header__language" {{ $unit->getLanguages()->getExeditAttr() }}> 
                <a class="header__language_icon" href="#" role="button" id="dropdownMenuLink"></a> 
                {{$unit->getLanguages(['tag' => 'div', 'class' => 'header__language_container', 'view' => 'partials.languages'])}}
            </div>
            {{$unit->getMenu(['tag' => 'ul', 'class' => 'header__links_container', 'view' => 'partials.menu'])}}
        </nav>

As you can see the language part is not necessarily used for the controller. You can put the controller where you want and there is no limitation. Here we added a controller to edit the unit "Languages" by `{{ $unit->getLanguages()->getExeditAttr() }}`. You can use a similar structure for adding a controller to any unit that you want wherever you want.
#### Partials
You can always include partial views into the blade. The most common way for doing so is using `@include`. Like `@include('partials.heading')`. Here you are including a view from the folder `partials` named `heading.blade.php`. All variables available to the parent view will be available to the included view also.
### Laravel Mix
### Controllers
### Routing
### Exolog Code Editor
## Domains
## Newsletters
## Sitemap
## Cron
## Maintenance
### Restore parent container
### Empty server cache
### Build site skeleton
## Dealer