all
Business
data science
design
development
our journey
Strategy Pattern
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ricardo Henriques

April 28, 2021

Min Read

Ruby on Rails - send e-mails med stil

Har du nogensinde været nødt til at sende e-mails fra din Rails-applikation?

Sandsynligvis vil dit svar være ja. De fleste af os har allerede på et tidspunkt beskæftiget sig med smerten ved at sende HTML-formaterede e-mails ved hjælp af Ruby on Rails. Nogle CSS er allerede genkendt, men normalt ender vi med at skrive visningerne med inline CSS (ouch!) , hvilket resulterer i enorme og næsten ulæselige filer.

One does not simply mess with CSS

Hvad er de tilgængelige muligheder for at løse dette problem? Efter nogle undersøgelser fandt jeg et par Ruby-perler, der blev frigivet for nylig, og som kan hjælpe dig med at udføre denne opgave: Roadie, Premailer-skinner, actionmail_inline_css og inline_styles_mailer.

Dernæst vil jeg gennemgå hver enkelt og give dig en genoptaget forklaring på, hvordan du opsætter og bruger disse perler.

Roadie

Roadie får automatisk al din CSS indsat med særlig opmærksomhed på selektorer. Det omskriver også alt relativt til absolutte stier og respekterer eventuelle indbyggede typografier, du måtte have. Derudover tilføjer det HTML-skelettet og er i stand til at bruge partialer.

Anvendelse - tilføj følgende til din Gemfile:


Oprettelse af en ny forekomst af et Roadie-dokument

Transformer fulde dokumenter med metoden #transform.


Transformer deldokumenter med #transform_partial


Der er flere muligheder, som du kan bruge til at konfigurere din dokumentforekomst (se for flere oplysninger deres hjemmeside):

url_indstillinger - Dikterer, hvordan absolutte webadresser skal bygges;
bevar_uninlinable_css - Indstil til falsk for at springe CSS over, der ikke kan indsættes;
merge_media_forespørgsler - Indstil til falsk for ikke at gruppere medieforespørgsler. Nogle brugere foretrækker måske ikke at gruppere regler inden for medieforespørgsler, fordi det vil resultere i, at regler bliver omordnet;
aktivudbydere - En liste over aktivudbydere, der påberåbes, når CSS-filer henvises til
eksterne aktivudbydere - En liste over aktivudbydere, der påberåbes, når der henvises til absolutte CSS-URL'er;
før_transformation - Et tilbagekaldsløb, før transformationen starter
efter_transformation - Et tilbagekaldsløb efter transformationen er afsluttet.

Mine tanker om Roadie

Roadie er ekstremt komplet og med flere nyttige muligheder, men efter min mening kan det være lidt for komplekst, afhængigt af hvad du har brug for eller ønsker. Hvis du har brug for at bruge aktiver fra et CDN eller bruge cache, vil denne perle være den bedste mulighed.

Premailer-skinner

Ligesom Roadie, Premailer-skinner gør et fremragende stykke arbejde med at konvertere din CSS til inline styles. Du behøver ikke Rails for at bruge, da det spiller godt med Sinatra.
Premailer-Rails bruges automatisk af actionmailer, når du føjer det til din Gemfile.

Anvendelse - tilføj følgende til din Gemfile:

Premailer kan konfigureres med følgende muligheder, du kan gøre dette på initialisatoren (config/initializers/premailer_rails.rb):


Premailer standardkonfigurationer


For at forhindre Premailer i at generere en tekstdel fra HTML skal du blot indstille generate_text_part til false.

Hvis det er nødvendigt, kan du deaktivere Premailer for en bestemt e-mail og indstille skip_premailer til true, ligesom dette:


Mine tanker om Premailer-Rails

Premailer er meget enkel at bruge og konfigurere, hvis du bare vil sende stylede e-mails uden specielle konfigurationer, er denne perle en meget god mulighed.

Actionmail Inline CSS

Denne perle ligner Premailer-rails (den er også baseret i Premailer). Du skal bare tilføje det til din Gemfile, og du er klar til at gå.

Anvendelse - tilføj følgende til din Gemfile:

Med denne perle kan du også tilføje en brugerdefineret CSS-fil, der vil blive indført af premailer. Du kan opnå dette ved at tilføje til din e-mail-skabelon:

Mine tanker om Actionmailer Inline CSS

Actionmailer Inline CSS er den nemmere løsning indtil nu. Du skal bare tilføje det til Gemfile, og du er klar til at sende stylede e-mails. Hvis du ikke har brug for nogen specielle konfigurationer, er denne perle et must for dig.

Inline Styles Mailer

Ligesom Premailer-Rails og Actionmailer Inline CSS bruger denne perle Premailer og fungerer ud af boksen.

Anvendelse - tilføj følgende til din Gemfile:


Og så skal du bare tilføje til de ønskede mailere inklusionslinjen til InlineStylesMailer:


Hvis du har en CSS-fil app/assets/stylesheets/foo_mailer* (hvor stjernen kan være.css, .css.scss eller.css.sass) så bliver den automatisk anvendt på mailen ved hjælp af perlen inline_styles.

Hvis du vil, kan du bruge en anden CSS-fil


Du kan endda bruge mere end en CSS-fil


Mine tanker om Inline Styles Mailer

Inline Styles Mailer er også en god løsning, det ligner meget Premailer-Rails og Actionmailer Inline CSS. Let at konfigurere og i stand til at håndtere flere CSS-filer. Efter min mening er det også et godt valg afhængigt af hvad du har brug for.

Indpakning

Afhængigt af hvad dine behov er, kan du vælge mellem 3 ædelstene baseret på premailer (Premailer-Rails, Actionmailer Inline CSS og Inline Styles Mailer) eller Roadie.

Roadie har avancerede konfigurationsindstillinger (hvis du har brug for specielle konfigurationer for at bruge CDN eller bruge cache), der kan blive nyttige, men hvis dine krav ikke er så høje, kan du vælge mellem de andre tre ædelstene, alle baseret på premailer og med meget lignende brug.

For mere information om de muligheder, der præsenteres her, glem ikke at tjekke hver perles link.

Ready for a UX Audit? Book a free call

Fandt du denne artikel nyttig? Du kan måske også lide disse!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Ricardo Henriques
Ricardo Henriques

Udvikler @Imaginary Cloud, dedikeret til at skabe enestående softwareløsninger, forpligtet til innovation og omfavne banebrydende teknologier.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon