Question

如何解决以下问题。我有以下结构：

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

Answer 1

执行此操作的最佳位置是您的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

哈巴狗包含文件结构说明

1 个答案: