Sat May 26 13:55:00 UTC 2007
"Hello World" using Radiant CMS
If you’re as slow at getting started as I can be at 2:45AM and still insist on trying out Radiant CMS at exactly that time, this small entry may help you getting around to making your first page with Radiant show up.
Pre-requisites
1. Install Radiant as per the instructions
2. Create one project for any of the blog types (this is where we shall steal from) – remember to create the database and adjust the database properties in the database.yml
3. Create your ‘empty project’ – remember to create the database and adjust the database properties in the database.yml
If there’s a need, I could elaborate the first 3 steps further but I think it should be quite easy to follow those steps through.
Adding to the Empty Project
Now, let’s go through the rest. If you read the Radiant mini handbook you will see that it mentions that if you are starting with an empty project, every thing needs to be created – right from the first few layouts, the snippets and of course, the pages. The ‘empty project’ is just that: empty.
Since it took me a while to figure out how to create the first Radiant page, I decided to document that process here for reference.
If you have created a Radiant site, run the bootstrap rake script, started the server, and are logged in, we’re ready to roll.
Step 1: Create a new layout
Click on the “Layouts” tab. This brings up an empty list of layouts.
Then, click on “New Layout”. Give your new layout a name such as “page_style” and fill in stuff that you can copy from a standard HTML web page. Ideally, you should also use some Radius tags in the creation. To cut short the guesswork at this point, I basically stole from the Blog Radiant project that I had installed. This is the cut down code that I copied from there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title><r:title /></title>
<link href="/rss/" rel="alternate" title="RSS" type="application/rss+xml" />
<link rel="stylesheet" type="text/css" href="/styles.css" />
</head>
<body>
<div id="page">
<div id="main">
<div id="content-wrapper">
<div id="content">
<r:unless_url matches="^/$"><h1><r:title /></h1></r:unless_url>
<r:content />
<r:if_content part="extended">
<div id="extended">
<r:content part="extended" />
</div>
</r:if_content>
<r:if_url matches="^/articles/\d{4}/\d{2}/\d{2}/.+"><r:unless_url matches="-archives/$"><p class="info">Posted by <r:author /> on <r:date /></p></r:unless_url></r:if_url>
</div>
</div>
</div>
</div>
</body>
</html>
You could also use Snippets, but we’re not going to go there yet. Click on “Create Layout” to, err, create the layout. It should now show the “page_style” layout in the list of layouts.
Step 2: Create a layout for the stylesheet
Click on “New Layout” and give it a name such as “stylesheet”. Then, click on the “More” link below the Name field and enter text/css in the Content-type field there. In the Body of the layout, simply enter the following which means that the content of the file that uses this layout is passed up.
<r:content />
After you click on “Create Layout” it will be saved and will be shown in the list.
Step 3: Add the main page
You already have a layout that can be used as the base layout for pages in your site. Go to the “Pages” tab of your admin site and click on “New homepage” to create the first page. Give the page a title, something like “Hello, World” and then fill out things that will be rendered as the page. I have set the formatting filter to “Textile” and added some text as below
h1. Hello!
This is the first page in the sample site.
It uses Radiant and uses @Textile@ for the markup.
h2. Creating a List
Using @Textile@, a list is easily created. I'd like to say Hello to
* My family
* My friends
* My world
h1. Another Level 1 heading
Now, in the bottom bar, select the Layout as “page_style”, the Page Type as “
Step 5: Add a style sheet
In modern web design, it is essential to format the pages with styles. So, that’s a step that we must also look at. There’s only one more thing that needs to be done.
In the “pages” view, we need to create a page that will be the stylesheet for the site. If you look at the layout that we created, there is a line that says:
<link rel="stylesheet" type="text/css" href="/styles.css" />
That means the page is already set up to serve up a stylesheet called styles.css which should be applied to the page. Only, we haven’t created it yet.
In the “pages” view, click on the “Add Child” item of the “Hello World” page to create a new page. This will be the stylesheet. Give it the name “Styles” and click on “More” below the text field for the name to show the other properties. Very importantly, change the Slug to styles.css – this is the name that it will be served up as. Use no filter, set the layout to “stylesheet” and the status to “published”. Click on the “extended” tab and then on the ”-” sign in the right hand corner to delete that tab. Put the following styling code into the body. To keep it simple, I just added the styling for the headings since we have a few in our default page.
p {margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.3em; font-family: arial, sans serif; font-size: 120%; color: rgb(88,144,168)}
h1 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 160%;color: rgb(64,64,255)}
h2 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 150%;color: rgb(128,128,255)}
Click on “Create Page” to save the stylesheet.
Now, we are done. Click on the “View Site” button to see your site in color!! You might need to refresh the page in your browser just in case it’s being cached. I know it doesn’t look fantastic but it gives you a feeling on how to go on from here. Hope this helps you!
Comments »
Sorry, comments are closed for this article.
Nathan Fiedler said,
May 26th, 2007 at 02:53 PM
When I started my site with Radiant, I used one of the predefined examples. Even with that, I was bumbling around trying to figure out what to do. Whether you start with something, or with nothing, I think your guide will be helpful for newcomers.
The next thing to document: blogging and search. Granted, Radiant is not a great blogging engine, but it is available as a core feature, and yet it is poorly documented. Likewise with the search extension, for which there is no documentation at all. If it weren’t for the source code, I would never have figured it out.
Thanks
Mohit said,
May 27th, 2007 at 11:02 AM
Hi Nathan, Thanks for your comments. I actually intend to add bits and pieces as I go along. How to use some tags, how to add a header and footer, etc. I intend to use Radiant for a bit of an ambitious project (IMHO) so I think I’m going to try to write up some small pieces on how to achieve things simply (more goal-oriented).
Let’s hope it’s useful!
Cheers Mohit.
blitux said,
June 9th, 2007 at 08:43 AM
Hi everybody!
Yes… Radiant and its extensions (as well as some Ruby on Rails stuff) are not documented at all. I have spend a lot of time viewing the code of the extensions trying to figure it out how to make a new one.
I think there should be a blog with tutorials and stuff like that. I still can’t get it (something simple as search extensions don’t work… snif…) If anyone knows of some documentation that could help please point me in the right direction. Thanks.
blitux said,
June 9th, 2007 at 09:06 AM
Now I know how to use the search extension!!!
Here is a piece of code:
<r:search:form label='' /> # this line renders the search text field <r:search:empty>No Results
# this, inside the empty tags is rendered when there are no results </r:search:empty> <r:search:results>Search Results
<r:search:results:each> <r:search:results:link /> <r:search:results:content /># this requires a longer description… [1] </r:search:results:each> </r:search:results>
[1] This will show the results with the link to the content and a short description. The page where you write this code MUST be a search page type. If not, it will not work. Later we can apply a style to the results to make it more sexy. ;)
blitux said,
June 9th, 2007 at 09:08 AM
Sorry for the previous post… I forgot the code tags… here is the code again…
<r:search:form label="" /> # this line renders the search text field <r:search:empty> <h2>No Results</h2> # this, inside the empty tags is rendered when there are no results </r:search:empty> <r:search:results> <h2>Search Results</h2> <r:search:results:each> <r:search:results:link /> <r:search:results:content /><br/> # this requires a longer description... [1] </r:search:results:each> </r:search:results>Mohit said,
June 9th, 2007 at 12:32 PM
Hi blitux
Thanks for the search code. Would you like to expand it into a tutorial? :)
By the way, you should consider joining the Radiant mailing list – it’s quite helpful.
Cheers Mohit.
biltux said,
June 13th, 2007 at 01:38 PM
Hi again!
I will expand that thing into a tutorial. I’m preparing my page (with a blog and other stuff) with some tutorials, code snippets,etc. I’m a newbie in this framework, but I need it in my work… so… expect more inthe future!!!
(sorry for my english… I’m from Argentina.)
Cheers! blitux.
Joon said,
June 21st, 2007 at 05:27 AM
Hi Mohit,
thanks for the step by step tutorial! It’s very helpful for newcomers in view of the lack of comparable documentation on the official Radiant Homepage.
Thanks again! Bye, joon
anusha said,
September 4th, 2007 at 02:37 PM
can anyone tell me this? if we write a form in footer how can the values entered into the text fields enter the database??? if there is any way… just let me know about it… thanking you…