Generator Slugów

Czym jest slug URL?

Slug URL to część adresu strony internetowej, która identyfikuje konkretną podstronę w czytelnej dla człowieka formie. W adresie https://example.com/blog/moj-pierwszy-wpis slugiem jest moj-pierwszy-wpis. Generator slugów przekształca tytuł strony lub jej opis w ciąg znaków zawierający wyłącznie małe litery, cyfry i myślniki (lub inny wybrany separator). Proces ten usuwa spacje, pozbawia znaki akcentów i znaków diakrytycznych, odrzuca znaki specjalne oraz normalizuje białe znaki do pojedynczych separatorów.

Generowanie slugów to standardowy krok w systemach zarządzania treścią, generatorach statycznych witryn, platformach blogowych i każdej aplikacji, która tworzy adresy URL na podstawie danych wprowadzonych przez użytkownika. WordPress, Ghost, Hugo, Next.js i Django zawierają wbudowaną logikę generowania slugów, ponieważ czytelne adresy URL poprawiają zarówno użyteczność, jak i optymalizację pod kątem wyszukiwarek. Dobrze sformułowany slug informuje użytkownika o zawartości strony jeszcze przed kliknięciem odnośnika.

Termin „slug“ pochodzi z branży wydawniczej, gdzie oznaczał krótką etykietę identyfikującą artykuł w trakcie produkcji. W programowaniu webowym slug pełni tę samą funkcję: jest zwięzłym, unikalnym, bezpiecznym dla URL identyfikatorem wywodzącym się z dłuższego tytułu lub nazwy. Ponieważ slugi są generowane programowo, niezawodny generator slugów zapewnia spójność na każdej podstronie i w każdym języku.

Dlaczego warto używać tego generatora slugów?

Ręczne tworzenie slugów URL jest podatne na błędy. Pominięcie akcentu, pozostawienie podwójnego myślnika lub nieobsłużenie znaku Unicode może prowadzić do uszkodzonych lub nieestetycznych adresów URL. To narzędzie rozwiązuje te problemy automatycznie.

Zastosowania generatora slugów

Reguły generowania slugów i obsługa znaków

Generowanie slugów przebiega według przewidywalnej sekwencji przekształceń. Zrozumienie każdego kroku pomaga debugować nieoczekiwany wynik lub zbudować własną funkcję slugify.

1. 1. Normalizacja Unicode (NFD)

   Rozkładaj złożone znaki na znak bazowy i znacznik łączący. Na przykład é (U+00E9) staje się e + combining acute accent (U+0301). Dzięki temu znaki diakrytyczne można usunąć w kolejnym kroku.
2. 2. Usuwanie znaków diakrytycznych

   Usuń wszystkie znaki z bloku Unicode Combining Diacritical Marks (U+0300–U+036F). Po tym kroku café staje się cafe, a Ñ staje się N.
3. 3. Usuwanie znaków specjalnych

   Zastąp każdy znak niebędący literą, cyfrą, białym znakiem ani myślnikiem spacją. Usuwa to znaki interpunkcyjne, symbole oraz znaki nieposiadające odpowiednika ASCII.
4. 4. Przycinanie i zwijanie białych znaków

   Usuń wiodące i końcowe białe znaki, a następnie zwiń wszystkie ciągi kolejnych spacji, podkreśleń lub myślników do jednego wybranego separatora.
5. 5. Zastosowanie wielkości liter i separatora

   Konwertuj na małe litery (opcjonalnie) i połącz słowa wybranym znakiem separatora: myślnikiem (-), podkreśleniem (_) lub kropką (.).

Tabela przekształceń znaków

Poniższa tabela pokazuje, jak poszczególne znaki są przetwarzane podczas generowania slugów:

Przykłady kodu

Generowanie slugów w popularnych językach i frameworkach. Każdy przykład obsługuje normalizację Unicode, usuwanie znaków diakrytycznych i wstawianie separatorów.

function slugify(text, separator = '-') {
  return text
    .normalize('NFD')                   // decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // strip diacritics
    .toLowerCase()
    .replace(/[^\w\s-]/g, ' ')          // drop special chars
    .trim()
    .replace(/[\s_-]+/g, separator)     // collapse whitespace → separator

  // slugify('Café au Lait')      → "cafe-au-lait"
  // slugify('Hello World', '_')  → "hello_world"
}

// Node.js alternative using the `slugify` npm package:
// npm install slugify
// const slugify = require('slugify')
// slugify('Hello World', { lower: true, strict: true }) → "hello-world"

import re
import unicodedata

def slugify(text: str, separator: str = '-') -> str:
    """Convert text to a URL-safe slug."""
    text = unicodedata.normalize('NFD', text)
    text = text.encode('ascii', 'ignore').decode('ascii')  # strip non-ASCII
    text = text.lower()
    text = re.sub(r'[^\w\s-]', ' ', text)
    text = text.strip()
    text = re.sub(r'[\s_-]+', separator, text)
    return text

# slugify('Café au Lait')      → "cafe-au-lait"
# slugify('Hello World', '_')  → "hello_world"

# Alternative: python-slugify (pip install python-slugify)
# from slugify import slugify
# slugify('Café au Lait')  → "cafe-au-lait"

package main

import (
	"regexp"
	"strings"
	"unicode"

	"golang.org/x/text/unicode/norm"
	"golang.org/x/text/transform"
	"golang.org/x/text/runes"
)

func slugify(text string) string {
	// NFD normalize and strip diacritics
	t := transform.Chain(norm.NFD, runes.Remove(runes.In(unicode.Mn)), norm.NFC)
	result, _, _ := transform.String(t, text)

	result = strings.ToLower(result)
	re := regexp.MustCompile(`[^\w\s-]+`)
	result = re.ReplaceAllString(result, " ")
	result = strings.TrimSpace(result)
	re = regexp.MustCompile(`[\s_-]+`)
	result = re.ReplaceAllString(result, "-")
	return result
}

// slugify("Café au Lait") → "cafe-au-lait"
// slugify("Hello World")  → "hello-world"

function slugify(string $text, string $separator = '-'): string {
    // Transliterate non-ASCII characters
    $text = transliterator_transliterate(
        'Any-Latin; Latin-ASCII; Lower()', $text
    );
    // Remove anything that is not a word char, space, or hyphen
    $text = preg_replace('/[^\w\s-]/', ' ', $text);
    $text = trim($text);
    $text = preg_replace('/[\s_-]+/', $separator, $text);
    return $text;
}

// slugify('Café au Lait')      → "cafe-au-lait"
// slugify('Hello World', '_')  → "hello_world"

Często zadawane pytania