Script sortare pagini web

Buna ziua!

Am 100 pe pagini html, numerotate: 1.html, 2.html, 3.html, ........, 99.html, 100 html.
Aceste pagini vreau sa le pun intr-o anumita ordine. De exemplu din pagina 1.html sa am link (Next) catre pagina 5.html, din pagina 5.html sa am link (Next) catre pagina 23.html si asa mai departe, toate paginile fiind legate intre ele cu link-uri.

Problema este ca adeseori trebuie sa schimb ordinea catorva pagini si trebuie sa intru in fiecare si sa le editez link-urile.
As fi vrut sa fac ceea ce am nevoie in Power Point si schimbam ordinea slide-urilor mai simplu dar nu se poate.

Asa ca nu ramane decat sa fac un script si sa editez doar acolo ordinea in care sa am paginile mele.
Se poate face asa ceva? Daca da, cum?

PS: Nu vreau sa fac o pagina de "cuprins" in care sa pun toate link-urile in ordinea pe care o vreau eu pentru ca trebuie sa dau 2 clik-uri in plus cand intu in pagina si cand ies din ea. Vreau sa ma duc dintr-o pagina in alta pagina.

Multumesc!

Edited by alex05ok, 29 October 2018 - 23:09.

Nu cred că merită. Nu cred că o să salvezi cine știe ce timp. În teorie poți să scrii un script care să parseze o serie de pagini web și să se asigure că elementele HTML de hyperlink sunt cum trebuie. Dar tot trebuie să informezi scriptul respectiv care este ordinea corectă, deci mai bine ai edita direct fără un script.

Le schimbi numele.

Daca ai PHP pe server, poti face asa:

fisier: links.php

<?php
return [
1 => 2,
2 => 3,
//complete here
];

codul de mai sus e doar o harta abstracta pe care o poti edita. In exemplul de mai sus, pagina 2 duce la pagina 3, 1 duce la 2, si poti completa cu ce vrei tu.

Pasul urmator e sa redenumesti toate fisierele din .html in .php.

Pasul 3:

editezi fisierele php in acest mod:

Daca inainte ai fi avut codul:

<a href="3.html">Next</a>

ca sa faci dinamic, vrei sa reutilizezi harta de la pasul 1, codul devine:

<?php
$links = require_once 'links.php';
?>
<a href="<?= $links[intval(pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME))] ?>.html">Next</a>

DAR:

nu vad la ce te ajuta toata treaba asta. Numerele alea sunt abstracte si nu spun nimic despre continut. Harta de mai sus te ajuta mai mult daca numele fisierelor ar fi avut o semnificatie, de exemplu "start.html", "de-ce.html", "concluzie.html" etc.

Fie redenumesti si folosesti o harta asa cum ti-am zis, putin adaptata pe la colturi, fie faci ce ti s-a zis mai sus: redenumesti fisierele.

Faptul ca 2 duce la 3 e fix pix ca informatie. Dar faptul ca "de-ce" => "concluzie" e o informatie utila care te ajuta sa te orientezi mai usor in prezentatia ta.

Edited by OriginalCopy, 29 October 2018 - 23:29.

Multumesc OriginalCopy, sa ai o seara placuta.
Nu este vorba de un site ci de o prezentare (proiect personal offline) ca in Power Point, paginile sunt in loc de slide-uri.

Oare se poate face si in javascript sau jQuery pentru ca in PHP mi se pare putin mai complicat, nu am mai lucrat niciodata si trebuie sa mai instalez si ceva in PC.
In Javascript exista Document Object Model (DOM) dar exemplele pe care le-am gasit pe net nu se aseamana cu ce vreau eu sa fac.

Edited by alex05ok, 29 October 2018 - 23:45.

 alex05ok, on 29 octombrie 2018 - 23:42, said:

Se poate, principiul e similar, dar e mai complicat pentru ca nu poti include un alt fisier "pur si simplu", ci trebuie sa trimiti o cerere AJAX catre server de la care sa preiei "harta" in format .json.

Deci cand editezi, trebuie sa editezi acel fisier .json.

Sau alternativ, sa folosesti frame-uri.


Oricum, mult mai complicat fata de cei 3 pasi simpli de mai sus.

Am gasit o modalitate:

<p id="demo"></p>
<script>
var txt = '{"page1":"5.html", "page2":"7.html"}' <!-- si asa mai departe cu toate paginile. Aceasta lista va fi intr-un document separat. -->
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.page1; <!-- "obj.page1" pun in 1.html, "obj.page2" pun in 2.html si asa mai departe -->
</script>

In fiecare pagina de la 1 la 100 pun "obj.page" care ii corespunde. Ramane doar sa transform textul "5.html" in link pentru ca nu se poate da click pe el.
Aveti vre-o idee?

Edited by alex05ok, 30 October 2018 - 09:31.

Nu vezi padurea de copaci?

Problema ta initiala e faptul ca trebuie sa intri in fisiere sa editezi.

In ce mod rezolva abordarea asta problema? Ca nu mai editezi cod html, ci o variabila... in toate fisierele?

vrei asa ceva:

var txt = ... aici apel ajax

Pentru link, vrei sa ai deja asta:

<a href="#" id="demo">Urmatorul</a>

si sa schimbi atributul href.

Uitati pana unde am ajuns.
Am facut un mic exemplu cu 3 pagini. Din 1.html merg in 2. html, din 2. html merg in 3. html si din 3. html merg in 1. html.

myscript.js este:

var txt = '{"page1":"2.html", "page2":"3.html", "page3":"1.html"}'
var obj = JSON.parse(txt);

1.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = obj.page1;
}
</script>
<p id="demo"></p>
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = obj.page2;
}
</script>
<p id="demo"></p>
</body>
</html>

3.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
	document.getElementById("demo").innerHTML = obj.page3;
}
</script>
<p id="demo"></p>
</body>
</html>

Singurul lucru pe care trebuie sa il mai fac este sa transform textele: 1.html, 2.html si 3.html in link-uri.
Nu stiu cum sa folosesc "Anchor href Property" in exemplul meu. https://www.w3school...anchor_href.asp

Edited by alex05ok, 30 October 2018 - 13:46.

Vezi exemplul de aici. Nu trebuie să transformi textele în link-uri, trebuie sa setezi href din a.

https://www.w3school...ry_dom_attr_set

 alex05ok, on 30 octombrie 2018 - 13:39, said:

Ai avansat ceva.

Pentru a sti unde trebuie sa te uiti in harta (la ce index), iti va folosi linia asta:

var currentPage = window.location.pathname.split('/').pop().split('.')[0]

Pana la urma am reusit, multumesc tuturor pentru ajutor. In loc de butonul "Next" am ales sa folosesc tasta "Enter".

1.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = obj.page1;
}
</script>
<script>
document.body.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
	 window.location.replace(obj.page1);
}
});
</script>
<p>Pagina 1</p>
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = obj.page2;
}
</script>
<script>
document.body.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
	 window.location.replace(obj.page2);
}
});
</script>
<p>Pagina 2</p>
</body>
</html>

3.html

<!DOCTYPE html>
<html>
<script type="text/javascript" src="myscript.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = obj.page3;
}
</script>
<script>
document.body.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
	 window.location.replace(obj.page3);
}
});
</script>
<p>Pagina 3</p>
</body>
</html>

Edited by alex05ok, 30 October 2018 - 14:48.