الفرق بين المراجعتين لصفحة: «Twig/inline css»
< Twig
أسامه-دمراني (نقاش | مساهمات) 1.0: إضافة عنوان الصفحة | 2.0 محتوى الصفحة |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: المرشح inline_css في Twig}}</noinclude> | <noinclude>{{DISPLAYTITLE: المرشح inline_css في Twig}}</noinclude> | ||
المرشح inline_css يضع أنماط CSS في مستندات HTML:<syntaxhighlight lang="twig"> | المرشح <code>inline_css</code> يضع أنماط [[CSS]] في مستندات [[HTML]]:<syntaxhighlight lang="twig"> | ||
{% apply inline_css %} | {% apply inline_css %} | ||
<html> | <html> | ||
| سطر 13: | سطر 13: | ||
</html> | </html> | ||
{% endapply %} | {% endapply %} | ||
</syntaxhighlight>تضاف بعض أنماط CSS بتمريرها كوسائط إلى المرشح:<syntaxhighlight lang="twig"> | </syntaxhighlight>تضاف بعض أنماط [[CSS]] بتمريرها كوسائط إلى المرشح:<syntaxhighlight lang="twig"> | ||
{% apply inline_css(source("some_styles.css"), source("another.css")) %} | {% apply inline_css(source("some_styles.css"), source("another.css")) %} | ||
<html> | <html> | ||
| سطر 21: | سطر 21: | ||
</html> | </html> | ||
{% endapply %} | {% endapply %} | ||
</syntaxhighlight>كذلك فإن الأنماط التي حمّلها المرشح تتخطى الأنماط المعرفة في وسم <code><style></code> في مستند | </syntaxhighlight>كذلك فإن الأنماط التي حمّلها المرشح تتخطى الأنماط المعرفة في وسم <code><style></code> في مستند [[HTML]]، ويمكن استخدام المرشح على ملف مدرَج أيضًا كما يلي:<syntaxhighlight lang="twig"> | ||
{{ include('some_template.html.twig')|inline_css }} | {{ include('some_template.html.twig')|inline_css }} | ||
| سطر 39: | سطر 39: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* [[Twig/intro|مقدمة عن محرك القوالب Twig | * [[Twig/intro|مقدمة عن محرك القوالب Twig]] | ||
* [[Twig/advanced|توسيع Twig | * [[Twig/advanced|توسيع Twig]] | ||
* [[Twig/internals|المكونات الداخلية لـ Twig | * [[Twig/internals|المكونات الداخلية لـ Twig]] | ||
* [[Twig/tags|الوسوم في Twig]] | * [[Twig/tags|الوسوم في Twig]] | ||
* [[ Twig/filters|المرشحات في Twig]] | * [[ Twig/filters|المرشحات في Twig]] | ||
== المصادر == | == المصادر == | ||
* [https://twig.symfony.com/doc/3.x/filters/inline_css.html صفحة توثيق المرشح inline_css في توثيق Twig الرسمي] | * [https://twig.symfony.com/doc/3.x/filters/inline_css.html صفحة توثيق المرشح inline_css في توثيق Twig الرسمي] | ||
[[تصنيف:Twig]] | [[تصنيف:Twig]] | ||
[[تصنيف:Twig Filters]] | [[تصنيف:Twig Filters]] | ||
مراجعة 19:20، 5 مايو 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());