Aplicación FriendlyId y Kaminari in Rails

 

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

@jenellehayes en Unsplash

______
Esta es la Parte 7 del Proyecto: Crear un blog con Ruby on Rails

• 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

FriendlyId es una joya que nos permite reemplazar id por una cadena legible en las URL:

# 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:

Paginación en la página de inicio

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: