it-swarm.asia

هل هناك طريقة لإضافة CSS لصفحة / عقدة واحدة؟

أنا أقوم بتنظيف أوراق الأنماط المجنونة الكبيرة (ربما تكون ذات صلة بسؤال في المستقبل) وأتساءل عن أفضل طريقة لإضافة CSS مخصصة إلى عقدة أو صفحة معينة.

على وجه الخصوص ، الصفحة الرئيسية لموقع عملي هي صفحة لوحة ولها مجموعة من أنماط مختلفة. في الوقت الحالي ، تم تضمين CSS فقط في ورقة أنماط السمة الرئيسية.

هل هناك طريقة لقول "إذا كانت هذه العقدة Foo ، فأضف foo.css"؟ هل CSS Injector ما أبحث عنه؟

I might أكون مهتمًا بتعميم هذا على العقد/الأقسام/إلخ ، ولكن في الوقت الحالي أريد فقط التعامل مع هذا العنصر.

ما انتهيت به.

أنا أستخدم موضوعًا فرعيًا لـ Zen ، واكتشفت بالفعل في القراءة من خلال template.php أن هناك بعض التعليقات التي تم التعليق عليها لتضمين أوراق الأنماط الشرطية. فعل الرمز أدناه بالضبط ما احتاجه:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(السطر 80 في ملف Zen template.php الأسهم ، FWIW.)

79
epersonae

هذا هو نوع الشيء الذي سأفعله عن طريق التعليمات البرمجية ، ولكن هذا لأن هذه هي الطريقة التي أتدحرج بها.

في القالب. php ستحتاج إلى شيء مثل:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

استبدل foo بقيم تتعلق بكودك.

69
Decipher

يمكنك إلقاء نظرة على الوحدة الرمز لكل عقدة . كما أنها واردة في هذا مشاركة بلوق .

25
rakke

أنشئ سياق لصفحتك/قسمك ثم استخدم (Context Assets الوحدة النمطية لتحميل CSS و/أو جافا سكريبت لهذا السياق المحدد.

السياق:

يسمح لك السياق بإدارة الظروف السياقية وردود الفعل لأجزاء مختلفة من موقعك. يمكنك التفكير في كل سياق على أنه يمثل "قسم" من موقعك. لكل سياق ، يمكنك اختيار الشروط التي تؤدي إلى تنشيط هذا السياق واختيار جوانب مختلفة من Drupal التي يجب أن تتفاعل مع هذا السياق النشط.

فكر في الشروط كمجموعة من القواعد التي يتم التحقق منها أثناء تحميل الصفحة لمعرفة السياق النشط. ثم يتم إطلاق أي ردود فعل مرتبطة بالسياقات النشطة.

السياق إضافة الأصول:

تسمح لك إضافة أصول السياق بالقيام بذلك. يحتوي على واجهة مستخدم سهلة الاستخدام تتيح لك القيام بذلك دون كتابة أي كود. لأنه يستخدم ctools كل هذا قابل للتصدير أيضا.

16
budda

إذا كانت كمية صغيرة من CSS ، فربما تفكر في جعل محددات CSS الخاصة بك بناءً على العقدة وتضمين css في CSS لموضوعك؟ Drupal 7 يوفر محدد body.page-node-NODEID ، و Zen لـ Drupal 6 يوفر فئات CSS مماثلة للجسم.

13
Dave Reid

إذا كانت المعايير التي تعتمد عليها إضافة نمط CSS تعتمد على بعض خصائص العقدة ، فإنني سأقوم بتطبيق MYTHEME_preprocess_node(&$variables)؛ إحدى القيم التي تم تمريرها إلى الدالة هي $variables['node'] (لتلاحظ أنها ليست $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

إذا كانت المعايير لا تعتمد على أي خصائص عقدة ، فسوف أقوم بتطبيق MYTHEME_preprocess_page(&$variables) ؛ $variables['node'] يحتوي على كائن عقدة ، إذا كانت الصفحة المعروضة هي صفحة عقدة. في Drupal 6 ، تحصل وظيفة العملية أيضًا على $variables['is_front'] ، ولكن في Drupal 7 لم يتم تمرير نفس المتغير ؛ إذا كنت بحاجة إلى معرفة إذا كانت الصفحة هي الصفحة الأولى ، فأنت بحاجة إلى استخدام drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}
7
kiamlaluno

يمكنك إنشاء وحدة مخصصة واستخدام hook_preprocess_node () لتحميل أوراق الأنماط بشكل انتقائي بناءً على معرف العقدة.

إليك مثال:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

استبدل MYMODULE باسم الوحدة الخاصة بك واستبدل MYTHEME باسم السمة التي تحتوي على ملف css.

7
Camsoft

للحصول على طريقة تعتمد على الإدارة للقيام بذلك ، سوف ألقي نظرة على وحدة CSS . يضيف حقلاً حيث يمكنك إضافة [~ # ~] css [~ # ~] إلى node/add و node/edit صفحات.

CSS:

تضيف وحدة CSS ، للمستخدمين الذين لديهم أذونات كافية وعقد ممكّنة ، حقل CSS في صفحة إنشاء العقدة.

يمكن للمستخدمين إدراج قواعد CSS في حقل عقدة CSS وسيتم تحليل تلك القواعد عند عرض العقدة.

بهذه الطريقة ، يمكن للمستخدمين ذوي الخبرة في CSS إنشاء تصميم معقد يعتمد على CSS لمحتويات العقد.

هام: لاحظ أنه يجب منح أذونات تحرير CSS فقط للمستخدمين الموثوقين (المسؤولين). قد يخرق المستخدمون الضارون الذين لديهم هذا الإذن تصميم موقعك ويعرضون أيضًا مشكلات أمنية (XSS).

5
Paul Jones

CodePerNode رائع ، ولكن CSS Injector أسهل في التثبيت (لا حاجة للمكتبات). تسمح الوحدة لمدير المحتوى بإضافة CSS ديناميكيًا لصفحات محددة ، دون لمس PHP أو ملفات INFO على الإطلاق. لا يمكن أن تكون عمليات التثبيت 15777 خاطئة - هذا دليل اجتماعي تعمل هذه الوحدة. يتم أيضًا تخزين CSS مؤقتًا باستخدام نظام التخزين المؤقت العادي.

3
Druvision

/ * مثال باستخدام سمة bartik لإضافة css بناءً على نوع المحتوى * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}
2
tal

حاول إضافة هذا في ملف "template.php" الخاص بك:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

استبدل "mytheme" باسم دليل السمة الخاص بك و /css/front.css بـ المسار حيث يوجد ملف CSS الخاص بك.

لإلغاء تعيين ملف 'front.css' من صفحات أخرى ، حاول الإضافة إلى 'template.php':

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

مرة أخرى ، استبدل "mytheme" باسم دليل السمة الخاص بك.

إذا كنت بحاجة إلى إلغاء تعيين "styles.css" من الصفحة الأولى ، فقم فقط بدمج هذين الرمزين.

لنفترض أنك بحاجة إلى "front.css" بدون "styles.css" في الصفحة الأولى ، و "style.css" بدون "front.css" في جميع الصفحات الأخرى. سيبدو الرمز على النحو التالي:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

أيضًا ، استبدل "mytheme".

أتمنى هذا أن يكون مفيد.

2
mixerowsky

نظرًا لأنك تستخدم اللوحات بالفعل ، فقد يكون من الأسهل إضافة CSS الخاص بك كنمط لوحة لكل منطقة من لوحة الصفحة الرئيسية الخاصة بك. يمكنك تحديد الترميز المخصص هناك وإعادة استخدامه عبر موقعك.

يمكنك أيضًا الانتقال إلى القسم العام بقاعدة متغير مدير الصفحة لصفحتك الرئيسية. يوجد قسم هنا لإضافة معرفات وقواعد CSS للوحة الحالية فقط.

ملاحظة: كل هذا في D7 ، لذلك قد يكون هذا الأسلوب مدعومًا بشكل أفضل من قبل اللوحات أكثر مما كان عليه في الإصدارات السابقة.

2
Warpstone

كنت قد تخطيت لمس template.php تمامًا وأضيف عنصرًا آخر في ملف .info الخاص بموضوعك

لنفترض أن ورقة الأنماط موجودة في css/foo.css.

هذه هي الطريقة التي سيبدو بها ملف theme_name.info الخاص بك:

name = Theme Name
...
stylesheets[all][] = css/foo.css

ثم تستفيد من تخزينها في ذاكرة التخزين المؤقت مع أوراق الأنماط الرئيسية ، وبما أنني أفترض أن هذا لصفحتك الرئيسية ، فسيكون ذلك منطقيًا.

1
Alexander Hripak

إلى جانب Drupal ، عندما تحتاج فقط إلى مقطع قصير من css داخل نص HTML5 ، يكون لديك سمة css ذات النطاق المحدد. انظر https://stackoverflow.com/a/ 4607092/195812

سيوفر لك هذا الحل من تعديل التعليمات البرمجية وتثبيت المزيد من الوحدات النمطية

1
augusto

يمكنك طباعة عقدة الصفحة في علامة النص

<body page-node-26419 ...>

ثم يمكنك تقييد

body.page-node-26419 {
    background: red
}

هذا مفيد للتغييرات السريعة الطفيفة

0
Markus Zerres