थिमिंग - खरोंच से शुरू


30

स्क्रैच से, एक पूर्ण साइट बनाने की शुरुआत की पसंदीदा विधि क्या है ? मेरी बिल्ड आम तौर पर पूरी तरह से नकली HTML5 वायरफ्रेम पृष्ठों से शुरू होती हैं, और हम वहाँ से कार्यक्षमता में प्लग करते हैं।

लेकिन, मेरे हिस्से में यह महसूस होता है कि किसी प्रोजेक्ट के देर से आने के अधिकांश समय में हम कार्यक्षमता के उन सभी क्षेत्रों को खोजते हैं, जिनमें प्लग-इन करने की आवश्यकता होती है - आमतौर पर एंटरप्राइज RMA, कस्टमर माय अकाउंट सेक्शन, इत्यादि। यह 1 दिन से Magento विषय के साथ शुरू होने से बचा जा सकता है; विरोधी का कहना है कि सीएसएस लिखने और डिफ़ॉल्ट से संरचना को संशोधित करने के बराबर समय होगा ।

क्या आप कोर "रिक्त" विषय पर निर्माण करते हैं ? क्या इस रिक्त विषय का एंटरप्राइज़ संस्करण है? यहाँ सबसे अच्छा अभ्यास क्या है?

जवाबों:


32

तो यह अंतिम उथल-पुथल का कारण बनेगा और प्रत्येक मैगनेटो डेवलपर के अनाज के खिलाफ जाएगा - लेकिन हमें थीमिंग के लिए एक ठोस प्रक्रिया मिल गई है - जो कि स्थानीय ( xml ) का उपयोग नहीं करता है (बाद में अधिक)।

हम हमेशा base/default(और enterprise/defaultईई के लिए) टेम्पलेट से काम करते हैं - लेकिन सीएसएस को शून्य कर देते हैं। भले ही सभी डिज़ाइन विशेष रूप से वेनिला मैगेंटो स्टोर के संरचनात्मक लेआउट के लिए खुद को उधार नहीं देते हैं - हम इसे defaultशुरुआती बिंदु के रूप में विषय का उपयोग करने के लिए अच्छा अभ्यास पाते हैं ; हम टेम्प्लेटिंग के दौरान अन-यूज्ड मेथड्स / लूप्स / html आदि को हटा सकते हैं।

जब एक विषय शुरू

ईई के लिए

हम पहले इस एक्सटेंशन को इंस्टॉल करते हैं , ताकि हमें एक स्तर की थीम फॉलबैक मिल जाए - जब हम बाद में हमारे द्वारा कॉपी किए गए थीम फ़ाइलों को हटा दें।

पैकेज

हम पहले पैकेज बनाकर और पूरे base/defaultविषय में कॉपी करके शुरू करते हैं ; उदाहरण के लिए (कहते हैं कि यह हमारी अपनी वेबसाइट थी, हम पैकेज कहेंगे sonassi)

cd ./app/design/frontend
mkdir sonassi
cp -par base/default sonassi/default
mkdir sonassi/default/layout/custom

नमूना

अंतिम लक्ष्य यह है कि हमें प्रत्येक फ़ाइल को कॉपी और पेस्ट करने की आवश्यकता नहीं है जिसे हम जब भी संशोधित करते हैं, तो हम बस विषय में फ़ाइल को संपादित करते हैं।

लेकिन हर बार जब हम फ़ाइल को संपादित करते हैं, तो हम Magento के कॉमर्स हेडर को बाहर निकाल देते हैं - और कस्टम टेम्पलेट के रूप में फ़ाइल को चिह्नित करने के लिए एक उपयुक्त हेडर / आइडेंटिफ़ायर जोड़ते हैं, आमतौर पर ऐसा कुछ ...

/*
* @category    Template
* @package     sonassi_default
* @copyright   Copyright (c) 2013 Sonassi
*/

यह शीर्षलेख बाद में एक उद्देश्य प्रदान करता है जब हम अंतिम टेम्पलेट को क्लीन-अप करते हैं। जैसा कि हम निर्देशिका और निर्देशिका diffपर एक पुनरावर्ती करेंगे - फिर कुछ भी हटा दें जिसे बदला नहीं गया है।base/default/templatesonassi/default/template

इस तरह, केवल संशोधित फाइलें शेष हैं और समग्र पैकेज न्यूनतम परिवर्तित फ़ाइलों में सिमट गया है।

लेआउट फ़ाइलें

हम अपने स्वयं के मानक कोर मॉड्यूल का उपयोग करते हैं sonassi.coreहां, हम हमेशा एक विशिष्ट पहचानकर्ता के साथ मॉड्यूल नामस्थान उपसर्ग करते हैं - यह उन विरोधों को रोकता है जहां अन्य कंपनियों ने एक ही नाम चुना है (उदाहरण के लिए। फिशपीग / वर्डप्रेस और सोनस्सी / वर्डप्रेस)


नोलोक लेआउट पद्धति

<core>
  <rewrite>
    <layout>Sonassi_Core_Model_Core_Layout</layout>
    <layout_update>Sonassi_Core_Model_Core_Layout_Update</layout_update>
  </rewrite>
</core> 

फिर दो जादुई कक्षाएं जो कार्यक्षमता को फिर से जोड़ने की जरूरत नहीं हैंlocal.xml ,

class Sonassi_Core_Model_Core_Layout 
    extends Mage_Core_Model_Layout
{
    /**
     * Loyout xml generation
     *
     * @return Mage_Core_Model_Layout
     */
    public function generateXml()
    {
        $xml = $this->getUpdate()->asSimplexml();
        $removeInstructions = $xml->xpath("//remove");
        if (is_array($removeInstructions)) {
            foreach ($removeInstructions as $infoNode) {
                $attributes = $infoNode->attributes();
                $blockName = (string)$attributes->name;
                if ($blockName) {
                    $unremoveNodes = $xml->xpath("//unremove[@name='".$blockName."']");
                    if (is_array($unremoveNodes) && count($unremoveNodes) > 0) {
                        continue;
                    }
                    $ignoreNodes = $xml->xpath("//block[@name='".$blockName."']");
                    if (!is_array($ignoreNodes)) {
                        continue;
                    }
                    $ignoreReferences = $xml->xpath("//reference[@name='".$blockName."']");
                    if (is_array($ignoreReferences)) {
                        $ignoreNodes = array_merge($ignoreNodes, $ignoreReferences);
                    }

                    foreach ($ignoreNodes as $block) {
                        if ($block->getAttribute('ignore') !== null) {
                            continue;
                        }
                        $acl = (string)$attributes->acl;
                        if ($acl && Mage::getSingleton('admin/session')->isAllowed($acl)) {
                            continue;
                        }
                        if (!isset($block->attributes()->ignore)) {
                            $block->addAttribute('ignore', true);
                        }
                    }
                }
            }
        }
        $this->setXml($xml);
        return $this;
    }
}

तथा

class Sonassi_Core_Model_Core_Layout_Update 
    extends Mage_Core_Model_Layout_Update
{

    public function getFileLayoutUpdatesXml($area, $package, $theme, $storeId = null)
    {
        if (null === $storeId) {
            $storeId = Mage::app()->getStore()->getId();
        }
        /* @var $design Mage_Core_Model_Design_Package */
        $design = Mage::getSingleton('core/design_package');
        $layoutXml = null;
        $elementClass = $this->getElementClass();
        $updatesRoot = Mage::app()->getConfig()->getNode($area.'/layout/updates');
        Mage::dispatchEvent('core_layout_update_updates_get_after', array('updates' => $updatesRoot));
        $updateFiles = array();
        foreach ($updatesRoot->children() as $updateNode) {
            if ($updateNode->file) {
                $module = $updateNode->getAttribute('module');
                if ($module && Mage::getStoreConfigFlag('advanced/modules_disable_output/' . $module, $storeId)) {
                    continue;
                }
                $updateFiles[] = (string)$updateNode->file;

                // custom theme XML contents
                $updateFiles[] = 'custom/'.(string)$updateNode->file;    

                // custom theme XML override
                $updateFiles[] = 'local/'.(string)$updateNode->file;            
            }
        }

        // custom local layout updates file - load always last
        $updateFiles[] = 'local.xml';
        $layoutStr = '';
        foreach ($updateFiles as $file) {
            $filename = $design->getLayoutFilename($file, array(
                '_area'    => $area,
                '_package' => $package,
                '_theme'   => $theme
            ));
            if (!is_readable($filename)) {
                continue;
            }
            $fileStr = file_get_contents($filename);
            $fileStr = str_replace($this->_subst['from'], $this->_subst['to'], $fileStr);
            $fileXml = simplexml_load_string($fileStr, $elementClass);
            if (!$fileXml instanceof SimpleXMLElement) {
                continue;
            }
            $layoutStr .= $fileXml->innerXml();
        }
        $layoutXml = simplexml_load_string('<layouts>'.$layoutStr.'</layouts>', $elementClass);
        return $layoutXml;
    }

}

उपरोक्त दो वर्ग मैगनेटो में कार्यक्षमता जोड़ते हैं ताकि आप विस्तार कर सकें - लेकिन एक लेआउट एक्सएमएल फ़ाइल को अधिलेखित नहीं करें। XML की लेआउट की एक्स्टेंसिबिलिटी हमारे लिए महत्वपूर्ण है, क्योंकि यह हमें अभी भी एक ही फाइल सेपरेशन को बनाए रखने की अनुमति देता है catalog.xml, cms.xmlआदि - लेकिन केवल ब्लॉक (हेरिटेज / क्लोन / निकालने) में हेरफेर करने के लिए लेआउट एक्सएमएल के छोटे हिस्से जोड़ने की जरूरत है।

local.xmlकार्यप्रणाली है कि आप सिर्फ एक बोझिल अनियंत्रित फ़ाइल में अपने अधिभावी परिवर्तन दर्ज है।

nolocalकार्यप्रणाली का मतलब है कि बजाय एक एकल फाइल में सभी परिवर्तनों डालने से, आप उन्हें एक फ़ाइल में उपयुक्त फ़ाइल नाम के साथ कर दिया है कि यह संशोधित कर रहा है (उदाहरण के लिए। catalog.xml) - बस एक नई फ़ाइल बनाने के द्वारा sonassi/default/layout/custom/catalog.xml* के साथ - केवल संशोधनों

दोबारा, एक बार जब हम खाका बना लेते हैं, तो हम केवल निर्देशिका sonassi/default/layoutके अपवाद के साथ सामग्री को निकाल सकते हैं custom। इस तरह फिर से, टेम्प्लेट के साथ, हमारे पास एक हल्का विस्तारित टेम्पलेट है - बेस टेम्प्लेट के आधार पर।

शैली की चादरें

हम उन्हें हटा देते हैं, वे सब। हम उन्हें अपने पैकेज के सीएसएस निर्देशिका में कॉपी करने की जहमत नहीं उठाते। हम JS में कॉपी करेंगे और वह यह है - imagesऔर CSSडायरेक्टरी शुरू से खाली रहेगी।

जैसा कि हम आजकल SASS का उपयोग कर रहे हैं, हमारे पास scssपूर्व-संसाधित सीएसएस के लिए एक और निर्देशिका ( ) होगी और मुख्य शैलियों / प्रिंट सीएसएस फ़ाइल (एस) के लिए आउटपुट होगा।

खाका साफ करना

इसलिए जैसा कि हमने उल्लेख किया है, एक बार टेम्प्लेट थीम पूरी हो जाने के बाद, अब आप इसे साफ कर सकते हैं - अन-मॉडिफाइड फाइल्स को हटाने और इसे नंगे न्यूनतम तक कम करने के लिए।

cd ./app/design/frontend

PREFIX="cleantheme_"
THEME="sonassi/default"
diff -BPqr "base/default/template" "$THEME/template" | \
awk '{print $4}' | \
  while read FILE; do 
    DIR=$(dirname "$FILE")
    [ -d "$PREFIX$DIR" ] || mkdir -p "$PREFIX$DIR"
    [ -f "$PREFIX$FILE" ] || cp -pa "$FILE" "$PREFIX$FILE"
  done
cp -par "$THEME/layout" "$PREFIX$THEME/"

तो क्यों नहीं local.xml?

यह आपके लिए नहीं है - इसकी तीसरी पार्टियों के लिए, उसी तरह जो communityआपके लिए है और localतीसरी पार्टियों के लिए है। इसकी विफलता, अंतिम उपाय, ओवरराइड के लिए अंतिम गंतव्य।

XML को इस तरह से संरचित करना उस तरह से इन-लाइन रखता है जिस तरह से Magento मूल रूप से डायरेक्टरी और फ़ाइल संरचना को कॉन्फ़िगर करता है। इसके अलावा, विकास की निरंतरता के लिए - यह सिर्फ अधिक समझ में आता है, पचाने में बहुत आसान है और ध्यान देने योग्य ओवरहेड नहीं जोड़ता है।

मैगेंटो एक विचित्र उत्पाद है, समुदाय ने सामान्य ज्ञान के आधार पर अपने स्वयं के सर्वोत्तम अभ्यास का आविष्कार किया है और मैगनेटो कोर टीम क्या करती है इसकी नकल करते हैं। तो कभी कोई आधिकारिक तरीका नहीं है (जब तक कि मैगेंटो -1 दस्तावेज़ के साथ एक गेंडा सवारी न हो) ; लेकिन यह हमारा तरीका है।

तो मैं यह भी कहना चाहता हूं कि यह जवाब नहीं है , आम तौर पर सामना की जाने वाली चुनौती से निपटने के कई तरीकों में से एक है। हालांकि मुझे लगता है कि हमारा तरीका सबसे अच्छा है।

सामग्री खुशी से sonassi.com से प्राप्त हुई


1
आप लोग कुछ भी नहीं अगर अविश्वसनीय रूप से रचनात्मक नहीं हैं।
फिल्माईए

3
चारों ओर बहुत अच्छा लेखन और ठोस सलाह।
कॉलिनम

मुझे मौजूदा फ़ाइलों में कॉपी करने या स्थानीय.xml का उपयोग करने के बजाय लेआउट xml का विस्तार करने के लिए आपका दृष्टिकोण पसंद है, यह बहुत बढ़िया है! शुरू में सभी टेम्प्लेट फ़ाइलों की प्रतिलिपि बनाने के बजाय, मुझे मैजिकटेलो के "कॉपी टेम्प्लेट" कमांड से प्यार है, जिसका उपयोग किसी अन्य विषय पर टेम्पलेट को आसानी से कॉपी करने के लिए किया जा सकता है, इसे सही फ़ोल्डर संरचना में रखा जा सकता है। वैकल्पिक रूप से, जब अंत में the3 विषय को साफ करते हैं, तो आप n98-magerun.phar की "dev: विषय: डुप्लिकेट्स" कमांड की जांच करना चाह सकते हैं, जो फ़ाइलों की एक सूची का उत्पादन करेगा जिसे बदला नहीं गया है।
जिम ओहलोरन

मुझे आश्चर्य है कि अगर कोई प्लगइन है जो default/defaultसीई इंस्टॉल के लिए कमबैक करता है। शायद दिए गए स्रोतों के साथ हैक करना मुश्किल नहीं है, बस जिज्ञासु (इस पर चबाना: कस्टम थीम और तीसरे पक्ष के विस्तार की रोशनी में
मैगनेटो

"...the same way that community is for you and local is for 3rd parties..."Magento तरीका यह दूसरी तरह के आसपास होने के लिए के रूप में यहां कहा गया है: magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/...
RichardBernards

7

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

लाभों में से एक यह है कि यह LESS (या अन्य) वर्कफ़्लो को सेटअप करने का अवसर देता है। इसके बारे में सोचो - जबकि हल्के रंग के विषयों के लिए रिक्त विषय एक अच्छी शुरुआत है, यह एक अंधेरे / काले विषय के अनुकूल होने के लिए इसे स्विच करने के लिए थोड़ा काम है। इन सबसे ऊपर, आपको विषय को शामिल करना होगाenterprise/default , अन्यथा आपके पास शुरू से ही एक टूटा हुआ ईई इंस्टॉल है।


आप बिलकुल सही कह रहे हैं
१३:३६
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.