search

posthtml / posthtml-extend

Template extending (Jade-like)
MIT License
46 stars 9 forks source link

Pass class to body tag #21

Closed bigskillet closed 3 years ago

bigskillet commented 4 years ago

How might I pass a class="home" to the <body> tag in the extended layout? I tried passing a block from home.html, but it gives me an error when I put it inside the <body> tag.

_layout.html

<html lang="en">
  <head>
    <title>Webpack</title>
  </head>
  <body>
    <main>
      <block name="content"></block>
    </main>
  </body>
</html>

home.html

<extends src="_layout.html">
  <block name="content">
    <h1>Home</h1>
  </block>
</extends>
Scrum commented 4 years ago

@bigskillet Hi, could you put an example on a github with error reproduction and with the expected result?

bigskillet commented 4 years ago

For example, if write:

home.html

<extends src="_layout.html">
  <block name="class">home</block>
  <block name="content">
    <h1>Home</h1>
  </block>
</extends>

and try to pass the "class" block to:

_layout.html

<html>
  <head>
    <title>Webpack</title>
  </head>
  <body class="<block name='class'></block>">
    <main>
      <block name="content"></block>
    </main>
  </body>
</html>

it gives me the error: 

Error: Child compilation failed:
Module build failed (from ./node_modules/posthtml-loader/lib/index.js):
PostHTML Loader: 
[posthtml-extend] Unexpected block "class"

Expected result would be:

<body class="home">

Scrum commented 4 years ago

This plugin does not work with attributes, but this is a good suggestion, welcome PR

andrhamm commented 4 years ago

@bigskillet I achieve this with the posthtml-expressions plugin

bigskillet commented 4 years ago

@andrhamm you were able to pass a local variable from the template to the layout using html? The only way I see to do it is by setting the local in webpack, which is not the functionality I'm looking for.

require('posthtml-expressions')({
  locals: {
    className: 'home'
  }
})
anantakrishna commented 3 years ago

Personally, I cannot see such a plugin useful without ability to pass arbitrary data to the parent layout. Too many use cases require such thing. Therefore waiting for #36 eagerly.

Simple example: how to emphasise the current (active) menu item based on the page which is rendered? Overriding a block is not practical in this case.

anantakrishna commented 3 years ago

For the record, here is how it is handled in PUG: https://stackoverflow.com/a/29089926/3082178. In short:

Create a block at the top of the base layout and add your variables in there.

But I guess this is not applicable to PostHTML at all.