응답 식 메 일 디자인 도구 추천

최근 에 업무 상 HTML 메 일 모델 을 만들어 야 하 는데 바로 평소에 메 일 에서 받 은 홍보 메 일 입 니 다.깊이 연구 한 후에 야 이 구덩이 가 얼마나 깊 은 지 알 게 되 었 다.
미개 한 시대 로 돌아가다
처음에 나의 이 해 는 HTML 인 이상 나의 전단 지 의 집 지 키 는 능력 이다!30 분 안에 해결 하 는 것 은 문제 가 없다.시험 해 보 니 HTML 메 일 은 아무런 기준 이 없고 HTML 과 CSS 가 모두 거세 되 었 다 는 것 을 알 게 되 었 습 니 다.div 와 float 의 처리 에 도 불확실 성 이 많 기 때문에 유동 구조, flexbox 같은 것 도 사용 할 수 없고 90 년대 유행 하 는 표 구조 만 사용 할 수 있 습 니 다. 90 년대 입 니 다!개발 체험 은 매우 나쁘다. 더 중요 한 것 은 내 가 시대 에 뒤떨어 진 table 구 조 를 배우 고 싶 지 않다 는 것 이다.
제 가 이번에 해 야 할 일 은 모델 링, 서버 세트 입 니 다. 받 는 사람 이 핸드폰 클 라 이언 트 가 보 는 메 일 을 사용 할 수 있다 는 것 을 고려 해 야 하기 때문에 응답 식 이 필요 합 니 다.저 에 게 끌 수 있 는 메 일 도 구 는 적당 하지 않 을 것 입 니 다. 디자인 과 수 요 를 잘 실현 하지 못 할 뿐만 아니 라 개발 자로 서 수 치 스 러 워 야 합 니 다.
공 구 를 찾다
1. foundation-emails
먼저 GitHub 는 foundation - emails 를 찾 았 습 니 다. 문서 와 DEMO 를 훑 어 보 았 습 니 다. 아주 좋 은 것 같 습 니 다. 그리고 sass 로 미 친 듯 이 웃 을 수 있 습 니 다!!모드 가 끝나 면 문서 npm run build 문서 에 따 르 면 이것 은 모든 스타일 을 줄 에 꽂 는 것 이 라 고 합 니 다. (못 보면 압축 됩 니 다) 제 가 실행 한 후에 저 는 이런 화면 을 보 았 습 니 다.아니면 build 의 이동 에 서버 모드 엔진 의 순환 문 구 를 삽입 해 야 합 니까?html 코드 를 수 동 으로 포맷 하고 순환 만 할 수 있 습 니까?제 가 먼저 모델 에서 교체 하고 싶 은 곳 에 모델 엔진 이 자주 사용 하 는 {{ }} 을 몇 개 넣 어 보 았 습 니 다. 그 결과 build 후에 바로 컴 파일 이 없어 졌 습 니 다. 그리고 GitHub 에 가서 아직 복구 되 지 않 은 issue 를 찾 았 습 니 다. 아직 우아 한 방법 이 없 는 것 같 습 니 다.
사용자 이름 만 바 꾸 거나 일부 내용 만 동적 으로 필요 한 메 일 에 대해 서 는 foundation - emails 가 좋 은 선택 입 니 다. 그 중에서 응답 식 을 사용 하 는 것 은 매우 간단 합 니 다. 그 릴 레이아웃 은 이렇게 되 어 있 습 니 다.

2. mjml
커 뮤 니 티 에서 이 도 구 를 찾 았 습 니 다. 이 도구 로 쓴 모델 은 대략 이 렇 고 좋 습 니 다.

  
    
      
        
          
          Easy and Quick
        
        
          
          Responsive
        
      
      
        
          Discover
        
      
    
  

그리고 클 라 이언 트 도 있 습 니 다. 클 라 이언 트 에서 html 를 내 보 낼 수 있 고 내 보 낸 코드 는 신선 한 편 입 니 다.동적 교체 내용 은 공식 demo 에서 [[ ]] 소 포 를 사용 하면 아무 일 도 없 음 을 발 견 했 습 니 다.
마지막 에 쓰다
이 편 은 바로 두 가지 공 구 를 추천 하 는 것 이다.필요 하 다 면 메 시 지 를 남 겨 주세요. 저 는 작은 튜 토리 얼 같은 것 을 낼 수 있 습 니 다. 끝!