Отображение одного и того же содержимого (верхний колонтитул, панель навигации, боковая панель, нижний колонтитул) на всех страницах без сценариев на стороне сервера (PHP)

Я хотел бы, чтобы мой заголовок, панель навигации, боковая панель и нижний колонтитул синхронизировались между всеми страницами, только с дифференциацией содержимого/контейнера. Я знаю, что для этого есть команда PHP (включая: http://www.w3schools.com/php/php_includes.asp), но мой веб-хостинг не поддерживает сценарии на стороне сервера, а только статические веб-страницы. Я специально ищу пути с JavaScript и jQuery.


javascript php html jquery php-include
person Paraney    schedule 21.06.2015    source источник
comment
Я бы сменил хостинговую компанию... Можно было бы использовать фреймы..   -  person chris85    schedule 21.06.2015
comment
Полностью согласен с chris85, вам нужно сменить веб-хостинг.   -  person Boris    schedule 21.06.2015
comment
Измените свой веб-хостинг на того, кто поддерживает PHP. Не зацикливайтесь на рамах и тому подобном, 90-е прошли.   -  person flomei    schedule 21.06.2015
comment
Ребята, некоторым проектам вообще не нужны языки сценариев на стороне сервера. И есть решения для размещения статических файлов, которые действительно имеют смысл (например, посмотрите, что firebase.com/hosting.html предлагает). Это не совсем без причины.   -  person Tomek Sułkowski    schedule 21.06.2015

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете использовать генератор статических сайтов, например Jekyll, создавать страницы на своем персональном компьютере и загружать окончательные файлы на сервер веб-хостинга. .

person Ondřej Mirtes    schedule 21.06.2015
comment
Это был вариант, который я рассматривал: создание синхронизированного контента на моей личной машине, а затем загрузка. Ведь я обычно так и делаю. - person Paraney; 22.06.2015

arrow_upward
0
arrow_downward

Вы можете использовать Underscore Javascript и его систему шаблонов:

Простой пример:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

тогда tpl({foo: "Hello World"}) будет преобразовано в строку <h1>Some text: Hello World</h1>

person michelem    schedule 21.06.2015

arrow_upward
0
arrow_downward

Если вам нужно сохранить это ограничение и не использовать рендеринг на стороне сервера, я бы посоветовал вам изучить что-то вроде шаблонов jade. http://jade-lang.com/

Для начала вам не нужно многого, вы просто устанавливаете npm (https://www.npmjs.com/ - если вы хотите сделать что-то еще с Интернетом в будущем, он вам, вероятно, все равно понадобится) и jade-инструмент командной строки.

Затем в ваших шаблонах вы можете сделать что-то вроде:

// homepage.jade
include 'header.jade'
…
include 'footer.jade'

и вы получите хороший html-файл (ы).

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

Он получит весь документ сразу.

person Tomek Sułkowski    schedule 21.06.2015

arrow_upward
0
arrow_downward

Как сказал @chris85 в комментариях, я думаю, что лучший способ — сменить хостинговую компанию. Имейте в виду, что без скриптов на стороне сервера вы не можете хранить какую-либо информацию в базе данных для дальнейшего использования, а также не имеете некоторых основных функций веб-сайта, таких как контактная форма.

Тем не менее, если вы действительно хотите сделать веб-сайт, повторно используя заголовок и т. Д., Я бы сделал одну страницу для всех запросов и обрабатывал все клики по ссылкам с помощью JavaScript и jQuery.

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

Давайте сделаем простой пример:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome single-page Website</title>
    </head>
    <body>
        <header>
            <ul>
                <li><a class="menu-link" href="home.html">Home</a></li>
                <li><a class="menu-link" href="about.html">About</a></li>
                <li><a class="menu-link" href="contact.html">Contact</a></li>
            </ul>
        </header>
        <div id="main">
            <!-- let JavaScript handle the magic -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="file.js"></script>
    </body>
</html>

файл.js

$(function(){
    $('.menu-link').click(function() {
        $.get($(this).attr('href'), "", function(data){
            $('#main').html(data);
        });
    });
})

home.html

<div>
    Be welcome!
</div>

about.html

<div>
    About page
</div>

contact.html

<div>
    Ouch, I do <b>not</b> have a contact page :(
</div>
person Dinei    schedule 21.06.2015