Ag Tosú le Email-Builder-js

Is é an bealach molta chun leabharlann Email-Builder-js a shuiteáil ná úsáid a bhaint as NPM. Úsáid an t-ordú seo a leanas le haghaidh suiteála réidh le do thoil.

npm install --save @usewaypoint/email-builder
 

Cruthaigh Dearadh Teimpléad Ríomhphoist Bunaithe ar Chomhpháirteanna

Sa bhunús leabharlann oscailte foinse Email-Builder-js tá a dhíriú ar chomhpháirteanna. Leis an gcur chuige seo, is féidir le forbróirí bogearraí comhpháirteanna inathúsáidte a chruthú mar cheanntásc, buntéacs, rannóga ábhair, agus cnaipí. Is féidir na comhpháirteanna seo a mheascadh agus a chur le chéile go héasca chun teimpléad iomlán a chruthú. Trí dhearadh a bhriseadh síos ar an mbealach seo, ní hamháin go bhfuil an cód níos eagraithe, ach éiríonn sé níos simplí freisin le do theimpléid a nuashonrú agus a bhainistiú. Sa sampla thíos, cruthaítear gach comhpháirt go neamhspleách, rud a ligeann cumasc solúbtha agus nuashonruithe amach anseo gan an struchtúr iomlán a athrú.

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Fáilte roimh ár n-ardán!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Tá áthas orainn thú a bheith linn. Bain sult as ár gnéithe!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Le dea-mhéin,
Foireann
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);
 

Cuir Stíleáil Saincheaptha & Brandaíocht i bhfeidhm ar Theimpléid

Chun a chinntiú go n-oiriúnann teimplí ríomhphoist le brandáil feidhmchláir, ceadaíonn an leabharlann Email-Builder-js saincheapadh fairsing tríd an tréith style do gach comhpháirt. Áirítear leis seo dathanna, clónna, méideanna, agus leagan amach na dteimplí a choigeartú. Is féidir le forbróirí bogearraí stíliú inlíne a úsáid, rud atá ríthábhachtach chun a chinntiú go léiríonn cliaint ríomhphoist na dearaí mar is ceart. Cruthaíonn an slabhra cód thíos cnaipe le dath cúlra, stuáil, agus cinn cruinne, stíleáilte chun a bheith cosúil le cnaipe gníomhaíochta tipiciúil a oiriúnann le dathanna na branda.

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);
 

Ionsá Ábhar Dinimiciúil i Ríomhphoist i Node.js

Le haghaidh feidhmchlár a sheolann ríomhphoist phearsantaithe, mar shampla deimhnithe orduithe nó fógairtí a bhaineann le húsáideoir, tacaíonn an leabharlann foinse oscailte Email-Builder-js le hionsá ar ábhar dinimiciúil. Is féidir le Forbróirí Bogearraí eolas a bhaineann le húsáideoir (mar shampla ainmneacha, seoladh nó sonraí ceannachais) a chur isteach go cláir i dteimplí, rud a chuireann ar chumas ríomhphoist níos tarraingtí agus ábhartha a chruthú. Trí úsáid a bhaint as litriú teimpléid, is féidir le forbróirí ionadphointí a chur in ionad go héasca le hábhar dinimiciúil. Tá an cur chuige seo thar a bheith éifeachtach do ríomhphoist idirbhearta agus d’aon chás ina bhfuil pearsantú ríthábhachtach, mar a thaispeántar san sampla thíos.

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Dia dhuit ${userName},
Go raibh maith agat as ceannach ár ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);