TL: DR
Bạn có xây dựng bằng cách sử dụng luma bản địa hoặc chủ đề trống? Hay bất cứ điều gì khác?
Điều này tùy thuộc vào bạn, khai báo chủ đề gốc là tùy chọn. Nếu bạn không khai báo cha mẹ, bạn vẫn sẽ dự phòng các mô-đun (ví dụ: Magento_Catalog) cung cấp các tệp XML và tệp mẫu nhưng không có kiểu dáng.
Bạn có sử dụng bất kỳ tiện ích mở rộng nào để giúp bạn phát triển chủ đề của mình không?
Vì tôi thích làm việc với SCSS và GULP hơn nên giờ tôi sử dụng Frontools và chủ đề trống SCSS . Nó loại bỏ rất nhiều căng thẳng khi xử lý dòng chảy Grunt / LESS mặc định.
Những bước nào bạn làm theo khi phát triển một chủ đề từ đầu?
- Khai báo chủ đề
- Xóa CSS chủ đề gốc (nếu cần)
- Thêm CSS / LESS / SCSS của riêng bạn
Ý kiến cá nhân của tôi là tốt nhất là tạo ra 'chủ đề trống' của riêng bạn từ đầu vì bạn có thể điều chỉnh nó thành chính xác những gì bạn cần.
Đây là cách tôi sẽ tạo một chủ đề từ đầu, tôi đã sử dụng NewStore / mặc định làm tên nhà cung cấp và chủ đề của mình.
Bây giờ để có câu trả lời chi tiết hơn ...
Tạo chủ đề (theo tài liệu chính thức)
Tạo chủ đề theo tài liệu chính thức
Tùy chọn khai báo cha mẹ
Trong app/design/frontend/NewStore/default/theme.xmlbạn có lựa chọn khai báo chủ đề gốc hay không, ví dụ này tôi đã bỏ dòng 3 ( <parent>Vendor/theme</parent>) để không có chủ đề gốc . Điều này có nghĩa là tất cả các tệp mẫu / bố cục sẽ đến từ chính các mô-đun chứ không phải Trống hoặc Luma và sẽ không có kiểu dáng chủ đề vì điều này được thêm vào trong chủ đề trống.
Chủ đề của tôi trông như thế này:
<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>
Xóa kiểu dáng (nếu bạn đặt chủ đề gốc) và thêm CSS của riêng bạn
Nếu bạn đặt trống hoặc Luma làm cha mẹ, bạn sẽ cần ngăn các tệp CSS tải. Để làm điều này, hãy tạo app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlvà thêm XML sau:
<?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>
Điều này loại bỏ styles-m.css, styles-l.cssvà print.cssthêm bởi các chủ đề trống. Nó cũng thêm style.css làm cơ sở cho CSS của riêng bạn.
Nếu bạn không chỉ định cha mẹ, bạn có thể xóa 3 <remove />thẻ trong mã ở trên.
Thêm CSS của riêng bạn
Bây giờ bạn có thể tạo kiểu cho chủ đề của mình, tuy nhiên, làm ơn, tôi là người hâm mộ của Sass chứ không phải LESS nên tôi đã thêm tệp này - app/design/frontend/NewStore/default/web/css/styles.scss
Tôi đã thay đổi màu nền ở đây chỉ để chứng minh điều này hoạt động, lý tưởng nhất là bạn chỉ sử dụng tệp này để nhập các tệp Sass / Less khác.
Kết quả
Kết quả của những gì tôi vừa thực hiện là một chủ đề không có kiểu dáng (ngoài nền màu xanh lá cây tuyệt đẹp của tôi) cho phép bạn tạo kiểu cho chủ đề của mình mà không cần làm việc với kiểu dáng của Magento (đôi khi khó làm việc).
Lời khuyên
Nếu bạn thích làm việc với SCSS và không có thời gian để tạo chủ đề từ đầu, tôi khuyên bạn nên sử dụng Frontools và chủ đề trống SCSS của cả Ứng dụng Snowdog .
Tôi thấy khía cạnh khó chịu nhất khi làm việc với mã mặt trước của Magento là cách tạo kiểu cụ thể của chúng, để tránh điều này tôi khuyên bạn nên sử dụng quy ước đặt tên BEM khi viết kiểu dáng của riêng bạn.
Các bình luận hữu ích cũng là chìa khóa, nếu một nhà phát triển đã từng làm việc với Luma / Blank làm việc với một chủ đề được xây dựng từ đầu thì có lẽ họ sẽ thấy mọi thứ hoạt động hoàn toàn khác với những gì họ mong đợi.