index.html Template
The index.html file is the main Template for a Theme
The index.html file contained in the theme folder is the framework for all your other pages to be generated from.
A themes index.html file follows a familiar structure that is common in nearly all modern web pages. This section aims to familiarise you with the template document.
The basic layout of the theme index.html should look familiar to you:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>This is the Page Title</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css”
media=”screen” />
</head>
<body>
<div id=”container”>
<div id=”pageHeader”>
<h1>%site_title%</h1>
<h2>%site_slogan%</h2>
</div>
<div id=”contentContainer”>
<div id=”content”>
Content
</div>
</div>
<div id=”sidebarContainer”>
<div id=”navcontainer”>
%toolbar%
</div>
<div id=”sidebar”>
%sidebar%
</div>
</div>
<div id=”footer”>Footer</div>
</div>
</body>
</html>
RapidWeaver will automatically set the language of the template index.html file based on the user's preference.
Your Template file should not include the lang attribute.
<html lang="en">
Instead, it should just include the opening HTML tag, like this:
<html>
The Syntax Tags found in the template file will be replaced with actual content when the page is published of exported by RapidWeaver.
The main content areas are distinguished by elements, each open and close tag contains a Syntax Tag. For example.
<div id=”content”>%content%</div>
The majority of the syntax tags relate directly back to a text area in RapidWeaver, it should be obvious which tag corresponds to which area.
The tags can be placed anywhere within the template. To recap a RapidWeaver Syntax Tag looks like this:
%content%
This is the tag for the main content of the page anything in the main window in RapidWeaver will be inserted here.
%sidebar%
This tag refers to the Sidebar Window in the Page Inspector, again any text or images entered into the Sidebar in RapidWeaver will be converted to HTML and will replace this tag in the .html file. A full list of tags can be found in the file Theme Syntax section.
All RapidWeaver Syntax Tags, with one exception, look exactly the same. The exception is the %pathto(file.extension)% tag. This tag is used for site consolidation, essentially meaning that RapidWeaver will automatically generate links to files located in the theme folder.
When exporting a site RapidWeaver places all of the theme files in a folder called rw_common and generates the links to the files in this folder. This should be used when linking to any file in your theme file including stylesheets, javascript files and images.
Linking to the styles.css file in your theme directory.
%pathto(styles.css)%
the published code will look something like this:
../rw_common/themes/theme_name/styles.css
Folders can be included before the image name:
%pathto(images/image_name.jpg)%
The published code will look something like this:
../rw_common/themes/theme_name/images/image_name.jpg
All tags can also be used inside styled text areas in RapidWeaver. The %pathto(...)% tag is particularly useful should you want to include images or links to files inside your theme.
Last modified 11mo ago