glorpen/style-embedder-bundle 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

glorpen/style-embedder-bundle

Composer 安装命令:

composer require glorpen/style-embedder-bundle

包简介

Bundle for embedding css style into html style tags for eg. newsletters

README 文档

README

Parses given CSS styles and applies it to html elements. Embedding is often needed in newsletters - with inline styles it should look good in any browser/client and you don't have to mantain style spaghetti :)

Since css is embedded into style attribute, pseudo selectors are not supported (:hover,:nth-child, etc).

You can use any css selector combination. Multiple selectors will be applied to single element with accounting for css selector specifity, so you can write:

* { color: red; }
#myId { color: blue; }

How to install

  • add requirements to composer.json:
{
    "require": {
        "glorpen/style-embedder-bundle": "@dev"
    }
}
  • enable the plugin in your AppKernel class

app/AppKernel.php

<?php

class AppKernel extends AppKernel
{
   public function registerBundles()
   {
       $bundles = array(
           ...
           new Glorpen\StyleEmbedderBundle\GlorpenStyleEmbedderBundle(),
           ...
       );
   }
}

Usage

Rendering with Twig

Template:

{% block style %}
   .footer * {
      color: silver;
   }
  .footer p {
      font-weight: bold;
   }
   .footer p > span {
      font-weight: normal;
   }
   h1 {
      font-size: 20px;
   }
{% endblock %}
{% block html %}
<html>
   <head></head>
   <body>
      <h1>Some Header</h1>
      <div class="footer">
         <p>Address: <span>Our address</span></p>
         <p>Tel.: <span>123-456-789</span></p>
      </div>
   </body>
</html>
{% endblock %}

Render:

<?php

$embedder = $container->get("glorpen.style_embedder")
$ret = $embedder->render('template.html.twig');

You will get:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head></head><body>
   <h1 style="font-size:20px;">Some Header</h1>
   <div class="footer">
      <p style="color:silver;font-weight:bold;">Address: <span style="color:silver;font-weight:normal;">Our address</span></p>
      <p style="color:silver;font-weight:bold;">Tel.: <span style="color:silver;font-weight:normal;">123-456-789</span></p>
   </div>
</body></html>

Simple rendering

Embedder can handle plain data too.

<?php

$styles = '* { font-weight: bold; }';
$html = ' .... ';

$embedder = $container->get("glorpen.style_embedder")
$ret = $embedder->embed($styles, $html);

统计信息

  • 总下载量: 655
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 0
  • 点击次数: 0
  • 依赖项目数: 0
  • 推荐数: 1

GitHub 信息

  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • 开发语言: PHP

其他信息

  • 授权协议: GPL-3.0
  • 更新时间: 2013-03-23

承接程序开发

PHP开发

VUE

Vue开发

前端开发

小程序开发

公众号开发

系统定制

数据库设计

云部署

网站建设

安全加固