Mon Sep 10 22:28:00 UTC 2007
Radiant CMS - Showing the date of articles
One of my sites (http://tec.onghu.com/) is powered by the Radiant CMS. As I continue to build that site, I shall put up some information about how simple things are done in Radiant.
One of the things that I have is a running list of articles that have been published on different dates. I wanted a simple way to print out the date next to the articles.
Here’s what you need to do for that:
<ul>
<r:find url="articles">
<r:children:each order="desc" status="published">
<r:unless_content part="no_menu"><li><r:link /> [<r:date format="%b %d, %Y" />]
</r:unless_content></r:children:each>
</r:find>
</ul>
Notice 2 interesting things in the code sample above.
- r:date format – this expects a formatting string similar to what strftime in Ruby/ Rails expects.
- r:unless_content part=”no_menu” – this tag is a bit that excludes some pages from being shown in the listing. Any page that has a part called ‘no_menu’ will not be listed. This is a common way to prevent CSS files from showing in the list.
That’s all there is to it. Leave a comment if you want any bit above clarified.
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!