Pomoc:Strona główna

Z Enkol
Przejdź do nawigacji Przejdź do wyszukiwania

Strona główna Enkolu[edytuj]

Niniejsza strona opisuje budowę, sposób działania oraz zasady edycji strony głównej Enkolu.

Strona główna została zbudowana z wykorzystaniem:

Treść poszczególnych paneli nie jest wpisana bezpośrednio do kodu strony głównej. Każdy panel korzysta z osobnego szablonu, dzięki czemu jego zawartość można aktualizować niezależnie.

Ogólna budowa strony[edytuj]

Strona składa się z:

  1. górnego banera,
  2. dwóch równoległych kolumn,
  3. paneli umieszczonych w obu kolumnach.

Układ dwóch kolumn jest zachowywany również na urządzeniach mobilnych.

Za główny układ odpowiadają klasy CSS: 

.enkol-main-grid
.enkol-main-column

Klasa .enkol-main-grid tworzy dwie równe kolumny: 

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

Nie należy dodawać reguły mobilnej zmieniającej układ strony na jedną kolumnę.

Kod strony głównej[edytuj]

Aktualny schemat strony głównej: 

{{Banner-góra}}

<div class="enkol-main-grid">

<div class="enkol-main-column">

{{panel głównej
|[[Biblioteka:Katalog artykułów prasowych|Katalog artykułów prasowych]]
|{{Katalog artykułów}}
|#cfc28d
}}

{{panel głównej
|Interesujący artykuł
|{{Artykuł na medal}}
|#cfc28d
}}

{{panel głównej
|Ciekawa grafika
|{{Grafika na medal}}
|#cfc28d
}}

{{panel głównej
|Czy nie wiesz, że...
|{{czy wiesz}}
|#cfc28d
}}

</div>

<div class="enkol-main-column">

{{panel głównej
|Archiwista poleca
|{{Archiwista poleca}}
|#cfc28d
}}

{{panel głównej
|Najnowsze w archiwum
|{{Dodane do archiwum}}
|#cfc28d
}}

{{panel głównej
|O Archiwum
|{{o archiwum główna}}
|#cfc28d
}}

</div>

</div>

<noinclude>
[[Kategoria:Strona główna]]
</noinclude>

__NOTOC__
__NOEDITSECTION__

Szablon „panel głównej”[edytuj]

Szablon:panel głównej jest wspólnym szablonem odpowiadającym za wygląd pojedynczego panelu.

Aktualna konstrukcja: 

<includeonly><div class="main-panel">
<div class="main-panel-header" style="background-color:{{{3|#cfc28d}}};">{{{1|}}}</div>
<div class="main-panel-content">{{{2|}}}</div>
</div></includeonly>

Parametry:

Parametr Znaczenie Uwagi
1 tytuł panelu może zawierać wikilink
2 treść panelu najczęściej transkluzja innego szablonu
3 kolor tła nagłówka domyślnie #cfc28d

Przykład: 

{{panel głównej
|Interesujący artykuł
|{{Artykuł na medal}}
|#cfc28d
}}

Za wygląd panelu odpowiadają klasy: 

.main-panel
.main-panel-header
.main-panel-content

Górny baner[edytuj]

Za górną część strony odpowiada Szablon:Banner-góra.

Zawiera:

  • nazwę Enkolu,
  • krótki opis serwisu,
  • liczbę stron,
  • liczbę plików,
  • zestaw najważniejszych linków nawigacyjnych.

Baner korzysta z klas: 

.main-banner
.main-banner-intro
.main-banner-title
.main-banner-stats
.main-banner-links

Baner jest wyświetlany na pełnej szerokości strony, ponad obiema kolumnami.

Szablony zawartości paneli[edytuj]

Katalog artykułów prasowych[edytuj]

Szablon:

Szablon:Katalog artykułów

Wyświetlany w panelu:

Katalog artykułów prasowych

Zawiera krótki opis katalogu oraz automatycznie obliczaną liczbę skatalogowanych artykułów.

Liczba artykułów jest pobierana za pomocą zapytania Semantic MediaWiki.

Aktualizacja tekstu odbywa się bezpośrednio w tym szablonie.

Interesujący artykuł[edytuj]

Szablon:

Szablon:Artykuł na medal

Wyświetlany w panelu:

Interesujący artykuł

Zawiera:

  • ilustrację,
  • tytuł wybranego artykułu,
  • krótki opis,
  • odsyłacz do całego artykułu,
  • link do archiwum,
  • link do zgłaszania kandydatur.

Ilustracja korzysta z klasy: 

.main-featured-image

Linki umieszczone w dolnej części panelu korzystają z: 

.main-panel-actions

Zmiana wyróżnionego artykułu wymaga edycji wyłącznie tego szablonu.

Ciekawa grafika[edytuj]

Szablon:

Szablon:Grafika na medal

Wyświetlany w panelu:

Ciekawa grafika

Zawiera:

  • wyróżnioną grafikę,
  • podpis,
  • link do archiwum grafik,
  • link do zgłaszania kandydatur.

Wykorzystywane klasy: 

.main-featured-image
.main-featured-caption
.main-panel-actions

Grafiki są automatycznie skalowane tak, aby nie przekraczały szerokości panelu.

Czy nie wiesz, że...[edytuj]

Szablon:

Szablon:czy wiesz

Wyświetlany w panelu:

Czy nie wiesz, że...

Zawiera krótką listę ciekawostek oraz linki do archiwum i zgłaszania propozycji.

Lista korzysta z klasy: 

.main-didyouknow

Linki w dolnej części korzystają z: 

.main-panel-actions

Nowe wpisy należy dodawać zgodnie z instrukcją umieszczoną w samym szablonie.

Archiwista poleca[edytuj]

Szablon:

Szablon:Archiwista poleca

Wyświetlany w prawej kolumnie.

Zawiera:

  • ilustrację wybranego materiału archiwalnego,
  • krótki opis,
  • link do właściwej strony Archiwum.

Grafika korzysta z klasy: 

.main-featured-image

Zmiana polecanego materiału odbywa się wyłącznie poprzez edycję tego szablonu.

Najnowsze w archiwum[edytuj]

Szablon:

Szablon:Dodane do archiwum

Wyświetlany w panelu:

Najnowsze w archiwum

Zawiera ręcznie aktualizowaną listę ostatnio dodanych lub szczególnie interesujących dokumentów.

Lista jest opakowana klasą: 

.main-archive-list

Klasa ta ogranicza wcięcie listy i poprawia jej wygląd na wąskich ekranach.

O Archiwum[edytuj]

Szablon:

Szablon:o archiwum główna

Wyświetlany w panelu:

O Archiwum

Zawiera krótki tekst informacyjny zachęcający użytkowników do przekazywania i publikowania materiałów archiwalnych.

Szablon nie wymaga specjalnych klas CSS.

Grafiki na stronie głównej[edytuj]

Grafiki znajdujące się w panelach powinny być umieszczane w: 

<div class="main-featured-image">
...
</div>

W MediaWiki:Common.css obowiązuje: 

.main-featured-image img {
    max-width: 100%;
    height: auto;
}

Dzięki temu można podać nominalną szerokość grafiki, np.: 

[[Plik:Nazwa.jpg|400px]]

Na szerokim ekranie grafika może mieć 400 px, natomiast na telefonie zostanie automatycznie zmniejszona do szerokości panelu.

Nie należy używać:

  • <center>,
  • align="center",
  • sztywnych szerokości kontenerów,
  • tabel wyłącznie do pozycjonowania grafiki.

Linki akcji[edytuj]

Linki typu:

  • Czytaj całość,
  • Archiwum,
  • Zgłoś kandydaturę

należy umieszczać w: 

<div class="main-panel-actions">
...
</div>

Pozwala to zachować wspólne wyrównanie i sposób zawijania linków.

CSS strony głównej[edytuj]

Wszystkie style strony głównej znajdują się w:

MediaWiki:Common.css

w sekcji: 

/* =========================================================
   STRONA GŁÓWNA ENKOLU
   ========================================================= */

Podstawowe klasy:

Klasa Zastosowanie
.enkol-main-grid główny układ dwóch kolumn
.enkol-main-column pojedyncza kolumna strony
.main-panel pojedynczy panel
.main-panel-header nagłówek panelu
.main-panel-content zawartość panelu
.main-featured-image ilustracja w panelu
.main-featured-caption podpis pod ilustracją
.main-panel-actions linki akcji
.main-didyouknow lista ciekawostek
.main-archive-list lista nowych materiałów Archiwum
.main-banner górny baner

Zasady modyfikacji[edytuj]

Przy zmianach strony głównej należy zachować następujące zasady:

  1. Treści paneli powinny pozostać w osobnych szablonach.
  2. Na samej stronie głównej należy definiować przede wszystkim kolejność i rozmieszczenie paneli.
  3. Nie należy wracać do tabel jako mechanizmu tworzenia głównego układu strony.
  4. Nie należy stosować ujemnych marginesów ani elementów float do pozycjonowania kolumn.
  5. Nie należy dodawać sztywnych szerokości, które mogą powodować poziome przewijanie strony.
  6. Grafiki powinny pozostać responsywne.
  7. Po zmianie CSS należy sprawdzić stronę zarówno na komputerze, jak i na telefonie.
  8. Układ główny powinien pozostać dwukolumnowy również na telefonie.

Dodawanie nowego panelu[edytuj]

Aby dodać nowy panel, najlepiej:

  1. utworzyć osobny szablon z jego treścią,
  2. dodać wywołanie

w odpowiedniej kolumnie.

Przykład: 

{{panel głównej
|Tytuł nowego panelu
|{{Nazwa nowego szablonu}}
|#cfc28d
}}

Nie należy wpisywać rozbudowanej treści bezpośrednio do kodu strony głównej.

Usuwanie lub przenoszenie panelu[edytuj]

Panel można przenieść między kolumnami poprzez przeniesienie całego wywołania: 

{{panel głównej
...
}}

Nie wymaga to zmian w szablonie zawartości ani w CSS.

Kontrola po zmianach[edytuj]

Po większej zmianie należy sprawdzić:

  • widok desktopowy,
  • telefon w orientacji pionowej,
  • telefon w orientacji poziomej,
  • poprawne skalowanie grafik,
  • zawijanie długich tytułów,
  • brak poziomego przewijania,
  • działanie wszystkich linków,
  • poprawność transkluzji szablonów.

W przypadku zmian w MediaWiki:Common.css może być konieczne odświeżenie pamięci podręcznej przeglądarki lub ResourceLoadera.

Powiązane strony[edytuj]

Źródło: „https://enkol.pl/index.php?title=Pomoc:Strona_główna&oldid=114753”