Подтвердить что ты не робот

Каков наилучший способ управления дублирующимся кодом в статических HTML-сайтах

Я управляю старым веб-сайтом с множеством статических HTML-сайтов, без скриптов на стороне сервера, просто с HTML/CSS, с минимальным javascript. Я счел огромной тратой времени, чтобы несколько раз менять один и тот же фрагмент кода на разных страницах. Например, когда что-то в меню изменяется, так как меню является только статическим текстом в каждом документе, я должен делать одно и то же изменение несколько раз.

Мне было интересно, какая лучшая тактика будет заключаться в минимизации этих накладных расходов, другими словами, что бы вы рекомендовали для управления такими вещами, как код навигации на нескольких статических HTML-страницах.

Я знаю, что вы можете использовать:

  • скрипты на стороне сервера (например, PHP), но нет другой причины использовать скрипты на этом конкретном сайте.
  • фреймы (но это плохо, потому что его.. ну, фреймы:))
  • серверная сторона включает (похоже, что это может привести к проблемам при изменении сервера).
  • javascript (плохо для SEO)

Что бы вы порекомендовали?

Спасибо.

4b9b3361

Ответ 1

Из всех возможностей, как того, что вы указали, так и всего, о чем я знаю, я все равно буду работать с простым PHP-решением. Это легко и чисто, что требует от вас усилий. Я делаю это со всеми небольшими сайтами, которые я проектирую.

Чаще всего вы получаете довольно тривиальную структуру. Вы пишете полную страницу, затем для каждой последующей страницы вы просто меняете бит в середине, где живет контент. В этом случае просто возьмите все содержимое выше и ниже и сохраните его в файлах header.php и footer.php, затем поместите <?php require_once "header.php"; ?> вверху каждого файла содержимого (и аналогично файлу нижнего колонтитула). Готово!

У этого есть некоторые незначительные недостатки. Во-первых, вы зависите от сценариев, но PHP - это самый широко распространенный серверный язык в мире, так что это не проблема. Вас даже не волнует, если это PHP4 или PHP5, так как вы ничего не делаете.

Во-вторых, вы используете script для каждой загрузки страницы, чтобы служить тому, что по существу является статическим файлом. Это замедляет ваши ответы и лишний раз подчеркивает CPU. Это, вероятно, не имеет большого значения (отставание очень незначительное), но если вы считаете это расточительным, есть хорошие PHP-фреймворки, которые будут обрабатывать ваши PHP-страницы и генерировать статические htmls из них для вас. (Это достаточно легко сделать самим собой, только с небольшой работой, используя буферизацию вывода.) Таким образом, вы получаете лучшее из обоих миров - шаблоны PHP (и полный язык PHP, если вы в конечном итоге хотите, чтобы что-то пошло по линии), но статические html-страницы для минимальной активности процессора и быстрого времени загрузки страницы.

Ответ 2

Вы можете использовать статический генератор сайта. Я рекомендую jekyll.

Ответ 3

Если вы настроены на сохранение статического сайта, я бы рекомендовал использовать статический генератор сайта.

Один, который я использовал в прошлом, webgen

С веб-страницы:

Макет страницы отделен от content: если вы измените макет, все страницы, использующие этот макет, автоматически обновляется. Вы можете иметь любое количество различных макетов и даже вложенные.

Запись содержимого на языке разметки: Файлы содержимого и макета могут быть написанный на языке разметки, например Markdown, Textile или Haml, который позволяет вы больше концентрируетесь на том, что вы писать.

Автоматизация: webgen может автоматически генерировать, например, меню и тропы для вас.

Динамический контент: его легко добавить некоторый динамический контент, если есть нужно для этого.

Ответ 4

Прошло много времени с тех пор, как я его использовал, но Dreamweaver стал отличным инструментом для работы со статическими сайтами. У этого механизма был шаблонный/повторяющийся региональный механизм, который использовал комментарии для этой цели.

Отредактировано для добавления: Маленький Googling пробежал мою память. В Dreamweaver есть шаблоны, похожие на главные страницы ASP.NET. Для другого контента он использует метафоры Library and Assets. Поскольку это статический сайт, вы должны иметь возможность получить более старую версию Dreamweaver по дешевке, которая соответствует вашим потребностям.

Изменить 2: у меня есть мягкое место для Dreamweaver. Если StackOverflow является анти-экспертной биржей, а DW является анти-FrontPage. Adobe, являясь Adobe, на данный момент они, вероятно, добавили достаточно функций, чтобы эффективно калечить ее.

Ответ 5

Вы можете предварительно обработать ваш сайт с помощью PHP, а затем просто загрузить созданные статические файлы HTML.

Ответ 6

Может быть, нет другой причины использовать скрипты на стороне сервера, но, конечно, сокращение количества написанного кода является довольно большой причиной для его использования, не так ли? Это сделало бы обслуживание сайта более эффективным.

Ответ 7

В общем, я бы рекомендовал PHP - его обработка для включений - это именно то, что вам нужно, и делает что-то динамическое намного, гораздо проще в управлении.

Также очень легко найти хостинг с установленным PHP.

Ответ 8

Как и все остальные, статический сайт-генератор - это путь.

DocPad - новый генератор статического сайта, построенный с помощью Node.js и CoffeeScript, он может поддерживать передовые надстройки, такие как CoffeeScript, coffeekup, jade и stylus вместе с обычным markdown и haml.

Если вы совершенно не знакомы с концепцией генератора статического сайта и хотели бы знать, какие шаблоны для двигателей и метаданных, прочитайте эту статью прочитанной.

Ответ 9

Вы можете использовать sed для пакетного редактирования файлов, содержащих те же элементы страницы.

Ответ 10

В чем большая проблема с использованием PHP? По-моему, использование простого PHP-приложения может сэкономить вам много времени, а не редактировать многочисленные файлы. Это имеет смысл.

<?php include('navigation.php'); ?>

Помимо того, что россияция делает это на одном, а затем копирует и вставляет его на другие страницы.

Ответ 11

Я бы использовал PHP каждый раз, когда мои клиенты представят мне сайты такого рода. Вы можете легко разместить весь повторяющийся HTML в одном файле и вызвать его через функции или поместить его в отдельные файлы и вызвать его через include/require/what have you.

Лучше всего, если кто-то, кому вы поддерживаете сайт, хочет каким-то образом добавить контент. У вас уже было бы достаточно необходимой структуры, чтобы сделать ее очень простой для них.

Ответ 12

Я использовал Webby для этого в прошлом и был очень доволен тем, насколько легко он делал вещи и уменьшал дублирование.

Ответ 13

Я бы сказал, что встроенный кадр может быть прекрасным для чего-то вроде меню, которое появляется на каждой странице и должно быть обновлено на каждом из них. Просто снимите рамку, размер ее правильно, и это должно быть хорошо.

Ответ 14

Я думаю, что разумный компромисс между легкостью и скоростью будет включать Server-Side-Includes, а затем PHP позже.

Что касается PHP, я бы предложил вам обернуть контент, используя директивы auto_append_file и auto_prepend_file для модуля Apache2.

Ответ 15

<?php include('header.php') ?>

//Ваше содержимое размещено здесь

<?php include('sidebar.php') ?>
<?php include('footer.php') ?>

Ответ 16

Я бы поместил весь контент для сканирования в HTML, а затем сгенерировал повторяющийся контент с помощью javascript. Так что-то вроде этого:

<!doctype html>
<html>
    <head>
        <title>My website</title>
    </head>
    <body>
       Main content goes here.
       <!-- This script should generate the extra elements, 
            the navigation bar and stuff around the main div. -->
       <script src="enhance.js"></script>
    </body>
</html>

Итак, вам нужно всего лишь установить заголовок и написать основной контент на каждой странице. Остальное (что, вероятно, не интересно для искателей в любом случае) генерируется JS.

Ответ 17

вы можете включать статические веб-страницы без использования php, но вместо этого использовать javascript.

вот пример:

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
w3.includeHTML();
</script>

</body>
</html>