Apakah Shopify Cecair? Ikhtisar Pantas Asas

lebih 4.4 juta laman web e-dagang dibina menggunakan Shopify platform. Ia adalah platform e-Dagang semua-dalam-satu yang menggegarkan web sejak ia bermula pada tahun 2006. Pedagang memilih platform ini untuk menjadi hos kedai dalam talian mereka atas pelbagai sebab, daripada persediaan pembayaran yang mudah kepada alat pemasaran terbina dalam dan banyak lagi selainnya. 

Tetapi salah satu aspek kritikal Shopify ialah pembina tapak intuitifnya dengan beribu-ribu tema dan Shopify integrasi aplikasi untuk dipilih. 

Walau bagaimanapun, semasa pembina tanpa kod membolehkan anda membuat tapak web yang menakjubkan dan unik, terdapat beberapa batasan. Sebagai contoh, apabila anda mula membina kedai dalam talian anda, anda mesti memilih tema yang mentakrifkan susunan dan tahap kawalan yang anda perolehi ke atas kandungan anda. Walaupun anda memilih tema kosong, iaitu tema tanpa kandungan -masih terdapat seni bina kod asas yang mentakrifkan cara kandungan disusun.

Tetapi ada berita baik. Jika anda ingin mencipta sendiri Shopify templat untuk tapak anda atau orang lain, ada Shopify Cecair

Berminat? Sertai saya sambil saya berusaha untuk menjawab soalan: Apakah itu Shopify Cecair? Jom terjun!

Apakah Shopify Cecair?

Menariknya, Shopify Cecair telah wujud sejak itu Shopifypermulaannya. Bila ShopifyPencipta pertama kali mereka bentuk platform, mereka membina projek sumber terbuka untuk berfungsi sebagai bahasa templat untuk semua Shopify laman web template. 

Bagi yang belum tahu, 'bahasa pengaturcaraan sumber terbuka' merujuk kepada kod sumber perisian yang tersedia secara percuma kepada orang ramai, membenarkan sesiapa sahaja untuk menggunakan, mengubah suai dan mengedarkan kod untuk sebarang tujuan. 

Dicipta menggunakan Ruby, Shopify Cecair pada asasnya berfungsi sebagai pemegang tempat supaya anda boleh memasukkan data ke dalam pratakrif format (lebih lanjut mengenai ini di bawah).

Jadi, bagaimana ini berfungsi?

Untuk memahami perkara ini, anda perlu tahu bahawa tapak web biasanya statik atau dinamik. Kedai statik dikodkan keras untuk menunjukkan kandungan dengan tepat seperti yang ditulis, contohnya, dalam HTML. Sebaliknya, tapak web dinamik boleh memaparkan kandungan yang berbeza bergantung pada cara pengguna berinteraksi dengannya. 

Sekarang katakan anda mempunyai tapak web statik; rangka asas tapak adalah dipratetap, tetapi anda ingin memaparkan kandungan dinamik. Di sinilah menulis Shopify Cecair ke dalam kod HTML anda berguna. Ini meminjamkan dirinya sebagai pemegang tempat untuk kandungan dinamik. 

Shopify Cecair bertindak sebagai perantara antara kedai anda dan Shopifypelayan, membolehkan Cecair untuk menarik data daripada Shopifypelayan dan hantar ke kedai anda. Cecair boleh meminta tiga jenis data utama:

1. Objek
2. Tags
3. Penapis

Di bawah, kami akan meneroka setiap jenis data secara bergilir-gilir:

Objek Cecair

Objek adalah serupa dengan perpustakaan fungsi atau kandungan; dalam setiap objek, terdapat pelbagai sifat. 

Jika anda tidak biasa dengan konsep objek, berikut ialah gambaran ringkas:

Objek adalah konsep asas dalam pengaturcaraan. Objek terdiri daripada dua komponen: 

1. Sifat yang menentukan keadaan objek
2. Fungsi yang menentukan tingkah laku objek

Untuk menggambarkan dengan lebih baik cara ini berfungsi, kami akan menggunakan contoh yang tidak berkaitan dengan pengekodan. Sebagai contoh, kereta. Di sini, kereta, iaitu, objek, boleh mempunyai fungsi seperti "mempercepat," "berpusing," dan "brek." Sebaliknya, harta itu boleh menjadi "tingkap", "pintu" kereta, dsb. 

Ringkasnya, objek adalah sesuatu yang penting konsep dalam pengekodan kerana ia membantu menyusun sistem yang kompleks menjadi bahagian yang lebih mudah diurus.

Sebagai contoh, katakan anda membuat tersuai Shopify tema dan ingin memaparkan a tajuk blog dalam templat anda. Anda boleh menggunakan Cecair untuk membawanya masukformation daripada Shopifypelayan dan memaparkannya di suatu tempat pada halaman. Dalam contoh ini, ini ialah sekeping kod Liquid yang anda akan gunakan untuk mencapai ini:

{{Blog.title}} 

Mari pecahkan ini:

• Di sini, 'blog' ialah objek. 
• Harta yang kita inginkan dalam ini perpustakaan ditandakan dengan 'tajuk'. 
• . '.' memberitahu Cecair bagaimana kedua-dua bit data ini berkaitan. 
• Kurungan berganda ialah sintaks Cecair yang mentakrifkan {{kandungan/keluaran yang anda inginkan}} yang anda inginkan daripada Shopify pelayan. 

Tag Cecair

Apabila menggunakan Shopify Cecair, tag menambah logik kepada kandungan yang kami minta daripada Shopify pelayan untuk membantu menentukan masa kandungan harus kelihatan pada halaman. Sebagai contoh, katakan kami ingin memaparkan grafik tertentu pada catatan blog perayaan kami. Iaitu, kami mahu grafik ini hanya muncul apabila syarat tertentu dipenuhi. 

Inilah yang mungkin kelihatan seperti ini:

{% if blog.title == 'celebration' %}

**HTML imej**

{% tamat jika %}

Ini mungkin kelihatan rumit, tetapi jika kita membahagikannya, ia agak mudah untuk difahami:

• Tag menggunakan sintaks yang sedikit berbeza daripada objek yang kelihatan seperti ini  {%…%}.
• Tag pertama {% if blog.title == 'celebration' %} memberitahu Cecair apa syarat yang perlu dipenuhi sebelum meminta kandungan daripada pelayan.
• Syarat yang kami minta ditakrifkan oleh a pernyataan 'jika'. Jika anda biasa dengan pengekodan, anda akan tahu bahawa pernyataan 'jika' berfungsi dengan membandingkan dua atau lebih keping data antara satu sama lain. Jika ia sepadan, ia akan beralih ke baris seterusnya dalam kod kami. di sini,  jika blog.title == 'perayaan,' kami meminta Liquid menyemak sama ada tajuk blog kami mengandungi perkataan 'perayaan.' Jika ia berlaku, ia akan turun ke baris seterusnya kod kami. Jika tidak, Cecair tidak akan mengembalikan sebarang kandungan.
• Dalam contoh ini, jika kita mempunyai tajuk blog yang mengandungi perkataan 'perayaan,' Liquid akan menarik dan memaparkan HTML imej kita.
• Sebaik sahaja ia melakukan ini, ia pergi ke baris berikut {% tamat jika %}, yang menamatkan program kami.

Ini hanyalah satu contoh perkara yang boleh anda lakukan dengan teg. Shopify Cecair mempunyai tag kepada:

• Mengawal apabila kod dilaksanakan
• Lelaran/lelaran (ulang) blok kod
• paparan markup HTML tertentu
• Buat pembolehubah baharu.

Penapis Cecair

Penapis ialah kepingan kod yang mengubah atau mengubah suai output objek. Contohnya, mereka boleh menukar warna, fon, saiz atau rupa elemen tapak web. 

Tetapi, serta mengubah aspek yang boleh dilihat objek, mereka boleh melaksanakan fungsi pada objek. Sebagai contoh, jika anda ingin menunjukkan tajuk blog anda dalam huruf besar, penapis boleh membantu anda mencapai ini tanpa menukar semua tajuk blog anda secara manual:

{{ blog.title | uppercase }}

• Sintaks untuk penapis ialah {{…}}.
• Di sini, harta objek yang kami cari ialah 'tajuk blog'.
• Penapis yang kami gunakan ialah huruf besar.
• . , memisahkan input dan output kod kami.

Sekarang, apabila pengguna melihat tajuk blog kita, ia akan muncul dalam huruf besar.

Kebaikan Shopify Cecair

Katakan anda seorang pereka bentuk tapak atau pembangun. Dalam kes itu, salah satu faedah yang paling ketara Shopify Cecair ialah anda tidak memerlukan data kedai (iaitu, dalamformattentang kedai) untuk membuat atau mengubah suai tapak web. Ini kerana apabila pengguna pertama kali membuat a Shopify kedai, semua dalamformation disimpan pada Shopify pelayan, bermakna anda boleh menggunakan Cecair untuk mendapatkan semula data yang anda perlukan. 

Walau bagaimanapun, jika anda bukan pembangun web, sebaliknya anda hanya pemilik kedai yang ingin merapikan kedai anda, terdapat faedah untuk anda juga:

• Mudah dipelajari dan digunakan: Cecair mempunyai sintaks yang mudah dan mudah difahami, menjadikannya boleh diakses oleh pembangun dan bukan pembangun.
• Kandungan dinamik: Cecair membolehkan penciptaan kandungan dinamik
• Boleh disesuaikan: Dengan Cecair, anda boleh mencipta templat dan tema tersuai, memberikan anda kawalan sepenuhnya ke atas rupa dan rasa kedai eCommerce anda.
• Prestasi yang bertambah baik: Templat cecair disusun dan dicache, bertambah baik prestasi dan kelajuan laman web berbanding dengan enjin templat lain.
• Komuniti besar: Shopify mempunyai komuniti pengguna yang besar, menyediakan akses kepada pelbagai pengetahuan dan sokongan, menjadikan pencarian penyelesaian kepada masalah biasa berkaitan Cecair lebih mudah.

Keperluan Jawatan

Jadi apa yang anda perlukan untuk mula menggunakan Shopify Cecair?

Sekiranya anda sudah mempunyai Shopify menyimpan, Shopify Cecair akan tersedia untuk anda gunakan secara percuma. Kami akan membincangkan bagaimana anda boleh mencari Cecair di bawah. Tetapi apa yang anda perlu tahu buat masa ini ialah setiap tapak yang dibuat pada Shopify dibina dengan Cecair, jadi anda boleh mula mengedit kod ini secara manual sebaik sahaja anda membuat tapak.

Walau bagaimanapun, jika anda tidak mempunyai a Shopify kedai, anda perlu membuatnya untuk mula bermain-main dengan Cecair. 

1. Pertama, pergi ke Shopify and pilih rancangan. Isikan butiran anda dan buat akaun anda.
2. Dari anda Shopify admin, klik pada tema. Shopify secara automatik menyediakan tema lalai. Anda boleh meninggalkan ini seadanya atau memilih tema lain untuk bermula.
3. Shopify mempunyai senarai semak yang boleh anda lalui untuk melengkapkan kedai anda. Anda perlu melakukan semua asas, seperti menambah halaman produk, mereka bentuk etalase anda, dsb.

Memandangkan anda mempunyai rangka asas kedai dalam talian anda, anda boleh menarik data ini daripada Shopify pelayan dan menyesuaikannya menggunakan Cecair (lebih lanjut mengenai ini di bawah). 

Walaupun anda tidak memerlukan sebarang pengalaman pengekodan untuk mula menggunakan Cecair, kebiasaan dengan prinsip pengekodan asas akan memudahkan perjalanan anda. Tetapi untuk sebahagian besar, anda boleh mendapatkan dokumentasi bantuan diri yang luas dan tutorial tentang Shopify portal pembangun. Di sini anda akan menemui keseluruhan bahagian khusus untuknya Asas Cecair. 

Anda dinasihatkan supaya anda meluangkan sedikit masa melihat panduan ini sebelum anda mula. Walaupun Cecair ialah alat penyesuaian yang berkuasa, ia juga berpotensi untuk memecahkan tapak anda jika anda tidak tahu apa yang anda lakukan!

Bermula Dengan Shopify Cecair

Jadi, menggunakan apa yang telah kita pelajari setakat ini, mari kita lihat bagaimana kita boleh mengeditnya Shopify tema menggunakan Cecair. 

Untuk mengakses Cecair, ikuti langkah berikut:

1. Salin tema anda: Untuk mengelakkan sebarang kemalangan besar, ia wise untuk membuat salinan tema anda sebelum memulakan. Dengan cara itu, jika anda membuat sebarang kesilapan, asal anda Shopify tema kekal utuh. Untuk melakukan ini, navigasi ke bahagian tema di sebelah kanan anda Shopify papan pemuka. Pilih tema yang ingin anda edit dan klik tindakan untuk melihat menu lungsur. Sekarang, pilih pendua.
2. Namakan semula pendua anda: Apabila anda menduplikasi tema, anda akan melihatnya muncul dalam senarai tema anda. Anda boleh menamakan semula salinan anda supaya anda tidak mengelirukan salinan asal dan salinan. Cuma klik butang tindakan sekali lagi dan tekan nama semula pada menu lungsur. 
3. Memasuki editor kod: Sekarang, pilih tindakan pada pendua anda sekali lagi dan pilih edit kod. Anda akan diarahkan ke senarai lengkap kod dalam tema anda. Lihat folder yang disenaraikan di sebelah kanan anda. Anda sepatutnya melihat sekumpulan folder yang mengandungi pelbagai aspek tema anda, seperti reka letak, templat, bahagian, dll. Buka folder templat. 
4. Pengekodan dalam Cecair: Di dalam folder templat, anda akan melihat senarai fail dengan jenis fail .liquid. Anda juga boleh membuat templat fail Liquid baharu dengan memilih butang tambah pada folder templat. Ia akan bertanya kepada anda templat yang ingin anda buat, iaitu, halaman, bahagian, blog, dsb., dan menamakan fail. Untuk mengedit fail, klik dua kali pada fail templat, dan ia akan dibuka dalam editor kod di sebelah kanan.

Di dalam mana-mana fail Liquid, anda akan melihat skrip HTML. Ini ialah rangka tapak web anda. Anda boleh menggunakan bahasa Cecair dalam HTML ini untuk mendapatkan semulaformation dari Shopify pelayan. Selagi anda menggunakan sintaks Cecair yang betul, iaitu, kurungan, ia sepatutnya memaparkan kandungan anda dengan sewajarnya.

Untuk menggambarkan, mari kita jalankan contoh mudah:

Mengubah Saiz Imej Menggunakan Shopify Cecair

Imej adalah aspek penting bagi kebanyakan Shopify kedai-kedai. Tetapi jika anda menggunakan berbilang imej, ia boleh menjadi mimpi ngeri untuk mengukur semuanya dengan betul, supaya ia kelihatan kemas. Untuk membetulkannya, kami sedang melihat pada img_url penapis. Seperti penapis lain, img_url direka untuk mengubah suai kandungan yang diambil daripada Shopify pelayan. Anda boleh menggunakan penapis ini untuk menukar saiz imej anda, skala, format, dan pemangkasan. 

Ini adalah teknik yang sangat baik kerana penapis hanya mengubah suai imej sedia ada buat sementara waktu; ia tidak mencipta imej baharu setiap kali untuk memaparkan templat anda, jadi ia tidak akan memperlahankan masa muat tapak anda. 

Jadi, bagaimana kita mengubah saiz imej?

Pertama, kita perlu memutuskan di mana kita mahu menggunakan perubahan. Anda boleh memohon penapis img_url kepada mana-mana objek dengan sifat imej, termasuk:

• Produk
• Varian produk
• Item baris
• koleksi
• Artikel

Sebaik sahaja anda memutuskan imej yang ingin anda edit, anda perlu mengetahui harta anda wish untuk menyasarkan. Untuk mengetahui sifat yang mempunyai atribut imej, lihat Shopifysenarai objek dan harta benda mereka. 

Dalam contoh ini, kami akan menyasarkan imej artikel blog kami.

Berikut ialah kod asas:

{{ blog.articles.image | img_url: ‘100×100' }}

Rosak:

• Blog ialah objek yang kami cari dan kami mahukan harta itu bermanfaat, kerana ini mengandungi semua artikel dalam blog kami. Khususnya, kami ingin menukar imej dalam artikel blog kami, jadi kami menyasarkan gambar harta dalam artikel.
• Sekarang kita menggunakan penapis img_url. Jika kami membiarkan ini apa adanya, ia hanya akan memaparkan imej yang ditarik daripada URL yang disediakan oleh Shopify pelayan. Walau bagaimanapun, kami juga akan memberikan parameter tambahan: saiz imej '100×100' (perhatikan bahawa Shopify menggunakan piksel untuk menentukan julat saiz).
• Akhir sekali, kami membungkus kod kami menggunakan sintaks kurungan dua cecair, yang digunakan untuk penapis. 

Dan kami sudah selesai! Ini sepatutnya mengembalikan output untuk semua imej blog kami, menjadikannya bersaiz 100 kali 100 piksel.

Petua dan Bawa pulang

Saya harap setelah membaca artikel ini, anda kini mempunyai jawapan kepada soalan: Apa itu Shopify Cecair?

Seperti yang anda lihat, Shopify Cecair ialah alat serba boleh yang boleh berfungsi dengan pelbagai fungsi semasa mereka bentuk atau menyunting a Shopify templat. Walaupun terdapat sedikit keluk pembelajaran, setelah anda membiasakannya, ia agak mudah digunakan – terutamanya berbanding bahasa pengekodan lain yang lebih kompleks seperti Javascript.

Jika anda berminat untuk menggunakan Shopify Cecair, kami akan menasihatkan anda untuk mengikuti pengambilan ini untuk memanfaatkannya sepenuhnya:

1. Mulakan dengan pemahaman yang kukuh tentang Cecair: Pemahaman yang kukuh tentang Cecair akan membolehkan anda membina tema tersuai yang lebih kompleks. Dengan asas ini, pengguna baharu boleh memanfaatkan potensi penuh Shopify untuk mencipta kedai dalam talian yang unik dan menarik.
2. Uji tema anda dengan teliti: Ujian adalah penting untuk memastikan tema tersuai anda berfungsi seperti yang diharapkan merentas penyemak imbas dan peranti yang berbeza. Dengan mengetahui isu keserasian lebih awal, anda mengelakkan kemungkinan kekecewaan untuk pelanggan anda.
3. Gunakan alat dan sumber yang tersedia: Shopify mempunyai banyak sumber yang tersedia untuk membantu pembangun tema, jadi gunakannya! Apabila digunakan, ini boleh menjadikan proses pembangunan lebih cepat dan mudah.

Dengan semua perkara ini diliputi, saya rasa selamat untuk mengatakannya Shopify Cecair boleh menjadi cara yang menyeronokkan dan berkesan untuk mengemas kini atau mencipta yang lebih menarik dan dinamik Shopify kedai. 

Itu sahaja daripada saya; kepada anda. Beritahu saya tentang pengalaman anda dengan Shopify Cecair dalam komen di bawah!