Que aprenderemos:
- Introducción a FriendlyId y Kaminari gem
- Cómo usar FriendlyId para hacer que la URL sea bonita y mejorar el SEO (optimización de motores de búsqueda)
- Cómo usar Kaminari para paginar publicaciones
- Conclusión

- Parte 1: Introducción a Ruby on Rails
- Parte 2: Aplicación CRUD Post para Blog
- Parte 3: Uso de Bootstrap para la aplicación Blog
- Parte 4: Subir foto para la aplicación Blog
- Parte 5: Agregar editor de texto para blog
- Parte 6: Autenticación en la aplicación Rails
______
Introducción
# sin FriendlyId http: // localhost: 3000 / posts / 75 # con FriendlyId http: // localhost: 3000 / posts / pretty-urls-with-friendlyid
Concepto de babosas
- El concepto de babosas está en el corazón de FriendlyId.
- Un slug es la parte de una URL que identifica una página utilizando palabras clave legibles por humanos, en lugar de identificadores numéricos. Hace que su aplicación sea más amigable tanto para los usuarios como para la optimización de motores de búsqueda (SEO).
- FriendlyId te permite tratar las babosas como ID normales , lo que significa que puedes encontrar con babosas como encuentras con ID numéricos:
Post.find (75) Post.friendly.find ("pretty-urls-with-friendlyid")
Instalación
Paso 1: agregue la gema al archivo Gem
gema 'friendly_id', '~> 5.4.0'
Ejecutar:
instalación del paquete
Paso 2: agregue la columna slug al modelo de publicación
rieles generan migración AddSlugToPosts slug: uniq
El archivo de migración tiene este aspecto:
class AddSlugToPosts <ActiveRecord :: Migration [6.0] def change add_column : posts ,: slug ,: string add_index : posts ,: slug, unique: true fin fin
Paso 3: Genere el archivo de configuración amigable y una nueva migración
rieles generan friendly_id
Iniciar sesión en la consola:
Ejecutando a través de Spring preloader en proceso 7733 crear db / migrate / 20201004224108_create_friendly_id_slugs.rb crear config / initializers / friendly_id.rb
- db / migrate / 20201004224108_create_friendly_id_slugs.rb: esta migración es para crear la tabla FriendlyIdSlugs
class CreateFriendlyIdSlugs <MIGRATION_CLASS def change create_table : friendly_id_slugs do | t | t.string: slug,: null => false t.integer: sluggable_id,: null => false t.string: sluggable_type,: limit => 50 t.string: alcance t.datetime: created_at fin add_index : friendly_id_slugs, [: sluggable_type,: sluggable_id] add_index : friendly_id_slugs, [: slug,: sluggable_type], longitud: {slug: 140, sluggable_type: 50} add_index : friendly_id_slugs, [: sluggable_type] : {slug: 70, sluggable_type: 50, alcance: 70}, único: verdadero fin fin
- config / initializers / friendly_id.rb: El archivo de configuración y lo mantenemos todo por defecto.
Paso 4: Ejecute la migración:
rails db: migrar
Uso
Agregar FriendlyId al modelo de publicación:
class Post <ActiveRecord :: Base extender FriendlyId friendly_id: título, uso: [: slugged] final
La opción es : use , que le dice a FriendlyId qué complementos debe usar. Actualmente, usamos el módulo slugged .
Además, FriendlyId proporciona algunos complementos como: history,: reserved,: scoped y: simple_i18n.
Verifique en la consola creando una nueva publicación:
post = Post.create! title: "URL bonitas con Friendlyid" post.slug # => "pretty-urls-with-friendlyid"
¿Como funciona?
- FriendlyId genera automáticamente el slug correspondiente al título de la publicación
- FriendlyId utiliza el método paramaterize de Active Support para crear slugs. Este método reemplazará los caracteres especiales en una cadena para que pueda usarse como parte de una URL "bonita".
Ahora, podemos usar friendly_id reemplazando Post.find por Post.friendly.find
@post = Publicar. friendly .find ("bonitas-urls-con-friendlyid") redirect_to @post # la URL será / posts / pretty-urls-with-friendlyid
Cuando generar nuevas babosas
En FriendlyId 5.0, los slugs solo se generan cuando el campo slug es nulo . Si desea que se regenere un slug, establezca el campo slug en nil:
post = Post.friendly.find ("pretty-urls-with-friendlyid") post.title = "Nuevo título" post.save! post.slug # => "pretty-urls-with-friendlyid" post.slug = nil post.save! post.slug = "nuevo-título"
Además, podemos controlar exactamente cuándo se establecen nuevos identificadores amigables anulando el método #should_generate_new_friendly_id?
Para volver a generar una nueva babosa cuando cambiamos el título de la publicación, hacemos lo siguiente:
clase Post <ActiveRecord :: Base extender FriendlyId friendly_id: título, uso: [: slugged] def should_generate_new_friendly_id? title_changed? || súper fin fin
______
Paginación para publicaciones
- Podemos implementar fácilmente la paginación en Rails con la gema kaminari .
- Kaminari es un paginador de alcance y motor, limpio, potente, personalizable y sofisticado para marcos de aplicaciones web y ORM modernos.
- La gema Kaminari es fácil de usar: simplemente agrupamos la gema, luego sus modelos están listos para ser paginados. No se requiere configuración. No tiene que definir nada en sus modelos o ayudantes.
Instalación
Para instalar kaminari en nuestra aplicación, ponga esta línea en su Gemfile:
joya 'kaminari'
Luego ejecuta bundle:
instalación del paquete
Uso
En el controlador de inicio:
Agregue paginación para publicaciones de lista como esta:
@posts = Publicar. orden (created_at:: desc). página (parámetros [: página]). por (6)
- El alcance de la página : para recuperar la (n) página de la publicación.
Publicar.página (2) => Obtiene la segunda página de usuarios
Nota: La paginación comienza en la página 1, no en la página 0, la página (0) devolverá los mismos resultados que la página (1).
- El per alcance : El número de mensajes por cada página, per_page por defecto es 25.
Publicar.página (2) .por (6) => Vuelve la página 2da con 6 mensajes.
En Vistas:
Llame al ayudante de paginación:
<% = paginate @users%>
Esto representará varios enlaces de paginación ? Page = N rodeados por una etiqueta HTML5 <nav> . Esto generaría varios enlaces de paginación como:
«Primera‹ Anterior ... 2 3 4 5 6 7 8 9 10 ... Siguiente ›Última»
Agregar ayudante de paginación para ver:
# app / views / home / index.html.erb <div class = "container"> <div class = "fila"> <% @Posts .Cada hacen | post | %> <section class = "col-md-4"> ... </section> <% end %> </div> <% = Paginate @posts%> </ div>
Vaya a la página de inicio y vuelva a cargar la página, vea qué pasa (no olvide agregar más de 6 publicaciones, porque configuramos per_page es 6).
Desplácese hasta la parte inferior de la página, veremos los enlaces de paginación como este:

Puedes ver los enlaces de paginación: 1 2 Siguiente ›Último»
La interfaz de usuario de los enlaces de paginación no es bonita, así que agregamos algo de CSS para mejorarla:
La interfaz de usuario de los enlaces de paginación no es bonita, así que agregamos algo de CSS para mejorarla:
0 Comentarios
Dejanos tu comentario para seguir mejorando!