LINUX.ORG.RU

Просьба собрать рабочий пример «include для статичного html»

 ,


2

3

Я плакал тут:
Есть ли аналог include для статики?

Суть:
- Есть россыпь статичных страничек.
- Используется только JS (jq.3.2.1.min.js, jq.fb.3.3.min.js, iscroll.min.js, isotope.js).
- Сам хтмл предельно простой (H, p, br, li, ul - чуть ли не весь набор).
- В каждой из 10-20-50 страничек все одинаковое кроме содержимого <H1>, <p> и т.п.

Само собой хочется, чтоб все, что одинаковое, было вынесено в один хэдер\футер, и было подключено к страничке. Чтоб вносить правки не бешеной копипастой.

На условном рнр я умею include.

Суть задачи в том, что необходим абсолютный отказ от всего «серверного». Оно должно работать в любом актуальном браузере (текущие дефолтные: фф, хром, оба ишака, мобильные на иоси и андроиде). Без сервера вообще (!). На дефолте, не требу какие-то разрешения и т.п.

Сразу скажу, что текущие странички, если их собрать руками - работают во всех этих браузерах. Т.е. это возможно.

В теме по ссылке выше мне советовали много разного
- Что-то я тупо не осилил (или не пытался приложить усилия).
- Что-то работало в одном браузере, но не работало в другом.

Еще есть вариант использовать условный wget, выкачивая все содержимое с сервера и сохраняя локально. Это оставляю как крайний вариант.

Перемещено leave из job



Последнее исправление: leave (всего исправлений: 1)
Ответ на: комментарий от Deleted

Сначала цену. И заверение, что «проверил, работает» :)

А так на почту в профиле.

dk-
() автор топика
Ответ на: комментарий от Thetan

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

dk-
() автор топика
Ответ на: комментарий от dk-

Выбери любой генератор статических сайтов.

Deleted
()
Ответ на: комментарий от sin_a

Не, не оно.
Да и фреймы обрабатываются движками как бы «отдельные сущности», а не как собранная страница.

dk-
() автор топика
Ответ на: комментарий от Einstok_Fair

Работает.

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>$.load demo</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$("#content").load("hello.html");
</script>
</body>
</html>

hello.html:

<h1>Hello</h1>
<div id="more"></div>
<script>
$("#more").load("world.html");
</script>

world.html:

<h2>world</h2>

deadNightTiger ★★★★★
()
Ответ на: комментарий от deadNightTiger

Можно вообще сделать синтаксис типа <div data-include="hello.html"> при желании, только рекурсию придется самому написать.

deadNightTiger ★★★★★
()
Ответ на: комментарий от dk-

Ну да, ещё пол кило жабаскрипта добавь там, где это не нужно.

http://jinja.pocoo.org

Само собой хочется, чтоб все, что одинаковое, было вынесено в один хэдер\футер, и было подключено к страничке. Чтоб вносить правки не бешеной копипастой.

См. ссылку. То, что ты хочешь, называется шаблонизатор.

aquadon ★★★★★
()
Ответ на: комментарий от aquadon

ты бы ему ещё движок Razor под mono предложил. Ну а что? Тоже шаблонизатор, а mono он как python.

Лучше уж на JavaScript (и никаких рептилоидов)

Einstok_Fair ★★☆
()
Последнее исправление: Einstok_Fair (всего исправлений: 1)

Судя по тому треду, тебе надо что-то типа вики движка (или юзер сам осилит корректный html писать? просто учти, что по факту после первого же незактытого тега юзер паникует и звонит разрабу)

И да, тыж вроде опытный чел, а ТЗ вот совсем никудышнее описал.

Deleted
()
Ответ на: комментарий от Einstok_Fair

По моему, ты перегибаешь, но спорить не буду, т.к. дело вкуса. По мне, так лучше 1 раз пройтись скриптом и сделать полную статистику.

aquadon ★★★★★
()
Ответ на: комментарий от deadNightTiger

Ммм... вот пока не произошло чудо.

Есть 3 файла:
- __header.html (в нем стандартное начало каждой хтмлки, подключение всех css\js)
- _menu.html (в нем описана менюшка «бутерброд»)
- 001-1.html и еще 100500 таких же (собственно содержат H p ul и т.п.

Беда в том, что пока все «на рнр через его include» (и соответствующий веб-сервер) - все ок. Т.е. все относительные пути - корректные. Без ошибок. В результате - верные кодировки, работают js.

Сейчас собрал как в твоем примере. На ФФ.
Получилось так:
- Файл - собрался. Вижу нужные тексты\фотки.
- Но слетела кодировка. Понятно по стандартным кракозябрам.

Скопировал <meta http-equiv=«Content-Type» content=«text/html;charset=utf-8» /> их хедера в собираемую твоим способом страницу. Кодировка исправилась!

- Еще было видно, что слетел css.
Сделал аналогично (прямо переписал) - поднялось.

- Слетел JS (меню «бутерброд» не отобразилось.
Починить пока не смог.

Я к чему. оно как-то херит пути? Так вроде нет. Но почему цсс\кодировка слетают?

dk-
() автор топика
Ответ на: комментарий от Einstok_Fair

Косяк в том что браузер не позволит JS-у грузить (ажаксом) файлы с диска (даже если JS сам загружен с диска).

А если у тебя странички грузятся через http сервер то такие движки есть, один даже лоровец пишет: https://github.com/markdown-it/markdown-it (хотя, нет это наверное просто рендер а не движек)

Deleted
()
Ответ на: комментарий от Deleted

Ну мне реально кажется, что все понятно. Ну и предполагается, что если найдется герой, то он сможет задать вопросы.

Голая статика совершенно необходима. В т.ч. для локального офлайн запуска. У панорамного движка есть примитивнейший веб-сервер, который даже под урезанными правами работает. Одна экзешка (и аналог под мак). Ни один антивирус его не трогает. Но он не умеет ничего вообще.

Ну и чтоб у заказчиков не было вообще никаких требований к хостингу. Вообще никаких.

dk-
() автор топика
Ответ на: комментарий от dk-

Но почему цсс\кодировка слетают?

потому что так как он показал можно грузить только контент, а не код, а ты хочешь код грузить, это можно но не так.

Deleted
()
Ответ на: комментарий от Deleted

Косяк в том что браузер не позволит JS-у грузить (ажаксом) файлы с диска (даже если JS сам загружен с диска).

Ну вот похоже я в это и упираюсь.
Но я сейчас для теста запускаю даже через «веб-сервер» (не умеющий в рнр и ни во что вообще).

Не пашет.

dk-
() автор топика
Ответ на: комментарий от dk-

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

Deleted
()
Ответ на: комментарий от Deleted

вообще поищи какиенибудь книжечки типа жаваскрипт за полчаса (такой книги нет, это пример), только без реактов и прочей фигни, чиста чтобы понимать как оно работает и как ошибки искать, потому как ладно исправлять их не ты будешь, но хоятбы понять что глбчит и показать это девелоперу - уметь крайне полезно

Deleted
()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от Deleted

Вкладка «консоль» после вкладки «инспектор»? Ни единого символа

dk-
() автор топика
Ответ на: комментарий от Deleted

Потом смотри, выделяешь общие (те которые нужны на каждой странице) css и скрипты (ну погуглить как их грузить ты сам догадаешься?) в отдельный head.js и его уже вставляешь везде ручками (jquery как минимум тоже придётся прицепить, хотя её можно прямо в это файле загрузить, но ты наверное не осилишь), а он уже подключает остальные.

Deleted
()
Ответ на: комментарий от dk-

блин, нагугли книжечку по js для самых маленьких, к концу праздников сам сделаешь 8)

если ничо не выгорит я после праздников (воскресенье - понедельник у меня всё занято), напомни я может proof of concept сделаю, но чисто для примера + инструкцию, потому как сам иногда ваяю подобное но всегда лень допиливать

а так погугли народ постоянно сталкивается, наверняка уже есть готовая фигня: https://stackoverflow.com/questions/14424625

Deleted
()
Ответ на: комментарий от Einstok_Fair

Ты щас спросил что-то вроде: а если не сова, а глобус?

Может связь какая-то есть, но я не улавливаю.

Deleted
()
Ответ на: комментарий от Deleted

всё можно делать на клиенте, только сохранять нельзя без помощи сервера. Значит нужно такой сервер, который даёт сохранять. Например по протоколу WebDAV или по git (что уж там мелочиться)

Einstok_Fair ★★☆
()
Ответ на: комментарий от Deleted

Я уже не помню точно. Еще в той первой теме проверял. В ком-то из популярных не работало. Т.е. сразу крест.

dk-
() автор топика
Ответ на: комментарий от Einstok_Fair

всё можно делать на клиенте, только сохранять нельзя без помощи сервера

про сохранения я речи не вёл, вы сначала добейтесь чтобы оно на клиенте (в браузере) вики в html ренедрило

Deleted
()
Ответ на: комментарий от dk-

ну вотщето я там сразу сказал что без костылей работает только в хроме, при этом я тебе там ещё два примера показал, которые должны везде работать

Deleted
()
Ответ на: комментарий от Deleted

вы сначала добейтесь чтобы оно на клиенте (в браузере) вики в html ренедрило

1) мы решили, что без сервера никак
2) раз сервер есть, значит проблем с загрузкой с сервера на клиент нет
3) значит единственное, с чем проблемы есть - это сохранение

Einstok_Fair ★★☆
()
Ответ на: комментарий от dk-

я считаю, тут надо не в «проще», а в «функциональнее» смотреть.

ну, бери джекилл, как в первом посте советовали. он в топе какого-то сферического рейтинга в вакууме: https://www.staticgen.com :)

а, да. «рабочий пример»... вот он: https://github.com/jekyll/example

aol ★★★★★
()
Последнее исправление: aol (всего исправлений: 1)
Ответ на: комментарий от Deleted

люди аж DOS-овые проги запускают через asm.js, а у тебя проблема какой-то текстовый редактор написать...

Einstok_Fair ★★☆
()
Последнее исправление: Einstok_Fair (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.