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ệnSắp xếp thảo luận
Đặt mua
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
Edikan Bassey
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íchQuy 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" URLTô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
- tìm gói phù hợp,
- 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à
- 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-generatorNế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 trangTrướ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