Mereka untuk Magento 2 - Mulai dari awal

27

Beberapa dari Anda mungkin membaca topik itu tentang tema dari awal untuk Magento 1: Tema - mulai dari awal

Saya bertanya-tanya, apa praktik terbaik untuk mengembangkan tema dari awal untuk Magento 2?

  • Apakah Anda membangun menggunakan asli lumaatau blanktema? Atau sesuatu yang lain ?
  • Apakah Anda menggunakan ekstensi untuk membantu Anda mengembangkan tema Anda?
  • Langkah mana yang Anda ikuti saat mengembangkan tema dari awal?
magento2 theme template magento-2.0 design Raphael di Digital Pianism
sumber
Saya memberikan beberapa tautan dalam jawaban saya, silakan kunjungi, Anda akan tahu tentang arsitektur frontend dan pengembangan Magento 2.0.
Asheem Patro
Ikuti langkah-langkah oleh Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… untuk membuat tema untuk frontend.
Rishabh Rk Rai

Jawaban:

45

TL: DR

Apakah Anda membangun menggunakan luma asli atau tema kosong? Atau sesuatu yang lain ?

Ini terserah Anda, menyatakan tema induk adalah opsional. Jika Anda tidak mendeklarasikan orang tua, Anda masih akan mundur ke modul (mis. Magento_Catalog) yang menyediakan file XML dan templat tetapi tidak ada gaya.

Apakah Anda menggunakan ekstensi untuk membantu Anda mengembangkan tema Anda?

Karena saya lebih suka bekerja dengan SCSS dan GULP saya sekarang menggunakan Frontools dan tema kosong SCSS . Ini menghilangkan banyak tekanan berurusan dengan default Grunt / LESS worflow.

Langkah mana yang Anda ikuti saat mengembangkan tema dari awal?

  1. Nyatakan temanya
  2. Hapus CSS tema induk (jika diperlukan)
  3. Tambahkan CSS / KURANG / SCSS Anda sendiri

Pendapat pribadi saya adalah yang terbaik untuk membuat 'tema kosong' Anda sendiri dari awal karena Anda dapat menyesuaikan ini menjadi apa yang Anda butuhkan.

Ini adalah bagaimana saya akan membuat tema dari awal, saya telah menggunakan NewStore / default sebagai vendor dan nama tema saya.

Sekarang untuk jawaban yang lebih rinci ...

Buat tema (sesuai dokumen resmi)

Buat tema sesuai dokumen resmi

Secara opsional mendeklarasikan orang tua

Di dalam app/design/frontend/NewStore/default/theme.xmlAnda memiliki pilihan untuk mendeklarasikan tema induk atau tidak, untuk contoh ini saya telah meninggalkan baris 3 ( <parent>Vendor/theme</parent>) sehingga tidak ada tema induk . Ini berarti semua file templat / tata letak akan berasal dari modul itu sendiri dan bukan Blank atau Luma, dan tidak akan ada styling tema karena ini ditambahkan dalam tema kosong.

Theme.xml saya terlihat seperti ini:

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

Hapus styling (jika Anda menetapkan tema induk) dan tambahkan CSS Anda sendiri

Jika Anda mengosongkan atau Luma sebagai orangtua, Anda harus mencegah pemuatan file CSS. Untuk melakukan ini, buat app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmldan tambahkan XML berikut:

<?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>

Ini menghapus styles-m.css, styles-l.cssdan print.cssditambahkan oleh tema kosong. Itu juga menambahkan styles.css sebagai basis untuk CSS Anda sendiri.

Jika Anda tidak menentukan induk, Anda dapat menghapus 3 <remove />tag dalam kode di atas.

Tambahkan CSS Anda sendiri

Anda sekarang dapat menata tema Anda sesuka Anda, saya penggemar Sass daripada KURANG jadi saya menambahkan file ini - app/design/frontend/NewStore/default/web/css/styles.scss

Saya mengubah warna latar belakang di sini hanya untuk membuktikan ini berfungsi, idealnya Anda hanya akan menggunakan file ini untuk mengimpor file Sass / Less lainnya.

Hasil

Hasil dari apa yang baru saja saya lakukan adalah tema tanpa gaya (terlepas dari latar belakang hijau saya yang indah) yang memungkinkan Anda untuk menata tema Anda tanpa bekerja dengan gaya Magento (terkadang sulit untuk dikerjakan).

masukkan deskripsi gambar di sini

Kiat

  • Jika Anda lebih suka bekerja dengan SCSS dan tidak punya waktu untuk membuat tema dari awal, saya sarankan menggunakan Frontools dan tema kosong SCSS baik oleh Snowdog Apps .

  • Saya menemukan aspek yang paling membuat frustrasi untuk bekerja dengan kode front-end Magento adalah seberapa spesifik gaya mereka, untuk membantu menghindari hal ini, saya akan merekomendasikan menggunakan konvensi penamaan BEM saat menulis gaya Anda sendiri.

  • Juga komentar yang bermanfaat adalah kuncinya, jika seorang dev yang dulu bekerja dengan Luma / Blank bekerja pada sebuah tema yang dibangun dari awal, mereka mungkin akan menemukan hal-hal bekerja sangat berbeda dengan apa yang mereka harapkan.

Ben Crook
sumber
Saya telah membuat tema kosong saya sendiri menggunakan instruksi Anda, tanpa tema induk yang ditentukan dalam theme.xml. Namun, Masih ada segala macam gaya terlihat di ujung depan. Instalasi Magento dalam developermode dan semua cache telah dihapus. Saya tidak tahu dari mana semua gaya ini berasal - apakah Anda punya ide?
fritzmg
Apakah Anda memiliki ekstensi / plugin yang diinstal? Bisa juga Varnish jika sudah terpasang, untuk mengesampingkan itu menambahkan tanda tanya dan string acak setelah URL, seperti?=123
Ben Crook
Ya saya telah mengesampingkan Varnish (atau serupa). Tidak ada ekstensi atau plugin yang dipasang.
fritzmg
Apakah ini penataan tema penuh atau hanya sebagian saja? Sulit bagi saya untuk mengatakan tanpa melihat situs dan basis kode. Mungkin mengajukan pertanyaan baru dan memposting beberapa detail di sana? Jika Anda memberi tag saya, saya akan melihat apakah saya dapat menyelesaikannya.
Ben Crook
Sejauh ini yang saya bisa lihat adalah tema lengkap. Ditambah file CSS yang disertakan dari tema saya sendiri. Ya, mungkin lebih baik membuat pertanyaan baru untuk ini :)
fritzmg
8

Ada banyak tutorial untuk memulai tema di Magento 2.0. Saya menyediakan beberapa tautan video dan beberapa tautan normal di mana Anda bisa mendapatkan pengetahuan yang bagus tentang pengembangan tema di magento 2.0. klik di sini untuk video

ambil referensi dari tautan ini juga

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

Dari tautan ini Anda akan belajar tentang arsitektur antarmuka Magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

periksa juga kedua tautan ini

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

Asheem Patro
sumber
5

Saya mewarisi dari kosong tetapi dengan cepat bergerak menuju mencoba membuat tema dasar yang lebih ringan yang memiliki struktur CSS jauh lebih kompleks.

Perlu dicatat bahwa, pada tahun 2015, Magento telah keluar dan mengatakan bahwa mereka tidak merekomendasikan mewarisi dari luma karena mereka berhak untuk membuat perubahan tanpa pemberitahuan sebelumnya untuk tujuan pemasaran dan demo mereka sendiri. Mereka kemudian merevisi pernyataan itu dengan mengatakan itu adalah tujuan mereka untuk memungkinkan pewarisan .

Lawrence
sumber
3

Cara terbaik untuk mulai mengembangkan tema adalah mulai dengan mewarisi dari salah satu lumaatau blank. Alasan untuk ini adalah karena mereka dibangun untuk menjadi responsif (yaitu ramah multi-resolusi). Ini juga mengurangi jumlah pekerjaan yang harus Anda lakukan dalam membuat file templat yang berbeda dan definisi JS / CSS. Yang harus Anda lakukan hanyalah mengganti hanya bagian yang ingin Anda sesuaikan dengan milik Anda sendiri. Lihat tautan di bawah untuk petunjuk berbeda tentang cara mengembangkan tema.

Tautan Dokumentasi Magento:

James Calcaben
sumber
File template sekarang berasal dari modul dan bukan blank / luma, sehingga Anda dapat mem-bypassnya secara efektif jika Anda tidak memerlukan styling / perubahan. Sebagai contoh jika Anda melihat aplikasi / desain / frontend / Magento / kosong / Magento_Catalog yang dilakukannya hanyalah memindahkan satu elemen dan menambahkan beberapa gaya, templat berasal dari aplikasi / kode / Magento / Katalog / tampilan / tampilan / templat dan app / code / Magento / Catalog / view / base / templates
Ben Crook