Tworzenie podstron w dużych projektach

Question

Mając serwis z dużą ilością podstron, trudno byłoby zmieniać np: 70 plików html tylko po to aby zmodyfikować stopkę, a więc pytam czy można to zrobić prościej nie używając PHP ani AJAX. 

• Czy da się stworzyć ogólny szablon strony w html a później za pomocą JS odczytać plik txt (znajdujący się na dysku wraz ze stroną) a następnie używając innerHTML diva wkleić zawartość tego pliku txt do niego?
• Ewentualnie czy ktoś zna inne sposoby tworzenia podstron według szablonu napisanego html

Answer 1

Nie ma możliwości czytania plików txt za pomocą JS bez użycia PHP (chyba, że są na to jakieś biblioteki w co wątpię). Jednak gdybyś się bardzo uparł mógłbyś stworzyć plik "szablon.js"
I napisać w nim:

var szablon = //to co byś wpisał w pliku txt

Potem po prostu zaimportuj do wybranego pliku.

Nie podałeś szczegółów, więc trudno mi konkretniej odpowiedzieć, ale mam nadzieję, że pomogłem

Edit: I oczywiście możesz potem użyć InnerHTML
 

Comments

A jeżeli nie w txt to dało by się w innym pliku (z innym rozszerzeniem) bo o ile w zmiennej można byłoby tak zrobić to ciężko orientować się w 70 długich zmiennych? Dzięki za propozycje :)

---

Niestety nie znam innej możliwości niż plik JS, ale dla pewności, że mnie dobrze zrozumiałeś. Nie chodzi mi o kilka długich zmiennych a o jedną zawierającą cały szablon, potem podmieniałbyś kod za pomocą innerHTML a w razie potrzeby "wyrywał" kawałki kodu za pomocą

.substr(a,b)

Fajny tutorial o tej metodzie na w3

---

Chodzi ci o stworzenie zmiennej zawierającej divy ze strukturą strony, czy dobrze rozumiem że można byłoby to zrobić tak: 

• Utworzyć w pliku HTML diva z artykułem (z treścią wewnątrz pliku html) 
• Wystylizować ten plik HTML za pomocą CSS i podłączyć plik CSS i Js 
• Następnie skopiować i podlinkować pliki HTML a wszystkie ewentualne zmiany dokonywać w pliku Js

---

To już lepiej zastosować template.

Niemniej to jest mocne kombinowanie.

---

@Author[], Tak, przykładowo możesz ustawić w JS

document.GetElelmentById("div").innerHTML = zmienna

Oczywiście możesz też podmieniać pojedyncze divy, to już zależy od Ciebie

Answer 2

Nie da się wciąż pliku w JS-ie bez Ajaksu, chyba że mówimy o JS-ie na backendzie.

Od siebie rzucę hasłem: generator stron statycznych, np. 11ty, Gatsby, Jekyll.

Answer 3

a nie prościej użyć w html frameset? Cała strona jest nie zmienna, tylko wybrany fragment się zmienia.

Comments

Frameset nie jest rozwijany od jakichś 20 lat.

---

Przecież innerHTML też nie zmienia całej strony a element

Przykład:

document.GetElementById("id_elementu_do_zmiany").innerHTML = nowy_element

Takim elementem może być chociażby div czy nav

---

@misiek.sz, To już lepiej iframe ale raczej bym odradzał

---

A przy okazji to mam jeszcze jedno pytanie czy można byłoby tak to zrobić w javascripcie:

• Strona główna przekierowuje do artykułu/wpisu
• Załącza się plik JS który pobiera do zmiennej tekst z danego diva np: var text=getElementById("id").textContent;
• Następnie JS przekierowuje do innej strony gdzie innerHTML diva jest podmieniany na pobrany wcześniej text

I główne pytanie brzmi czy da się w ten sposób pobrać tekst i go nie stracić przy przekierowaniu

 

 

---

Musiałbyś go gdzieś zapisać (localStorage) albo udawać przekierowanie (History API).

---

Programowania w JS dopiero się uczę (szybko idzie bo znam inne języki) ale mimo to proszę czy mógłbyś napisać jak to zrobić. Nie chodzi mi o gotowca ale bardziej o opis tego co trzeba wykonać krok po kroku. Z góry dzięki :)

---

1. Podpinasz event listener pod click danego linku.
   1. W tym listenerze pobierasz treść elementu.
   2. Zapisujesz ją do localStorage.
2. Strona zostanie przeładowana.
3. Sprawdzasz, czy w localStorage są zapisane dane.
4. Jeśli tak, wyświetlasz je w odpowiednim elemencie.

---

Dzięki wszystkim za pomoc!