Introduction to Radiant CMS
Sean D. Cribbs
Radiant CMS Core Team
Many slides borrowed from John Long's RubyConf 2006 presentation
What is Radiant CMS?
From the website:
Radiant is a no-fluff, open source content management system designed for small teams.
A Lightweight CMS
A Lightweight CMS
- A pristine interface
A Lightweight CMS
- A pristine interface
- The Basics: Pages, Layouts, Snippets
A Lightweight CMS
- A pristine interface
- The Basics: Pages, Layouts, Snippets
- Simplicity over features
A Lightweight CMS
- A pristine interface
- The Basics: Pages, Layouts, Snippets
- Simplicity over features
- A little more than a blogging engine
Made for Designers and Programmers
Made for Designers and Programmers
- Not non-techy users
Made for Designers and Programmers
- Not non-techy users
- Uses a tag-based template language
Made for Designers and Programmers
- Not non-techy users
- Uses a tag-based template language
- Gives the designer total control over output
Made for Designers and Programmers
- Not non-techy users
- Uses a tag-based template language
- Gives the designer total control over output
- Easy to extend (Marty's talk)
Ideal for Content-Oriented Web Sites
Ideal for Content-Oriented Web Sites
- The 80% window
Ideal for Content-Oriented Web Sites
- The 80% window
- Small, brochure-style Web sites
Ideal for Content-Oriented Web Sites
- The 80% window
- Small, brochure-style Web sites
- Not portal software!!
Installation
- Via Gem
$ sudo gem install radiant; radiant my_site - Via SVN
$ svn checkout http://dev.radiantcms.org/svn/radiant/trunk/radiant - "Freezing"
$ cd my_site; rake radiant:freeze:gems $ rake radiant:freeze:edge
Your Typical CMS
Your Typical CMS
Your Typical CMS
A Better Model
A Better Model
A Better Model
A Better Model
Pages
- Made of 'parts'
- Organized hierarchically, representing both "folders" and "files"
Snippets
- Reusable content
- Mini-templates
- Includes or partials
Layouts
- Site wireframe
- Renders page parts & snippets
- HTML, XML, Javascript, CSS, RSS, Atom...
Page Types
(formerly Behaviors — page-level plugins)
Page Types allow you to:
Page Types allow you to:
- Create File Not Found pages
Page Types allow you to:
- Create File Not Found pages
- Turn a series of pages into an archive with date-formatted URLs
Page Types allow you to:
- Create File Not Found pages
- Turn a series of pages into an archive with date-formatted URLs
- Add custom tags to a page
Page Types allow you to:
- Create File Not Found pages
- Turn a series of pages into an archive with date-formatted URLs
- Add custom tags to a page
- Completely handle the request and response
Page Types allow you to:
- Create File Not Found pages
- Turn a series of pages into an archive with date-formatted URLs
- Add custom tags to a page
- Completely handle the request and response
- And much more...
Text Filters
- Textile
- Markdown
- SmartyPants
- Sass and others (via extensions)
Radius Tags
http://radius.rubyforge.org/
The Anatomy of a Tag
<r:tag_name attr="value" ... />
The Anatomy of a Tag
<r:tag_name attr="value" ... />
- tag name
The Anatomy of a Tag
<r:tag_name attr="value" ... />
- tag name
- multiple attributes and values
The Anatomy of a Tag
<!-- single tag -->
<r:tag_name attr="value" ... />
<!-- double tag -->
<r:tag_name attr="value" ... >
...
</r:tag_name>Layout Example
Layout Example
<html>
<head>
<title>Example Page</title>
</head>
<body>
<div id="header">
<img src="logo.gif" />
</div>
<div id="content">
<h1>Example Page</h1>
<p>This is a small example page.</p>
</div>
<div id="sidebar">
<p>sidebar here</p>
</div>
<div id="footer">
<p>Copyright 2006, Example Person</p>
</div>
</body>
</html>Layout Example
<html>
<head>
<title><r:title /></title>
</head>
<body>
<div id="header">
<img src="logo.gif" />
</div>
<div id="content">
<h1><r:title /></h1>
<p>This is a small example page.</p>
</div>
<div id="sidebar">
<p>sidebar here</p>
</div>
<div id="footer">
<p>Copyright 2006, Example Person</p>
</div>
</body>
</html>Layout Example
<html>
<head>
<title><r:title /></title>
</head>
<body>
<r:snippet name="header" />
<div id="content">
<h1><r:title /></h1>
<p>This is a small example page.</p>
</div>
<div id="sidebar">
<p>sidebar here</p>
</div>
<r:snippet name="footer" />
</body>
</html>Layout Example
<html>
<head>
<title><r:title /></title>
</head>
<body>
<r:snippet name="header" />
<div id="content">
<h1><r:title /></h1>
<r:content />
<r:content part="extended" /> </div>
<div id="sidebar">
<r:content part="sidebar" /> </div>
<r:snippet name="footer" />
</body>
</html>
If tags are good,
why not use them everywhere?
Index Page Example
<div class="entry">
<h3>First Post</h3>
<p>This is my very first post!</p>
<p><a href="/blog/first-post/">Read More...</a></p>
</div>
<div class="entry">
<h3>Second Post</h3>
<p>This is another post!</p>
<p><a href="/blog/first-post/">Read More...</a></p>
</div>Index Page Example
<r:children:each>
<div class="entry">
<h3>First Post</h3>
<p>This is my very first post!</p>
<p><a href="/blog/first-post/">Read More...</a></p>
</div>
</r:children:each>Index Page Example
<r:children:each>
<div class="entry">
<h3><r:title /></h3>
<p>This is my very first post!</p>
<p><a href="/blog/first-post/">Read More...</a></p>
</div>
</r:children:each>Index Page Example
<r:children:each>
<div class="entry">
<h3><r:title /></h3>
<p><r:content /></p>
<p><a href="/blog/first-post/">Read More...</a></p>
</div>
</r:children:each>Index Page Example
<r:children:each>
<div class="entry">
<h3><r:title /></h3>
<p><r:content /></p>
<p><r:link>Read More...</r:link></p>
</div>
</r:children:each>Index Page Example
<r:children:each>
<div class="entry">
<h3><r:title /></h3>
<p><r:content /></p>
<r:if_content part="extended">
<p><r:link>Read More...</r:link></p>
</r:if_content>
</div>
</r:children:each>Index Page Example
<r:children:each limit="5" order="desc">
<div class="entry">
<h3><r:title /></h3>
<p><r:content /></p>
<r:if_content part="extended">
<p><r:link>Read More...</r:link></p>
</r:if_content>
</div>
</r:children:each>Tags are Contextual
<h3><r:title /></h3>
<ul>
<r:children:each>
<li><r:title /></li>
</r:children:each>
</ul>
<h3>Articles</h3>
<ul>
<li>First Post</li>
<li>Second Post</li>
<li>Third Post</li>
</ul>
Tag Shorthand
<r:children:first>
<r:title />
</r:children:first>
First Post
<r:children:last:title />
Last Post