объяснение структуры файла мопса - PullRequest
Новая
       8

объяснение структуры файла мопса

1 голос
/ 21 мая 2019

Как мне решить следующую проблему. У меня есть следующая структура: 

header
main
 .section-about
 .section-features
 .section-tours
 .section-stories
 .section-book
footer

В моем index.pug я расширяю общий файл layout.pug, а затем включаю различные части. Это код моего index.pug: 

extends layout-blocks/layout.pug
block append head
  title #{title} Home
  meta(name='description', content="Something " +addedDescription)
  meta(property='og:title', content= title +"Something

block content
  include layout-blocks/header.pug
  include layout-blocks/section-about.pug

А это код раздела about.pug: 

main
  section.section-about
    .u-center-text.u-margin-bottom-big
      h2.heading-secondary
        | Exciting tours for adventurous people

и т. Д. *

Это начинает и закрывает основной тег и создает внутри него .section-about, но как мне кодировать остальные части, чтобы они были встроены в основной тег, а последний фрагмент закрывает основной тег?

Я пытался выяснить, смогу ли я создать микширование для структуры, но не знал, как реализовать это в своем решении.

Это код Mixins: 

mixin main
    main
        .section-about
        .section-features
        .section-tours
        .section-stories
        .section-book

1 Ответ

1 голос
/ 21 мая 2019

Лучшее место для этого - файл layout.pug.Вы можете разместить объявление block content в элементе main.

layout.pug: 

doctype html
html(lang='en')  
    head
        block head
    body
        header
            block header
        main
            block main
        footer
            block footer

index.pug: 

extends layout.pug
    block append head
        title #{title} Home
        meta(name='description', content="Something " +addedDescription)
        meta(property='og:title', content= title +"Something

    block append header
        include header.pug

    block append main
        include section-about.pug
        include section-features.pug
        include section-tours.pug
        include section-stories.pug
        include section-book.pug

    block append footer
        include footer.pug
...