Membina Tema Grav CMS Mudah dengan Twig, PHP dan CSS

Artikel ini mula-mula muncul di Stesen Symfony.

pengenalan

Jika anda membaca ini, anda tahu membina tapak web berorientasikan kandungan hari ini adalah satu kluster yang terlalu rumit.

Tetapi terdapat sistem pengurusan kandungan yang menjadikannya lebih mudah dan ringkas. Dan ini benar terutamanya untuk pembangun bahagian hadapan. Ia Grav CMS.

Saya akan menyesuaikan tema untuk grav.mobileatom.net yang merupakan tapak perniagaan utama saya. Cuba teka apa? Ia tidak akan melibatkan sebarang AI.

Dan menulis artikel ini akan menjadi cara saya untuk mempelajari cara melakukannya serta membantu komuniti. Anda tidak melihat banyak artikel tentang Grav.

Kami akan meliputi:

(1) Struktur organisasi / fail
(2) Templat ranting
(3) CSS
(4) Fungsi ranting
(5) Penyesuaian

Jika anda tidak tahu, GravCMS ialah salah satu daripada banyak CMS berdasarkan Symfony.

Butiran teknikal artikel ini kebanyakannya diparafrasa daripada dokumentasi Grav. Seperti yang saya katakan, saya sedang belajar ini sendiri.

Grav berkata:

"Teras Grav dibina berdasarkan konsep folder dan fail penurunan nilai untuk kandungan. Folder dan fail ini secara automatik disusun ke dalam HTML dan dicache untuk prestasi.

Halamannya boleh diakses melalui URL yang berkaitan secara langsung dengan struktur folder yang menyokong keseluruhan CMS. Dengan memaparkan halaman dengan Templat Twig, anda mempunyai kawalan sepenuhnya ke atas penampilan tapak anda, tanpa had."

Baiklah, mari kita lihat tema.

Tema Grav

Tema dalam Grav dibina dengan templat Twig dan anda boleh mengetahui lebih lanjut tentang Twig dalam artikel saya, Twig: Panduan Terbaik untuk Bahasa Templat PHP Premier. Selain itu, kami akan membincangkan beberapa butiran di sini.

Seperti yang saya tulis di sana, Twig ialah bahasa templat PHP yang mengeluarkan pembolehubah ke dalam HTML pandangan dalam pengaturcaraan MVC (model, pandangan, pengawal). Jadi, ia menyumbang kepada struktur bahagian hadapan tapak web anda.

Ia dicipta oleh Fabien Ponticier yang juga mencipta Symfony, oleh itu tidak hairanlah ia digunakan dalam Grav.

Beliau menyatakan bahawa "bahasa templat ialah sesuatu yang membantu anda menulis templat yang menghormati pemisahan kebimbangan (MVC) ini. Bahasa templat harus mencari keseimbangan yang baik antara memberikan ciri yang mencukupi untuk memudahkan pelaksanaan logik pembentangan dan menyekat yang canggih ciri untuk mengelakkan logik perniagaan melumpuhkan templat anda."

Apakah sebenarnya templat PHP? Seperti yang dinyatakan di atas, ia digunakan untuk memisahkan paparan aplikasi PHP anda daripada model dan objeknya.

Ciri utama Twig ialah:

• Pantas: Twig menyusun templat ke kod PHP yang dioptimumkan biasa. Overhed berbanding kod PHP biasa telah dikurangkan kepada yang paling minimum.
• Secure: Twig mempunyai mod kotak pasir untuk menilai kod templat yang tidak dipercayai. Mod ini membolehkan Twig digunakan sebagai bahasa templat untuk aplikasi di mana pengguna mengubah suai reka bentuk templat.
• Fleksibel: Twig dikuasakan oleh lexer dan parser yang fleksibel. Fleksibiliti ini membolehkan pembangun mentakrifkan teg dan penapis tersuai (lebih lanjut mengenainya kemudian) dan mencipta DSL unik mereka.

Beberapa nota ringkas terakhir:

• Nama Templat Twig berakhir dengan .html.twig.
• Anda mengkonfigurasinya dengan YAML.
• Dan ia berfungsi dengan baik dengan CSS vanila.

Setiap halaman yang anda buat dalam Grav melalui antara muka pentadbir merujuk fail templat Twig. Amalan terbaik ialah memadankan nama fail templat dengan nama halaman sebanyak mungkin. Atau sekurang-kurangnya struktur folder fail kandungan anda.

Sebagai contoh, blog.md akan dipaparkan dengan templat Twig blog.html.twig

(1) Struktur organisasi / fail

Ok, mari lihat cara tema Grav distrukturkan.

Setiap tema mempunyai fail definisi bernama blueprints.yaml. Ia juga boleh memberikan definisi borang untuk panel pentadbir.

Untuk menggunakan pilihan definisi tema, sediakan tetapan lalai dalam fail your_theme_name.yaml.

Sertakan jpg 303x300 bernama thumbnail.jpg dalam akar tema.

(2) Templat Twig dan banyak lagi

Templat Twig halaman Grav anda hendaklah berada dalam templat/ folder dengan subfolder untuk:

• borang/
• modular/
• separa/

Amalan terbaik ialah membangunkan tema anda mengikut dugaan dengan kandungan anda. Strategi ini adalah salah satu sebab mengapa saya sangat melabur dengan Grav. Fail halaman = Templat ranting.

Sekali lagi, default.md, blog.md, error.md, item.md, modular.md akan sama dengan default.html.twig, blog.html.twig, dsb.

Tema anda memerlukan css/ folder untuk CSS anda.

Tambah imej/, fon/ dan folder js/ pada akar anda juga untuk menyimpan aset tersuai.

Cetak biru/ folder akan menempatkan fail dengan takrifan borang anda seperti yang dinyatakan sebelum ini.

Pemalam dibawa ke dalam tema Grav melalui cangkuk.

Jadi, nama_tema_anda.php akan menempatkan logik bukan Ranting anda.

FYI, jika anda ingin membina tema komersial untuk dijual kepada orang lain, anda juga memerlukan fail ini:

• CHANGELOG.md
• LESEN.md
• README.md
• screenshot.jpg
• gambar kecil.jpg

Templat Asas

Anda boleh mendapatkan saya hanya dengan templat Twig lalai dengan Grav.

Tetapi, lebih baik menggunakan teg Twig Extends untuk menentukan reka letak asas melalui blok dalam templat asas. Fail ini disimpan dalam partials/ subfolder sebagai base.html.twig. Lihat imej di atas.

Dalam templat lalai anda dan templat khusus lain, gunakan teg extends untuk menarik reka letak asas anda daripada base.html.twig.

Jadi, untuk fail default.html.twig anda menggunakan sintaks Twig, anda akan kodkan:

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

Set kod pertama memanjangkan templat asas yang mengandungi reka letak asas anda.

Yang kedua menggantikan kandungan daripada templat asas dengan kod templat baharu anda.

(3) CSS Tema

Seterusnya mari kita lihat CSS untuk tema Grav anda. Terdapat beberapa cara untuk melaksanakannya termasuk SCSS. Tetapi, dalam nada memastikan ia mudah saya akan memberi tumpuan kepada CSS vanila. Ia pendek. Tambahkan fail custom.css dan pergi ke bandar.

(4) Kefungsian Ranting

Mari kita lihat juga cara Twig berfungsi.

Tag ranting seperti Extend mengawal logik templat anda. Mereka memberitahu Twig apa yang perlu dilakukan. IMHO, Sekat ialah teg yang paling penting.

Lain-lain termasuk:

• cache
• turun markah
• skrip
• gaya
• suis
• dll

Penapis ranting berguna untuk memformat dan memanipulasi teks serta pembolehubah.

Ia termasuk:

• tarikh
• melarikan diri
• sertai
• rendahkan
• hiris
• dll

Fungsi boleh menjana kandungan dan melaksanakan fungsi (jelas). Mereka juga boleh melakukan beberapa perkara yang sama yang boleh dilakukan oleh penapis.

Jadi, untuk templat anda gunakan teg Twig, penapis dan fungsi yang diperlukan untuk keperluan unik anda.

Tag Grav's Twig

Selain teg anda yang anda pilih, Grav menyertakan teg Twig tersuai untuk memanjangkan keupayaannya.

Ia termasuk:

• turun markah
• skrip (contohnya anda boleh memasukkan JavaScript)
• gaya
• pautan
• suis
• ditunda (pemuatan aset)
• lempar (pengecualian)
• cuba/tangkap
• menunjukkan (objek lentur)
• cache

Konfigurasi Tema

Dengan Grav anda boleh mengakses maklumat konfigurasi tema dan pelan tindakan daripada fail Twig dan PHP anda. Anda boleh melakukan ini melalui objek tema atau anda boleh menggunakan pemalam Grav dengan sintaks PHP.

Sebagai amalan terbaik, jangan tukar fail your_theme_name.yaml lalai tema anda (lihat imej di atas). Gantikannya dalam folder pengguna/config/tema.

Sebagai nota akhir, Twig juga mempunyai objek tersuai dan pembolehubah yang tidak akan kami bincangkan di sini. Ingat, saya permudahkan.

Pengurus Aset

Pengurus Aset Grav menyediakan cara yang fleksibel untuk mengurus fail CSS dan JavaScript. Ia termasuk Talian Paip Aset untuk mengecilkan, memampatkan dan aset sebaris.

Ia tersedia dan boleh diakses dalam cangkuk acara pemalam atau terus dalam tema melalui panggilan Twig. Ia mempunyai fail konfigurasi sendiri dalam user/config/system.yaml.

Anda boleh mendapatkan butiran peringkat perusahaan dengan Pengurus Aset supaya kami tidak akan membincangkan dengan lebih terperinci di sini.

Dalam nada memastikan ia mudah, saya mengesyorkan menggunakan pemalam Assets (lihat imej di atas). Muat turunnya daripada pentadbir Grav. Kemudian gunakannya untuk mengemas kini atau menambah aset mengikut keperluan.

(5) Penyesuaian

Jadi, kami mengetahui cara membina Tema Grav yang pantas dan ringkas. Sediakan struktur anda, bina templat Twig anda dan tambah CSS dan JavaScript mengikut keperluan.

Dan anda telah melihat terdapat pelbagai cara untuk menjadikan tema Grav memenuhi keperluan ringkas atau kompleks anda, tetapi Grav menyediakan ciri dan fungsi untuk menjadikannya lebih mudah. Dan ini adalah cara saya akan menyesuaikan tema tapak saya.

Pewarisan Tema

Cara yang lebih mudah itu ialah menggunakan warisan tema. Saya suka ini kerana ia serupa dengan apa yang saya lakukan dengan tema WordPress dan Drupal.

Ia juga merupakan cara pilihan Grav untuk menyesuaikan tema.

Anda mentakrifkan tema asas yang anda warisi. Contohnya Quark tema lalai atau yang telah anda beli. Kemudian anda menambah atau mengedit perkara yang anda mahu diperibadikan dan biarkan tema asas mengendalikan yang lain.

Strategi ini juga membolehkan anda mengemas kini tema asas tanpa kehilangan penyesuaian tema warisan anda.

Terdapat beberapa cara untuk mencipta tema warisan. Tetapi sekali lagi untuk kepentingan kesederhanaan, mari kita lihat proses manual.

Buat folder baharu -> pengguna/tema/nama_tema_anda untuk memegang tema tersuai.

Kemudian salin fail YAML daripada tema yang akan anda warisi ke dalam folder baharu. Namakannya your_theme_name.yaml dan tukar nama tema baharu di mana-mana sahaja anda melihat Quark.

Seterusnya, salin fail pengguna/tema/quark/blueprint.yaml ke dalam folder pengguna/tema/nama_tema_anda.

Sekarang, tukar tema lalai dalam fail pengguna/config/system.yaml.

halaman:
tema : nama_tema_anda

Akhir sekali, untuk menambah kefungsian terdorong acara lanjutan, buat fail pengguna/tema/nama_tema_anda/nama_tema_anda.

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

Anda kini telah menyediakan strim Grav supaya ia kelihatan dalam nama_tema_anda dahulu, kemudian cuba Quark.

Sekarang, sediakan pengubahsuaian templat CSS, JS dan Twig yang anda perlukan.

Anda sudah selesai. Cukup mudah.

Kesimpulan

Wah. Terima kasih kerana membaca keseluruhan artikel.

Anda kini mengetahui lebih lanjut tentang tema Grav':

(1) Struktur organisasi / fail
(2) Templat ranting
(3) CSS
(4) Fungsi ranting
(5) Penyesuaian

Pertimbangkan untuk menggunakan Grav untuk kesederhanaan, terutamanya apabila menyesuaikan tema. Apa yang tidak menggemari PHP, Twig, CSS vanila dan JS. Anda juga mencipta kandungan anda dalam penurunan nilai.

Teruskan pengekodan Symfonistas dan Gravinauts!

Sumber

https://learn.getgrav.org/17/themes

https://twig.symfony.com/

https://twig.symfony.com/doc/3.x/

https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet

Atas ialah kandungan terperinci Membina Tema Grav CMS Mudah dengan Twig, PHP dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!