Хорошая практика для включения меню на веб-сайт? - PullRequest
5 голосов
/ 24 января 2012

Я совершенно новичок в создании сайтов.Тем не менее, есть некоторый опыт в LaTeX и некоторых других языках программирования.

Я действительно пытаюсь повторно использовать код и т. Д. Итак, при создании моего веб-сайта я хочу « включить », например, меню на других страницах вместо явного копирования и вставки егов.

Есть несколько способов, которые я знаю, которые могут это сделать:

  • меню - это статическая страница, ваш контент находится в iframe.Это худший способ сделать это, поскольку он ломает много вещей, таких как назад / вперед и т. Д. (Что, я знаю, может быть полезным для некоторых, но не в моем случае).
  • Это то, что я использую сейчас: каждая веб-страница включает в себя меню с использованием iframe:

    <iframe src="menu.html" class="menu" height="100%" frameborder="0"></iframe>
    

    Недостаток этого метода: меню не перезагружается должным образом, когда люди посещают ваш сайт,если вы не используете какой-либо сценарий, который специально указывает браузеру сделать это:

    document.getElementById('some_frame_id').contentWindow.location.reload();
    
  • Это то, о чем я думал, поскольку мой новый хост позволяет это: включая меню с использованием SSI.

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

    Возможным недостатком является то, что каждая веб-страница должна учитывать включения и, следовательно, должна быть проанализирована (это замедляет файловую систему).Безопасность не проблема для меня.

Что бы вы порекомендовали?Есть ли правила вежливости того, что должно быть сделано?Проблемы совместимости с любым из методов, описанных выше?Есть ли лучшие методы?

Например: я подозреваю, что второй метод (который я сейчас использую) нарушает индексацию Google, поэтому индексируется только моя домашняя страница.(Хотя я не уверен, правда ли это).

Ответы [ 4 ]

4 голосов
/ 24 января 2012

Способ сделать это - использовать что-то вроде включения на стороне сервера. Другие веб-разработчики могут использовать PHP, Python или какую-либо систему шаблонов, но в конечном итоге шаблон проектирования заключается в том, что вывод HTML дублируется, а HTML в вашей системе шаблонов - нет.

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

Учитывая, что вы просто хотите избежать дублирования HTML, SSI звучит как хороший способ, особенно если он у вас уже работает хорошо для вас. Недостатком является отсутствие расширенных функций программирования. Но скорость в основном не проблема с SSI; это одно из самых быстрых решений. Это также не влияет на индексацию Google; Google видит только выводимый HTML, а не SSI. SSI на стороне сервера.

1 голос
/ 14 марта 2012

В HTML5 вы можете легко сделать это с помощью тега Object, например,

<object data=menu_page.html type="text/html" style="usual css..." ></object>

Вы должны указать положение, ширину и высоту, используя css.Таким образом, если это структурный html, а не текстовый контент, вы можете поместить его в фоновый слой, используя style="z-index:-1;position:absolute;top:0;left:0; width:100%;height:100%"

Это, похоже, работает в самых последних браузерах (тестирование в Safari и Chrome)

Некоторые преимущества перед SSI:

  • Клиент может кэшировать часто повторяющиеся элементы нижнего колонтитула заголовка, уменьшая использование полосы пропускания.
  • Вы можете просматривать свои страницы в автономном режиме в браузере по мере их написания без какого-либо сервера.
1 голос
/ 24 января 2012

Почему бы не использовать меню JQuery?http://archive.plugins.jquery.com/projects/plugins?type=44

0 голосов
/ 25 января 2012

1.) Одним из быстрых способов справиться с этим является использование шаблонов DreamWeaver.Любой HTML-блок может быть превращен в шаблон.Шаблон можно использовать на любой странице вашего сайта.Шаблоны управляются как ресурс внутри DreamWeaver.Отредактируйте шаблон, и DreamWeaver обновит все места, где этот шаблон используется на страницах вашего сайта.Инструмент не бесплатный.Далее следуют другие бесплатные технологии:

2.) Шаблонный движок Velocity управляет множеством страниц на сайте apache.org.Вы можете использовать ANT для создания вашего веб-сайта.http://velocity.apache.org/engine/devel/webapps.html

3.) Если вы что-то делаете с Java ... посмотрите JFS и Facelets.http://www.ibm.com/developerworks/java/library/j-facelets/

...