Update docs
This commit is contained in:
Dan Mindru
parent
207737f437
commit
bae078590a
24
README.md
24
README.md
|
|
@ -1,7 +1,7 @@
|
|||
# Responsive HTML email signature(s)
|
||||
[](https://www.npmjs.com/package/responsive-html-email-signature)
|
||||
[](/LICENSE)
|
||||
[](https://github.com/fadeit/responsive-html-email-signature/pulls)
|
||||
[](/LICENSE)
|
||||
[](https://github.com/danmindru/responsive-html-email-signature/pulls)
|
||||
|
||||
### Let's punch email clients in the stomach 👊
|
||||
When you need some basic responsive email signatures that work on mobile.<br/>
|
||||
|
|
@ -17,8 +17,8 @@ Here are some examples:
|
|||
|
||||
|
||||
## Getting started
|
||||
- Clone repo `git clone https://github.com/fadeit/responsive-html-email-signature.git`
|
||||
- Run `yarn` or `npm install`
|
||||
- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
|
||||
- Run `npm install`
|
||||
- Run `gulp` to generate templates from configuration (one time)
|
||||
|
||||
### Customizing templates
|
||||
|
|
@ -31,8 +31,6 @@ Here are some examples:
|
|||
|
||||
## Motivation
|
||||
Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. <br/>
|
||||
> See a fairly comprehensive rant on the subject (and not only) [in this article](https://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be).
|
||||
|
||||
|
||||
## What does this pile of code do
|
||||
- [x] generates email templates from your config
|
||||
|
|
@ -52,11 +50,11 @@ Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix
|
|||
## Docs
|
||||
### Installing
|
||||
```bash
|
||||
$ yarn # or npm install
|
||||
$ npm install
|
||||
$ gulp # By default, HTML & CSS files in './src' will be watched for changes
|
||||
```
|
||||
|
||||
> Note: it's built using node v7.x, so please make sure your node version is up to date. Version 6+ should be fine.
|
||||
> Note: it's built using node v8.x, so please make sure your node.js version is up to date. Version 6+ should be fine.
|
||||
|
||||
### Configuring
|
||||
To make a basic email from existing templates, you only have to edit the `conf.json` file in each template.
|
||||
|
|
@ -154,7 +152,7 @@ You are of course encouraged to change the default structure for your use case.
|
|||
## Overview of the build process
|
||||
The diagram below shows what happens to your email templates.
|
||||
Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`.
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS Support
|
||||
|
|
@ -233,11 +231,3 @@ Unfortnately, Outlook 2010 client dosen't support HTML file import features for
|
|||
|
||||
> **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images.
|
||||
|
||||
------------------------------
|
||||
|
||||
<br/>
|
||||
<a href="http:fadeit.dk"><img src="https://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
|
||||
|
||||
#### About fadeit
|
||||
We build awesome software, web and mobile applications.
|
||||
See more at [fadeit.dk](https://fadeit.dk)
|
||||
|
|
|
|||
|
|
@ -14,10 +14,7 @@
|
|||
|
||||
|
||||
## 만들게된 동기 (Motivation)
|
||||
이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다!
|
||||
|
||||
이 [블로그 포스팅](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)에서 fadeit 의 더 많은 이애기를 들어보세요.
|
||||
|
||||
이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다!
|
||||
|
||||
## 이 템플릿에서 무엇을 할 수 있나? (What does it do?)
|
||||
- [x] config-based template generation
|
||||
|
|
@ -38,7 +35,7 @@ $ npm install
|
|||
$ gulp
|
||||
```
|
||||
|
||||
`src/fadeit/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/fadeit/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다.
|
||||
`src/dark/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/dark/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다.
|
||||
|
||||
## 살펴보기 (Overview)
|
||||
아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다.
|
||||
|
|
@ -61,15 +58,15 @@ $ gulp
|
|||
## 다른 이메일 클라이언트에서 사용하는 법 (Usage with different e-mail clients)
|
||||
|
||||
### Thunderbird
|
||||
썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다.
|
||||
썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다.
|
||||
|
||||
|
||||
### Apple Mail / OS X (꼭.. 써야 한다면?)
|
||||
|
||||
#### 방법 1
|
||||
- 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요.
|
||||
- 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요.
|
||||
- 아무거나 새 이메일 서명을 만들세요. (나중에 찾기 편하게 placeholder 를 써두는 것이 좋습니다.)
|
||||
- 이메일을 닫으세요.
|
||||
- 이메일을 닫으세요.
|
||||
- 터미널을 열고 TextEdit으로 서명 파일을 열어보세요. (iCloud drive를 사용하는 경우는 잘 작동하지 않는 경우가 있습니다. 아래 troubleshooting을 참고하세요. )
|
||||
|
||||
```
|
||||
|
|
@ -79,16 +76,16 @@ $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/S
|
|||
- `<body>...</body>` 의 모든 html 코드를 여러분이 빌드한 `/dist/`의 html 파일로 교체 합니다. (`<body>`외에 다른 메타 정보는 수정하지 마세요!)
|
||||
- 메일앱을 다시 실행하고 새로 바뀐 서명을 확인해보세요 :)
|
||||
|
||||
> **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요!
|
||||
> **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요!
|
||||
|
||||
|
||||
#### 방법 2
|
||||
다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `<html>` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `<style>` 부분을 복붙하는 것이 아니라 정상적으로 작동하지 않을 수 있습니다.
|
||||
다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `<html>` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `<style>` 부분을 복붙하는 것이 아니라 정상적으로 작동하지 않을 수 있습니다.
|
||||
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
만약 위의 방법 1이 정상적으로 작동하지 않는다면 파일을 수정 후 메일 앱을 열기전에 아래 방법으로 파일을 잠궈야 합니다.
|
||||
만약 위의 방법 1이 정상적으로 작동하지 않는다면 파일을 수정 후 메일 앱을 열기전에 아래 방법으로 파일을 잠궈야 합니다.
|
||||
|
||||
Lock Files:
|
||||
```
|
||||
|
|
@ -104,39 +101,30 @@ $ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
|||
|
||||
|
||||
### 아웃룩 2010에서 사용하기 (Outlook 2010)
|
||||
#### 방법 1
|
||||
#### 방법 1
|
||||
- 아웃룩 2010을 켜고 `File > Option > Mail > Signature` 으로 접속하세요.
|
||||
- 새 서명을 만드세요. (나중에 확인하기 좋게, 표시를 해두시면 좋습니다.)
|
||||
- CMD를 켜고 아래와 같이 입력하세요.
|
||||
- CMD를 켜고 아래와 같이 입력하세요.
|
||||
|
||||
> AppData 폴더가 숨김 폴더라 가급적이면 CMD를 사용하는 것을 권장합니다.
|
||||
|
||||
```
|
||||
cd AppData\Roamin\Microsoft
|
||||
start Signatures
|
||||
start Signatures
|
||||
|
||||
```
|
||||
|
||||
- 이 폴더에서 아까 만든 서명파일을 찾아서 우클릭해서 편집을 하세요.
|
||||
- 이 폴더에서 아까 만든 서명파일을 찾아서 우클릭해서 편집을 하세요.
|
||||
- 모든 HTML코드를 여러분이 새로 만든 코드로 바꿔버리세요.
|
||||
- 아웃룩을 열고 서명이 적용됐는지 확인해주세요.
|
||||
- 아웃룩을 열고 서명이 적용됐는지 확인해주세요.
|
||||
|
||||
> **주의** 위 방법으로 진행할 경우, 한글 등 유니코드가 깨지는 문제가 있습니다. 한글 이메일 서명의 경우 아래 **방법2**을 사용하시기 바랍니다.
|
||||
> **주의** 위 방법으로 진행할 경우, 한글 등 유니코드가 깨지는 문제가 있습니다. 한글 이메일 서명의 경우 아래 **방법2**을 사용하시기 바랍니다.
|
||||
|
||||
#### 방법 2
|
||||
아웃룩에서는 html 파일을 넣는 방법을 제공하지 않습니다. (아...) 그래서 위의 **방법 2** 처럼 파일을 복사/붙여넣기 하는 방법으로 사용할 수 있습니다.
|
||||
아웃룩에서는 html 파일을 넣는 방법을 제공하지 않습니다. (아...) 그래서 위의 **방법 2** 처럼 파일을 복사/붙여넣기 하는 방법으로 사용할 수 있습니다.
|
||||
|
||||
- `/dist` 에 빌드한 html 파일을 브라우저에서 열고, ctrl A + C 로 복사하세요.
|
||||
- Outlook 을 열고 `파일 > 옵션 > 메일 > 서명` 으로 들어가세요.
|
||||
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
|
||||
- `/dist` 에 빌드한 html 파일을 브라우저에서 열고, ctrl A + C 로 복사하세요.
|
||||
- Outlook 을 열고 `파일 > 옵션 > 메일 > 서명` 으로 들어가세요.
|
||||
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
|
||||
|
||||
> base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다.
|
||||
|
||||
|
||||
===================
|
||||
<br/>
|
||||
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
|
||||
|
||||
#### About fadeit
|
||||
We build awesome software, web and mobile applications.
|
||||
See more at [fadeit.dk](http://fadeit.dk)
|
||||
> base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다.
|
||||
|
|
|
|||
Loading…
Reference in New Issue