ดาวน์โหลด postonents - ดาวน์โหลดซอร์สโค้ด postonents

postonents

ส่วนประกอบของบุคคลที่สาม

Set the importHelpers key to false

ดาวน์โหลด

จัดวาง

ไลบรารี UI ที่เรียบง่ายสำหรับส่วนประกอบอีเมลที่มีน้ำหนักเบาและปรับแต่งได้สูง ลบความเจ็บปวดของการเขียนอีเมลโดยการเขียนเทมเพลตใน React จากนั้น SSR และส่ง HTML ที่สร้างขึ้นไปยังแบ็กเอนด์เพื่อส่งออก

การติดตั้ง

เริ่มต้นด้วยการติดตั้ง postonents :

 yarn add postonents
// or
npm install --save postonents

การตั้งค่า nodejs อย่างง่าย

ในการเพิ่ม postonents ลงในแอปพลิเคชัน NodeJS ยังเพิ่มการติดตั้ง react และ react-dom

 yarn add react react-dom
// or
npm install --save react react-dom

สิ่งนี้จะช่วยให้คุณเขียนสิ่งนี้เพื่อสร้างสตริง HTML ที่สามารถให้บริการกับบริการเช่น SendInBlue หรือ Mandrill

 import React from 'react' ;
import { renderHtml , Email , PostonentsProvider , Header } from 'postonents' ;

const Email = ( { email } ) => (
  < PostonentsProvider >
    < Email title = { `Verification email for ${ email } ` } >
      < Header logo = "https://assets.airbnb.com/press/logos/NBC%20Logo.gif" logoHeight = { 50 } style = { { marginBottom : 24 } } />
    </ Email >
  </ PostonentsProvider >
) ;

const getHtml = async ( ) => {
  const html = await renderHtml ( Email , { email : '[email protected]' } ) ;

  return html ;
} ;

// Now you can send the email with any email client library/service

ส่วนประกอบรวมอยู่ด้วย

รวมอยู่ในแพ็คเกจนี้เป็นส่วนประกอบต่อไปนี้:

Template : ส่วนประกอบ wrapper ที่สร้างแท็ก <html> , <head> และ <body> ที่มีความเป็นไปได้ในการปรับแต่งมากมายเช่นการเพิ่มสคริปต์และสไตล์ทั่วโลก
Container : ส่วนประกอบที่จะห่อ Row โดยทั่วไป โดยค่าเริ่มต้นสูงสุด 600px (ด้วยเหตุผลที่เห็นที่นี่)
Row : แต่ละแถวมี 12 Column ที่เป็นไปได้ s ที่ห่อนั้นถ้ามันใหญ่เกินไป
Column : คอลัมน์สำหรับการแยกเนื้อหาสามารถปรับแต่งสำหรับ small (<600px) และ large (> = 600px)
Text : องค์ประกอบที่จะแสดงและสไตล์ข้อความ
Link : ส่วนประกอบที่จะแสดงและลิงก์สไตล์ ( a ก) สามารถดูลิงค์ปุ่มหลักและปุ่มกลวง
Image : ส่วนประกอบสำหรับรูปภาพ ต้องการ SRC และคำจำกัดความความสูงหรือความกว้าง
Header Footer : สองส่วนประกอบเลย์เอาต์สำหรับการจัดวาง
FullWidth : โดยทั่วไปเป็น Container และ Row สำหรับการจัดวางในระดับบนสุดหากต้องการสีพื้นหลังที่แตกต่างกัน
PostonentsProvider , PostonentsConsumer และ PostonentContext : หลายวิธีที่เป็นไปได้ในการเข้าถึงหรือเปลี่ยนบริบทภายในสำหรับส่วนประกอบสไตล์
renderHtml : ฟังก์ชั่นที่เซิร์ฟเวอร์แสดงเทมเพลตของคุณและส่งคืนเป็นสตริง

ส่วนประกอบ API

โดยทั่วไปส่วนประกอบทั้งหมดจะมี children className และรูป style และสิ่งนี้จะถูกนำไปใช้กับองค์ประกอบที่มีสไตล์สำหรับการแทนที่และการปรับแต่งที่ง่าย

`Template`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`lang`	สาย	ใช่	จะถูกเพิ่มลงในแท็ก `html`
`title`	สาย	ใช่	`title` ของอีเมล
`headAdditions`	อาร์เรย์ <{ประเภทเด็ก ๆ อุปกรณ์ประกอบฉาก? -	เลขที่	ต้องเป็นอาร์เรย์ที่มีประเภท (เช่น `link` ) อุปกรณ์ประกอบฉากและเด็ก ๆ อาจจะทำ `React.createElement` ภายใน
`headStyles`	สาย	เลขที่	สไตล์ในแท็ก `head` จะถูกห่อหุ้มโดยอัตโนมัติใน `<styles type="text/css>`
`bodyStyle`	วัตถุ	เลขที่	จะถูกเพิ่มเข้าไปในสไตล์ของแท็ก `body`

`Container`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`alignment`	สาย	เลขที่	ผ่าน `center` ผ่านที่นี่เพื่อให้แน่ใจว่าภาชนะมีศูนย์กลางและไม่ได้อยู่ในแนวซ้าย
`maxWidth`	หมายเลข \| สาย	ไม่ (ค่าเริ่มต้นถึง 600)	จะตั้งค่าความกว้างสูงสุดของภาชนะทั้งหมด

`Column`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`small`	ตัวเลข	ไม่ (ค่าเริ่มต้นถึง 12)	จำนวนคอลัมน์ตั้งแต่ 1 ถึง 12 สำหรับหน้าจอภายใต้ 600px
`large`	ตัวเลข	ไม่ (ค่าเริ่มต้นเป็น `small)`	จำนวนคอลัมน์ตั้งแต่ 1 ถึง 12 สำหรับหน้าจอที่สูงกว่า 600px
`noPadding`	บูลีน	เลขที่	จะลบช่องว่างของคอลัมน์

`Link`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`href`	สาย	ใช่	เป้าหมายของลิงค์
`type`	enum	ไม่ (ค่าเริ่มต้นถึง 'ลิงก์')	สามารถเป็น 'ลิงค์', 'หลัก' หรือ 'กลวง'
`fullWidth`	บูลีน	เลขที่	ทำให้ลิงก์ขยายอย่างเต็มที่

`Image`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`src`	สาย	ใช่	แหล่งที่มาของภาพ
`height`	ตัวเลข	เลขที่	ความสูงของภาพ
`width`	ตัวเลข	เลขที่	ความกว้างของภาพ

`Header`

ข้อต่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
`logo`	สาย	เลขที่	src ของบันทึกหากผ่านจะทำให้โลโก้อยู่ตรงกลางในแนวนอนที่ด้านบนของอีเมล
`title`	สาย	เลขที่	หากผ่านไปจะแสดงชื่อชื่อภายใต้โลโก้
`children`	โหนด	เลขที่	สำหรับสไตล์ที่กำหนดเองคุณสามารถผ่านสิ่งที่คุณต้องการได้

`renderHtml(Template, emailData, headStyles)`

การโต้แย้ง	พิมพ์	ที่จำเป็น	คำอธิบาย
`Template`	โหนด	ใช่	องค์ประกอบเทมเพลต
`emailData`	วัตถุ	เลขที่	EmailData จะแพร่กระจายเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบบนสุดในต้นไม้ของคุณ
`headStyles`	สาย	เลขที่	สำหรับการจัดแต่งทรงผมระดับโลกคุณสามารถผ่านสไตล์ที่เข้าสู่หัวได้ที่นี่

การสร้างธีม

หากคุณไม่มีจุดประสงค์ในการจัดแต่งทรงผมพิเศษและกำหนดเองธีมเริ่มต้นจะมากเกินพอ แต่ถ้าคุณต้องการการควบคุมมากกว่านี้นี่คือธีมที่สามารถเอาชนะได้โดยส่งผ่านเป็น theme เสาไปยัง PostonentsProvider นั่นจะต้องเป็นองค์ประกอบแรก:

 < PostonentsProvider theme = { { ... } } >
  < Template >
    ...
  </ Template >
</ PostonentsProvider >

นี่คือธีมปัจจุบันอาจขยายออกไปในอนาคต

 const DefaultTheme = {
  colors : {
    text : '#4c5b5c' , // Txxt Color
    bodyBg : '#fafafa' , // Background Color of `body`
    footerBg : '#4c5b5c' , // Background Color of footer
    footerText : 'white' , // Text Color of Footer
    primaryBg : '#6699cc' , // Background Color of primary button
    primary : 'white' , // text color of primary button
    hollow : '#4c5b5c' , // text color and border color of hollow button
  } ,
  typo : {
    fontFamily : 'Helvetica, sans-serif' , // Font family
    fontSize : '14px' , // Font Size
    lineHeight : '24px' , // line height
    light : 300 , // definition for light font weight
    normal : 400 , // definition for normal font weight
    bold : 600 , // definition for bold font weight
  } ,
} ;