TL: DR
คุณสร้างโดยใช้ luma ดั้งเดิมหรือธีมว่างเปล่า? หรือสิ่งอื่นใด
สิ่งนี้ขึ้นอยู่กับคุณโดยการประกาศธีมหลักเป็นทางเลือก หากคุณไม่ได้ประกาศผู้ปกครองคุณจะยังคงย้อนกลับไปยังโมดูล (เช่น Magento_Catalog) ซึ่งมีไฟล์ XML และแม่แบบ แต่ไม่มีการออกแบบ
คุณใช้ส่วนขยายใด ๆ เพื่อช่วยพัฒนาธีมของคุณหรือไม่?
ขณะที่ผมชอบทำงานกับ SCSS และอึกตอนนี้ผมใช้Frontoolsและว่างเปล่า SCSS ธีม มันกำจัดความเครียดจำนวนมากในการจัดการกับการเริ่มต้น Grunt / LESS worflow
คุณทำตามขั้นตอนใดเมื่อพัฒนาธีมตั้งแต่เริ่มต้น
- ประกาศธีม
- ลบ CSS ธีมหลัก (หากจำเป็น)
- เพิ่ม CSS / LESS / SCSS ของคุณเอง
ความคิดเห็นส่วนตัวของฉันดีที่สุดคือสร้างธีมว่างเปล่าของคุณเองตั้งแต่เริ่มต้นเพราะคุณสามารถปรับแต่งสิ่งนี้ให้เป็นสิ่งที่คุณต้องการ
นี่คือวิธีที่ฉันจะสร้างธีมตั้งแต่เริ่มต้นฉันใช้ NewStore / default เป็นผู้จำหน่ายและชื่อธีมของฉัน
ตอนนี้สำหรับคำตอบที่ละเอียดยิ่งขึ้น ...
สร้างชุดรูปแบบ (ตามเอกสารอย่างเป็นทางการ)
สร้างชุดรูปแบบตามเอกสารอย่างเป็นทางการ
เลือกที่จะประกาศผู้ปกครอง
ภายในapp/design/frontend/NewStore/default/theme.xmlคุณมีทางเลือกของการประกาศรูปแบบการปกครองหรือไม่เช่นนี้ผมได้ปล่อยออกมาจากเส้น 3 ( <parent>Vendor/theme</parent>) เพื่อให้ไม่มีธีมปกครอง ซึ่งหมายความว่าไฟล์เทมเพลต / เลย์เอาต์ทั้งหมดจะมาจากโมดูลเองและไม่ว่างเปล่าหรือ Luma และจะไม่มีการกำหนดสไตล์ของธีมเนื่องจากจะเพิ่มในธีมเปล่า
theme.xml ของฉันมีลักษณะเช่นนี้:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>NewStore default</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
ลบสไตล์ (ถ้าคุณตั้งค่าธีมหลัก) และเพิ่ม CSS ของคุณเอง
หากคุณตั้งค่าว่างหรือ Luma เป็นพาเรนต์คุณจะต้องป้องกันไม่ให้ไฟล์ CSS โหลด เมื่อต้องการทำสิ่งนี้ให้สร้างapp/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlและเพิ่ม XML ต่อไปนี้:
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove blank/luma theme styling if you declared a parent -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" />
<remove src="css/print.css" />
<!-- Add your own CSS files -->
<css src="css/styles.css" />
</head>
</page>
ลบนี้styles-m.css, styles-l.cssและprint.cssเพิ่มโดยธีมว่างเปล่า นอกจากนี้ยังเพิ่ม styles.css เป็นฐานสำหรับ CSS ของคุณเอง
หากคุณไม่ได้ระบุพาเรนต์คุณสามารถลบ 3 <remove />แท็กในรหัสด้านบน
เพิ่ม CSS ของคุณเอง
ตอนนี้คุณสามารถตกแต่งธีมของคุณได้ตามที่คุณต้องการฉันเป็นแฟนของ Sass มากกว่า LESS ดังนั้นฉันจึงเพิ่มไฟล์นี้ - app/design/frontend/NewStore/default/web/css/styles.scss
ฉันเปลี่ยนสีพื้นหลังที่นี่เพียงเพื่อพิสูจน์ผลงานนี้คุณควรใช้ไฟล์นี้เพื่อนำเข้าไฟล์ Sass / Less อื่น ๆ เท่านั้น
ผล
ผลที่ได้จากสิ่งที่ฉันเพิ่งทำคือชุดรูปแบบที่ไม่มีสไตล์ (นอกเหนือจากพื้นหลังสีเขียวที่สวยงามของฉัน) ทำให้คุณสามารถจัดแต่งชุดรูปแบบของคุณโดยไม่ต้องทำงานกับสไตล์ของวีโอไอพี
เคล็ดลับ
หากคุณชอบที่จะทำงานร่วมกับ SCSS และไม่ได้มีเวลาในการสร้างรูปแบบตั้งแต่เริ่มต้นผมขอแนะนำให้ใช้Frontoolsและธีม SCSS ว่างเปล่าทั้งสองโดยSnowdog ปพลิเคชัน
ฉันพบว่าสิ่งที่น่าผิดหวังที่สุดในการทำงานกับโค้ดส่วนหน้าของ Magento คือความเป็นสไตล์ที่เฉพาะเจาะจงของพวกเขาเพื่อช่วยหลีกเลี่ยงสิ่งนี้ฉันขอแนะนำให้ใช้รูปแบบการตั้งชื่อ BEMเมื่อเขียนสไตล์ของคุณเอง
ความคิดเห็นที่เป็นประโยชน์ก็เป็นกุญแจสำคัญเช่นกันถ้า dev เคยทำงานกับ Luma / Blank ทำงานกับธีมที่สร้างขึ้นตั้งแต่เริ่มต้นพวกเขาอาจพบว่าสิ่งต่างๆ