,
-
+```
`$Modulus` is useful for floated grid CSS layouts. If you want 3 rows across, put $Modulus(3) as a class and add a
`clear: both` to `.column-1`.
-
+[/hint]
$MultipleOf(value, offset) can also be utilized to build column and grid layouts. In this case we want to add a `
`
after every 3rd item.
- :::ss
+```ss
<% loop $Children %>
<% if $MultipleOf(3) %>
<% end_if %>
<% end_loop %>
-### Escaping
+```
Sometimes you will have template tags which need to roll into one another. Use `{}` to contain variables.
- :::ss
+```ss
$Foopx // will returns "" (as it looks for a `Foopx` value)
{$Foo}px // returns "3px" (CORRECT)
-
+```
Or when having a `$` sign in front of the variable such as displaying money.
- :::ss
+```ss
$$Foo // returns ""
${$Foo} // returns "$3"
-You can also use a backslash to escape the name of the variable, such as:
+```
- :::ss
+```ss
$Foo // returns "3"
\$Foo // returns "$Foo"
-
+```
For more information on formatting and casting variables see [Formating, Modifying and Casting Variables](casting)
-
+[/hint]
## Scope
@@ -389,9 +394,10 @@ layout template is the [api:Page_Controller] that is currently being rendered.
When the scope is a `Page_Controller` it will automatically also look up any methods in the corresponding `Page` data
record. In the case of `$Title` the flow looks like
+```
$Title --> [Looks up: Current Page_Controller and parent classes] --> [Looks up: Current Page and parent classes]
-The list of variables you could use in your template is the total of all the methods in the current scope object, parent
+```
classes of the current scope object, and any [api:Extension] instances you have.
### Navigating Scope
@@ -400,7 +406,7 @@ classes of the current scope object, and any [api:Extension] instances you have.
When in a particular scope, `$Up` takes the scope back to the previous level.
- :::ss
+```ss
Children of '$Title'
<% loop $Children %>
@@ -411,39 +417,41 @@ When in a particular scope, `$Up` takes the scope back to the previous level.
<% end_loop %>
<% end_loop %>
-Given the following structure, it will output the text.
+```
+```
My Page
|
+-+ Child 1
- | |
+```
| +- Grandchild 1
|
+-+ Child 2
+```
Children of 'My Page'
Page 'Child 1' is a child of 'My Page'
Page 'Grandchild 1' is a grandchild of 'My Page'
Page 'Child 2' is a child of 'MyPage'
-
+```
Additional selectors implicitely change the scope so you need to put additional `$Up` to get what you expect.
-
+[/notice]
- :::ss
+```ss
Children of '$Title'
<% loop $Children.Sort('Title').First %>
<%-- We have two additional selectors in the loop expression so... --%>
Page '$Title' is a child of '$Up.Up.Up.Title'
<% end_loop %>
-#### Top
+```
While `$Up` provides us a way to go up one level of scope, `$Top` is a shortcut to jump to the top most scope of the
page. The previous example could be rewritten to use the following syntax.
- :::ss
+```ss
Children of '$Title'
<% loop $Children %>
@@ -454,21 +462,21 @@ page. The previous example could be rewritten to use the following syntax.
<% end_loop %>
<% end_loop %>
-### With
+```
The `<% with %>` tag lets you change into a new scope. Consider the following example:
- :::ss
+```ss
<% with $CurrentMember %>
Hello, $FirstName, welcome back. Your current balance is $Balance.
<% end_with %>
-This is functionalty the same as the following:
+```
- :::ss
+```ss
Hello, $CurrentMember.FirstName, welcome back. Your current balance is $CurrentMember.Balance
-Notice that the first example is much tidier, as it removes the repeated use of the `$CurrentMember` accessor.
+```
Outside the `<% with %>.`, we are in the page scope. Inside it, we are in the scope of `$CurrentMember` object. We can
refer directly to properties and methods of the [api:Member] object. `$FirstName` inside the scope is equivalent to
@@ -478,24 +486,24 @@ refer directly to properties and methods of the [api:Member] object. `$FirstName
`$Me` outputs the current object in scope. This will call the `forTemplate` of the object.
- :::ss
+```ss
$Me
-## Comments
+```
Using standard HTML comments is supported. These comments will be included in the published site.
- :::ss
+```ss
$EditForm
-
+```
However you can also use special SilverStripe comments which will be stripped out of the published site. This is useful
for adding notes for other developers but for things you don't want published in the public html.
- :::ss
+```ss
$EditForm <%-- Some hidden comment about the form --%>
-## Related
+```
[CHILDREN]
diff --git a/docs/en/02_Developer_Guides/01_Templates/02_Common_Variables.md b/docs/en/02_Developer_Guides/01_Templates/02_Common_Variables.md
index dc99fe2fc..78101f35a 100644
--- a/docs/en/02_Developer_Guides/01_Templates/02_Common_Variables.md
+++ b/docs/en/02_Developer_Guides/01_Templates/02_Common_Variables.md
@@ -1,6 +1,7 @@
+---
title: Common Variables
summary: Some of the common variables and methods your templates can use, including Menu, SiteConfig, and more.
-
+---
# Common Variables
The page below describes a few of common variables and methods you'll see in a SilverStripe template. This is not an
@@ -12,95 +13,95 @@ explained in more detail on the [syntax](syntax#scope) page. Many of the methods
scope, and you can specify additional static methods to be available globally in templates by implementing the
[api:TemplateGlobalProvider] interface.
-
+[notice]
Want a quick way of knowing what scope you're in? Try putting `$ClassName` in your template. You should see a string
such as `Page` of the object that's in scope. The methods you can call on that object then are any functions, database
properties or relations on the `Page` class, `Page_Controller` class as well as anything from their subclasses **or**
extensions.
-
+[/notice]
Outputting these variables is only the start, if you want to format or manipulate them before adding them to the template
have a read of the [Formating, Modifying and Casting Variables](casting) documentation.
-
+[alert]
Some of the following only apply when you have the `CMS` module installed. If you're using the `Framework` alone, this
functionality may not be included.
-
+[/alert]
## Base Tag
- :::ss
+```ss
<% base_tag %>
..
-The `<% base_tag %>` placeholder is replaced with the HTML base element. Relative links within a document (such as
) will become relative to the URI specified in the base tag. This ensures the browser knows where
to locate your site’s images and css files.
It renders in the template as `
`
-
+[alert]
A `<% base_tag %>` is nearly always required or assumed by SilverStripe to exist.
-
+[/alert]
## CurrentMember
Returns the currently logged in [api:Member] instance, if there is one logged in.
- :::ss
+```ss
<% if $CurrentMember %>
Welcome Back, $CurrentMember.FirstName
<% end_if %>
-
+```
## Title and Menu Title
- :::ss
+```ss
$Title
$MenuTitle
-Most objects within SilverStripe will respond to `$Title` (i.e they should have a `Title` database field or at least a
+```
`getTitle()` method).
The CMS module in particular provides two fields to label a page: `Title` and `MenuTitle`. `Title` is the title
displayed on the web page, while `MenuTitle` can be a shorter version suitable for size-constrained menus.
-
+[notice]
If `MenuTitle` is left blank by the CMS author, it'll just default to the value in `Title`.
-
+[/notice]
## Page Content
- :::ss
+```ss
$Content
-It returns the database content of the `Content` property. With the CMS Module, this is the value of the WYSIWYG editor
+```
but it is also the standard for any object that has a body of content to output.
-
+[info]
Please note that this database content can be `versioned`, meaning that draft content edited in the CMS can be different
from published content shown to your website visitors. In templates, you don't need to worry about this distinction.
The `$Content` variable contains the published content by default,and only preview draft content if explicitly
requested (e.g. by the "preview" feature in the CMS) (see the [versioning documentation](/../model/versioning) for
more details).
-
+[/info]
### SiteConfig: Global settings
-
+[notice]
`SiteConfig` is a module that is bundled with the `CMS`. If you wish to include `SiteConfig` in your framework only
web pages. You'll need to install it via `composer`.
-
+[/notice]
- :::ss
+```ss
$SiteConfig.Title
-The [SiteConfig](../configuration/siteconfig) object allows content authors to modify global data in the CMS, rather
+```
than PHP code. By default, this includes a Website title and a Tagline.
`SiteConfig` can be extended to hold other data, for example a logo image which can be uploaded through the CMS or
@@ -113,127 +114,128 @@ The `$MetaTags` placeholder in a template returns a segment of HTML appropriate
will set up title, keywords and description meta-tags, based on the CMS content and is editable in the 'Meta-data' tab
on a per-page basis.
-
+[notice]
If you don’t want to include the title tag use `$MetaTags(false)`.
-
+[/notice]
By default `$MetaTags` renders:
- :::ss
+```ss
Title of the Page
-`$MetaTags(false)` will render
+```
- :::ss
+```ss
-If using `$MetaTags(false)` we can provide a more custom `title`.
+```
- :::ss
+```ss
$MetaTags(false)
$Title - Bob's Fantasy Football
-## Links
+```
- :::ss
+```ss
..
-All objects that could be accessible in SilverStripe should define a `Link` method and an `AbsoluteLink` method. Link
+```
returns the relative URL for the object and `AbsoluteLink` outputs your full website address along with the relative
link.
- :::ss
+```ss
$Link
$AbsoluteLink
-### Linking Modes
+```
- :::ss
+```ss
$isSection
$isCurrent
-When looping over a list of `SiteTree` instances through a `<% loop $Menu %>` or `<% loop $Children %>`, `$isSection` and `$isCurrent`
+```
will return true or false based on page being looped over relative to the currently viewed page.
For instance, to only show the menu item linked if it's the current one:
- :::ss
+```ss
<% if $isCurrent %>
$Title
<% else %>
$Title
<% end_if %>
+```
An example for checking for `current` or `section` is as follows:
- :::ss
+```ss
$MenuTitle
-
+```
**Additional Utility Method**
* `$InSection(page-url)`: This if block will pass if we're currently on the page-url page or one of its children.
- :::ss
+```ss
<% if $InSection(about-us) %>
You are viewing the about us section
<% end_if %>
-
+```
### URLSegment
This returns the part of the URL of the page you're currently on. For example on the `/about-us/offices/` web page the
`URLSegment` will be `offices`. `URLSegment` cannot be used to generate a link since it does not output the full path.
It can be used within templates to generate anchors or other CSS classes.
- :::ss
+```ss
-## ClassName
+```
Returns the class of the current object in [scope](syntax#scope) such as `Page` or `HomePage`. The `$ClassName` can be
handy for a number of uses. A common use case is to add to your `` tag to influence CSS styles and JavaScript
behavior based on the page type used:
- :::ss
+```ss
-## Children Loops
+```
- :::ss
+```ss
<% loop $Children %>
<% end_loop %>
-Will loop over all Children records of the current object context. Children are pages that sit under the current page in
+```
the `CMS` or a custom list of data. This originates in the `Versioned` extension's `getChildren` method.
-
+[alert]
For doing your website navigation most likely you'll want to use `$Menu` since its independent of the page
context.
-
+[/alert]
### ChildrenOf
- :::ss
+```ss
<% loop $ChildrenOf(
) %>
<% end_loop %>
-Will create a list of the children of the given page, as identified by its `URLSegment` value. This can come in handy
+```
because it's not dependent on the context of the current page. For example, it would allow you to list all staff member
pages underneath a "staff" holder on any page, regardless if its on the top level or elsewhere.
@@ -244,44 +246,44 @@ Content authors have the ability to hide pages from menus by un-selecting the `S
This option will be honored by `<% loop $Children %>` and `<% loop $Menu %>` however if you want to ignore the user
preference, `AllChildren` does not filter by `ShowInMenus`.
- :::ss
+```ss
<% loop $AllChildren %>
...
<% end_loop %>
-
+```
### Menu Loops
- :::ss
+```ss
<% loop $Menu(1) %>
...
<% end_loop %>
-`$Menu(1)` returns the top-level menu of the website. You can also create a sub-menu using `$Menu(2)`, and so forth.
+```
-
+[notice]
Pages with the `ShowInMenus` property set to `false` will be filtered out.
-
+[/notice]
## Access to a specific Page
- :::ss
+```ss
<% with $Page(my-page) %>
$Title
<% end_with %>
-Page will return a single page from site, looking it up by URL.
+```
## Access to Parent and Level Pages
### Level
- :::ss
+```ss
<% with $Level(1) %>
$Title
<% end_with %>
-Will return a page in the current path, at the level specified by the numbers. It is based on the current page context,
+```
looking back through its parent pages. `Level(1)` being the top most level.
For example, imagine you're on the "bob marley" page, which is three levels in: "about us > staff > bob marley".
@@ -292,7 +294,7 @@ For example, imagine you're on the "bob marley" page, which is three levels in:
### Parent
- :::ss
+```ss
$Parent.Title
@@ -301,7 +303,7 @@ For example, imagine you're on the "bob marley" page, which is three levels in:
$Parent.Parent.Title
-
+```
## Navigating Scope
See [scope](syntax#scope).
@@ -314,29 +316,29 @@ for website users.
While you can achieve breadcrumbs through the `$Level()` control manually, there's a nicer shortcut: The
`$Breadcrumbs` variable.
- :::ss
+```ss
$Breadcrumbs
-By default, it uses the template defined in `cms/templates/BreadcrumbsTemplate.ss`
+```
- :::ss
+```ss
<% if $Pages %>
<% loop $Pages %>
<% if $Last %>$Title.XML<% else %>$MenuTitle.XML »<% end_if %>
<% end_loop %>
<% end_if %>
-
+```
To customise the markup that the `$Breadcrumbs` generates, copy `cms/templates/BreadcrumbsTemplate.ss` to
`mysite/templates/BreadcrumbsTemplate.ss`, modify the newly copied template and flush your SilverStripe cache.
-
+[/info]
## Forms
- :::ss
+```ss
$Form
-A page will normally contain some content and potentially a form of some kind. For example, the log-in page has a the
+```
SilverStripe log-in form. If you are on such a page, the `$Form` variable will contain the HTML content of the form.
Placing it just below `$Content` is a good default.
diff --git a/docs/en/02_Developer_Guides/01_Templates/03_Requirements.md b/docs/en/02_Developer_Guides/01_Templates/03_Requirements.md
index 3b37ddb26..f07cceaef 100644
--- a/docs/en/02_Developer_Guides/01_Templates/03_Requirements.md
+++ b/docs/en/02_Developer_Guides/01_Templates/03_Requirements.md
@@ -1,6 +1,8 @@
+---
title: Requirements
summary: How to include and require other assets in your templates such as javascript and CSS files.
-
+iconBrand: js
+---
# Requirements
The requirements class takes care of including CSS and JavaScript into your applications. This is preferred to hard
@@ -11,63 +13,35 @@ coding any references in the `` tag of your template, as it enables a more
**mysite/templates/Page.ss**
-```
-<% require css("cms/css/TreeSelector.css") %>
-<% require themedCSS("TreeSelector") %>
-<% require javascript("cms/javascript/LeftAndMain.js") %>
```
-
+[alert]
Requiring assets from the template is restricted compared to the PHP API.
-
+[/alert]
## PHP Requirements API
It is common practice to include most Requirements either in the *init()*-method of your [controller](../controllers/), or
as close to rendering as possible (e.g. in [api:FormField]).
-```php
-` element, so you can define 'screen' or 'print' for example.
-```php
-Requirements::css("cms/css/TreeSelector.css", "screen,projection");
```
### Javascript Files
-```php
-Requirements::javascript($path);
```
A variant on the inclusion of custom javascript is the inclusion of *templated* javascript. Here, you keep your
JavaScript in a separate file and instead load, via search and replace, several PHP-generated variables into that code.
-```php
-$vars = array(
- "EditorCSS" => "cms/css/editor.css",
-);
-
-Requirements::javascriptTemplate("cms/javascript/editor.template.js", $vars);
```
In this example, `editor.template.js` is expected to contain a replaceable variable expressed as `$EditorCSS`.
@@ -79,18 +53,6 @@ of 'configuration' from the database in a raw format. You'll need to use the `h
this is generally speaking the best way to do these things - it clearly marks the copy as belonging to a different
language.
-```php
-Requirements::customScript(<<
+[alert]
To make debugging easier in your local environment, combined files is disabled when running your application in `dev`
mode.
-
+[/alert]
By default it stores the generated file in the assets/ folder, but you can configure this by pointing the
`Requirements.combined_files_folder` configuration setting to a specific folder.
**mysite/_config/app.yml**
-```yaml
-Requirements:
- combined_files_folder: '_combined'
```
-
+[info]
If SilverStripe doesn't have permissions on your server to write these files it will default back to including them
individually. SilverStripe **will not** rewrite your paths within the file.
-
+[/info]
You can also combine CSS files into a media-specific stylesheets as you would with the `Requirements::css` call - use
the third paramter of the `combine_files` function:
-```php
-$printStylesheets = array(
- "$themeDir/css/print_HomePage.css",
- "$themeDir/css/print_Page.css",
-);
-
-Requirements::combine_files('print.css', $printStylesheets, 'print');
```
By default, all requirements files are flushed (deleted) when ?flush querystring parameter is set.
@@ -145,19 +89,15 @@ This can be disabled by setting the `Requirements.disable_flush_combined` config
## Clearing assets
-```php
-Requirements::clear();
```
Clears all defined requirements. You can also clear specific requirements.
-```php
-Requirements::clear(THIRDPARTY_DIR.'/prototype.js');
```
-
+[alert]
Depending on where you call this command, a Requirement might be *re-included* afterwards.
-
+[/alert]
## Blocking
@@ -168,32 +108,28 @@ included requirements, and ones included after the `block()` call.
One common example is to block the core `jquery.js` added by various form fields and core controllers, and use a newer
version in a custom location. This assumes you have tested your application with the newer version.
-```php
-Requirements::block(THIRDPARTY_DIR . '/jquery/jquery.js');
```
-
+[alert]
The CMS also uses the `Requirements` system, and its operation can be affected by `block()` calls. Avoid this by
limiting the scope of your blocking operations, e.g. in `init()` of your controller.
-
+[/alert]
## Inclusion Order
Requirements acts like a stack, where everything is rendered sequentially in the order it was included. There is no way
to change inclusion-order, other than using *Requirements::clear* and rebuilding the whole set of requirements.
-
+[alert]
Inclusion order is both relevant for CSS and Javascript files in terms of dependencies, inheritance and overlays - be
careful when messing with the order of requirements.
-
+[/alert]
## Javascript placement
By default, SilverStripe includes all Javascript files at the bottom of the page body, unless there's another script
already loaded, then, it's inserted before the first `