Giter Site home page Giter Site logo

Partials about layouts HOT 11 CLOSED

metalsmith avatar metalsmith commented on August 11, 2024
Partials

from layouts.

Comments (11)

ismay avatar ismay commented on August 11, 2024 1

Ah yes, that's right. The paths are relative to the layouts folder. If you want to move your partials outside of it, you can, just adjust your paths in the partials object accordingly.

I'll close this, let me know if anything else comes up!

from layouts.

ismay avatar ismay commented on August 11, 2024

What I'd recommend is this folder structure:

./partials
./layouts
./src

You can then use these options:

{
  "plugins": {
    "metalsmith-in-place": {
      "engine":"handlebars",
      "partials": {
        "footer": "partials/footer"
      }
    }
  }
}

Use layouts like you normally would (by specifying them in the front-matter, as outlined in the documentation). Let me know if that works for you!

from layouts.

fizzydigital avatar fizzydigital commented on August 11, 2024

I've used the structure you suggested, moved both layouts and partials outside src and added the partials object to metalsmith.json, but I can't get it to work.

I have two files:

`layouts/default.html':

<!doctype html>
<html>

    <head>

        <title>{{title}}</title>
        <link href="css/style.css" rel="stylesheet">

    </head>

    <body>

        <div class="container">{{{contents}}}</div>

        {{>footer}}

    </body>

</html>

and partials/footer.html:

<footer>

    <div class="container">

        <p>{{site.copyright}}</p>

    </div>

</footer>

But the rendered HTML looks like this:


<!doctype html>
<html>

<head>

    <title>Test site</title>
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <h1 id="just-a-test-heading">Just a test heading</h1>
        <p>Lorem ipsum sit dolor et amet.</p>
        <p><small>Written by Fizzy D</small></p>
    </div>

    partials/footer.html
</body>

</html>

Here's my metalsmith.json:

{
    "source": "src",
    "destination": "public",
    "plugins": {
        "metalsmith-less": {
            "pattern": "less/**/*.less"
        },
        "metalsmith-markdown": true,
        "metalsmith-metadata": {
            "site": "data/site.json"
        },
        "metalsmith-in-place": {
            "engine": "handlebars",
            "partials": {
                "footer": "partials/footer.html"
            }
        },
        "metalsmith-layouts": {
            "engine": "handlebars",
            "default": "default.html",
            "directory": "layouts",
            "pattern": "*.html"
        },
        "metalsmith-beautify": true,
        "metalsmith-ignore": [
            "less/*"
        ],
        "metalsmith-serve": {
            "verbose": true
        }
    }
}

from layouts.

fizzydigital avatar fizzydigital commented on August 11, 2024

Just in case, here's my index.md:

---
title: Test site
---

# Just a test heading

Lorem ipsum sit dolor et amet.

<p><small>Written by {{site.author}}</small></p>

from layouts.

ismay avatar ismay commented on August 11, 2024

The partials object should be added to metalsmith-layouts, not metalsmith-in-place. That should fix it.

from layouts.

fizzydigital avatar fizzydigital commented on August 11, 2024

Yup, it did!

One thing though: I had to put partials back inside layouts directory, because I was getting an error:

Error: ENOENT, open '/Users/admin/Sites/metalsmith/layouts/partials/footer.html'

On a side note - is there a way to make the populate the partials object using a globbing pattern?

from layouts.

fizzydigital avatar fizzydigital commented on August 11, 2024

Bump: On a side note - is there a way to make the populate the partials object using a globbing pattern?

from layouts.

ismay avatar ismay commented on August 11, 2024

There will be soon, I'm working on it as we speak :). It won't accept a glob, but will allow you to specify a folder which will be scanned for partials.

from layouts.

fizzydigital avatar fizzydigital commented on August 11, 2024

Wicked! I have just started playing with Metalsmith, but so far my mind is blown! I mean - WOW! Thanks man!

from layouts.

ismay avatar ismay commented on August 11, 2024

:) No problem, happy to help!

from layouts.

ismay avatar ismay commented on August 11, 2024

@fizzydigital Checkout version 1.3.0 for the new partials option: https://github.com/superwolff/metalsmith-layouts/releases/tag/1.3.0

from layouts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.