테마-처음부터 시작


30

이란 무엇입니까 선호하는 초보의 방법 전체 사이트 빌드 에서, 스크래치는 ? 내 빌드는 일반적으로 완전히 모형화 된 HTML5 와이어 프레임 페이지에서 시작하며 여기에서 기능을 연결합니다.

그러나 저의 일부는 프로젝트의 말기 단계에서 대부분 Enterprise RMA, Customer My Account 섹션 등과 같이 연결해야 할 모든 기능 영역을 찾는 일을 시작한다고 생각합니다. 이것은 첫날부터 마 젠토 테마로 시작함으로써 피할 수 있습니다. 반대 의견은 CSS를 작성하고 기본 구조를 수정하는 데 동일한 시간이 걸릴 것이라고 말합니다 .

당신은 핵심 "공백"테마 에 구축 합니까? 이 빈 테마의 엔터프라이즈 버전이 있습니까? 가장 좋은 방법은 무엇입니까?

답변:


32

따라서 이것은 궁극적 인 격노를 유발하고 모든 Magento 개발자의 결정에 맞서지 만 – 우리는 주제에 대한 견고한 프로세스를 얻었습니다 .local.xml을 사용하지 않습니다 (나중에 자세히 설명).

우리는 항상 base/default(그리고 enterprise/defaultEE) 템플릿을 사용하지만 CSS는 제로입니다. 모든 디자인이 바닐라 마 젠토 매장의 구조적 레이아웃에 특별히 적합하지는 않지만 default테마를 시작점으로 사용하는 것이 좋습니다 . 템플릿을 작성하는 동안 필요에 따라 사용하지 않은 메소드 / 루프 / html 등을 제거 할 수 있습니다.

테마를 시작할 때

EE

이 확장 프로그램을 먼저 설치 하여 나중에 복사 한 테마 파일을 제거 할 때 일정 수준의 테마 폴백을 얻습니다.

패키지

먼저 패키지를 만들고 전체 base/default테마로 복사하는 것으로 시작합니다 . 예를 들어 (자신의 웹 사이트 인 경우 패키지라고 부릅니다 sonassi)

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

템플릿

궁극적 인 목표는 필요할 때마다 수정하는 각 파일을 복사하여 붙여 넣을 필요없이 테마에서 파일을 편집하는 것입니다.

그러나 파일을 편집 할 때마다 Magento Commerce 헤더를 제거하고 적절한 헤더 / 식별자를 추가하여 파일을 사용자 지정 템플릿으로 표시합니다.

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

이 헤더는 나중에 최종 템플릿 정리를 수행 할 때 사용됩니다. 디렉토리와 디렉토리 에서 재귀 diff를 수행하므로 변경되지 않은 것은 삭제하십시오.base/default/templatesonassi/default/template

이렇게하면 수정 된 파일 만 남고 전체 패키지가 최소 변경 파일로 줄어 듭니다.

레이아웃 파일

우리는 우리 자신의 표준 코어 모듈을 사용합니다 sonassi.core. 예, 우리는 항상 모듈 네임 스페이스에 고유 식별자를 접두어로 붙입니다. 다른 회사가 같은 이름을 선택한 곳 (예 : fishpig / wordpress 및 sonassi / wordpress)에서 충돌을 막습니다.


로컬이 아닌 레이아웃 방법론

<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;
    }

}

위의 두 클래스는 기능을 Magento에 추가하여 레이아웃 XML 파일을 덮어 쓸 수는 있지만 확장 할 수는 없습니다. 레이아웃 XML의 확장은 우리가 여전히 같은 파일 분리 유지 관리 할 수 있습니다로, 우리에게 중요하다 catalog.xml, cms.xml등 -하지만 블록 (삽입 / 복제 / 제거)를 조작하는 레이아웃 XML의 짧은 부분을 추가해야합니다.

local.xml방법은 하나 개의 번거로운 관리하기 어려운 파일로 덮어 변경 사항을 입력한다는 것입니다.

nolocal(. 예를 들어이 수정되는 것을 오히려 하나의 파일에 모든 변경 사항을 넣는 것보다, 적절한 파일 이름으로 파일에 넣어 방법론 수단 catalog.xml) - 단순히 새로운 파일을 생성하여 sonassi/default/layout/custom/catalog.xml- *로 수정 사항 만 .

다시 한 번 템플릿을 만든 후에 sonassi/default/layoutcustom디렉토리를 제외 하고 내용을 제거 할 수 있습니다 . 이 방법으로 템플릿과 마찬가지로 기본 템플릿을 기반으로 경량의 확장 템플릿이 있습니다.

스타일 시트

모두 삭제합니다. 우리는 그것들을 패키지의 CSS 디렉토리에 복사하지 않습니다. 우리는 JS에 복사 할 것이고, 그것이 시작입니다 - images그리고 CSS디렉토리는 처음부터 비어있을 것입니다.

현재 SASS를 사용함 scss에 따라 사전 처리 된 CSS를위한 또 다른 디렉토리 ( )가 있으며 기본 스타일 / 인쇄 CSS 파일로 출력됩니다.

템플릿 정리

앞에서 언급했듯이 템플릿 테마가 완성되면 이제 정리할 수 있습니다. 수정되지 않은 파일을 제거하고 최소한으로 줄입니다.

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?

그것은 당신을위한 것이 아닙니다 -제 3자를 community위한 것 local입니다. 대체에 대한 장애 복구, 최후의 수단, 최종 목적지입니다.

이러한 방식으로 XML을 구조화하면 Magento가 원래 디렉토리 및 파일 구조를 구성한 방식과 일관되게 유지됩니다. 또한 개발의 연속성을 위해 더 이해하기 쉽고 소화가 훨씬 쉽고 눈에 띄는 오버 헤드를 추가하지 않습니다.

마 젠토는 이상한 제품이며, 커뮤니티는 상식과 마 젠토 핵심 팀의 역할을 모방하여 자체 모범 사례를 발명했습니다. 따라서 공식적인 방법은 없습니다 (유니콘이 마 젠토 -1 문서와 함께 타기 전까지는 아닙니다) . 그러나 이것은 우리의 길입니다.

난이 아니라고 늘릴 것 그래서 , 일반적으로 직면 한 문제를 해결하기 위해 여러 가지 방법 중의 하나 대답. 비록 우리의 방법이 최선이라고 생각하고 싶습니다.

sonassi.com 에서 제공하는 컨텐츠


1
당신은 믿을 수 없을만큼 창의력이 없다면 아무것도 아닙니다.
philwinkle

3
매우 훌륭한 글쓰기와 확실한 조언.
ColinM

기존 파일을 복사하거나 local.xml을 사용하는 대신 레이아웃 xml을 확장하는 방법이 마음에 듭니다. 처음에는 모든 템플릿 파일을 복사하는 대신 Magicento의 "템플릿 복사"명령을 사용하여 템플릿을 다른 테마로 쉽게 복사하여 올바른 폴더 구조에 배치 할 수 있습니다. 또는 마지막에 3 개의 테마를 정리할 때 n98-magerun.phar의 "dev : theme : duplicates"명령을 확인하면 변경되지 않은 파일 목록이 생성됩니다.
Jim OHalloran

default/defaultCE 설치에 대체되는 플러그인이 있는지 궁금 합니다. 아마도 주어진 소스로 해킹하기가 어렵지 않을 것입니다. 궁금한
점이 있습니다 (

"...the same way that community is for you and local is for 3rd parties..."Magento 방식은 여기에 명시된 바와 같이 다른 방식
RichardBernards

7

엔터프라이즈를위한 빈 부트 스트랩 테마를 빌드하십시오. 즉, enterprise/default테마를 가져 와서 CSS를 정리하고 "모든 것을 클릭하여"기능의 스타일을 처리했는지 확인해야합니다. 제품 표보기 부두를 잊지 마십시오.

이점 중 하나는 이것이 LESS (또는 다른) 워크 플로우를 설정할 수있는 기회를 제공한다는 것입니다. 빈 테마는 밝은 색상의 테마를 시작하기에 좋은 시작이지만 어두운 / 검은 색 테마에 맞게 바꾸려면 약간의 작업이 필요합니다. 무엇보다도 테마를 통합 해야 합니다 enterprise/default. 그렇지 않으면 처음부터 손상된 EE 설치가 있습니다.


당신은 전적으로 옳습니다
philwinkle
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.