الفرق بين المراجعتين ل"Twig/inline css"
< Twig
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط |
|||
| سطر 31: | سطر 31: | ||
</syntaxhighlight>ثم ثبت <code>twig/extra-bundle</code> في حالة مشاريع Symfony:<syntaxhighlight lang="twig"> | </syntaxhighlight>ثم ثبت <code>twig/extra-bundle</code> في حالة مشاريع Symfony:<syntaxhighlight lang="twig"> | ||
$ composer require twig/extra-bundle | $ composer require twig/extra-bundle | ||
| − | </syntaxhighlight>أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:<syntaxhighlight lang=" | + | </syntaxhighlight>أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:<syntaxhighlight lang="php"> |
use Twig\Extra\CssInliner\CssInlinerExtension; | use Twig\Extra\CssInliner\CssInlinerExtension; | ||
المراجعة الحالية بتاريخ 15:07، 11 مايو 2021
المرشح inline_css يضع أنماط CSS في مستندات HTML:
{% apply inline_css %}
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>Hello CSS!</p>
</body>
</html>
{% endapply %}
تضاف بعض أنماط CSS بتمريرها كوسائط إلى المرشح:
{% apply inline_css(source("some_styles.css"), source("another.css")) %}
<html>
<body>
<p>Hello CSS!</p>
</body>
</html>
{% endapply %}
كذلك فإن الأنماط التي حمّلها المرشح تتخطى الأنماط المعرفة في وسم <style> في مستند HTML، ويمكن استخدام المرشح على ملف مدرَج أيضًا كما يلي:
{{ include('some_template.html.twig')|inline_css }}
{{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}
تعمل أداة CSS inliner على مستند HTML كله، وليس جزءًا منه فقط.
لاحظ أن المرشح inline_css جزء من CssInlinerExtension وهذا لا يكون مثبتًا افتراضيًا، لذا ثبته أولًا:
$ composer require twig/cssinliner-extra
ثم ثبت twig/extra-bundle في حالة مشاريع Symfony:
$ composer require twig/extra-bundle
أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:
use Twig\Extra\CssInliner\CssInlinerExtension;
$twig = new \Twig\Environment(...);
$twig->addExtension(new CssInlinerExtension());