staticmatic 0.8.10 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG +49 -0
- data/LICENSE +21 -0
- data/README +5 -27
- data/Rakefile +25 -2
- data/lib/staticmatic.rb +3 -5
- data/lib/staticmatic/base.rb +6 -2
- data/lib/staticmatic/configuration.rb +5 -9
- data/lib/staticmatic/helpers.rb +81 -54
- data/lib/staticmatic/version.rb +34 -0
- data/test/base_test.rb +5 -2
- data/test/helpers_test.rb +220 -27
- data/test/version_test.rb +26 -0
- data/website/site/download.html +84 -78
- data/website/site/faq.html +77 -71
- data/website/site/how_to_use.html +307 -173
- data/website/site/index.html +98 -92
- data/website/site/releases/0_8_10.html +106 -0
- data/website/site/releases/0_8_4.html +101 -95
- data/website/site/releases/0_8_8.html +96 -86
- data/website/site/releases/0_9_0.html +124 -0
- data/website/src/layouts/application.haml +10 -7
- data/website/src/pages/how_to_use.haml +149 -8
- data/website/src/pages/releases/0_8_10.haml +22 -0
- data/website/src/pages/releases/0_8_8.haml +4 -0
- data/website/src/pages/releases/0_9_0.haml +34 -0
- data/website/src/partials/news.haml +8 -6
- metadata +12 -5
data/website/site/faq.html
CHANGED
|
@@ -1,71 +1,77 @@
|
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
-
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
|
3
|
-
<head>
|
|
4
|
-
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
|
|
5
|
-
<title>StaticMatic</title>
|
|
6
|
-
<link
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</div>
|
|
15
|
-
<div class='title'>StaticMatic</div>
|
|
16
|
-
</div>
|
|
17
|
-
<div id='menu'>
|
|
18
|
-
<ul>
|
|
19
|
-
<li><a href="/">Home</a></li>
|
|
20
|
-
<li><a href="
|
|
21
|
-
<li><a href="
|
|
22
|
-
<li>
|
|
23
|
-
<a href="http://
|
|
24
|
-
</li>
|
|
25
|
-
<li>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
<li
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
|
3
|
+
<head>
|
|
4
|
+
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
|
|
5
|
+
<title>StaticMatic</title>
|
|
6
|
+
<link href="stylesheets/application.css" media="all" rel="stylesheet"/>
|
|
7
|
+
<link href="stylesheets/application.css" media="screen" rel="stylesheet"/>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id='container'>
|
|
11
|
+
<div id='header'>
|
|
12
|
+
<div class='bycurve21'>
|
|
13
|
+
<a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/></a>
|
|
14
|
+
</div>
|
|
15
|
+
<div class='title'>StaticMatic</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div id='menu'>
|
|
18
|
+
<ul>
|
|
19
|
+
<li><a href="/">Home</a></li>
|
|
20
|
+
<li><a href="download.html">Download</a></li>
|
|
21
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
22
|
+
<li>
|
|
23
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
24
|
+
</li>
|
|
25
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
26
|
+
<li>
|
|
27
|
+
<a href="http://rubyforge.org/tracker/?func=browse&group_id=3712&atid=14306">Report Bug</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li>
|
|
30
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
31
|
+
</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
<div id='content_wrapper'>
|
|
35
|
+
<div id='side'>
|
|
36
|
+
<div id='news'>
|
|
37
|
+
<div class='heading'>News</div>
|
|
38
|
+
<div class='title'>0.9.0 Released!</div>
|
|
39
|
+
<p>Complete with:</p>
|
|
40
|
+
<ul>
|
|
41
|
+
<li>"Local" links are always relative</li>
|
|
42
|
+
<li>
|
|
43
|
+
Ability to strip .html and index.html from link tag urls
|
|
44
|
+
</li>
|
|
45
|
+
<li>configuration.sass_options</li>
|
|
46
|
+
</ul>
|
|
47
|
+
<a href="/releases/0_9_0.html">And More!</a>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div id='content'>
|
|
51
|
+
<h1>FAQ</h1>
|
|
52
|
+
<h3>
|
|
53
|
+
I hate Haml. Can I use a different template language?
|
|
54
|
+
</h3>
|
|
55
|
+
<p>
|
|
56
|
+
No. At least not at the moment. Haml is perfect for our needs so we've had no reason to investigate using other languages. However, StaticMatic is open source so patches are always welcome.
|
|
57
|
+
</p>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div id='footer'>
|
|
61
|
+
<p>
|
|
62
|
+
Made with StaticMatic
|
|
63
|
+
0.9.0
|
|
64
|
+
, Hosted by
|
|
65
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
66
|
+
</p>
|
|
67
|
+
</div>
|
|
68
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
69
|
+
_hamlspace = "";
|
|
70
|
+
</script>
|
|
71
|
+
<script type='text/javascript'>
|
|
72
|
+
_uacct = "UA-775359-8";
|
|
73
|
+
urchinTracker();
|
|
74
|
+
</script>
|
|
75
|
+
</div>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -1,173 +1,307 @@
|
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
-
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
|
3
|
-
<head>
|
|
4
|
-
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
|
|
5
|
-
<title>StaticMatic</title>
|
|
6
|
-
<link
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</div>
|
|
15
|
-
<div class='title'>StaticMatic</div>
|
|
16
|
-
</div>
|
|
17
|
-
<div id='menu'>
|
|
18
|
-
<ul>
|
|
19
|
-
<li><a href="/">Home</a></li>
|
|
20
|
-
<li><a href="
|
|
21
|
-
<li><a href="
|
|
22
|
-
<li>
|
|
23
|
-
<a href="http://
|
|
24
|
-
</li>
|
|
25
|
-
<li>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
<li
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
</
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</p>
|
|
120
|
-
<
|
|
121
|
-
<p>
|
|
122
|
-
|
|
123
|
-
</p>
|
|
124
|
-
<
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
</
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
</
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
</
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
|
3
|
+
<head>
|
|
4
|
+
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
|
|
5
|
+
<title>StaticMatic</title>
|
|
6
|
+
<link href="stylesheets/application.css" media="all" rel="stylesheet"/>
|
|
7
|
+
<link href="stylesheets/application.css" media="screen" rel="stylesheet"/>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id='container'>
|
|
11
|
+
<div id='header'>
|
|
12
|
+
<div class='bycurve21'>
|
|
13
|
+
<a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/></a>
|
|
14
|
+
</div>
|
|
15
|
+
<div class='title'>StaticMatic</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div id='menu'>
|
|
18
|
+
<ul>
|
|
19
|
+
<li><a href="/">Home</a></li>
|
|
20
|
+
<li><a href="download.html">Download</a></li>
|
|
21
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
22
|
+
<li>
|
|
23
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
24
|
+
</li>
|
|
25
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
26
|
+
<li>
|
|
27
|
+
<a href="http://rubyforge.org/tracker/?func=browse&group_id=3712&atid=14306">Report Bug</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li>
|
|
30
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
31
|
+
</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
<div id='content_wrapper'>
|
|
35
|
+
<div id='side'>
|
|
36
|
+
<div id='news'>
|
|
37
|
+
<div class='heading'>News</div>
|
|
38
|
+
<div class='title'>0.9.0 Released!</div>
|
|
39
|
+
<p>Complete with:</p>
|
|
40
|
+
<ul>
|
|
41
|
+
<li>"Local" links are always relative</li>
|
|
42
|
+
<li>
|
|
43
|
+
Ability to strip .html and index.html from link tag urls
|
|
44
|
+
</li>
|
|
45
|
+
<li>configuration.sass_options</li>
|
|
46
|
+
</ul>
|
|
47
|
+
<a href="/releases/0_9_0.html">And More!</a>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div id='content'>
|
|
51
|
+
<h1>How to Use</h1>
|
|
52
|
+
<p>
|
|
53
|
+
StaticMatic is very easy to work with. It aims to provide just the tools you need and not get in your way.
|
|
54
|
+
</p>
|
|
55
|
+
<ul>
|
|
56
|
+
<li><a href="#developing">Developing a site</a></li>
|
|
57
|
+
<li><a href="#configuration">Configuration</a></li>
|
|
58
|
+
<li>
|
|
59
|
+
<a href="#templates">Templates</a>
|
|
60
|
+
<ul>
|
|
61
|
+
<li><a href="#layouts">Layouts</a></li>
|
|
62
|
+
<li><a href="#helpers">Helpers</a></li>
|
|
63
|
+
<li><a href="#partials">Partials</a></li>
|
|
64
|
+
</ul>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
<h2 id='developing'>Developing a site with StaticMatic</h2>
|
|
68
|
+
<h3>Setting up a site</h3>
|
|
69
|
+
<p>
|
|
70
|
+
The first thing to do with a StaticMatic site is to set up the folders and files ready for use. A simple command will create everything you need to get started:
|
|
71
|
+
</p>
|
|
72
|
+
<div class='code'>staticmatic setup my_site</div>
|
|
73
|
+
<p>This will set up a number of directories:</p>
|
|
74
|
+
<ul>
|
|
75
|
+
<li>
|
|
76
|
+
site/ - contains your static site and any assets such as images or javascript files
|
|
77
|
+
</li>
|
|
78
|
+
<li>
|
|
79
|
+
src/ - where you'll work on your templates
|
|
80
|
+
<ul>
|
|
81
|
+
<li>
|
|
82
|
+
helpers/ - contains any helpers you want to use in your website
|
|
83
|
+
</li>
|
|
84
|
+
<li>
|
|
85
|
+
layouts/ - contains templates that 'wrap' your main content pages
|
|
86
|
+
</li>
|
|
87
|
+
<li>pages/ - contains the actual pages of content</li>
|
|
88
|
+
<li>
|
|
89
|
+
partials/ - contains any "partial pages" that can be reused in other pages or layouts
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
stylesheets/ - contains any
|
|
93
|
+
<a href="http://haml.hamptoncatlin.com/docs/sass">Sass</a>
|
|
94
|
+
stylesheets you want to create
|
|
95
|
+
</li>
|
|
96
|
+
</ul>
|
|
97
|
+
</li>
|
|
98
|
+
</ul>
|
|
99
|
+
<h3>Previewing your site</h3>
|
|
100
|
+
<p>
|
|
101
|
+
When you're ready to start working on your site, you can fire up the preview server to see your changes:
|
|
102
|
+
</p>
|
|
103
|
+
<div class='code'>staticmatic preview my_site</div>
|
|
104
|
+
<p>
|
|
105
|
+
This will start a web server on port 3000. Point your web browser to
|
|
106
|
+
<a href="http://localhost:3000">http://localhost:3000</a>
|
|
107
|
+
to see your site.
|
|
108
|
+
</p>
|
|
109
|
+
<h3>Building your site</h3>
|
|
110
|
+
<p>
|
|
111
|
+
When you're happy with the website, you can tell StaticMatic to generate the HTML pages:
|
|
112
|
+
</p>
|
|
113
|
+
<div class='code'>staticmatic build my_site</div>
|
|
114
|
+
<h2 id='configuration'>Configuration</h2>
|
|
115
|
+
<p>
|
|
116
|
+
You can put a file called configuration.rb in your staticmatic project base directory.
|
|
117
|
+
In this file, you can set configuration settings or whatever else since it's just a
|
|
118
|
+
ruby file.
|
|
119
|
+
</p>
|
|
120
|
+
<h3>configuration.preview_server_port</h3>
|
|
121
|
+
<p>
|
|
122
|
+
The default is 3000.
|
|
123
|
+
</p>
|
|
124
|
+
<h3>configuration.preview_server_host</h3>
|
|
125
|
+
<p>
|
|
126
|
+
The default is localhost.
|
|
127
|
+
</p>
|
|
128
|
+
<h3>configuration.use_extensions_for_page_links</h3>
|
|
129
|
+
<p>
|
|
130
|
+
The default is true. When false .html and index.html will be stripped off
|
|
131
|
+
urls generated by the link tag helper.
|
|
132
|
+
</p>
|
|
133
|
+
<h3>configuration.sass_options</h3>
|
|
134
|
+
<p>
|
|
135
|
+
Default is an empty hash. You can specify any options that
|
|
136
|
+
<a href="http://haml.hamptoncatlin.com/docs/sass">Sass</a>
|
|
137
|
+
can take like :style => :compact
|
|
138
|
+
</p>
|
|
139
|
+
<h2 id='templates'>Templates</h2>
|
|
140
|
+
<p>
|
|
141
|
+
<em>
|
|
142
|
+
For information on how to use Haml itself, please check out the
|
|
143
|
+
<a href="http://haml.hamptoncatlin.com/docs/haml">Haml website</a>.
|
|
144
|
+
</em>
|
|
145
|
+
</p>
|
|
146
|
+
<h3 id='layouts'>Layouts</h3>
|
|
147
|
+
<p>
|
|
148
|
+
As with web frameworks like
|
|
149
|
+
<a href="http://www.rubyonrails.com">Ruby on Rails</a>,
|
|
150
|
+
StaticMatic uses layouts to 'wrap' up the content contained within page templates.
|
|
151
|
+
</p>
|
|
152
|
+
<p>
|
|
153
|
+
A layout typically contains the header and footer code for a page - code that is common to all pages on the site.
|
|
154
|
+
</p>
|
|
155
|
+
<p>
|
|
156
|
+
The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:
|
|
157
|
+
</p>
|
|
158
|
+
<div class='code'>= yield</div>
|
|
159
|
+
<p>
|
|
160
|
+
By default, StaticMatic will look for a template named 'application.haml'. If you have a page that needs to use a different layout, this can be specified in the page itself:
|
|
161
|
+
</p>
|
|
162
|
+
<em>contact_us.haml:</em>
|
|
163
|
+
<div class='code'>- @layout = "contact"</div>
|
|
164
|
+
<p>
|
|
165
|
+
The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.
|
|
166
|
+
</p>
|
|
167
|
+
<h3 id='helpers'>Helpers</h3>
|
|
168
|
+
<p>
|
|
169
|
+
StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.
|
|
170
|
+
</p>
|
|
171
|
+
<h4>Links</h4>
|
|
172
|
+
<p>
|
|
173
|
+
'link' can automatically set up hyperlinks for you:
|
|
174
|
+
</p>
|
|
175
|
+
<div class='code'>= link "Contact Us"</div>
|
|
176
|
+
produces:
|
|
177
|
+
<div class='code'>
|
|
178
|
+
<a href="contact_us.html">Contact Us</a>"
|
|
179
|
+
</div>
|
|
180
|
+
<p>
|
|
181
|
+
It is also possible to specify a relative path in your url:
|
|
182
|
+
</p>
|
|
183
|
+
<div class='code'>= link "../Contact Us"</div>
|
|
184
|
+
produces:
|
|
185
|
+
<div class='code'>
|
|
186
|
+
<a href="../contact_us.html">Contact Us</a>"
|
|
187
|
+
</div>
|
|
188
|
+
<p>You can also specify a URL:</p>
|
|
189
|
+
<div class='code'>
|
|
190
|
+
= link "StaticMatic", "http://staticmatic.rubyforge.org"
|
|
191
|
+
</div>
|
|
192
|
+
<h4>Images</h4>
|
|
193
|
+
<div class='code'>= img "me.jpg"</div>
|
|
194
|
+
produces:
|
|
195
|
+
<div class='code'><img src="/images/me.jpg"/></div>
|
|
196
|
+
<p>
|
|
197
|
+
It is also possible to specify a relative path in your url:
|
|
198
|
+
</p>
|
|
199
|
+
<div class='code'>= img "../me.jpg"</div>
|
|
200
|
+
produces:
|
|
201
|
+
<div class='code'><img src="../me.jpg"/></div>
|
|
202
|
+
<h4>Stylesheets</h4>
|
|
203
|
+
<div class='code'>= stylesheets</div>
|
|
204
|
+
<p>
|
|
205
|
+
This will automatically insert links to any
|
|
206
|
+
<a href="http://haml.hamptoncatlin.com/docs/sass">Sass</a>
|
|
207
|
+
stylesheets in your site source.
|
|
208
|
+
It will also link up any static stylesheets in your site/stylesheets/ directory
|
|
209
|
+
</p>
|
|
210
|
+
<p>
|
|
211
|
+
You can also specify the files and the order explicitly along with setting attributes:
|
|
212
|
+
</p>
|
|
213
|
+
<div class='code'>
|
|
214
|
+
= stylesheets :reset, :application, :media => :screen
|
|
215
|
+
</div>
|
|
216
|
+
produces
|
|
217
|
+
<div class='code'>
|
|
218
|
+
<link href="stylesheets/reset.css" media="screen" rel="stylesheet"/>
|
|
219
|
+
<br />
|
|
220
|
+
<link href="stylesheets/application.css" media="screen" rel="stylesheet"/>
|
|
221
|
+
</div>
|
|
222
|
+
<h4>Javascript</h4>
|
|
223
|
+
<div class='code'>= javascripts('test', :other)</div>
|
|
224
|
+
produces:
|
|
225
|
+
<div class='code'>
|
|
226
|
+
<script language="javascript" src="/javascripts/test.js" type="text/javascript"></script>
|
|
227
|
+
<br />
|
|
228
|
+
<script language="javascript" src="/javascripts/other.js" type="text/javascript"></script>
|
|
229
|
+
</div>
|
|
230
|
+
<h4>Current page</h4>
|
|
231
|
+
<p>
|
|
232
|
+
It can be very useful to know what page you're on in your layout and helpers
|
|
233
|
+
(ie: setting selected style on a menu item).
|
|
234
|
+
</p>
|
|
235
|
+
For the page src/pages/index.html
|
|
236
|
+
<div class='code'>= current_page # => "/index.html"</div>
|
|
237
|
+
<br />
|
|
238
|
+
For the page src/pages/subdirectory/other.html
|
|
239
|
+
<div class='code'>
|
|
240
|
+
= current_page # => "/subdirectory/other.html"
|
|
241
|
+
</div>
|
|
242
|
+
<h4>urlify</h4>
|
|
243
|
+
<p>Will convert a string to be usable in a url</p>
|
|
244
|
+
<div class='code'>
|
|
245
|
+
= urlify("We love Haml") # => "we_love_haml"
|
|
246
|
+
<br />
|
|
247
|
+
= urlify("Elf & Ham") # => "elf_and_ham"
|
|
248
|
+
<br />
|
|
249
|
+
= urlify("Stephen's gem") # => "stephens_gem"
|
|
250
|
+
<br />
|
|
251
|
+
= urlify("Test/Link") # => "testlink"
|
|
252
|
+
</div>
|
|
253
|
+
<h4>text_field</h4>
|
|
254
|
+
<p>Generates a text input field</p>
|
|
255
|
+
<div class='code'>= text_field('first_name', 'bob')</div>
|
|
256
|
+
produces:
|
|
257
|
+
<div class='code'>
|
|
258
|
+
<input name="first_name" type="text" value="bob"/>
|
|
259
|
+
</div>
|
|
260
|
+
<h3 id='partials'>Partials</h3>
|
|
261
|
+
<p>
|
|
262
|
+
As with web frameworks like
|
|
263
|
+
<a href="http://www.rubyonrails.com">Ruby on Rails</a>,
|
|
264
|
+
StaticMatic uses partials to keep things
|
|
265
|
+
<a href="http://en.wikipedia.org/wiki/DRY">DRY</a>.
|
|
266
|
+
</p>
|
|
267
|
+
<div class='code'>= partial('mypartial')</div>
|
|
268
|
+
<p>
|
|
269
|
+
This will first look in the current page/partial's directory for a file called _mypartial.haml.
|
|
270
|
+
If not found there it will look for src/partials/mypartial.haml.
|
|
271
|
+
</p>
|
|
272
|
+
<h4>Specify the partial's local variables</h4>
|
|
273
|
+
<div class='code'>
|
|
274
|
+
= partial('mypartial', :locals => { :title => 'My Title' })
|
|
275
|
+
</div>
|
|
276
|
+
<p>
|
|
277
|
+
This will locate the partial file as in the previous example above but now passes in a local variable called
|
|
278
|
+
<em>title</em>
|
|
279
|
+
that can be used in the partial like so:
|
|
280
|
+
</p>
|
|
281
|
+
<div class='code'>%h1 title</div>
|
|
282
|
+
<h4>Specify the partial's directory</h4>
|
|
283
|
+
<div class='code'>= partial('shared/mypartial')</div>
|
|
284
|
+
<p>
|
|
285
|
+
This will look for the file src/pages/shared/_mypartial.haml first.
|
|
286
|
+
If not found there it will look for src/partials/mypartial.haml.
|
|
287
|
+
</p>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div id='footer'>
|
|
291
|
+
<p>
|
|
292
|
+
Made with StaticMatic
|
|
293
|
+
0.9.0
|
|
294
|
+
, Hosted by
|
|
295
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
296
|
+
</p>
|
|
297
|
+
</div>
|
|
298
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
299
|
+
_hamlspace = "";
|
|
300
|
+
</script>
|
|
301
|
+
<script type='text/javascript'>
|
|
302
|
+
_uacct = "UA-775359-8";
|
|
303
|
+
urchinTracker();
|
|
304
|
+
</script>
|
|
305
|
+
</div>
|
|
306
|
+
</body>
|
|
307
|
+
</html>
|