tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Rewritten "extend cms" docs (#1671)

Browse Source 
Hopefully this commit can be reverted once we fix the
layout manager to work with all four directions (north, south, east, west).
A "bookmark bar" makes more sense as an example than having the links
in the menu, and it allows us to illustrate the CMS layout techniques.
This commit is contained in:
Ingo Schommer 2013-07-09 22:15:43 +02:00
parent 3bfb82d25f
commit e6011f3aae
1 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/en/howto/extend-cms-interface.md
View File

@ -6,8 +6,8 @@ The CMS interface works just like any other part of your website: It consists of
PHP controllers, templates, CSS stylesheets and JavaScript. Because it uses the PHP controllers, templates, CSS stylesheets and JavaScript. Because it uses the
same base elements, it is relatively easy to extend. same base elements, it is relatively easy to extend.
As an example, we're going to add a permanent "bookmarks" bar to popular pages As an example, we're going to add a permanent "bookmarks" link list to popular pages
at the bottom of the CMS. A page can be bookmarked by a CMS author through a into the main CMS menu. A page can be bookmarked by a CMS author through a
simple checkbox. simple checkbox.
For a deeper introduction to the inner workings of the CMS, please refer to our For a deeper introduction to the inner workings of the CMS, please refer to our
@ -24,48 +24,35 @@ the common `Page` object (a new PHP class `MyPage` will look for a `MyPage.ss` t
We can use this to create a different base template with `LeftAndMain.ss` We can use this to create a different base template with `LeftAndMain.ss`
(which corresponds to the `LeftAndMain` PHP controller class). (which corresponds to the `LeftAndMain` PHP controller class).
Copy the template markup of the base implementation at `framework/admin/templates/LeftAndMain.ss` Copy the template markup of the base implementation at `framework/admin/templates/Includes/LeftAndMain_Menu.ss`
into `mysite/templates/LeftAndMain.ss`. It will automatically be picked up by into `mysite/templates/Includes/LeftAndMain_Menu.ss`. It will automatically be picked up by
the CMS logic. Add a new section after the `$Content` tag: the CMS logic. Add a new section into the `<ul class="cms-menu-list">`
:::ss :::ss
... ...
<div class="cms-container" data-layout-type="border"> <ul class="cms-menu-list">
$Menu <!-- ... -->
$Content <li class="bookmarked-link first">
<div class="cms-bottom-bar south"> <a href="admin/pages/edit/show/1">Edit "My popular page"</a>
<ul> </li>
<li><a href="admin/page/edit/show/1">Edit "My popular page"</a></li> <li class="bookmarked-link last">
<li><a href="admin/page/edit/show/99">Edit "My other page"</a></li> <a href="admin/pages/edit/show/99">Edit "My other page"</a>
</ul> </li>
</div> </ul>
</div>
... ...
Refresh the CMS interface with `admin/?flush=all`, and you should see the new Refresh the CMS interface with `admin/?flush=all`, and you should see those
bottom bar with some hardcoded links. We'll make these dynamic further down. hardcoded links underneath the left-hand menu. We'll make these dynamic further down.
You might have noticed that we didn't write any JavaScript to add our layout
manager. The important piece of information is the `south` class in our new
`<div>` structure, plus the height value in our CSS. It instructs the existing
parent layout how to render the element. This layout manager
([jLayout](http://www.bramstein.com/projects/jlayout/)) allows us to build
complex layouts with minimal JavaScript configuration.
See [layout reference](../reference/layout) for more specific information on
CMS layouting.
## Include custom CSS in the CMS ## Include custom CSS in the CMS
In order to show the links in one line, we'll add some CSS, and get it to load In order to show the links a bit separated from the other menu entries,
we'll add some CSS, and get it to load
with the CMS interface. Paste the following content into a new file called with the CMS interface. Paste the following content into a new file called
`mysite/css/BookmarkedPages.css`: `mysite/css/BookmarkedPages.css`:
:::css :::css
.cms-bottom-bar {height: 20px; padding: 5px; background: #C6D7DF;} .bookmarked-link.first {margin-top: 1em;}
.cms-bottom-bar ul {list-style: none; margin: 0; padding: 0;}
.cms-bottom-bar ul li {float: left; margin-left: 1em;}
.cms-bottom-bar a {color: #444444;}
Load the new CSS file into the CMS, by setting the `LeftAndMain.extra_requirements_css` Load the new CSS file into the CMS, by setting the `LeftAndMain.extra_requirements_css`
[configuration value](/topics/configuration). [configuration value](/topics/configuration).
@ -139,9 +126,12 @@ Find the `<ul>` you created earlier in `mysite/admin/templates/LeftAndMain.ss`
and replace it with the following: and replace it with the following:
:::ss :::ss
<ul> <ul class="cms-menu-list">
<!-- ... -->
<% loop $BookmarkedPages %> <% loop $BookmarkedPages %>
<li><a href="admin/pages/edit/show/$ID">Edit "$Title"</a></li> <li class="bookmarked-link $FirstLast">
<li><a href="admin/pages/edit/show/$ID">Edit "$Title"</a></li>
</li>
<% end_loop %> <% end_loop %>
</ul> </ul>