Statikus weboldal generálás

Web, mail, IRC, IM, hálózatok

Üdv!

Egy ideje már át akarom a honlapomat alakítani, szerintem már évtizede ugyanúgy néz ki és működik, viszont a mobileszközök elterjedése miatt mindenféleképpen alakítani kell rajta.

A saját tákolásom helyett szeretnék egy normálisabb megoldást. Igényeim:

  1. Jónéhány pdf fájl letöltése a fő profil. Csoportosíthatóak tantárgyak, évfolyam, típus (feladatsor, segédlet, versenyfeladatsor) szerint (vagy akár témakör szerint).
  2. Fontos lenne, hogy bármilyen csoportosítás listázásakor ne keveredjenek a tantárgyak (tehát lehessen csak matematika feladatsorokat listázni, ne keveredjenek mellé a fizikások). Ez jelenleg egyszerűen van megoldva: menürendszeren belül érhetőek el típusonként, évfolyamonként.
  3. Legyen egy gyakorlatilag azonnal (vagy kis munkával) használatba vehető téma/sablon/template, amiben menüt is tudok kezelni, és ez a téma nézzen ki valahogy és reszponzív legyen.
  4. Minél kevesebb CSS, JS kódot szeretnék írni (ezekhez nemigen értek), a HTML belefér (ehhez se értek, de azért ez lényegesen egyszerűbb). Néhány programozási nyelvet már használtam, ha nem elvetemült programozás kell, az se gond.

Rengeteg statikus weboldal generátor van, talán többeknek is ez jut eszébe. A Hugo-val próbálkoztam, de jó néhány óra elteltével se igazán tiszta, hogy mit honnan lehet hívni vagy elérni:

  • Valahogy a layout-okkal nem vagyok barátságban. Letöltöttem egy témát, ha csak szimpla oldalt akarok, akkor teljesen jól megy is. De ha már listából (pl. yaml) akarom a letölthető fájlokat megjeleníteni, nem értem, hogy hol mit kell átírni. Az adott megjelenítendő oldalba nem írhatok {{range ...}} dolgokat, mert azok értelmezés nélkül, úgy ahogy vannak, megjelennek a generált oldalon. Mikor használja pl. egy adott lap a list template-et? A shortcode-ok és a partial-ok se használhatóak mindenhol.
  • Érrtem, hogy a csoportosításokra a taxonomy a kulcs, de nincsen, ha jól látom arra lehetőség, hogy egyszerre egynél több taxonomy alapján szűrj (pl. 9. évfolyamos matematika feladatsorok listáját megnézni).
  • Nem mindig generálódnak le az oldalak, amit nem értek, hogy miért nem - azaz adott a content könyvtár egy alkönyvtárában egy foo.md, de nem lesz belőle foo.html. Máskor meg igen. Hasonló a menü is, vannak számomra rejtélyes megjelenések, nem-megjelenések.

Próbáltam a Jekyll-t is, de a rubygem-ek világát annyira nem látom (egy egyszerű téma letöltést is nehezen sikerült abszolválni, aztán nem is látom, hova került), aztán azt elengedtem. A ChatGPT-t is próbáltam, de a szövegelést lefejtve a példái nemigen működtek :(

Tehát, amiben a segítségetekre lenne szükségem:

  • Hogyan lehetne ezt értelmesen Hugo-ban megoldani? Több helyen olvastam, hogy sok helyen a működése szokatlan, de ha megszokja az ember, akkor megérti. Nos, én még a szokatlannál vagyok megakadva.
  • Esetleg más, kb. bármilyen lehetőség megnevezése - elsősorban statikus megjelenítésben gondolkodok, CMS-ekben egyáltalán nem (nincs igényem kommentelésre, lájkolásra, stb.).
  • 1260 megtekintés

( belsodaniel | 2023. 07. 25., k – 16:03 )

Par template gyujto oldalt tudok ajanlani kiindulasnak, ahol erdemes korulnezni:
- https://www.tailwindawesome.com/?price=free&type=template
- https://startbootstrap.com/themes?showAngular=false&showVue=false&showP…

Ezekre erdemes ugy tekintened, hogy meg van irva a komplett html/css/js es gyakorlatilag ujra fel tudod hasznalni az egyes komponenseket. Lehet veluk pepecselni, az teny, de segithet legalabb abban donteni, hogy milyen jellegu strukturaban gondolkodj. 

Ha egy picit dinamikusabban szeretned a dolgokat kezelni, akkor erdemes valasztani olyan templat-et, ami egy adott frameworkben meg van mar csinalva. Erre ajanlom a Vue/Next.js/Nuxt.js valamelyiket. (Ez azert macerasabb, mert itt mar kell node.js + npm/yarn + legalabb egy VS Code, amivel tudsz ertelmesen szerkeszteni es buildelni.) 

Css oldalhoz mindenkeppen hasznalj egy kesz css frameworkot (nekem szemely szerint a Tailwind bejovos, a Bootstrap sem rossz), es akkor nem erzed magad elveszve. 

 

Köszönöm!

Nem írtam, de már ebben is gondolkodok, így maradhat a saját tákolásom, oda bármilyen nyelven lehet egyedi igényeket megoldani. Majd csak annyi kell, hogy a plusz dolgokat be kell húzni, meg a szerkezetet átalakítani, de lehet, hogy ez még így is kisebb meló, mint egy oldalgenerátort megtanulni, aztán ha fél év múlva változtatni kell valamit...

Szivesen! ;) 

Amugy szerintem az segithet egy kicsit fejleszteni a html skilleket, hogyha ilyen elore gyartott template-eket kezdesz el atalakitani, mert latvanyban ott van egy tok olyan dolog, ami egesz jo megjelenest biztosit, a te feladatod mar "csak" a rendezgetes: ekozben lathatod hogyan mukodik egy adott css framework, meg igy tudod a tartalmat is hozzaigazatni, igy van egy sorvezetod ha ugy tetszik, hogy mikent erdemes csinalni. 

( mbael | 2023. 07. 25., k – 16:48 )

Szerkesztve: 2023. 07. 25., k – 16:52

https://astro.build/

Temak hozza bar alapvetoen barmilyen html / css sablont bele tudsz rakni: https://astro.build/themes/

Ha faek statikus oldalt csinalok, altalaban ezt szoktam hasznalni. Van benne par bleeding edge tech szoval erdemes merlegelni a betanulasi koltseget.

( AszaltSzilva | 2023. 07. 25., k – 16:49 )

Én valaha a https://datatables.net megoldását használtam. Bár nekem csak sima szöveges adatra volt szükségem, nem hinném, hogy nem lehet URL-eket szerepeltetni a táblázatban. 

Annál nem tudok egyszerűbbet elképzelni, hogy egy oldalon. egy táblázatban ott legyen minden adat, s szűrés után csak a megmaradt link-re kell kattintani. De ízlések és pofonok különböznek.  

AL

Először is lehet minden egyes oszlopra külön szűrni:

Szerintem ezt akár keverni is lehet, s ez teszi ezt a megoldást igazán használhatóvá. Én egy órarendet tettem így kereshetővé, azaz nem kellett mindig előszedni az Excel-t, ha a több száz bejegyzés közül kellett megkeresni egy terem foglaltságát valamelyik nap, vagy esetleg egy adott tanár óráit.

Ha például a feladatok felsorolásánál a címkék egy oszlopban szerepelnének, akkor elég a témakör nevét, vagy annak egy részletét beírni, mint például a megadott URL-en a Position oszlop alatt a Sales szót megadni.

AL

( zslaszlo v | 2023. 07. 25., k – 20:25 )

Esetleg Publii?

“The basic tool for the manipulation of reality is the manipulation of words. If you can control the meaning of words, you can control the people who must use them.”

― Philip K. Dick

Messze áll tőlem a kattingatós felület.

Tud egyébként olyat, hogy minden letölthető pdf fájlnak ugyanolyan legyen a "letöltési linkje": pl. legyen egy pdf ikon, rövid cím, 1-2 szavas leírás? Tehát ne 100-szor kelljen összekattingatni, és aztán ha valamit változtatni akarok, akkor 100 helyen megváltoztatni?

Ezt konktétan nem tudom, bár szinte biztosan tudja. Ám nekem tetszik a te jelenlegi megoldásod is.

A fent ajánlott database megoldás pedig még inkább.

“The basic tool for the manipulation of reality is the manipulation of words. If you can control the meaning of words, you can control the people who must use them.”

― Philip K. Dick

( gelei v | 2023. 07. 25., k – 21:16 )

Szerintem jobban jarsz, ha a templating lenyeget tanulod meg. Kb fel ora. Nekem 10+ kulonbozo Jekyll site-om van, jellemzoen mindenfele auto-generated doksi vagy valamilyen gyujtemeny (mint pl. a tied is, ha jol ertem), egyszeru mint a faek. 

Az, hogy vegigiteralsz egy valamilyen .yml listan, ennyi:

{% for item in site.data.topnavigation %}
<li class="nav-item">
  <a
    class="nav-link{% if page.url == item.link %} active{% endif %}"
    href="{{ item.link }}"
    >{{ item.name }}</a
  >
</li>
{% endfor %}

Jekyllnel tipushiba, hogy azert nem rendereli a template-eket, es jelennek meg szo szerint a {% for %} jellegu dolgok, mert lemaradt a front matter a fajl tetejerol, es nem tudja a Jekyll, hogy parse-olni kellene benne valamit. Gondolom a Hugonak is van hasonlo megoldasa, kulonben nem tudna, hogy mit kell feldolgoznia, es mit nem. Ez pl. egy Jekyll front matter:

---
layout: post
title: Blogging Like a Hacker
---

Vagy ez, ha nem akarsz definialni semmit:

---
---

Nagyjából a template lényege megvan, még régen használtam jekyll-t, még régebben PHP-s projekthez Smarty-t. A gondom a Hugo-val, hogy valahogy nem minden változó, shortcode érhető el bárhonnan (ha jól értem), meg az, hogy nem mindig lett generálva. Biztosan nem a frontmatter hiányzott, szerintem valami más volt az oka.

Lehet, hogy a jekyll-lel futok még egy kört, legfeljebb kérdezek :)

( cyclops | 2023. 07. 27., cs – 10:36 )

Szerkesztve: 2023. 07. 27., cs – 10:37

A téma engem is érdekel. Én a jekyll-t és a pelican-t próbáltam 1-2 éve. A pelican-t választottam végül. Azt hiszem azért, mert valahogy be tudtam importálni a régi drupal oldalam tartalmát.

( AszaltSzilva | 2023. 07. 27., cs – 11:09 )

Ha jól láttam, az oldaladon van pár bejegyzés, ami nem illeszkedik az "adatbázis" szerkezetbe. Nekem erre a https://tiddlywiki.com/ volt a megoldás.

Egy kis időbe beletelik, mire az ember felfedezi a lehetőségeit, meg a saját képére szabja, de iszonyatosan hatékony eszköz lehet belőle, s a webszerver oldaláról tekintve ez is csak egy statikus oldal.

AL