2009-12-28 5 views
1

Question très basique: je suis en train de coder une application web qui a une poignée de pages. Ces pages contiennent les éléments partagés habituels: par exemple, l'en-tête/masthead du site et une barre latérale sont présents sur toutes les pages. Le HTML est statique (pas généré dynamiquement, son "ajax-ness" se fait côté client).meilleure pratique pour traiter des éléments "structurels" communs de pages?

Quelle est la meilleure façon d'importer/"inclure" ces éléments communs dans mes pages? La solution que je me sers est d'avoir les fichiers HTML contiennent place détenteurs vides

<div id="header"></div> 
<div id="leftSideBar"></div> 
(...) 

puis faire dans le .ready de jquery (document) $():

$.get("header.html", function(html) { $("#header").html(html); }); 
// .... 

Est-ce la meilleure façon de fais ça? Je suis nouveau au développement web. :)

Je suppose que je pourrais aussi déterrer un outil de génération de code "macro-like" que je courrais sur les fichiers HTML à remplacer, par exemple, "#header" avec le contenu de header.html. De cette façon, le chargement d'une page nécessiterait une seule requête pour un seul fichier HTML, ce qui sonne mieux.

Quelle est la façon intelligente d'y parvenir? Je suis sûr que ce problème a été résolu mille fois.

EDIT: Le côté serveur est codé en Python + cherrypy. (Je suppose qu'il est raisonnable d'essayer de ne pas générer dynamiquement du HTML en faisant des applications web "web 2.0-ish" Corrigez-moi si je me trompe, comme je l'ai dit, je suis très nouveau dans cet environnement.)

Merci pour vos idées,

lara

+0

Cela semble une approche assez logique à mon avis. Les blocs "vides" n'ont aucune connotation négative dans le monde HTML, ce que vous faites est parfaitement légitime. –

+0

a édité ma réponse pour inclure une manière de faire le modèle using des cadres – marcgg

+0

Que employez-vous du côté de serveur? Nous ne pouvons pas vraiment répondre à votre question sans le savoir. – Domenic

Répondre

5

Si vous voulez inclure des fichiers, s'il vous plaît envisager d'utiliser un langage de back-end comme PHP ou ASP. Javascript n'est pas vraiment destiné à le faire même si cela fonctionne.

<?php include 'other_file.php'; ?> 

utilisation de javascript pour faire cela conduira, je pense, à un pauvre SEO et le chargement de la page peut regarder bizarre pour l'utilisateur final. Si vous ne voulez vraiment pas utiliser un langage dorsal, vous pouvez vous pencher sur cette question. En ce qui concerne les frameworks, la plupart d'entre eux ont une façon de gérer les templates. ASP.NET a le système de page maître, Ruby on Rails a des dispositions.

Voici un exemple en utilisant Rails:

<html> 
... 
<div id="content"> <%= yield %> </div> 
... 
</html> 

Ici tout le contenu d'un sous-page sera dans le « rendement ». Voici un link pour en savoir plus à ce sujet.

Certains cadres peuvent gérer plusieurs emplacements.

+2

compte tenu de l'accessibilité, en utilisant javascript pour tirer le contenu est tout simplement une mauvaise approche. – dusoft

+0

Marc, je ne suis pas marié à l'idée d'inclure des fichiers. Je me demande simplement comment les personnes qui ne génèrent pas le code HTML évitent dynamiquement de dupliquer des éléments de pages communs sur toutes les pages de leurs sites. Merci pour toute aide. – laramichaels

+0

@lara: Je dirais que ces gens utilisent un template (cf mon edit sur dreamweaver) ou simplement dupliquent le code. – marcgg

1

Dans une certaine mesure, cela dépend de ce que vous utilisez du côté serveur pour rendre les pages. Si vous utilisez des scripts côté serveur pour générer la page, vous devriez être en mesure d'utiliser un framework web (par exemple Django ou RubyOnRails) ou même simplement un moteur de template de base tel que Genshi. La fonctionnalité d'inclusion de base peut même être intégrée dans la langue que vous utilisez (c.-à-d.PHP)

Si c'est juste du HTML statique, vous voudrez peut-être regarder dans la mise en place d'une forme d'inclusion côté serveur comme Apache SSI ou NGINX SSI. Vous devrez choisir celui qui fonctionne avec le serveur que vous utilisez, et vous aurez besoin d'un accès suffisant pour installer et configurer le plugin ou le module. Alternativement, vous pouvez vouloir utiliser un script pour générer vos pages (éditer, générer et déployer). Une approche simple en utilisant cat/sed/awk/make (référence utile supplémentaire - Sed & Awk) peut être tout ce dont vous avez besoin, ou vous voudrez peut-être utiliser un moteur de templating et un langage tel que Python ou Perl.

+0

merci beaucoup! L'application web est codée en python, mais je suis (malencontreusement?) En train de garder tout le HTML statique. Je ne savais pas que NGIX pouvait faire ça pour moi, ça devrait le résoudre. :) -l – laramichaels

0

Je voudrais que l'inclusion soit prise en charge côté serveur, ce qui signifie moins de demandes du client et peut également avoir d'autres avantages (plus facile de déboguer js, etc.).

Avoir le processus de serveur inclus ne va vraiment pas le mettre à rude épreuve.

Questions connexes