Magento의 빈 HTML에서 테마를 디자인하는 방법

Question

Magento의 빈 HTML에서 테마를 만들고 싶습니다.기지 테마를 복사하고 내용을 내 사용자 정의 HTML로 변경해야합니다 ...

Page.xml

에 사용자 정의 CSS 및 JS를 추가합니다.

<?xml version="1.0"?>
<!--
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2015 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
-->
<layout version="0.1.0">
<!--
Default layout, loads most of the pages
-->

    <default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

            <block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>varien/menu.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>

                <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
            </block>

            <block type="core/text_list" name="after_body_start" as="after_body_start" translate="label">
                <label>Page Top</label>
            </block>

            <block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />

            <block type="page/html_header" name="header" as="header">
                <block type="page/template_links" name="top.links" as="topLinks"/>
                <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
                <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
                    <label>Navigation Bar</label>
                    <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
                </block>
                <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
                    <label>Page Header</label>
                    <action method="setElementClass"><value>top-container</value></action>
                </block>
                <block type="page/html_welcome" name="welcome" as="welcome"/>
            </block>

            <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

            <block type="core/text_list" name="left" as="left" translate="label">
                <label>Left Column</label>
            </block>

            <block type="core/messages" name="global_messages" as="global_messages"/>
            <block type="core/messages" name="messages" as="messages"/>

            <block type="core/text_list" name="content" as="content" translate="label">
                <label>Main Content Area</label>
            </block>

            <block type="core/text_list" name="right" as="right" translate="label">
                <label>Right Column</label>
            </block>

            <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
                <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
                    <label>Page Footer</label>
                    <action method="setElementClass"><value>bottom-container</value></action>
                </block>
                <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
                <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
            </block>

            <block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
                <label>Page Bottom</label>
                <block type="page/html_cookieNotice" name="global_cookie_notice" as ="global_cookie_notice" template="page/html/cookienotice.phtml" before="-" />
            </block>
        </block>

        <block type="core/profiler" output="toHtml" name="core_profiler"/>
    </default>

    <print translate="label" module="page">
        <label>All Pages (Print Version)</label>
        <!-- Mage_Page -->
        <block type="page/html" name="root" output="toHtml" template="page/print.phtml">

            <block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>


                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
                <!--- custom css added here ------------------------------->
                <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name><params/></action>
                <action method="addItem"><type>skin_css</type><name>css/etalage.css</name><params/></action>
                <action method="addItem"><type>skin_css</type><name>css/style.css</name><params/></action>
                <action method="addJs"><script>gretong/jquery-1.11.1.min.js</script></action>
                <action method="addJs"><script>gretong/noConflict.js</script></action>
                <action method="addJs"><script>gretong/jquery-ui.min.js</script></action>
                <action method="addJs"><script>gretong/jquery.jscrollpane.min.js</script></action>
                <action method="addJs"><script>gretong/jquery.etalage.min.js</script></action>
                <!--- custom css added here ------------------------------->
                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

            </block>

            <block type="core/text_list" name="content" as="content" translate="label">
                <label>Main Content Area</label>
            </block>

        </block>
    </print>

     <!-- Custom page layout handles -->
    <page_empty translate="label">
        <label>All Empty Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_empty>

    <page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_one_column>

    <page_two_columns_left translate="label">
        <label>All Two-Column Layout Pages (Left Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_left>

    <page_two_columns_right translate="label">
        <label>All Two-Column Layout Pages (Right Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_right>

    <page_three_columns translate="label">
        <label>All Three-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_three_columns>
</layout>

.

후에 사용자 정의 CSS를 추가했습니다.

 <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

.

이 블록에서는 코드를 추가 할 수 있습니다.

에 언급 된 CSS와 JS를 볼 수 있습니다.

<block type="page/html_head" name="head" as="head">

.

아무것도 오지 않습니다 ... 처음부터 주제를 만들기위한 더 나은 가이드 라인이 필요합니다 .... 그리고 기본 테마를 복사하고 내 테마로 이름을 바꾸고 변경 사항을 변경해야합니다. Magento에서 테마를 만들 수있는 좋은 방법입니다 .....

Answer 1

그리고 기본 테마를 복사하고 내 테마로 이름을 바꾸어야합니다. 변경 사항은 마그네토에서 테마를 만드는 좋은 방법입니다 .....

아니오, Magento는 대체 시스템을 가지고 있습니다. 은 변경할 파일 만 복사합니다.나는 Designer가 아니라 Module Developer가 아니기 때문에 이것을 도울 수 없습니다.

읽었습니까? 마젠토 디자이너 가이드? http://info2.magento.com/rs/magentoenterprise/images/magentodesignguide.pdf.

(처음부터 테마= 51 페이지)

해피 해킹과 자신의 테마를 개발하는 행운을 빌어 요!