Slug Generator

Що таке URL-slug?

URL-slug — це частина веб-адреси, яка ідентифікує конкретну сторінку у зрозумілій для людини формі. У URL https://example.com/blog/my-first-post slug — це my-first-post. Генератор slug перетворює заголовок або опис сторінки на рядок, що містить лише рядкові літери, цифри та дефіси (або інший обраний роздільник). Цей процес видаляє пробіли, знімає наголоси та діакритичні знаки, відкидає спеціальні символи та нормалізує пробіли до одиничних роздільників.

Генерація slug є стандартним кроком у системах керування контентом, генераторах статичних сайтів, блог-платформах і будь-якому застосунку, що формує URL-адреси на основі введення користувача. WordPress, Ghost, Hugo, Next.js і Django — всі вони містять логіку генерації slug, бо читабельні URL покращують як зручність використання, так і пошукову оптимізацію. Добре сформований slug повідомляє користувачу зміст сторінки ще до того, як він перейде за посиланням.

Термін «slug» походить з газетної справи, де він означав короткий ярлик для ідентифікації матеріалу під час виробничого процесу. У веб-розробці slug виконує ту саму функцію: це компактний, унікальний, URL-безпечний ідентифікатор, похідний від більш довгого заголовка або назви. Оскільки slug формуються програмно, надійний генератор забезпечує узгодженість на кожній сторінці та в кожній локалі.

Навіщо використовувати цей генератор slug?

Створення URL-slug вручну схильне до помилок. Забутий наголос, зайвий подвійний дефіс або необроблений крайній випадок з Unicode можуть призвести до зламаних або непривабливих URL. Цей інструмент автоматично вирішує всі ці проблеми.

Варіанти використання генератора slug

Правила генерації slug та обробка символів

Генерація slug слідує передбачуваній послідовності перетворень. Розуміння кожного кроку допомагає відлагоджувати несподіваний результат або написати власну функцію slugify.

1. 1. Нормалізація Unicode (NFD)

   Розкладіть складені символи на базовий символ і поєднувальний знак. Наприклад, é (U+00E9) стає e + combining acute accent (U+0301). Це дає змогу видалити діакритику на наступному кроці.
2. 2. Видалення діакритичних знаків

   Видаліть усі символи блоку Unicode Combining Diacritical Marks (U+0300–U+036F). Після цього кроку café стає cafe, а Ñ стає N.
3. 3. Видалення спецсимволів

   Замініть будь-який символ, що не є літерою, цифрою, пробілом або дефісом, пробілом. Це видаляє розділові знаки, символи та символи без ASCII-еквівалента.
4. 4. Обрізання та стиснення пробілів

   Видаліть пробіли на початку та в кінці рядка, потім стисніть усі послідовності пробілів, підкреслень або дефісів в один обраний роздільник.
5. 5. Застосування регістру та роздільника

   Перетворіть на нижній регістр (необов'язково) і з'єднайте слова обраним роздільником: дефісом (-), підкресленням (_) або крапкою (.).

Довідник перетворення символів

Таблиця нижче показує, як типові символи обробляються під час генерації slug:

Приклади коду

Генерація slug у популярних мовах та фреймворках. Кожен приклад обробляє нормалізацію Unicode, видалення діакритики та вставку роздільників.

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"

Часті запитання