6.9 Theming Views Drupal. Ստեղծեք Owl Carousel սլայդշոու՝ մանրապատկերներով:

11/11/2022, by Narine

Շատ հաճախ Views ձևանմուշը մեզ չի համապատասխանում, ուստի մենք կարող ենք անտեսել Views-ի ձևանմուշները: Ցավոք, Views-ում ցանկալի ձևանմուշը որոնելու համար միջերես չկա, բայց մենք կարող ենք օգտագործել օրինաչափություններ՝ ձևանմուշները վերասահմանելու համար:

Նախշերի մասին ավելին այս հոդվածում.

6.6. Working with templates in Drupal. What are the templates in the core of Drupal.

Մեզ, մասնավորապես, հետաքրքրում է.

Ստորև բերված են կաղապարների հնարավոր անունները, որոնք պետք է փոխարինվեն:

Դիտման անունը - foobar (մեքենայի անուն)
Ցուցադրման ձևաչափ - չֆորմատավորված (չֆորմատավորված ցուցակ, ավելացնել հնարավոր տարբերակներ)
Ցուցադրման ոճ - դաշտեր
Ցուցադրվող անուն — էջ

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Owl Carousel 1.x հավելվածը չունի պատկերասրահում մանրապատկերներ ցուցադրելու հնարավորություն: Հետևաբար, մենք կօգտագործենք Owl Carousel տարբերակը 2.x, կա աջակցություն մանրապատկերների համար: Եթե դուք չեք ցանկանում հասկանալ կաղապարների վերասահմանումը, գրելով CSS, Javascript կոդը, ապա կարող եք պարզապես տեղադրել Views Slideshow մոդուլը.

https://www.drupal.org/project/views_slideshow

Կամ Flex Slider մոդուլը.

https://www.drupal.org/project/flexslider

Դուք կարող եք արագ կարգավորել սլայդ-շոուները դրանց վրա՝ առանց CSS-ի, jQuery-ի իմացության:

Մենք կփորձենք վերասահմանել Views կաղապարները և միացնել jQuery գրադարանները:

Սկսելու համար ներբեռնեք և ներառեք Owl Carousel 2.x գրադարանը՝

https://github.com/OwlCarousel2/OwlCarousel2

Perhaps you have found Owl Carousel 1.x:

https://github.com/OwlFonk/OwlCarousel

Այն մեզ չի սազում, այն չի աջակցում մանրապատկերներին, դրա համար անհրաժեշտ է լրացուցիչ կոդ գրել:

Պատճենեք owl-carousel թղթապանակը (որտեղ գտնվում է owl.carousel.min.js ֆայլը) մեր թեմայի թղթապանակում, այժմ եկեք ներառենք css և js կարուսել ֆայլերը։ Մենք ավելացնում ենք հետևյալ տողերը .libraries.yml ֆայլին.

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

Ես չեմ տեղափոխել js ֆայլերը / js, css թղթապանակում / css թղթապանակ, բայց դուք կարող եք դա անել, այնուհետև հիշեք, որ ուղղեք css ֆայլերի ուղիները դեպի նկարներ, որոնք, կարծում եմ, դրել եք պատկերների թղթապանակում:

Փոփոխությունները կիրառելու համար անհրաժեշտ է մաքրել քեշը:

Այժմ եկեք ստեղծենք պատկերասրահի բովանդակության տեսակ և դրան ավելացնենք պատկերի դաշտ:

Ստեղծեք նոր տեսք, որտեղ մենք ցուցադրում ենք դաշտի մեկ պատկեր նոր բովանդակության տեսակից:

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

6.9 Theming Views Drupal. Ստեղծեք Owl Carousel սլայդշոու՝ մանրապատկերներով: