I want to create my first statice html template to sell it on theme forest or somewhere else. But how can I create my templates without redudant html code, e.g. header or footer? In PHP you can use the include function, but this is a server side include and frames are the wrong way.
How do the professionals manage their static html templates? Do they use HAML to precompile the html code? Or do they really manage every single html file manually?
Thanks,
rjgamer
It depends a bit on what framework you are using. If you are on ruby you will likely use a layout file with a header and footer and a yield call where you want the specific content to appear. In rails this is done automatically for you by naming convention. Other frameworks may do it differently.
Related
I've been trying to find a way to write HTML partials (header.html, nav.html etc.) and include them inside another HTML page as a part of my build process.
I know about server-side includes in Apache or includes in PHP but I was wondering if there was a way to do it in Node ? I've tried using template engines like Jade or Handlebars but they were not really built for that. Jade was the closest to what I'm trying to achieve but I don't want to use the syntax and there's no good way to use regular HTML. With every other one you have to include a script tag in your HTML, which I would have to strip for production.
I'm just trying to build a static website and would like to keep my build process simple (I'm using NPM scripts). Do you know any other way around copy-pasting the common parts of my website for every page ? How do you manage this in your workflow ?
Here is a recap (a bit overdue) of what seem to be the best solutions for a simple use case: preprocess (has more options, can use custom or environment variables) and ssi (mentioned by #Alex K., it is very simple and sticks to Apache-style server-side includes). I ruled out jade since it added a lot of features I didn't really need.
This actually is really a perfect use case for jade or some other tempting engine.
Layout
The basic approach would be to create a layout.jade file with all the stuff that doesn't change and dictates the general layout of the site.
layout.jade
doctype strict
html(xmlns='http://www.w3.org/1999/xhtml')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title some title
body
| Static content like nav
block pageContent
Content based on the route
Within the layout file you can define a series blocks as place holders for content to be injected from other templates. That template will extend the layout and inject the relevant blocks, something like this:
some-route-template.jade
extends layout
block pageContent
| I am content from the relevant page
Compilation
The only thing left at this point is to compile template that matches the requested route using the jade library
I have created an HTML page 'header.html'. Then I need to implement the same header on about, services, contact page.
I know that we can do it via PHP Include. But as an HTML Developer, Is there any way to use like this in HTML without using third party code, especially in HTML 5?
Also I came to know that Dreamweaver has an option to make templates file. But I don't know is it valid in Web 3.0 and W3c.
Please Help me.
You need either a server-side language like PHP or Server Side Includes, or you use something like Dreamweaver which will assemble HTML files for you from parts which you then upload to the server. You cannot do it browser-side using HTML only.
I'm currently building a website using static HTML/CSS. I can put in a PHP backend if necessary, but I'd like to avoid this additional complexity if possible.
The site has about 10 different HTML pages, and any change to the navigation bar or other layout elements requires manually implementing the change on all the separate HTML documents.
Is there any simple solution where I can implement a layout template in HTML containing header and footer, and then have separate content files for each page, and compile this all to static HTML before deploying? I suppose I could roll my own in Python but it would be nice if there was a pre-existing solution.
Template-Toolkit includes the ttree utility which does that.
I also subsequently came across nanoc which is in Ruby, and seems like perhaps a more modern option.
What are the most common options for templating HTML files for static pages, to minimize maintenance and redundancy? An example of my question would be Adobe Dreamweaver.
Consider using a server-side scripting language such as PHP or ASP.NET. These produce dynamically built web-pages meaning that you can code it in such a way that headers/footers etc are separate from the main content, meaning you change that link once rather than 30 times.
If server-side scripting is not an option, I'd suggest having a look at Dreamweaver. This will enable you to create templates, and then create pages based on those templates. When you modify that link in the template, all pages that use that template will be updated. This will give you what you want without the server-side scripting.
why dont you use iframe inside ? ( which will contain a single navigation html page...)?
If you're using a server-side language like PHP, you can start to use the include function. So you'll include in a different file your navigation bar and then include it in every file of your website. Thus, every change to the navigation bar file will affect all the others files.
If you are writing only static pages, it isn't possible. Maybe you can try SSI.
Typically you need either a fancy program (like Dreamweaver and its templates functionality) or some sort of server-side scripting. Languages like php, asp, etc might be a bit much if the only thing you are looking to do is as you describe, so I might look into seeing if your server support server side includes (SSI).
I am creating some static html pages outside a .net and outside a ruby-on-rails environment.
I created a menu I want to share between several pages, but I'm wondering how this is done using regular html constructs (i.e. without .net's master pages and without rail's layouts)
Is there a way to do this without cutting and pasting?
What web server are you using? It's likely you'll have to enable Server Side Includes in order to use:
Save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
Reference: http://webdesign.about.com/od/ssi/a/aa052002a.htm
To share common HTML snippets between pages, you'll need some sort of server-side "code".
The simplest thing you could do that I know if would be Server Side Includes, "SSI"
see: http://httpd.apache.org/docs/1.3/howto/ssi.html#includingastandardfooter
There are basically two options: frames (or iframes) or javascript. Frames come with a whole host of problems and I really don't recommend you go down this route. Have a look at PURE javascript library for clean and simple client-side templating.