Contenu connexe Similaire à Arrrrcamp Radiant Intro Similaire à Arrrrcamp Radiant Intro (12) Arrrrcamp Radiant Intro2. Radiant CMS
Basic walkthrough
1 Radiant in onze workflow
2 Hoe werkt Radiant (basics)
3 Extensions
4 Vragen
5 Vragen aan de bar
3. Radiant CMS
Basic walkthrough
1 Radiant in onze workflow
2 Hoe werkt Radiant (basics)
3 Extensions
4 Vragen
5 Vragen aan de bar
Get wasted! fuck yeaaah!!!
5. Gorilla
Digs ruby
Websites Web-apps
Radiant Rails
6. Gorilla: Benny & Jelle
Benny
• Ruby/Rails/Radiant
• Web-apps met Rails
• Extensions voor
7. Gorilla: Benny & Jelle
Benny Jelle
• Ruby/Rails/Radiant • Information Architect
• Web-apps met Rails • Designer & Slicer
• Extensions voor • Non-programmer
8. Gorilla: Benny & Jelle
Benny Jelle
• Ruby/Rails/Radiant • Information Architect
• Web-apps met Rails • Designer & Slicer
• Extensions voor • Non-programmer
Radiant
12. Gorilla: Zo gebruiken wij
Radiant
Benny Jelle
• Zet server/ • Maakt HTML templates
repository op • Bouwt website op in
• Zet Radiant instance Radiant
op • Gebruikt alleen
Radiant
15. Radiant: Meet & Greet
• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
16. Radiant: Meet & Greet
• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child model, page-parts
& radius)
17. Radiant: Meet & Greet
• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child model, page-parts
& radius)
• Modulair (+300 extensions op GitHub)
18. Radiant: Meet & Greet
• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child model, page-parts
& radius)
26. Radiant: Layouts
<html> <img src=”g.gif” />
<head>…</head> <p>Welkom stranger.</p>
<body> </div>
<div id=”header”> <div id=”content_sec”>
<p id=”logo”> <ul id=”nav_sec”>
<a href=”/”>Radiant</a> <li>…</li>
</p> …
<ul id=”nav_main”> </ul>
<li> <h3>Gorilla’s</h3>
<a href=”/”>Home</a> <p>Ze zijn de max</p>
</li> </div>
… <div id=”footer”>
</ul> <p>Contact info</p>
</div> </div>
<div id=”content”> </div>
<div id=”content_main”> </body>
<h1>Welkom!</h1> </html>
27. Radiant: Layouts
<html> <img src=”g.gif” />
<head>…</head> <p>Welkom stranger.</p>
<body> </div>
<div id=”header”> <div id=”content_sec”>
<p id=”logo”> <ul id=”nav_sec”>
<a href=”/”>Radiant</a> <li>…</li>
</p> …
<ul id=”nav_main”> </ul>
<li> <h3>Gorilla’s</h3>
<a href=”/”>Home</a> <p>Ze zijn de max</p>
</li> </div>
… <div id=”footer”>
</ul> <p>Contact info</p>
</div> </div>
<div id=”content”> </div>
<div id=”content_main”> </body>
<h1>Welkom!</h1> </html>
28. Radiant:
Layouts
<html> <r:snippet
<head>…</head> name=”footer” />
<body> </div>
<div id=”header”> </div>
<r:snippet name=”header” /> </body>
</div> </html>
<div id=”content”>
<div id=”content_main”>
<r:content />
</div>
<div id=”content_sec”>
<r:content
part=”nav_sec” />
<r:content
part=”content_sec />
</div>
<div id=”footer”>
30. Radiant: Snippets (Header)
<p id=”logo”><a>GorillaCMS</a></p>
<ul id=”nav_main”>
<li><a href=”/”>Home</a></li>
<li><a href=”/soorten”>Soorten</a></li>
…
</ul>
34. Radiant: Pages
Overzicht genereren van child pages
<ul id=”gorilla_soorten”>
<r:children:each>
<li>
<h3><r:link /></h3>
<p><r:content /></p>
</li>
</r:children:each>
</ul>
37. Radiant: Page-parts
“overerving” van page-parts
<r:content part=”nav-sec” inherit=”true” />
Check op bestaan van page-parts
<r:if_content part=”nav-sec”>
<div><r:content part=”nav-sec” /></div>
</r:if_content>
39. Radiant: Radius template
language
• Tag-based template language developed for
Ruby
• Bindmiddel dat Radiant samen houdt
• Heel simpel, heel flexibel
• Speelt goed in op Parent/child model van
40. Radiant: Radius template
language
Voorbeelden van enkele handige tags
<r:find url=”/diensten” /> <r:link />
<r:title />
<r:next by=”title” /> <r:slug />
<r:previous by=”date” /> <r:breadcrumb />
<r:site_area /> <r:breadcrumbs />
<r:site_sub_area />
<r:gallery:lightbox id=”3” />
<r:nav id=“subnav” />
<r:if_content part=”foo” />
<r:children:each /> <r:unless_content part=”foo” />
<r:children:count />
46. Extensions: Nested layouts
1-col 2-col
<html> <html>
<head>…</head> <head>…</head>
<body> <body>
<div id=”content”> <div id=”content”>
<r:content /> <div id=”col-1”>
</div> <r:content />
</body> </div>
</html> <div id=”col-2”>
<r:content
part=”detail” />
</div>
</div>
</body>
</html>
47. Extensions: Nested layouts
1 master layout 1-col
<html> <r:inside_layout name=”master”>
<head>…</head> <r:content />
<body> </r:inside_layout>
<div id=”content”>
<r:content_for_layout />
</div> 2-col
</body>
</html> <r:inside_layout name=”master”>
<div id=”col-1”>
<r:content />
</div>
<div id=”col-2”>
<r:content part=”detail” />
</div>
</r:inside_layout>