Dzień 18: Nadawanie kalendarzowi prawdziwego tytułu

"Ale", już słyszę jak się żalisz, "mój kalendarz już ma tytuł. Popatrz, jest miesiąc i rok na górze. Na grubo nawet."

Jednak jeśli się przyjrzysz kodowi HTML swojej strony, prawdopodobnie zobaczysz, że Twój kalendarz nie ma prawdziwego tytułu. Najczęściej jest to specjalny wiersz zawierający pojedynczą komórkę <td> na całą szerokość tabeli, z takim stylem CSS żeby wyglądała jak tytuł. Dużo łatwiej to zrobić za pomocą prawdziwego tytułu, czyli taga <caption>. Jest to prostsze do odczytania w szablonie, oszczędza kilka bajtów rozmiaru strony, wygląda dokładnie tak samo w przeglądarkach graficznych i jest znacznie bardziej dostępne.

Kto na tym skorzysta?

  1. Marek skorzysta. Lynx wyświetla tytuł tabeli ze słowem "CAPTION:" z przodu, co umożliwia jednoznacznie stwierdzić, że to właśnie jest tytuł tabeli a nie nagłowek kolumny czy jakieś dane.
  2. Jadzia skorzysta pośrednio. Użycie taga <caption> porządkuje kod tabeli i ułatwia dalsze wprowadzenie właściwych nagłówków, co oznacza dla Jadzi znacze ułatwienie - omówimy to jutro.

Jak to zrobić?

Możesz to zrobić tylko w narzędziach, które obsługują kalendarz wpisów (co wyklucza blog.pl i Bloggera) i umożliwiają dowolne dostosowanie kodu HTML dla generowanego kalendarza (co wyklucza Manilę).

  • niByLog standardowo nie posiada archiwum wpisów w postaci kalendarza. Stworzony przeze mnie plugin do niByLoga (niByLog.Kalendarz) począwszy od wersji 1.4.0 generuje poprawne tytuły.

  • Jeżeli używasz Movable Type, to prawdopodobnie masz tabelę z kalendarzem w szablonie strony głównej. W nowszych szablonach domyślnych kalendarz jest już zrobiony w sposób dostępny i nie trzeba go poprawiać. Jednak jeśli używasz starszych szablonów to tabela ta zaczyna się tak (poszukaj tekstu "calendarhead" aby znaleźć to miejsce):

    <table border="0" cellspacing="4" cellpadding="0">
    <tr>
    <td colspan="7" align="center">
    <span class="calendarhead"><$MTDate format="%B %Y"$></span>
    </td>
    </tr>
    <tr>
    <td align="center"><span class="calendar">Sun</span></td>
    ...

    Zostaw tę tabelę nienaruszoną, zmieniając jedynie cały pierwszy wiersz (tag <tr>) na prawidłowy nagłówek, czyli tag <caption>:

    <table border="0" cellspacing="4" cellpadding="0">
    <caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
    <tr>
    <td align="center"><span class="calendar">Sun</span></td>
    ...

    Reszty na razie nie ruszaj; poprawimy to jeszcze jutro.

    Atrybut class w tagu <caption> jest opcjonalny; zostawiłem go aby pasował do domyślnego szablonu Movable Type, który używa CSS aby ustawić nazwę miesiąca i rok na tekst pogrubiony. Po użyciu taga <caption> jak powyżej, wygląd strony nie powinien ulec zmianie.

  • W programie Greymatter zasada jest identyczna, różnią się jedynie tagi używane w szablonie:

    <caption>{{monthword}} {{yearyear}}</caption>

    Tutaj również możesz zmienić wygląd tytułu tabeli przy użyciu CSS.

  • W systemie Radio sprawa jest trochę bardziej skomplikowana, ale nie niemożliwa.

    1. Otwórz właściwą aplikację Radio klikając prawym klawiszem myszy ikonkę Radio w trayu i wybierając "Open Radio".

    2. W menu "Tools" wybierz "Developers", "Jump..." (Control+J) i przejdź do "system.verbs.builtins.radio.weblog.drawCalendar" (bez cudzysłowu).

    3. Następnie w menu "Edit", "Find and Replace", "Find..." (Control+F) poszukaj "hCalendarTable". Powinno się to znajdować we fragmencie kodu odpowiedzialnym za generowanie taga <table> kalendarza i udawanego nagłówka.

    4. Zmień linię wypisującą zmienną monthYearString w tagu <tr> na następującą:

      add ("<caption>" + monthYearString + "</caption>")

    5. Zamknij to okno. Na pytanie czy chcesz skompilować zmiany, odpowiedz że tak.

    6. Możesz również zmienić styl tytułu kalendarza. W szablonie "Home Page Template" dodaj lub uzupełnij style dla taga caption. Np. jeżeli sekcja <style> zawierała coś takiego:

      body, td, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

      teraz powinna zawierać:

      body, td, p, caption {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
caption {
  text-align: center;
  font-weight: bold;
}

Zobacz także

 
<< Dzień 17: Definiowanie akronimów | Spis treści | Dzień 19: Używanie prawdziwych nagłówków tabel >>