Trình Tạo Slug

URL Slug là gì?

URL slug là phần của địa chỉ web xác định một trang cụ thể dưới dạng con người có thể đọc được. Trong URL https://example.com/blog/my-first-post, slug là my-first-post. Trình tạo slug chuyển đổi tiêu đề hoặc mô tả trang thành một chuỗi chỉ chứa chữ thường, số và dấu gạch ngang (hoặc ký tự phân cách khác). Quá trình này loại bỏ khoảng trắng, xóa dấu nhấn và dấu phụ, bỏ ký tự đặc biệt, và chuẩn hóa khoảng trắng thành một dấu phân cách duy nhất.

Tạo slug là một bước tiêu chuẩn trong các hệ thống quản lý nội dung, công cụ tạo trang tĩnh, nền tảng blog, và bất kỳ ứng dụng nào tạo URL từ dữ liệu người dùng nhập vào. WordPress, Ghost, Hugo, Next.js, và Django đều tích hợp logic tạo slug vì URL dễ đọc cải thiện cả khả năng sử dụng lẫn tối ưu hóa công cụ tìm kiếm. Một slug được tạo đúng cách cho người dùng biết nội dung của trang trước khi họ nhấp vào liên kết.

Thuật ngữ "slug" xuất phát từ ngành xuất bản báo chí, nơi nó chỉ một nhãn ngắn dùng để nhận diện một bài viết trong quá trình sản xuất. Trong phát triển web, slug thực hiện cùng chức năng đó: là một mã định danh gọn, duy nhất, an toàn với URL, được tạo ra từ tiêu đề hoặc tên dài hơn. Vì slug được tạo theo chương trình, một trình tạo slug đáng tin cậy đảm bảo tính nhất quán trên mọi trang và ngôn ngữ.

Tại sao nên dùng Trình Tạo Slug này?

Tạo slug URL thủ công dễ gặp lỗi. Quên xóa dấu nhấn, để lại dấu gạch ngang đôi, hoặc bỏ sót trường hợp ngoại lệ với đầu vào Unicode đều có thể tạo ra URL hỏng hoặc xấu. Công cụ này xử lý các vấn đề đó tự động.

Các trường hợp sử dụng Trình Tạo Slug

Quy tắc Tạo Slug và Xử lý Ký tự

Tạo slug tuân theo một chuỗi chuyển đổi có thể dự đoán. Hiểu từng bước giúp bạn gỡ lỗi đầu ra không mong đợi hoặc xây dựng hàm slugify của riêng mình.

1. 1. Chuẩn hóa Unicode (NFD)

   Phân tách các ký tự kết hợp thành ký tự cơ sở + dấu kết hợp. Ví dụ, é (U+00E9) trở thành e + dấu huyền kết hợp (U+0301). Điều này làm cho dấu phụ có thể loại bỏ được ở bước tiếp theo.
2. 2. Loại bỏ dấu phụ

   Xóa tất cả ký tự trong khối Dấu Diacritical Kết hợp Unicode (U+0300–U+036F). Sau bước này, café trở thành cafe và Ñ trở thành N.
3. 3. Xóa ký tự đặc biệt

   Thay thế bất kỳ ký tự nào không phải chữ cái, chữ số, khoảng trắng, hoặc dấu gạch ngang bằng khoảng trắng. Điều này loại bỏ dấu câu, ký hiệu, và các ký tự không có tương đương ASCII.
4. 4. Cắt và thu gọn khoảng trắng

   Xóa khoảng trắng đầu và cuối, sau đó thu gọn tất cả các chuỗi khoảng trắng, gạch dưới, hoặc dấu gạch ngang liên tiếp thành một ký tự phân cách duy nhất được chọn.
5. 5. Áp dụng kiểu chữ và ký tự phân cách

   Chuyển đổi sang chữ thường (tùy chọn) và nối các từ với ký tự phân cách được chọn: dấu gạch ngang (-), gạch dưới (_), hoặc dấu chấm (.).

Tham chiếu Chuyển đổi Ký tự

Bảng dưới đây cho thấy cách các ký tự phổ biến được xử lý trong quá trình tạo slug:

Ví dụ mã nguồn

Tạo slug trong các ngôn ngữ và framework phổ biến. Mỗi ví dụ xử lý chuẩn hóa Unicode, loại bỏ dấu phụ, và chèn ký tự phân cách.

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"

Câu hỏi thường gặp