Commune d'en-Tête / Pied de page statique en HTML

Est-il décent de manière statique en HTML/XHTML pour créer des en-tête/pied de page des fichiers à afficher sur chaque page d'un site? Je sais que vous pouvez évidemment le faire avec PHP côté serveur serveur directives, mais est-il possible de le faire avec absolument pas de dépendances sur le serveur de couture tout en place pour vous?

Edit: Tous de très bonnes réponses, et a été ce que j'attendais. HTML est statique, période. Pas de véritable moyen de changer sans que quelque chose s'exécutant côté serveur ou côté client. J'ai trouvé que les Server Side includes semblent être ma meilleure option, car ils sont très simples et ne nécessitent pas de script.

De serveur web? IIS dispose d'un mécanisme de ce construit dans le serveur.
J'étais sur le point de demander à cet, quand j'ai trouvé cette réponse par le biais de Google.
Une alternative pour les petits sites web est d'utiliser d'une page HTML (avec un seul en-tête et pied de page) et activer / désactiver les sections avec Javascript ou tout simplement utiliser ancres (par exemple dans l'en-tête) pour naviguer à l'intérieur de la page.
je pense que la réponse ici est assez bonne. stackoverflow.com/questions/18712338/...

InformationsquelleAutor Adam Haile | 2009-01-06

html

34

Il y a trois façons de faire ce que vous voulez

Script Serveur

Cela comprend quelque chose comme php, asp, jsp.... Mais vous avez dit non à

Server Side Includes

Votre serveur est de servir les pages alors pourquoi ne pas profiter de la construite en server side includes? Chaque serveur possède sa propre manière de le faire, d'en tirer parti.

Côté Client Comprennent

Cette solutions a vous appeler en arrière sur le serveur après que la page a déjà été chargé sur le client.

InformationsquelleAutor
26

JQuery load() la fonction peut utiliser, y compris pour les communes de l'en-tête et pied de page. Le Code devrait être comme
```
<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>
```
Vous pouvez trouver démo ici
- 2014 et je pense toujours que c'est une réponse viable. L'article lié fournit une belle et simple démo, trop.
- Juste essayé de faire simple.
- J'utilise le même code, mais ne fonctionne pas
InformationsquelleAutor phpsmashcode
25

Depuis HTML ne dispose pas d'un "include" de la directive, je peux penser qu'à trois solutions de contournement
1. Cadres
2. Javascript
3. CSS
Un petit commentaire sur chacune des méthodes.

Images peuvent être de série des images ou des iFrames. De toute façon, vous devrez spécifier une hauteur fixe, de sorte que cela peut ne pas être la solution que vous cherchez.

Javascript est un très vaste sujet et il y a sans doute existe de nombreuses façons comment on pourrait l'utiliser pour obtenir l'effet désiré. Du haut de ma tête toutefois, je pense, de deux façons:
1. Complet à la requête AJAX, qui demande à l'en-tête/pied de page et les place ensuite dans le bon endroit de la page;
2. <script type="text/javascript" src="header.js"> qui a quelque chose comme ça: document.write('My header goes here');
Le faire via le CSS serait vraiment un abus. CSS a la content propriété qui vous permet d'insérer du code HTML de contenu, même si ce n'est pas vraiment destiné à être utilisé comme cela. Aussi, je ne suis pas sûr de prise en charge du navigateur pour cette construction.

InformationsquelleAutor Vilx-
8

Vous pouvez le faire avec javascript, et je ne pense pas que cela doit être que de fantaisie.

Si vous avez un header.js fichier et un footer.js.

Ensuite le contenu de header.js pourrait être quelque chose comme
```
document.write("<div class='header'>header content</div> etc...")
```
N'oubliez pas de échapper à toutes les caractères de devis dans la chaîne que vous écrivez.
Vous pouvez ensuite appeler à partir de votre statique des modèles avec
```
<script type="text/javascript" src="header.js"></script>
```
et de même pour l'footer.js.

Note: je ne recommande pas cette solution, c'est un hack et a un certain nombre d'inconvénients (mauvais pour le RÉFÉRENCEMENT et de l'ergonomie pour commencer) - mais il est conforme aux exigences de l'interlocuteur.

InformationsquelleAutor DanSingerman
5

vous pouvez le faire facilement à l'aide de jquery. pas besoin de php pour une telle tâche simple.
il suffit d'inclure ce qu'une fois dans votre page web.
```
$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})
```
maintenant l'utilisation de chargement de données sur n'importe quel élément à l'appel de son contenu à partir de fichier html externe
il suffit d'ajouter la ligne de votre code html où vous voulez que le contenu soit placé.

exemple
```
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
```
- J'aime cette méthode, trop. Savez-vous comment SEO ce serait pas un gros problème, juste par curiosité)?
- je ne suis pas sûr mais je pense que oui, il aura une incidence sur le référencement. les robots vont lire source de la page html, mais comme vous pouvez le voir lorsque vous affichez la source, vous ne trouverez pas de contenu html chargé. le html est intégré, uniquement lorsque le client a exécuté javascript. analyse simple via html ne trouverez pas intégré et pied de page, etc contenu
InformationsquelleAutor Shubham Badal
5

La meilleure solution est d'utiliser un générateur de site statique qui a templating/inclut le support. J'ai utiliser le Marteau pour Mac, c'est génial. Il y a aussi de la Garde, un rubis gemme qui surveille les changements du fichier, la compilation sass, concaténer les fichiers et probablement ne comprend.

InformationsquelleAutor juanpazos
3

Le moyen le plus pratique est d'utiliser Server Side include. Il est très facile à mettre en œuvre et sauve des tonnes de travail lorsque vous avez plus de quelques pages.

InformationsquelleAutor allesklar
3

Le moyen le plus simple pour cela est d'utiliser HTML.

Vous pouvez utiliser l'une de ces façons:
```
<embed type="text/html" src="header.html">
```
ou:
```
<object name="foo" type="text/html" data="header.html"></object>
```
InformationsquelleAutor Jose
2

HTML images, mais il n'est pas une solution idéale. Vous serait essentiellement accès à 3 pages HTML distinctes à la fois.

Votre autre option est d'utiliser AJAX je pense.

InformationsquelleAutor Joe Phillips
1

Pas. Les fichiers HTML statiques ne changent pas. Vous pourriez le faire avec un peu de fantaisie Javascript AJAXy solution, mais ce serait mauvais.

InformationsquelleAutor Gareth
1

Court de l'utilisation d'un local système de template comme plusieurs centaines existent maintenant dans chaque langage de script ou même à l'aide de votre homebrewed un avec sed ou m4 et d'envoyer le résultat sur votre serveur, non, vous avez besoin d'au moins SSI.

InformationsquelleAutor Keltia

Vous pouvez utiliser une tâche coureur comme gulp ou grunt.

Il y a un mécanisme national de prévention gulp package qui n'fichier, y compris à la volée et compile le résultat dans un fichier HTML en sortie. Vous pouvez même passer des valeurs par le biais de vos partiels.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

un exemple d'une gorgée de la tâche:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

InformationsquelleAutor Antfish

Vous pouvez essayer de les charger via le côté client, comme ceci:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

REMARQUE: le contenu de la charge de haut en bas et de remplacer le contenu du conteneur, vous devez le charger dans.

InformationsquelleAutor Antonello Cherubini

0

La seule manière d'inclure un autre fichier avec juste du HTML statique est un iframe. Je ne considère pas ça une très bonne solution pour les en-têtes et pieds de page. Si votre serveur ne supporte pas le PHP ou SSI pour une étrange raison, vous pourriez utiliser PHP et prétraiter localement avant de la télécharger. Je considère qu'une meilleure solution que les iframes.

InformationsquelleAutor Chuck

Vous devez vous connecter pour publier un commentaire.

Script Serveur

Server Side Includes

Côté Client Comprennent