Golang HTML邮件CSS内联处理插件库douceur的使用

douceur是一个简单的Golang CSS解析器和内联工具。

Douceur Logo

功能特点

解析器灵感来源于CSS语法模块级别3
内联器只解析HTML文档中定义的CSS，不获取外部样式表
内联器会在可能的情况下插入额外的属性

示例

输入HTML:

<html>
  <head>
  <style type="text/css">
    body {
      background-color: #f2f2f2;
    }
  </style>
  </head>
  <body>
    <p>Inline me !</p>
  </body>
</html>

处理后输出:

<html>
  <head>
  </head>
  <body style="background-color: #f2f2f2;" bgcolor="#f2f2f2">
    <p>Inline me !</p>
  </body>
</html>

可以看到bgcolor属性被额外插入，同时background-color样式也被内联。

工具使用

安装工具

go install github.com/aymerick/douceur

解析CSS文件

$ douceur parse inputfile.css

内联HTML文档中的CSS

$ douceur inline inputfile.html

库使用

安装库

go get github.com/aymerick/douceur

解析CSS示例

package main

import (
    "fmt"

    "github.com/aymerick/douceur/parser"
)

func main() {
    input := `body {
    /* D4rK s1T3 */
    background-color: black;
        }

  p     {
    /* Try to read that ! HAHA! */
    color: red; /* L O L */
 }
`

    stylesheet, err := parser.Parse(input)
    if err != nil {
        panic("Please fill a bug :)")
    }

    fmt.Print(stylesheet.String())
}

输出:

body {
  background-color: black;
}
p {
  color: red;
}

内联HTML示例

package main

import (
    "fmt"

    "github.com/aymerick/douceur/inliner"
)

func main() {
    input := `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
  p {
    font-family: 'Helvetica Neue', Verdana, sans-serif;
    color: #eee;
  }
</style>
  </head>
  <body>
    <p>
      Inline me please!
    </p>
</body>
</html>`

    html, err := inliner.Inline(input)
    if err != nil {
        panic("Please fill a bug :)")
    }

    fmt.Print(html)
}

输出:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  </head>
  <body>
    <p style="color: #eee; font-family: &#39;Helvetica Neue&#39;, Verdana, sans-serif;">
      Inline me please!
    </p>

</body></html>

测试

go test ./... -v

依赖

解析器使用Gorilla CSS3 tokenizer
内联器使用goquery操作HTML

类似项目

premailer
roadie

更多关于golang HTML邮件CSS内联处理插件库douceur的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

songsunli 1楼

更多关于golang HTML邮件CSS内联处理插件库douceur的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html

使用douceur库处理HTML邮件CSS内联

douceur是一个Go语言库，专门用于将HTML邮件中的CSS样式转换为内联样式，这对于电子邮件开发非常有用，因为大多数邮件客户端不支持外部或头部样式表。

安装douceur

go get github.com/aymerick/douceur

基本用法

package main

import (
	"fmt"
	"github.com/aymerick/douceur/inliner"
)

func main() {
	html := `
	<!DOCTYPE html>
	<html>
	<head>
		<style>
			.container {
				width: 600px;
				margin: 0 auto;
				font-family: Arial, sans-serif;
			}
			.header {
				color: #333;
				font-size: 24px;
				padding: 20px 0;
			}
			.button {
				display: inline-block;
				padding: 10px 20px;
				background-color: #007bff;
				color: white;
				text-decoration: none;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1 class="header">欢迎来到我们的服务</h1>
			<p>感谢您的注册，请点击下方按钮激活账户。</p>
			<a href="#" class="button">激活账户</a>
		</div>
	</body>
	</html>
	`

	// 内联处理CSS
	inlinedHTML, err := inliner.Inline(html)
	if err != nil {
		panic(err)
	}

	fmt.Println(inlinedHTML)
}

高级用法

1. 保留原始样式

package main

import (
	"fmt"
	"github.com/aymerick/douceur/inliner"
)

func main() {
	html := `
	<style>
		/* 这个样式将被保留 */
		@media only screen and (max-width: 480px) {
			.container {
				width: 100% !important;
			}
		}
	</style>
	<div class="container">内容</div>
	`

	// 内联处理CSS但保留媒体查询
	inlinedHTML, err := inliner.Inline(html)
	if err != nil {
		panic(err)
	}

	fmt.Println(inlinedHTML)
}

2. 处理外部HTML文件

package main

import (
	"fmt"
	"io/ioutil"
	"log"
	"github.com/aymerick/douceur/inliner"
)

func main() {
	// 读取HTML文件
	content, err := ioutil.ReadFile("email_template.html")
	if err != nil {
		log.Fatal(err)
	}

	// 内联处理CSS
	inlinedHTML, err := inliner.Inline(string(content))
	if err != nil {
		log.Fatal(err)
	}

	// 保存处理后的文件
	err = ioutil.WriteFile("email_inlined.html", []byte(inlinedHTML), 0644)
	if err != nil {
		log.Fatal(err)
	}

	fmt.Println("HTML邮件内联处理完成!")
}

注意事项

媒体查询：douceur会自动保留媒体查询，这对响应式邮件设计很重要。
!important规则：内联样式会保留!important标记。
性能考虑：对于大型HTML文件，内联处理可能会消耗较多资源。
HTML结构：确保HTML格式正确，否则可能会导致解析错误。
特殊选择器：某些复杂CSS选择器可能无法正确内联。

替代方案

如果douceur不能满足需求，还可以考虑以下Go库：

github.com/PuerkitoBio/goquery + 自定义内联逻辑
github.com/vanng822/go-premailer (Premailer的Go端口)

douceur是一个轻量级解决方案，特别适合需要简单快速内联CSS样式的邮件开发场景。它的API简洁，易于集成到现有邮件发送流程中。