Tạo slug trong nodejs

Tôi đang làm việc trên một cửa hàng trực tuyến và tôi đang sử dụng tệp JSON chứa tất cả thông tin chi tiết về một sản phẩm để tạo thẻ cho từng sản phẩm. Vì tôi có rất nhiều sản phẩm nên việc tạo một trang cho từng sản phẩm là điều không cần thiết nên tôi cũng có một trang mẫu để hiển thị thêm chi tiết về một sản phẩm. Điều tôi muốn là bất cứ khi nào tôi nhấp vào thẻ sản phẩm, nó sẽ đưa tôi đến trang sản phẩm mẫu, sau đó thay thế dữ liệu giả bằng dữ liệu cho sản phẩm. Tôi cũng muốn tạo URL cho trang mẫu /product/product-slug nhưng khi tôi sử dụng phương pháp này, tôi không thể thay đổi dữ liệu giả

Cuối cùng tôi đã tìm ra cách thay đổi dữ liệu giả nhưng cách duy nhất tôi có thể làm là sử dụng id truy vấn để tìm dữ liệu sao cho URL trông giống như /product?id=productId thay vào đó và tôi thực sự không biết cách làm việc . Tôi không thể để nó như thế này vì như tôi đã nói trước đây, tôi có rất nhiều sản phẩm

Logic để tạo sên từ tên tệp có thể phức tạp, plugin gatsby-source-filesystem có chức năng tạo chúng

Cài đặt

npm install gatsby-source-filesystem

Tạo sên trong nút gatsby. js

Thêm sên mới của bạn trực tiếp vào các nút MarkdownRemark. Mọi dữ liệu bạn thêm vào các nút đều có sẵn để truy vấn sau với GraphQL

Để làm như vậy, bạn sẽ sử dụng một chức năng được chuyển đến triển khai API của chúng tôi có tên là. Chức năng này cho phép bạn tạo các trường bổ sung trên các nút được tạo bởi các plugin khác

Gần đây tôi đã phát hành một gói có tên lucid slugify giúp bạn tạo các con sên độc đáo từ các mô hình Lucid của bạn

Trong video này, tôi chia sẻ lý do đằng sau việc tạo gói này và cả cách bạn có thể sử dụng gói trong ứng dụng AdonisJS của mình

Nhận xét hàng đầu (1)

Vương miện

Sắp xếp thảo luận

Đặt mua

Tạo slug trong nodejs

Người dùng cá nhân đáng tin cậyTạo mẫu

Mẫu cho phép bạn nhanh chóng trả lời Câu hỏi thường gặp hoặc lưu trữ đoạn mã để sử dụng lại

Gửi bản xem trước Bỏ qua

Sụt lún lan rộng

 

Tạo slug trong nodejs

Edikan Bassey

Edikan Bassey

Tạo slug trong nodejs
Edikan Bassey

Làm theo

  • đã tham gia

    18 Tháng Tư, 2021

Trình đơn thả xuống

  • Ẩn giấu

Không làm việc

Thích bình luận. Thích bình luận. 1 thích Thích

Quy tắc ứng xử Báo cáo lạm dụng

Bạn có chắc chắn muốn ẩn bình luận này?

Tôi đã ngừng triển khai sên URL trên trang web của mình từ lâu. Nhưng khi trang web đã sẵn sàng và tôi muốn nó phát triển, tôi biết đã đến lúc phải xắn tay áo lên và bắt đầu tìm ra cách tốt nhất để làm điều đó

Đối với những người không quen thuộc với sên URL, đó là khi URL của trang web chứa tiêu đề của trang. Kiểu như thế này

thiscodeworks. com/the-title-of-this-blog

Trong bài đăng trên blog đầu tiên của tôi cho thiscodeworks. com Tôi thuật lại quá trình tìm kiếm gói chuyển phát nhanh tốt nhất để thực hiện việc này và cách tôi làm cho nó hoạt động

Tại sao sử dụng sên URL?

Chà, nó không ảnh hưởng đến hoạt động của trang web, nhưng nó giúp ích cho việc Tối ưu hóa Công cụ Tìm kiếm (SEO). Nếu bạn muốn trang web của mình xếp hạng cao trên kết quả tìm kiếm của Google, thì url-slugs có thể giúp ích

Đối với các bài đăng trên trang web của bạn, một con sên URL chứa tiêu đề của bài đăng hoặc từ khóa bạn đang tối ưu hóa có thể tăng thứ hạng của bạn trong kết quả tìm kiếm. Về cơ bản, đó là một cách dễ dàng để thu hút một số lưu lượng truy cập không phải trả tiền

Các gói tôi đã thử nghiệm để "slugify" URL

Tôi biết Express sẽ làm cho toàn bộ quá trình trở nên dễ dàng. Chỉ cần cài đặt một gói, và bạn sẽ có được chức năng. Nhưng nó thực sự không phải là dễ dàng. Bởi vì bạn cần phải

  1. tìm gói phù hợp,
  2. tìm ra cách tích hợp nó với mã của bạn sau một hoặc hai ví dụ (đôi khi không có ví dụ nào cả) và
  3. tự khắc phục sự cố — không có hỗ trợ kỹ thuật và không có nhiều trợ giúp trên diễn đàn trừ khi gói này thực sự phổ biến

Tôi đã bắt đầu với một đề xuất trên Stackoverflow có tên Mongoose URL Slugs. Việc cài đặt và sử dụng có vẻ dễ dàng, nhưng ngay khi tôi chạy nó, trang web của tôi đã bị sập. tôi đã nhận

MongoLỗi. Chỉ số lỗi khóa trùng lặp E11000. lthiscodeworks. mật mã. khóa trùng lặp $myslug_1. {. vô giá trị }

Rõ ràng những người khác cũng gặp phải vấn đề tương tự, nhưng không có cách nào chắc chắn để giải quyết vấn đề đó. Tôi đã dành 2 ngày trong vài giờ rảnh rỗi để loay hoay tìm hiểu vấn đề. Nhưng không có gì đã được làm việc. Vì vậy, tôi đã chuyển sang một gói khác — slugify

Slugify rất dễ thực hiện và nó có thể biến một chuỗi văn bản thành một con sên. Nhưng sau đó đến câu hỏi. làm thế quái nào để tôi slugify một trường và sau đó lưu trữ giá trị đó vào một trường khác trong lược đồ?

Tiếp tục…. Tôi tìm thấy mongoose-slug-generator

Cái này đã làm chính xác những gì tôi muốn. Nó có thể slugify một trường và sau đó lưu trữ giá trị đó vào một trường riêng biệt trong lược đồ. Đúng

Cài đặt mongoose-slug-generator

Nếu có ai quan tâm, đây là cách nó hoạt động

Bước 1. Chạy phần sau trong terminal

npm cài đặt mongoose-url-slugs

Bước 2. Khởi tạo và thêm mã vào mô hình lược đồ

var cầy mangut = yêu cầu('cầy mangut');
var Schema = cầy mangut. Lược đồ;
var slug = require('mongoose-slug-generator');

cầy mangut. plugin(sên);

const pageSchema = new Schema({

chức vụ. { loại. Chuỗi, bắt buộc. ĐÚNG VẬY},
sên. { loại. Chuỗi, sên. "chức vụ" }
});

var Trang = cầy mangut. mô hình ('Trang', trangSchema);
mô-đun. xuất khẩu = Trang;

Taa daa

Thêm slug vào URL của trang

Trước đây các trang của tôi được hiển thị dựa trên ID của chúng. tôi muốn chuyển từ

thiscodeworks. com/98765

đến

thiscodeworks. com/title-of-page/98765

Sự thật mà nói, tôi thà loại bỏ hoàn toàn số id trong URL, nhưng vì nó sẽ luôn là duy nhất thay vì một con sên nên tôi quyết định giữ lại nó

Đây là cách đơn giản hóa lộ trình mới mà tôi đã sử dụng để đưa các con sên vào URL

app.get('/:slug/:id', (req,res,next)=>{

Page.findById(id, function (err, page) { res.send('hello world')

});

});

Hạn chế duy nhất của việc triển khai mã này là tôi phải cập nhật mọi tài liệu của mô hình đó. Điều đó mất một lúc, và tôi đã mất rất nhiều thời gian. Nhưng nó đã phải được thực hiện. Ngoài ra, tôi phải dọn dẹp một số thứ vì nó buộc tôi phải xem các bài đăng còn sót lại sau quá trình thử nghiệm và không cần thiết nữa

Mặc dù mã này phù hợp với tôi, nhưng tôi chắc chắn rằng có một cách tốt hơn và rõ ràng hơn để thực hiện việc này. Nếu bạn là một trong những thiên tài biết, hãy gửi email cho tôi tại thiscodeworks. com@gmail. com và tôi sẽ thêm đề xuất của bạn vào đây

Sên trong Nodejs là gì?

Slug là mã định danh duy nhất, có thể đọc được của con người, được sử dụng để xác định tài nguyên thay vì mã định danh ít người đọc hơn như id .

Làm cách nào để tạo slug trong JavaScript?

Chuỗi tới sên .
Sử dụng chuỗi. nguyên mẫu. toLowerCase() và Chuỗi. nguyên mẫu. trim() để chuẩn hóa chuỗi
Sử dụng chuỗi. nguyên mẫu. replace() để thay thế dấu cách, dấu gạch ngang và dấu gạch dưới bằng - và xóa các ký tự đặc biệt

Ví dụ về sên là gì?

Sên là một phần của URL xác định một trang cụ thể trên trang web ở dạng dễ đọc. Nói cách khác, đó là một phần của URL giải thích nội dung của trang. Ví dụ, đối với bài viết này, URL là https. // sữa chua. com/slug và sên đơn giản là 'slug'.

Làm cách nào để đặt sên URL trong HTML?

Cách tạo Sên URL tốt nhất cho SEO .
Sử dụng biểu tượng “-”. Sử dụng dấu gạch nối ở giữa các từ trong sên URL của bạn sẽ giúp đảm bảo rằng sên của bạn rõ ràng và sạch sẽ. .
Giữ sên của bạn ngắn. .
Kết hợp từ khóa mục tiêu. .
Khớp sên với tiêu đề. .
Tránh hẹn hò với sên của bạn. .
Sử dụng chữ thường. .
Cập nhật sên cũ