Aktualizacja - Skrypty
System newsów
Jak zrobić system newsów?
Dla internautów odwiedzających naszą stronę bardzo przydatna może się okazać lista wprowadzonych ostatnio nowości w całym serwisie wraz z ich opisami. Najczęściej tego typu skrypty nazywa się systemem newsów. Umieszcza się ją zwykle na stronie głównej. Maja taką zaletę w stosunku do daty aktualizacji, że nie trzeba przeglądać wszystkich stron, aby znaleźć te, które były ostatnio modyfikowane (co w przypadku słabego transferu i obszernej witryny może dość długo trwać). Natomiast w odróżnieniu od sygnalizowania nowości, system newsów zbiera w jednym miejscu wszystkie informacje wraz z opisami wprowadzonych zmian. Wystarczy spojrzeć i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze.
Wymagana wiedza:
- Odsyłacze
- Wstawianie obrazków
- Podstawy stylów CSS (m.in. arkusze stylów)
Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css:
/* Tytuł: */
.news dt {
font-size: 14px; /* rozmiar czcionki */
text-align: left; /* wyrównanie tekstu: left, right, center, justify */
padding: 5px; /* margines wewnątrz */
border-width: 1px; /* grubość obramowania */
border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
border-color: gray; /* kolor obramowania */
font-weight: bold;
}
.news dt, .news dt a:link, .news dt a:visited {
background: silver; /* tło tytułu */
color: #505050; /* kolor tytułu */
text-decoration: none;
}
/* Treść */
.news dd {
background: white; /* tło */
color: black; /* kolor tekstu */
font-size: 12px; /* rozmiar czcionki */
border-width: 1px; /* grubość obramowania */
border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
border-color: gray; /* kolor obramowania */
border-top-width: 0;
margin: 0;
margin-bottom: 20px;
}
.news_content {
padding: 5px; /* margines wewnatrz */
text-align: justify; /* wyrównanie tekstu: left, right, center, justify */
}
/* Data */
.news_date {
font-size: 11px; /* rozmiar czcionki */
text-align: left; /* wyrównanie tekstu: left, right, center, justify */
padding: 5px;
padding-bottom: 0;
}
.news_date span {
font-weight: bold;
}
/* Obrazek: */
.news_img {
float: left; /* ustawienie: left, right */
margin-right: 10px;
margin-bottom: 5px;
border: 0;
}
/* Więcej... */
.news_more {
font-size: 11px;
text-align: right;
margin-bottom: 5px;
margin-right: 15px;
}
/* Autor */
.news_author {
font-size: 11px; /* rozmiar czcionki */
text-align: left; /* wyrównanie tekstu: left, right, center, justify */
border-top-width: 1px; /* grubość obramowania */
border-top-style: dashed; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
border-top-color: gray; /* kolor obramowania */
padding: 5px; /* margines wewnatrz */
clear: both;
}
.news_author span {
font-weight: bold;
}Wszystkie ważniejsze linijki zostały opisane. Oczywiście powyższe deklaracje można dołączyć do istniejącego arkusza stylów strony.
Dalej wykonujemy analogiczną czynność z kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js:
/**
* @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function News(days)
{
this.config = {
//////////
// Konfiguracja:
'days': 0, // ilość dni wyświetlania newsów (0 = zawsze)
// Ustawienia domyślne:
'author': '', // autor
'email': '', // e-mail
'img': '', // obrazek
'width': '', // szerokość obrazka
'height': '', // wysokość obrazka
'target': '' // ramka (target="...")
//////////
};
this.il_dni = typeof days != 'undefined' ? days : this.config['days'];
var now = new Date();
var content = '';
this.dodaj = function(dzien,miesiac,rok, tytul,tresc, adres,ramka, dodal,email, obraz,width,height)
{
if (!this.il_dni || (now - new Date(rok, miesiac-1, dzien))/(24*60*60*1000) < this.il_dni)
{
if (dzien < 10) dzien = '0' + dzien;
if (miesiac < 10) miesiac = '0' + miesiac;
if (typeof dodal == 'undefined') dodal = this.config['author'];
if (typeof email == 'undefined') email = this.config['email'];
if (typeof obraz == 'undefined') obraz = this.config['img'];
if (typeof obraz == 'undefined') width = this.config['width'];
if (typeof obraz == 'undefined') height = this.config['height'];
if (typeof ramka == 'undefined') ramka = this.config['target'];
var link = adres ? new Array('<a ' + (ramka ? ' target="' + ramka + '"' : '') + 'href="' + adres + '">', '</a>') : new Array('', '');
content +=
'<dt>' + link[0] + tytul + link[1] + '</dt>' +
'<dd>' +
'<div class="news_date"><span>Dodano:</span> ' + dzien + '.' + miesiac + '.' + rok + '</div>' +
'<div class="news_content">' +
(obraz != '' ? link[0] + '<img src="' + obraz + '" alt="" class="news_img"' + (width ? ' width="' + width + '"' : '') + (height ? ' height="' + height + '"' : '') + '>' + link[1] : '') +
tresc +
'</div>' +
(adres ? '<div class="news_more">' + link[0] + 'Więcej...' + link[1] + '</div>' : '') +
(dodal != '' ? '<div class="news_author"><span>' + (email == '' || email.indexOf('@') > 0 ? 'Dodane przez' : 'Źródło') + ':</span> ' + (email.replace(/(^ +| +$)/g, '') ? '<a href="' + (email.indexOf('@') > 0 ? 'mailto:' : '') + email + '">' + dodal + '</a>' : dodal) + '</div>' : '') +
'</dd>';
}
}
this.wyswietl = function()
{
if (content) document.write('<dl class="news">' + content + '</dl>');
}
}Na początku można ustawić zmienne konfiguracyjne. Np. aby w naszym serwisie nie "straszyły" kilkumiesięczne "nowości", można ustawić przez ile dni od ich wprowadzenia mają się wyświetlać na liście. Potem co jakiś czas można czyścić kod z przestarzałych nowości, które już się nie wyświetlają. Jeżeli wszystkie lub większość newsów będzie dodawała ta sama osoba, można podać domyślnego autora i ewentualnie e-mail. Dzięki temu nie trzeba będzie już tego robić podczas dodawania pojedynczych nowości do listy. Oczywiście jeżeli wybrane newsy będą dodane np. przez innego autora, wprowadzenie konfiguracji domyślnej w tym nie przeszkadza. Dla takich specjalnych pozycji będzie wystarczyło po prostu podać różniące się dane wprost przy dodawaniu newsów - domyślne ustawienia konfiguracji zostaną dla tych różniących się elementów nadpisane.
Następnie w nagłówku dokumentu (wewnątrz <head>...</head>) wklejamy:
<link rel="stylesheet" href="news.css"> <script src="news.js"></script>
Na koniec pozostało już tylko wstawić w wybranym miejscu strony treści newsów (nowości):
<script> var news = new News(); ///// // Dodawanie newsów w postaci: // news.dodaj(dzień,miesiąc,rok, // 'Tytuł','Treść newsa...', // 'adres','ramka', // 'autor','e-mail', // 'obrazek',szerokość,wysokość); ///// ////////// // Dodawanie newsów: news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...'); news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...'); news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...'); ////////// news.wyswietl(); </script>
Kolejne newsy na liście dobrze jest układać w kolejności odwrotnej, tzn. najnowsze na początku. Dzięki temu ostatnie wiadomości będą widoczne już na pierwszy rzut oka.
UWAGA!
Treść newsów musi się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter. Ponadto treść, tytuł ani inne elementy normalnie nie mogą zawierać znaków: "'" (apostrof), "\" (odwrócony ukośnik). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym tytuły newsów nie mogą zawierać znaczników HTML. Można je natomiast wpisywać bez przeszkód w treści newsów, np. w celu pogrubienia tekstu albo wstawienia dodatkowego odnośnika czy obrazka.
Dodatkowo pamiętaj, że dni i miesiące w datach, których numer porządkowy jest mniejszy od 10, nie należy poprzedzać zerem na początku, natomiast rok musi być liczbą czterocyfrową. Poprawnie: 1,2,2003, niepoprawnie: 01,02,03.
Można przenosić do nowej linii poszczególne parametry newsa, które są rozdzielone przecinkami:
news(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...', 'adres', 'ramka', 'autor', 'e-mail', 'obrazek', 50,50);
Istnieje wiele sposobów dodawania kolejnych newsów (można łączyć kilka w tym samym skrypcie):
- Data, tytuł, treść:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...');
- Data, tytuł, treść, adres "Więcej..." (lokalizacja podstrony albo adres internetowy):
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki (lub '_blank' jeśli chcemy wczytać stronę w nowym oknie):
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor, e-mail autora:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor','e-mail');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło',' ');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło, link do źródła:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło','link');
- Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor/źródło, e-mail/link, lokalizacja obrazka newsa (jeśli chcemy podać inny niż domyślny - w początkowej konfiguracji):
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor/źródło','e-mail/link', 'obrazek',50,50);
Aby pominąć jakieś parametry - ponieważ mają się one nie wyświetlać albo odpowiadają nam wartości domyśle wpisane wcześniej w konfiguracji skryptu - należy wpisać zamiast nich liczbę zero (0), a jeśli parametr taki jest objęty w apostrofy, trzeba usunąć jego zawartość pozostawiając tylko dwa apostrofy (''). Jedynie w przypadku podawania źródła zamiast autora, w miejscu e-maila/linka trzeba wpisać spację (' '), jeżeli chcemy pominąć link do źródła. Dzięki temu możemy podać późniejsze parametry, jednocześnie bez określania wcześniejszych, np.:
news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','', '','', 'obrazek',50,50);