Z zamiłowania tworzę strony internetowe. Moje teksty mają na celu opisanie
niektórych fragmentów internetu, którego ta strona jest częścią.
Konserwatywny, pewny siebie, niekonwencjonalny - to wady czy zalety? Sprawdź!
maciej łebkowski
Grzesiek natchnął mnie do napisania systemu, który do określonych słów w tekście przypisuje linki. Zamienianie ich na odnośniki byłoby zbyt ofensywne, więc zacząłem kombinować trochę inaczej i wyszło mi coś delikatnego, łatwego w obsłudze i konfiguracji. Kolejny krok do przodu.
Zasada jest prosta: niektóre słowa mogą nieść ze sobą trochę więcej treści, niż inne. Na przykład definicje. Jednak, żeby nie psuć sobie układu artykułu, musimy te informacje jakoś ukryć. Najprościej: wyświetlać dopiero po najechaniu. Do roboty.
Projekt nazwałem Przepyszne, przez analogię do del.icio.us, które wg Grześka mogłyby współgrać z systemem. Zacznę od zdefiniowania sobie kilku słów, które będą znaczące w naszym tekscie.
$deli = array(
'ipsum' => 'http://lipsum.com',
'fermentum' => 'http://example.com'."\n".'http://another.example.com',
'auctor' => '<def>auctor</def> is a blablabla, blablablabla, bla!'."\n"
.'http://blablabla.com.bla/blabla?bla=blabla tekst linka'
);Od razu wytłumaczę strukturę. Klucze w tablicy ('ipsum', 'fermentum' i 'auctor') to słowa. Wartość do nich przypisana to dane, które wymagają kilku przekształceń, aby były wyświetlone na stronie. Najpierw zapiszmy sobie jakiś przykładowy tekst do zmiennej $txt. Ja jestem tradycjonalistą, więc będzie to:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tincidunt. In gravida egestas neque. Ut felis libero, molestie et, vulputate sit amet, pharetra suscipit, felis. Sed ut mi sit amet pede mollis adipiscing. Praesent in leo. Integer sed velit eget pede fermentum fermentum. Nunc eget turpis. Vestibulum dictum, eros non congue rutrum, lorem ligula cursus erat, quis volutpat nulla est a ipsum. Curabitur vel diam ac eros tristique auctor. Nam a sem. Praesent sed lectus vitae eros dictum porta. Maecenas consectetuer mollis velit. Maecenas dignissim ligula vel ante. Duis dapibus dolor sit amet justo.
Teraz dla każdego elementu w naszej tablicy musimy wywołać funkcję, która nasze słowo zamieni na odpowiedni kod HTML. $tresc to zawartość klucza $slowo. Przygotuję najpierw pierwszą zmienną.
$tresc = explode( "\n", $tresc );
while( list ( $i, $t ) = each( $tresc ) ){
if( strtolower( substr( $t, 0, 4 ) ) == 'http' ){
list( $a, $d ) = explode( ' ', $t, 2 );
$tresc[$i] = '<a href="'.$a.'">'.($d?$d:$a).'</a>';
}
}
Kod jest prosty. Dzieli $tresc na kawałki w miejscu, gdzie znajdzie znacznik nowej linii. Każdy z kawałków sprawdza i jeśli uzna, że to link, to wstawia kod HTML zamiast niego. Przy okazji można zdefiniować tekst odnośnika, oddzielając go spacją od adresu (w tablicy). Taki sposób przetwarzania danych nie zamyka nam horyzontów. Możemy tu wstawiać kolejne warunki, elementy, co sobie dusza zażyczy. Ja ograniczyłem się do tego, bo czasu mi brak.
Czas poskładać części treści w jeden łańcuch: $span = '<span> '.implode( '<br>',$tresc).'</span>';
Potem wkleić go do kodu HTML, który będziemy chcieli wstawić do tekstu: $rep = '<var class="deli">'.$slowo.$span.'</var>';
I w końcu wyszukujemy w tekście słowo kluczowe, zamieniając je na kod: $txt = str_replace( '$'.$slowo, $rep, $txt);
Przed słowem kluczowym dodałem znak '$', żeby przypadkowe słowa nie zostały zamienione. Oczywiście można to dalej personalizować i zmienić znak lub całkowicie go wyrzucić - mi akurat taki sposób się podoba (nie lubię rzeczy w pełni automatycznych, zawsze się coś psuje).
Dobrze, dobrze, jest kod HTML, ale przecież to nie działa? Tak, brakuje odpowiedniego stylowania w CSS.
VAR.deli{
position: relative; /* żeby zadziałało pos:absolute; */
border-bottom: 2px dashed orange;
}
VAR.deli SPAN{
display: none;
position: absolute;
background-color: #F0F0F0;
font: .8em/1.2em Verdana, sans-serif;
width: auto;
padding: 4px;
border: 1px solid orange;
left: 1em;
top: 1em;
}
DIV#m VAR.deli:hover SPAN{
display: block; /* pokaż zawartość przy najechaniu myszką */
}
Taki kod możemy już wkleić na gotową stronę i obserwować wyniki. Ja zrobiłem to na stronie delta/przepyszne.
W związku z dość zaawansowanym CSSem Internet Explorer nie radzi sobie z tym kodem. Prawdopodobnie wersja siódma już nie będzie sprawiała tego problemu.
Następnym razem napiszę, jak łatwo pobierać dane (słowa kluczowe i treść) z bazy danych mySQL lub z pliku tekstowego, oraz jak łatwo zamienić całość na jedną funkcję w php. Stay in touch.
