Как я могу использовать шаблоны для создания статических веб-страниц? - PullRequest
Новая
       25

Как я могу использовать шаблоны для создания статических веб-страниц?

3 голосов
/ 12 июня 2009

Я хочу добавить один файл HTML в другой.

Например: у меня есть header.html и footer.html Сейчас я пытаюсь создать aboutus.html, где я хочу добавить эти два файла HTML в этом файле нет динамического кода, кроме JavaScript.

Как я могу сделать это без использования скриптового языка, кроме JavaScript и CSS?

Ответы [ 11 ]

6 голосов
/ 12 июня 2009

Включения на стороне сервера (SSI) существуют для этой конкретной функции. Однако вам необходимо настроить сервер для таких включений. Apache поддерживает это. Не уверен насчет других веб-серверов.

4 голосов
/ 12 июня 2009

или Включения на стороне сервера (SSI) , все встраивание выполняется на стороне сервера ...

2 голосов
/ 15 октября 2012

Посетите веб-сайт ppk (quirksmode.org) и перейдите в архивы JavaScript, (http://quirksmode.org/js/contents.html). Он использует написанную им функцию ajax под названием sendRequest (находится по адресу http://quirksmode.org/quirksmode.js). Поскольку IE9 + хорошо сочетается со стандартами, я несколько упростил его: 

function sendRequest(url,callback,postData) {
    var req = new XMLHttpRequest();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
            //  alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

Затем используйте функцию sendRequest, обернув функции setFooter, setHeader и любые другие функции содержимого вокруг нее.

2 голосов
/ 12 июня 2009

В случае веб-сайтов без динамического контента, но с общими элементами, я генерирую последние страницы на своем компьютере разработки с помощью Perl's Template Toolkit и загружаю полученные статические HTML-файлы на сервер. Работает красиво.

Например:

header.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>

<body>

<div id="banner">
    <p>Banner</p>
</div>

footer.html 

<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>

aboutus.html 

[%- INCLUDE header.tt.html
title       = 'About Us'
description = 'What we do, how we do it etc.'
keywords    = 'rock, paper, scissors'
-%]

<h1>About us</h1>

<p>We are nice people.</p>

Теперь вы можете использовать tpage или ttree для создания своих страниц.

2 голосов
/ 12 июня 2009

Я не совсем уверен, чего вы хотите, но полностью на стороне клиента это можно сделать, заключив их в тег <object>. 

<html>
    <head>
        <title>About Us</title>
    </head>
    <body>
        <object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
        <!--Content goes here...-->
        <object data="footer.html"></object>
    </body>
</html>

Я не думаю, что это будет работать, если у header.html или footer.html есть javascript, который обращается к родительскому документу. Однако заставить его работать по-другому.

2 голосов
/ 12 июня 2009

Единственный способ сделать это на стороне клиента без JavaScript - это использовать фреймы или фреймы. Если вы хотите использовать JavaScript, вы можете использовать AJAX. Большинство структур JavaScript предоставляют соответствующие удобные методы (например, функция jQuery load).

Очевидно, что существует множество серверных решений, в том числе популярное расширение SSI для apache (см. Другие публикации).

1 голос
/ 12 июня 2009

Хотя это можно сделать с помощью JS несколькими способами (AJAX, вставка iframe), было бы очень плохой идеей не делать это непосредственно в разметке или (намного) лучше на стороне сервера.

Страница, зависящая от JS по своему составу, не будет полностью отображаться в значительной части браузеров пользователя и, что не менее важно, не будет правильно интерпретироваться Google и др., Если им это вообще нравится.

Вы можете сделать это, но, пожалуйста, пожалуйста, не надо.

1 голос
/ 12 июня 2009

почему бы не использовать php или любой другой язык сценариев?

выполнение этого с javascript не позволит всем пользователям просматривать вашу страницу.

0 голосов
/ 13 июня 2009

Наборы фреймворков - это способ сделать это без какого-либо влияния скриптов или серверов. 

<frameset rows="100,*,100">
    <frame name="header" src="header.html" />
        <frame name="content" src="content.html" />
    <frame name="footer" src="footer.html" />
</frameset>

Наборы фреймов HTML5: http://www.w3schools.com/tags/html5_frameset.asp

Это очень устаревшее решение, большинство веб-хостов будут поддерживать серверные включения или вы можете использовать php для включения ваших файлов

http://php.net/manual/en/function.include.php

Приветствия

0 голосов
/ 12 июня 2009

Другим способом было бы использование ajax для включения удаленных файлов HTML.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...