Pandangan Theming di Drupal 8 - Plugin Gaya Custom-tutorial php-php.cn

Pandangan Theming di Drupal 8 - Plugin Gaya Custom

Pandangan berada di teras Drupal 8. Kita semua tahu bahawa sekarang. Twig adalah enjin templat baru di Drupal 8. Ini juga kita tahu. Tetapi adakah kita tahu bagaimana untuk berinteraksi secara programatik dengan yang pertama untuk tema pandangan menggunakan yang kedua? Selain daripada templat paparan utama seperti mana -mana subsistem lain, kami mempunyai alternatif yang lebih kuat dalam bentuk plugin pandangan (paparan, gaya, baris dan medan).

Dalam artikel ini, kita akan melihat bagaimana kita boleh membuat plugin gaya tersuai untuk pandangan di Drupal 8. Kami akan menggunakan markup tab bootstrap sebagai matlamat dan melaksanakan output tab untuk hasil pandangan kami. Dalam konfigurasi paparan, tetapan gaya akan membolehkan kami menentukan medan mana yang akan digunakan sebagai salinan navigasi tab, meninggalkan seluruh medan yang ditunjukkan dalam tab tab masing -masing. Pada asasnya, setiap hasil pandangan akan mewakili tab - jadi contoh ini tidak sesuai untuk pandangan yang mempunyai lebih daripada beberapa hasil. Matlamat utama adalah untuk menggambarkan bagaimana kita boleh membuat plugin gaya pandangan kita sendiri di Drupal 8.

kami tidak akan menutup butiran mengenai bagaimana anda boleh menggunakan bootstrap dalam projek anda. Walau bagaimanapun, anda boleh menyemak halaman dokumentasi mengenai aset atau artikel ini tentang cara memastikan pengguna tanpa nama dapat mendapat manfaat daripada jQuery yang dimuatkan pada halaman. Dan jika anda ingin melihat kod yang kami tulis terlebih dahulu, anda boleh menemuinya dalam repositori ini dalam modul demo.

Takeaways Key

Drupal 8 Core kini termasuk paparan, dan Twig adalah enjin templat baru. Plugin Views (paparan, gaya, baris dan medan) menawarkan alternatif yang kuat untuk menimpa templat paparan, dan panduan ini menerangkan cara membuat plugin gaya tersuai untuk pandangan di Drupal 8. Markup tab bootstrap.
Penciptaan plugin gaya tersuai melibatkan membina kelas plugin dalam folder plugin/paparan/gaya modul. Kelas ini meluas dari kelas StylePluginbase dan termasuk anotasi @ViewsStyle, yang mentakrifkan ID, tajuk, teks bantuan, tema dan jenis paparan untuk plugin. Plugin Gaya bertanggungjawab untuk memberikan penyenaraian dan boleh digunakan oleh kebanyakan jenis paparan.
Bahagian terakhir membuat plugin gaya tersuai melibatkan menentukan fungsi tema dan membuat fail templat ranting. Fungsi tema, yang ditakrifkan di dalam fail .module, melepasi objek $ paparan dan baris $ yang dihasilkan secara lalai ke templat. Fail templat Twig mengawal bagaimana output plugin diberikan. Sebaik sahaja plugin gaya tersuai dibuat, ia boleh diaktifkan melalui antara muka pentadbir Drupal dan digunakan dengan pandangan dengan memilihnya dari tetapan format.

apakah plugin gaya?

Plugin Gaya Pandangan adalah yang bertanggungjawab untuk memberikan penyenaraian . Contoh -contoh penting plugin gaya teras adalah Senarai Unformatted , Senarai HTML , Table atau grid . Mereka digunakan oleh plugin paparan dan mereka seterusnya menggunakan plugin baris yang mewakili satu item dalam penyenaraian.

Di Drupal 8, semua jenis plugin paparan dibina menggunakan sistem plugin baru dan berkongsi beberapa fungsi biasa (mereka sentiasa meluas dari pluginbase pandangan yang sama).

Mari kita buat plugin gaya kita sendiri yang boleh digunakan oleh kebanyakan jenis paparan (halaman, blok, dll) dan yang menggunakan plugin baris medan.

plugin gaya tab bootstrap

Langkah pertama adalah untuk membuat kelas plugin kami yang terletak di folder plugin/paparan/gaya modul kami:

<span>namespace Drupal<span>\demo\Plugin\views\style</span>;
</span><span>use Drupal<span>\Core\Form\FormStateInterface</span>;
</span><span>use Drupal<span>\views\Plugin\views\style\StylePluginBase</span>;
</span>
<span>/**
</span><span> * A Views style that renders markup for Bootstrap tabs.
</span><span> *
</span><span> * <span>@ingroup views_style_plugins
</span></span><span> *
</span><span> * @ViewsStyle(
</span><span> *   id = "bootstrap_tabs",
</span><span> *   title = @Translation("Bootstrap Tabs"),
</span><span> *   help = @Translation("Uses the Bootstrap Tabs component."),
</span><span> *   theme = "demo_bootstrap_tabs",
</span><span> *   display_types = <span>{"normal"}
</span></span><span> * )
</span><span> */
</span><span>class BootstrapTabs extends StylePluginBase {
</span>
  <span>/**
</span><span>   * Does this Style plugin allow Row plugins?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesRowPlugin = TRUE;
</span>
  <span>/**
</span><span>   * Does the Style plugin support grouping of rows?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesGrouping = FALSE;
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>protected function defineOptions() {
</span>    <span>$options = <span>parent::</span>defineOptions();
</span>    <span>$options['tab_nav_field'] = array('default' => '');
</span>    <span>return $options;
</span>  <span>}
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>public function buildOptionsForm(&$form, FormStateInterface $form_state) {
</span>    <span><span>parent::</span>buildOptionsForm($form, $form_state);
</span>    <span>$options = $this->displayHandler->getFieldLabels(TRUE);
</span>    <span>$form['tab_nav_field'] = array(
</span>      <span>'#title' => $this->t('The tab navigation field'),
</span>      <span>'#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'),
</span>      <span>'#type' => 'select',
</span>      <span>'#default_value' => $this->options['tab_nav_field'],
</span>      <span>'#options' => $options,
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Salin selepas log masuk

Jenis Plugin Drupal Kami mencipta contoh IS Viewsstyle dengan beberapa konfigurasi asas yang diluluskan dalam anotasi. Meninggalkan yang jelas, kami mempunyai kekunci Tema dan Display_Types yang patut disebut. Yang pertama mengisytiharkan fungsi tema mana plugin gaya ini akan digunakan untuk menjadikan datanya sementara yang kedua mengisytiharkan jenis plugin paparan yang boleh digunakan oleh (dalam kes kami semua jenis paparan yang tidak menentukan jenis tersuai: normal). Untuk maklumat lanjut mengenai semua konfigurasi anotasi yang tersedia untuk jenis plugin ini, lihat kelas anotasi DrupalViewSanNotationViewSstyle.

Menggunakan dua sifat kelas, kami mengisytiharkan bahawa gaya kami menggunakan plugin baris tetapi tidak membenarkan kumpulan. Pastikan anda menyemak kelas induk untuk mengetahui lebih lanjut mengenai pilihan lain yang boleh ditentukan seperti ini. Sebagai contoh, kelas yang kami luangkan sudah mengisytiharkan bahawa medan pandangan boleh digunakan dengan plugin gaya.

Seperti yang dinyatakan sebelum ini, menggunakan kedua -dua kaedah kami membuat pilihan plugin dan membentuk elemen untuk dapat menentukan medan mana yang harus bertindak sebagai navigasi tab. Menggunakan pengendali paparan semasa ($ this-> displayHandler) kami boleh memuatkan semua medan paparan yang tersedia yang telah ditambah oleh pembina tapak. Dan elemen bentuk baru ini akan tersedia pada bentuk tetapan gaya:

Pandangan Theming di Drupal 8 - Plugin Gaya Custom

Oleh kerana kita melanjutkan dari kelas StylePluginbase, tidak ada lagi yang perlu kita lakukan. Untuk output markup kita boleh bergantung pada tema demo_bootstrap_tabs yang menerima pembolehubah yang relevan dari pandangan yang dilaksanakan. Sekiranya kita mahu, kita boleh mengatasi sebarang kaedah render dan menambah lebih banyak pembolehubah, menukar tema, atau apa sahaja yang kita perlukan. Kami baik dengan lalai, terutamanya kerana kami akan melaksanakan preprocessor untuk mengendalikan pembolehubah yang diterima oleh templat.

Tema

Sudah tiba masanya untuk menentukan tema demo_bootstrap_tabs seperti yang biasanya kita lakukan (di dalam fail .modul kami):

<span>namespace Drupal<span>\demo\Plugin\views\style</span>;
</span><span>use Drupal<span>\Core\Form\FormStateInterface</span>;
</span><span>use Drupal<span>\views\Plugin\views\style\StylePluginBase</span>;
</span>
<span>/**
</span><span> * A Views style that renders markup for Bootstrap tabs.
</span><span> *
</span><span> * <span>@ingroup views_style_plugins
</span></span><span> *
</span><span> * @ViewsStyle(
</span><span> *   id = "bootstrap_tabs",
</span><span> *   title = @Translation("Bootstrap Tabs"),
</span><span> *   help = @Translation("Uses the Bootstrap Tabs component."),
</span><span> *   theme = "demo_bootstrap_tabs",
</span><span> *   display_types = <span>{"normal"}
</span></span><span> * )
</span><span> */
</span><span>class BootstrapTabs extends StylePluginBase {
</span>
  <span>/**
</span><span>   * Does this Style plugin allow Row plugins?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesRowPlugin = TRUE;
</span>
  <span>/**
</span><span>   * Does the Style plugin support grouping of rows?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesGrouping = FALSE;
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>protected function defineOptions() {
</span>    <span>$options = <span>parent::</span>defineOptions();
</span>    <span>$options['tab_nav_field'] = array('default' => '');
</span>    <span>return $options;
</span>  <span>}
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>public function buildOptionsForm(&$form, FormStateInterface $form_state) {
</span>    <span><span>parent::</span>buildOptionsForm($form, $form_state);
</span>    <span>$options = $this->displayHandler->getFieldLabels(TRUE);
</span>    <span>$form['tab_nav_field'] = array(
</span>      <span>'#title' => $this->t('The tab navigation field'),
</span>      <span>'#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'),
</span>      <span>'#type' => 'select',
</span>      <span>'#default_value' => $this->options['tab_nav_field'],
</span>      <span>'#options' => $options,
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Salin selepas log masuk

Plugin Gaya melewati objek $ paparan dan baris $ yang dihasilkan secara lalai ke templat. Terserah kepada preprocessor untuk melakukan sedikit pengendalian pembolehubah ini (jika diperlukan) sebelum dihantar ke templat:

<span>/**
</span><span> * Implements hook_theme().
</span><span> */
</span><span>function demo_theme($existing, $type, $theme, $path) {
</span>  <span>return array(
</span>    <span>'demo_bootstrap_tabs' => array(
</span>      <span>'variables' => array('view' => NULL, 'rows' => NULL),
</span>      <span>'path' => drupal_get_path('module', 'demo') . '/templates',
</span>    <span>),
</span>  <span>);
</span><span>}
</span>

Salin selepas log masuk

Jadi apa yang berlaku di sini? Pertama, kami menyemak pilihan plugin gaya untuk nama medan yang akan digunakan (yang dipilih ketika mengkonfigurasi pandangan). Jika seseorang tidak berada di sana, kami kembali, tetapi tidak sebelum melakukan sedikit pra -proses lalai bahawa fungsi template_process_views_view_unformatted sudah berfungsi dengan baik. Jadi kami mewakilkannya. Kemudian, kami gelung melalui hasil pandangan dan membina pelbagai kandungan untuk navigasi tab kami. Untuk ini, kami menggunakan fungsi Tema Views_View_field Lalai untuk menjadikan medan yang dipilih. Akhirnya, kami lulus array ini ke templat dan juga menjalankan preprocessor lalai gaya senarai yang tidak diformat.

Templat

Di Drupal 8 tidak ada lagi fungsi tema, semuanya kini dikendalikan dalam templat ranting. Oleh itu mari kita lihat bagaimana fail demo-bootstrap.html.twig kelihatan seperti dalam folder templat modul kami:

<span>/**
</span><span> * Prepares variables for views demo_bootstrap_tabs template.
</span><span> *
</span><span> * Template: demo-bootstrap-tabs.html.twig.
</span><span> *
</span><span> * <span>@param <span>array</span> $variables
</span></span><span> *   An associative array containing:
</span><span> *   - view: The view object.
</span><span> *   - rows: An array of row items. Each row is an array of content.
</span><span> */
</span><span>function template_preprocess_demo_bootstrap_tabs(&$variables) {
</span>  <span>$view = $variables['view'];
</span>  <span>$rows = $variables['rows'];
</span>  <span>$variables['nav'] = array();
</span>
  <span>// Prepare the tab navigation.
</span>  <span>$field = $view->style_plugin->options['tab_nav_field'];
</span>  <span>if (!$field || !isset($view->field[$field])) {
</span>    <span>template_preprocess_views_view_unformatted($variables);
</span>    <span>return;
</span>  <span>}
</span>
  <span>$nav = array();
</span>  <span>foreach ($rows as $id => $row) {
</span>    <span>$nav[$id] = array(
</span>      <span>'#theme' => 'views_view_field',
</span>      <span>'#view' => $view,
</span>      <span>'#field' => $view->field[$field],
</span>      <span>'#row' => $row['#row'],
</span>    <span>);
</span>  <span>}
</span>
  <span>template_preprocess_views_view_unformatted($variables);
</span>  <span>$variables['nav'] = $nav;
</span><span>}
</span>

Salin selepas log masuk

seperti yang anda lihat, ini adalah markup yang diperlukan untuk tab bootstrap. Ia tidak akan berfungsi, tentu saja, tanpa memastikan gaya bootstrap yang relevan dan skrip dimuatkan dalam tema anda terlebih dahulu.

Perkara pertama yang kami berikan ialah item navigasi tab (dari pembolehubah NAV kami). Semasa melengkapkan melalui array ini, kami juga menggunakan nilai indeks gelung untuk memungkiri item pertama yang aktif dan dapat menargetkan kandungan kandungan tab di bawah menggunakan ID yang unik. Untuk nilai sebenar item, kami hanya mencetak array render yang kami buat dalam preprocessor kami dan Drupal menjaga rendering itu. Bahawa dikatakan, mungkin idea yang baik untuk memastikan bidang yang anda gunakan di sini agak pendek, tanpa pautan dan markup biasa. Tajuk mungkin akan berfungsi dengan baik. Tetapi ini adalah masalah mengkonfigurasi pandangan dengan sewajarnya.

Di bawah navigasi, kami mencetak baris paparan sebenar, menggunakan indeks gelung yang sama untuk memungkiri baris pertama sebagai anak tetingkap tab aktif dan mengenal pasti mereka secara unik supaya navigasi di atas dapat mengawal penglihatan mereka. Bagi kandungannya, kami mencetak seluruh baris. Pembolehubah Konten (yang disediakan di dalam template_process_views_view_unformatted) dan yang mengandungi semua medan dalam pandangan kami. Dan jika kita mahu tidak memasukkan medan yang kita gunakan untuk navigasi, kita hanya boleh mengecualikan satu dari paparan dalam konfigurasi paparan. Ia masih akan muncul dalam navigasi (kerana kita secara jelas mencetaknya di sana) tetapi tidak di anak tetingkap utama.

Kesimpulan

dan di sana kita memilikinya. Plugin gaya pandangan untuk mengeluarkan hasil paparan sebagai tab bootstrap. Apa yang kita perlukan sekarang ialah memastikan aset bootstrap dimuatkan dan hanya mengkonfigurasi pandangan kami untuk menggunakan plugin gaya baru. Perlu diingat bahawa ini tidak dimaksudkan untuk pandangan dengan banyak hasil dan ia hanya berfungsi sebagai contoh untuk menunjukkan cara membuat plugin gaya.

Jika anda mempunyai soalan, komen, atau cadangan, sila tinggalkannya di bawah!

Soalan -soalan yang sering ditanya mengenai pandangan mereka di Drupal 8

Bagaimana saya boleh membuat plugin gaya tersuai di Drupal 8?

Membuat plugin gaya tersuai di Drupal 8 melibatkan beberapa langkah. Pertama, anda perlu membuat modul baru jika anda tidak mempunyai satu. Kemudian, dalam direktori Src/Plugin/Views/Style modul anda, buat fail PHP untuk plugin gaya tersuai anda. Fail ini harus mengandungi kelas yang memanjangkan kelas StylePluginbase dan termasuk anotasi @ViewSstyle. Anotasi mentakrifkan ID, tajuk, dan teks bantuan untuk plugin anda. Setelah menentukan kaedah yang diperlukan dalam kelas anda, anda boleh mengaktifkan plugin gaya baru anda melalui antara muka admin drupal.

Apakah komponen utama plugin gaya tersuai? Drupal 8 biasanya terdiri daripada tiga komponen utama: definisi plugin, kelas plugin, dan fail templat. Takrif plugin disediakan melalui anotasi @ViewsStyle dan termasuk ID, tajuk, dan teks bantuan untuk plugin. Kelas plugin memanjangkan kelas StylePluginbase dan mentakrifkan kaedah yang mengawal bagaimana plugin bertindak. Fail templat adalah fail ranting yang mengawal bagaimana output plugin diberikan.

Bagaimana saya boleh mengatasi templat paparan lalai di Drupal 8?

Untuk mengatasi templat paparan lalai di Drupal 8, anda perlu membuat fail ranting baru dalam direktori template tema anda. Nama fail harus mengikuti pandangan corak-pandangan- [paparan-nama]-[paparan-id] .html.twig. Dalam fail ini, anda boleh menentukan kod markup dan twig HTML yang harus digunakan untuk memberikan pandangan. Setelah membuat fail, jelaskan cache Drupal untuk melihat perubahan anda.

Bagaimana saya boleh menambah pembolehubah ke templat paparan di Drupal 8? Selesai melalui fungsi pra -proses dalam fail .theme tema anda. Fungsi ini harus mengikuti corak tema_name_process_views_view__view_name__display_id, dan ia harus mengambil hujah tunggal, yang merupakan pelbagai pembolehubah. Anda boleh menambah pembolehubah baru ke array ini, dan mereka akan tersedia dalam templat ranting anda. Membuat plugin gaya tersuai di Drupal 8, anda boleh menggunakannya dengan pandangan melalui antara muka Admin Drupal. Edit paparan dan pergi ke bahagian format. Klik pada tetapan format dan pilih plugin gaya tersuai anda dari senarai. Setelah menyimpan pandangan, ia akan diberikan menggunakan plugin gaya tersuai anda.

Apakah tujuan render () kaedah dalam plugin gaya tersuai? Plugin Gaya Custom di Drupal 8 bertanggungjawab untuk memberikan pandangan. Ia mengambil pelbagai baris sebagai input dan mengembalikan array render. Arahan render hendaklah termasuk kekunci #THEME, yang menentukan templat ranting untuk digunakan, dan mana -mana pembolehubah yang harus dihantar ke template. 🎜> Debugging Templat Paparan di Drupal 8 boleh dilakukan menggunakan ciri Debug Twig. Dayakan debugging Twig dalam fail perkhidmatan.yml anda dengan menetapkan pilihan debug untuk benar. Kemudian, apabila anda melihat halaman yang menggunakan templat, anda akan melihat komen dalam kod sumber HTML yang menunjukkan fail templat mana yang sedang digunakan dan mencadangkan nama fail templat yang boleh anda gunakan untuk mengatasinya. Saya menggunakan logik bersyarat dalam templat paparan di Drupal 8?

Logik bersyarat dalam template Views di Drupal 8 boleh dilaksanakan menggunakan penyataan Twig IF. Dalam kod ranting anda, anda boleh menggunakan kata kunci jika untuk menguji keadaan, dan kemudian sertakan markup atau kod yang berbeza bergantung kepada sama ada keadaan itu benar atau palsu. 8?

Menyesuaikan pager dalam pandangan di Drupal 8 boleh dilakukan melalui antara muka pentadbir Drupal. Edit paparan dan pergi ke bahagian pager. Di sini, anda boleh memilih jenis pager untuk digunakan, tetapkan bilangan item untuk dipaparkan setiap halaman, dan konfigurasikan tetapan pager lain.

Bagaimana saya boleh membuat pandangan responsif dalam Drupal 8?

Mewujudkan pandangan responsif dalam Drupal 8 melibatkan menggunakan teknik reka bentuk responsif dalam templat pandangan anda. Ini termasuk menggunakan pertanyaan media CSS untuk menyesuaikan susun atur dan penampilan pandangan pada saiz skrin yang berbeza, dan menggunakan unit fleksibel seperti peratusan untuk lebar dan ketinggian dan bukannya unit tetap seperti piksel.

Atas ialah kandungan terperinci Pandangan Theming di Drupal 8 - Plugin Gaya Custom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!