Preview-Image: Statische Seiten mit SSI

Bessere Pflege durch auslagern von fixen Bereichen

Um SSI zu nutzen, muss das Apache-Modul mod_include beim Hoster aktiviert sein.

Es gibt, zumindest unter Apache 2.4, zwei Wege

Entweder, man verweist in der htaccess-Datei auf .shtml als index-Standard

DirectoryIndex index.shtml index.html index.php

Oder man bleibt bei:

DirectoryIndex index.html index.php

Und man fügt folgendes hinzu, damit SSI in .html-Dateien funktioniert:

Options +Includes
AddType text/html .html
AddHandler server-parsed .html


In der einfachsten Struktur

könnte eine HTML5-Website mit SSI z.B. wie folgt aussehen:

Ordner-/Dateistruktur:

  • ./html
    • /css
      • /style.css
    • /js
      • /main.js
    • /ssi
      • /head.html
      • /nav.html
      • /footer.html
    • /.htaccess
    • /index.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="keywords" content=" ... " />
<meta name="description" content=" ... ">
<meta name="robots" content="index,follow" />

<!--#include virtual="./ssi/head.html" -->

</head>

<body>
<header>
<div role="banner">
<img src="/./logo.svg" width="" height="" alt="" title="">
</div>
</header>

<!--#include virtual="./ssi/nav.html" -->

<section id="breadcrumb">
...
</section>

<main>

<article>
<header>
<h1>LOREM IPSUM</h1>
</header>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ...</p>
</article>

</main>

<aside>
<section>
<h3>aside right >h3</h3>
<p>aside right >p</p>
</section>
</aside>

<!--#include virtual="./ssi/footer.html" -->

</body>
</html>

./ssi/head.html

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<link rel="shortcut icon" href="/./favicon.ico">
<link rel="stylesheet" href="/./css/style.css" />

./ssi/nav.html

<nav>
<ul>
<li><a href="/">LINK</a></li>
<li><a href="/">Link</a></li>
...
</ul>
</nav>

./ssi/footer.html

<footer>
<section>
<p>Lorem Ipsum ...</p>
</section>
<section>
<p>Lorem Ipsum ...</p>
</section>
</footer>

<script src="/./js/main.js"></script>


Aber da geht noch mehr...

Copyright Hinweis im Footer

<p>Copyright <!--#config timefmt="%Y" --><!--#echo var="DATE_LOCAL" --> <a href="/./">FIRMENNAME</a>. All Rights Reserved.</p>

Letzte Änderung anzeigen

Last modified <!--#flastmod file="index.html" -->


Dateiendung aus der URL entfernen

Um die URLs benutzer- und suchmaschinenfreundlicher zu gestalten entfernen wir .html aus der Adresszeile.

https://domain.com/index.html

Auf Hosting-Konfiguration achten!

<IfModule mod_rewrite.c>
RewriteEngine On
# May be required to access sub directories
#RewriteBase /

# Removing .html Extension from URL
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^.]+)$ $1.html [NC,L]

# You may need to redirect users which typed complete URL
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,L,R]

RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [NC,L]
</IfModule>


sources:

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.