किसी एकल पृष्ठ / नोड के लिए सीएसएस जोड़ने का कोई तरीका?

Question

मैं अपनी बड़ी पागल शैली की चादरें (संभवतः भविष्य के सवाल के अनुकूल) साफ कर रहा हूं और मैं कस्टम सीएसएस को एक विशिष्ट नोड या पृष्ठ पर जोड़ने का सबसे अच्छा तरीका सोच रहा हूं।

विशेष रूप से, मेरी कार्य साइट का मुख पृष्ठ एक पैनल पृष्ठ है और इसमें विभिन्न स्टाइल का एक गुच्छा है। अभी सीएसएस मुख्य थीम स्टाइल शीट के साथ शामिल है।

क्या यह कहने का कोई तरीका है, "यदि यह नोड फू है, तो foo.css जोड़ें"? क्या सीएसएस इंजेक्टर मैं क्या देख रहा हूँ?

मैं इसे अन्य नोड्स / अनुभागों / आदि को सामान्य बनाने में दिलचस्पी ले सकता हूं , लेकिन फिलहाल मैं इस एक आइटम को संभालना चाहता हूं।

मैं क्या कर रही समाप्त हो गया।

मैं एक ज़ेन उपशीर्षक का उपयोग कर रहा हूं, और वास्तव में टेम्पलेट के माध्यम से पढ़ रहा हूं। पता है कि सशर्त शैली की शीट सहित कुछ टिप्पणी कोड है। नीचे दिए गए कोड ने वही किया जो मुझे चाहिए था:

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

(लाइन 80 में एक स्टॉक ज़ेन टेम्पलेट। एफपी फ़ाइल, एफडब्ल्यूआईडब्ल्यू।)

Comments

संबंधित: drupal.stackexchange.com/questions/736/…

— chrisjlee

बनाएँ page--front.tpl.phpऔरpage.tpl.php

— M ama D

Answer 1

यह इस तरह की चीज है जिसे मैं कोड के आधार पर करूंगा, लेकिन ऐसा इसलिए है क्योंकि मैं रोल कर रहा हूं।

Template.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");
  }
}

अपने स्वयं के कोड से संबंधित मूल्यों के साथ फू बदलें।

Comments

तो मुख पृष्ठ के लिए, आप के if(drupal_is_front_page()) {बजाय का उपयोग करेंगे if(drupal_get_path_alias [etc]?

— epersonae

हां, स्थितियां पूरी तरह से आप पर निर्भर हैं। आप बस एक $vars['#node']->nid == $nidचेक कर सकते हैं यदि आप चाहते थे।

— Decipher

डिक्रिप्ट, आपके कोड में कोई गलती नहीं मिल सकती है। लेकिन आशा है कि आप मुझे इस ओर इशारा करने से गुरेज नहीं करेंगे कि जब तक आप ड्रुपल अनुमति कॉन्फ़िगरेशन के बारे में बात नहीं कर रहे हैं, तब तक जिस तरह से आपकी भूमिका है वह वास्तव में आपके रोल करने का तरीका होना चाहिए। ;-)

— मेड

FYI करें, मैं Drupal 7 का उपयोग कर रहा हूं और पाया कि मुझे $vars['elements']['#node']->nidइसके बजाय अन्य खोज में उपयोग करने की आवश्यकता है । वहाँ के नवीनतम Drupal 7 में कोई #nodeजड़ नहीं varsहै।

— वेस जॉनसन

यह MYTHEME__preprocess_node ($ vars) के आगे कार्य नहीं होना चाहिए, मुझे वहां सभी कोड केवल फ़ंक्शन के संदर्भ में दिखाई दे रहे हैं?

— pal4life

Answer 2

आप कोड प्रति नोड मॉड्यूल पर एक नज़र डाल सकते हैं । यह इस ब्लॉग पोस्ट में भी चित्रित किया गया है ।

Answer 3

अपने पृष्ठ / अनुभाग के लिए एक संदर्भ बनाएँ और फिर उस संदर्भ के लिए CSS और / या जावास्क्रिप्ट लोड करने के लिए प्रसंग आस्तियों मॉड्यूल का उपयोग करें ।

प्रसंग:

संदर्भ आपको अपनी साइट के विभिन्न भागों के लिए प्रासंगिक स्थितियों और प्रतिक्रियाओं का प्रबंधन करने की अनुमति देता है। आप प्रत्येक संदर्भ को अपनी साइट के "खंड" का प्रतिनिधित्व करने के रूप में सोच सकते हैं। प्रत्येक संदर्भ के लिए, आप उन शर्तों को चुन सकते हैं जो इस संदर्भ को सक्रिय करने के लिए ट्रिगर करती हैं और Drupal के विभिन्न पहलुओं को चुनती हैं जिन्हें इस सक्रिय संदर्भ पर प्रतिक्रिया देनी चाहिए।

शर्तों के एक सेट के रूप में शर्तों के बारे में सोचें जो पृष्ठ लोड के दौरान जांचे जाते हैं कि क्या संदर्भ सक्रिय है। सक्रिय संदर्भों से जुड़ी कोई भी प्रतिक्रियाएं निकाल दी जाती हैं।

संदर्भ जोड़ें संपत्ति:

प्रसंग जोड़ने वाली संपत्ति आपको ऐसा करने की अनुमति देती है। यह यूआई का उपयोग करने के लिए एक आसान है कि आप किसी भी कोड को लिखे बिना यह सब करने की अनुमति दें। क्योंकि यह ctools का उपयोग करता है यह सब भी निर्यात योग्य है।

Comments

मैं शाब्दिक रूप से प्रत्येक वेबसाइट में एसेट्स ऐड एसेट्स का उपयोग करता हूँ - अगर आपका कॉन्टेक्ट्स (जो मेरे बिल्ड के हर सेक्शन को ड्राइव करता है) में जोड़ें एसेट्स सही है!

— इलेक्ट्रालके

Answer 4

यदि यह सीएसएस की एक छोटी राशि है, तो शायद नोड के आधार पर अपने सीएसएस चयनकर्ताओं को बनाने और अपनी थीम के सीएसएस में सीएसएस को शामिल करने पर विचार करें? Drupal 7 body.page-node-NODEID चयनकर्ता प्रदान करता है, और Drupal 6 के लिए ज़ेन समान बॉडी CSS कक्षाएं प्रदान करता है।

Comments

यह मूल रूप से मैं क्या कर रहा था ... और यह लगभग 200 लाइनें है, इसलिए इसे कहीं और स्थानांतरित करना एक अच्छा विचार था। (हाँ, यह शायद कम होना चाहिए। यह एक अलग कदम हो सकता है।)

— epersonae

दूसरी ओर, आपकी प्रतिक्रिया ने मुझे मेरे (ज़ेन बच्चे) टेम्पलेट में टेम्पलेट पढ़ने के लिए प्रेरित किया, जो मुझे अंतिम उत्तर में मिला।

— एपर्से

Answer 5

आप एक कस्टम मॉड्यूल बना सकते हैं और स्टाइल आईडी को नोड आईडी के आधार पर चुनिंदा रूप से लोड करने के लिए 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 फ़ाइल है।

Comments

हुक_इनिट () प्रत्येक पृष्ठ लोड पर चलता है, और अक्सर कई बार (एएचएएच), हुक_परप्रोसेस_नोड () या तो थीम या एक मॉड्यूल में उपयोग क्यों नहीं होता है जो केवल नोड के रेंडर होने पर चलता है?

— Decipher

अच्छी बात है, यह नहीं पता था कि यह कई बार भरी हुई थी।

— कैमसॉफ्ट

डिक्रिप्ट, मैंने प्रीप्रोसेस फ़ंक्शन का उपयोग करने के लिए अपना उदाहरण सही किया है। सीखने का क्रम जारी है!

— कैंसॉफ्ट

फिर अगला सवाल यह होगा कि नोड के लिए arg (1) का उपयोग क्यों किया जाए जब नोड चर $ vars के माध्यम से पारित किए जाते हैं :) जो तब मेरे प्रश्न के अगले प्रश्न के लिए नेतृत्व करेगा: p

— Decipher

मुझे लगता है कि मुझे hook_preprocess_node () प्रलेखन पढ़ना चाहिए था। आप बिल्कुल सही कह रहे है। epersonae, मेरा सुझाव है कि आप डिसीपर के उत्तर को स्वीकार करें।

— कैंसॉफ्ट

Answer 6

यदि सीएसएस शैली जोड़ने के लिए मानदंड नोड के कुछ गुणों से निर्भर करता है, तो मैं लागू करूंगा 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");
  }
}

Answer 7

ऐसा करने के तरीके के लिए मैं CSS मॉड्यूल देखूंगा। यह एक फ़ील्ड जोड़ता है जहाँ आप CSS को node/addऔर node/editपृष्ठों में जोड़ सकते हैं ।

सीएसएस:

सीएसएस मॉड्यूल पर्याप्त अनुमतियों और सक्षम नोड्स वाले उपयोगकर्ताओं के लिए जोड़ता है, नोड निर्माण पृष्ठ पर एक सीएसएस क्षेत्र।

उपयोगकर्ता सीएसएस नोड क्षेत्र में सीएसएस नियमों को सम्मिलित कर सकते हैं और उन नियमों को नोड देखने पर पार्स किया जाएगा।

इस तरह सीएसएस अनुभवी उपयोगकर्ता नोड्स सामग्री के लिए जटिल सीएसएस आधारित डिज़ाइन बना सकते हैं।

महत्वपूर्ण: ध्यान दें कि CSS संपादन की अनुमति केवल विश्वसनीय उपयोगकर्ताओं (प्रशासकों) को दी जानी चाहिए। दुर्भावनापूर्ण उपयोगकर्ता जिनके पास यह अनुमति है, वे आपकी साइट की डिज़ाइन को तोड़ सकते हैं और सुरक्षा मुद्दों (XSS) को भी प्रस्तुत कर सकते हैं।

Answer 8

CodePerNode बढ़िया है, लेकिन CSS Injector स्थापित करने के लिए सरल है (कोई लाइब्रेरी आवश्यक नहीं)। मॉड्यूल सामग्री प्रबंधक को PHP कोड या INFO फ़ाइलों को छूने के बिना, विशिष्ट पृष्ठों पर सीएसएस को गतिशील रूप से जोड़ने की अनुमति देता है। 15777 इंस्टॉल गलत नहीं हो सकते - यह एक सामाजिक प्रमाण है जो यह मॉड्यूल काम करता है। सीएसएस को नियमित कैशिंग प्रणाली के साथ भी कैश किया जाता है।

Answer 9

चूंकि आप पहले से ही पैनलों का उपयोग कर रहे हैं, इसलिए अपने होमपेज पैनल के प्रत्येक क्षेत्र के लिए अपने सीएसएस को एक पैनल शैली के रूप में जोड़ना आसान हो सकता है। आप वहां कस्टम मार्कअप को परिभाषित कर सकते हैं और इसे अपनी साइट पर पुनः उपयोग कर सकते हैं।

आप अपने मुखपृष्ठ के लिए पृष्ठ प्रबंधक संस्करण नियम के सामान्य अनुभाग पर भी जा सकते हैं। सीएसएस आईडी और केवल वर्तमान पैनल के नियमों को जोड़ने के लिए यहां एक अनुभाग है।

नोट: यह सब D7 में है, इसलिए हो सकता है कि यह दृष्टिकोण पैनल्स की तुलना में बेहतर है क्योंकि यह पूर्व संस्करणों में था।

Answer 10

/ * सामग्री प्रकार के आधार पर css जोड़ने के लिए bartik विषय का उपयोग करके एक उदाहरण * /

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
}

Answer 11

इसे अपनी 'template.php' फ़ाइल में जोड़ने का प्रयास करें:

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

अपनी थीम डायरेक्टरी और '/css/front.css' के नाम के साथ 'mytheme' को उस पथ से बदलें जहाँ आपकी 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' बदलें।

अगर आपको फ्रंट पेज से 'style.css' को अनसेट करने की जरूरत है तो बस इन दो कोड को मिलाएं।

मान लेते हैं कि आपको फ्रंट पेज पर 'style.css' के बिना 'front.css' और अन्य सभी पेजों पर 'front.css' के बिना 'style.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' को बदलें।

मुझे उम्मीद है कि ये मददगार होगा।

Comments

कोड का अंतिम टुकड़ा जो मुझे चाहिए था। और यह काम करता है, यानी, जब मैंने स्टाइलशीट्स को हटा दिया [all] [] = css / front.css मेरे theme.info से - मुझे लगता है कि मैंने गलत तरीके से मान लिया है कि हमें स्टाइलशीट्स [सभी] [] = css / स्टाइल के साथ की जरूरत है .css। मुझे यह भी चिंता थी कि क्योंकि मैं page.tpl.php को पृष्ठ - front.tpl.php से ओवरराइड कर रहा हूं, हो सकता है कि यह काम न करे, लेकिन लगता है कि सब कुछ अच्छी तरह से हो रहा है। यह वास्तव में मददगार है। धन्यवाद!

— Sd1

बस यह सुनिश्चित करने के लिए कि हर किसी को यह समाधान मिलता है; अपनी theme.info फ़ाइल से style.css (डिफ़ॉल्ट) और front.css निकालना सुनिश्चित करें। सभी कैश फ्लश करें और जाना अच्छा होना चाहिए।

— Sd1

Answer 12

मैं टेम्पलेट को छूने से पूरी तरह से छोड़ दिया है। बस अपने विषय में .info फ़ाइल में एक और आइटम जोड़ें

कहते हैं कि आपकी स्टाइलशीट में है css/foo.css।

इस तरह से आपकी theme_name.info फ़ाइल दिखाई देगी:

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

तो फिर आप इसे मुख्य स्टाइलशीट के साथ कैश्ड होने से लाभान्वित होते हैं, और जब से मैं यह मान रहा हूं कि यह आपके होमपेज के लिए है तो यह समझ में आएगा।

Comments

और निश्चित रूप से आपको नोड की विशेषताओं के आधार पर अपने चयनकर्ताओं को अर्हता प्राप्त करने की आवश्यकता होगी, अर्थात, नोड, नोड प्रकार, आदि

— अलेक्जेंडर ह्रीपैक

इस दृष्टिकोण के साथ समस्या यह है कि सीएसएस के साथ साइट पर सभी पृष्ठों को यहां जोड़ा जाएगा

— pal4life

Answer 13

Drupal दृष्टिकोण के अलावा, जब आपको केवल अपने HTML5 शरीर के अंदर css के एक छोटे से टुकड़े की आवश्यकता होती है, तो आपके पास css scoped Attribute होता है। Https://stackoverflow.com/a/4607092/195812 देखें

यह समाधान आपको संपादन कोड और अधिक मॉड्यूल स्थापित करने से बचाएगा

Answer 14

आप पेज-नोड को बॉडी-टैग में प्रिंट कर सकते हैं

<body page-node-26419 ...>

तब आप प्रतिबंधित कर सकते हैं

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

यह मामूली त्वरित परिवर्तनों के लिए उपयोगी है

Comments

Drupal उत्तर में आपका स्वागत है! यह उत्तर डेव रीड द्वारा पहले ही प्रदान किया जा चुका है।

— कोजो