Kreiranje sluga javascriptom

Što je slug?

Slug je URL koji najčešće imate prilike vidjeti kod cms sustava. To je url koji se kreira iz naslova stranice, novosti i slično. Npr. ukoliko je naslov "Što je slug?", slug će biti "sto-je-slug". Običan ne optimiziran url izgledao bi npr. ovako: "?id=56".

Osim što su linkovi napravljeni na taj način čitljiviji i lakše pamtljivi korisnicima, vrlo su korisni i u optimizaciji za tražilice pošto mogu sadržavati više ključnih riječi.

Kako kreirati slug

Slug se može kreirati javascriptom, ili konverzijom na serveru prilikom unosa stranice, novosti, članka... Ja sam se ovdje odlučio za javascript metodu koja je najčešće brža i ne opterećuje nepotrebno server. Naravno, idealno bi bilo imati i konverziju na serveru, ukoliko korisnik ima isključen javascript u svom web pregledniku.

Koji jQuery plugin

Pogledao sam koji jQuery plugin za kreiranje slug-a bi bio najbolji, i na žalost, oni koje sam uspio pogledati, uvijek su imali neki manji ili veći nedostatak. Na kraju sam se odlučio za syncTranslit, uz manju doradu.

Ova plugin radi savršeno ono čemu je namijenjen, uz jedan nedostatak. Nedostatak je što ne ignorira početak i kraj stringa ukoliko su to razmaci odnosno prazna mjesta. Drugim riječima, ukoliko ostavite razmak na tim mjestima, skripta će taj razmak zamjeniti povlakom ili podvlakom (ovisno o tome što odaberete). Ostalo sve radi savršeno.

Ovaj mali problemčić ispravio sam u verziji skripte koju možete preuzeti na dnu članka, a isto tako i dodao konverziju hrvatskih i njemačkih znakova.

Kako se koristi syncTranslit

$(document).ready(function(){
  $('#articleTitle').syncTranslit({
    destination: 'slug',
    caseStyle: 'lower',
    urlSeparator: '-'
  });
})

destination
ID polja u kojem će se prikazivati slug

caseStyle (lower, upper)
lower će prikazivati sve znakove male, a upper velike

urlSeparator (- _)
Može biti povlaka ili podvlaka

Orginalnu syncTranslit skriptu možete preuzeti ovdje, dok dorađenu verziju iz ovog članka preuzmite ovdje.