Access `[[module.imports]]` in template

support
1

I am using modules for my theme, but I want to give the end user the option to utilize CDNs if they choose. This is what I am working with now:

[[module.imports]]
    path = "github.com/necolas/normalize.css"
    disable = false
    [[module.imports.mounts]]
        source = "normalize.css"
        target = "assets/css/normalize.css"
        cdn = "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"

I was curious if I could use something like {{ range .Site.Module.Imports }} to access the cdn from the config file, but this throws the error can't evaluate field Module in type page.Site. Is this possible, or is the best practice to put it under a param?

2

The field cdn is not defined in the module schema. Why not simply use site.Params for this as it makes more sense.

3

The “why” is that putting it in params doesn’t make more sense otherwise I wouldn’t have asked. If I have a module and want the ability to use a not use a CDN, it would make sense to use a param to turn that on or off and the module would provide the proper link for that resource. This separates the data from the function making it easier for the end user of the theme. Big config files are daunting, so this seperation is huge. Also, my personal take (which is of no value) is that params should be reserved for things the end user can and should have the ability to modify. Using CDN or local? Yes. Setting the link to a library CDN? Probably not, so its seperated and if they want to dig in the config they can change it.

That being said, you didn’t really answer the fundamental question of whether your can call module data through a template.

4

So, cdn isnt’t part of the schema, so that would not show up in the imports anyhow, but:

In general, we do not expose configuration to the templates (or in the API), and there are several good reasons for that, but mostly that it then becomes a part of the API and we cannot easily change it (which we do a lot when we add new features and figure that we might as well consolidate some old configuration with the new stuff added).

5

Thanks for clarifying that it’s inaccessible from the template. Either I missed that in the docs or is something I might go back and help further clarify.

Is this a case that you think is worth a feature request? I think there is value in associating a CDN link with the module.

6

The value is in your specific use case only, not in a general way. If I would require that feature (let users of my module decide if and what CDN they want to use) I would solve this the following way:

  • add a toml config in data/namespace/module/config.toml
  • in there something like
    cdn = true
[library]
path = "https://cdnlink"
  • then mount data to data with the module
  • users can override this by adding their own data/namespace/module/config.toml

In the layout then {{ if site.Data.namespace.module.config.cdn }} and <script src="{{ site.Data.namespace.module.config.library.path}}">.

7

Thanks for the ideas and information everyone. I decided to a mixture of the solutions provided. Adding it here for someone else that might come across this.

    [[module.imports]]
        path = "github.com/necolas/normalize.css"
        disable = false
        [[module.imports.mounts]]
            source = "normalize.css"
            target = "assets/css/normalize.css"
            [[params.library]]
                name = "normalizecss"
                type = "style"
                path = "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"

        {{- if .Site.Params.cdn }}
            {{- range .Site.Params.Library }}
                {{- if eq .type "style" }}
                    <link rel="stylesheet" href="{{ .path }}">
                {{- end }}
            {{- end }}
        {{- else }}
            {{- $normalizecss := resources.Get "css/normalize.css" }}
            {{- $scss := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "css/main.css" . | toCSS }}
            {{- $styles = slice $normalizecss $scss | resources.Concat "css/bundle.css" | minify | fingerprint -}}
        {{- end }}

If I wanted to future-proof my template more I could probably change the resources.Get into a loop as well.

1 Like
8

Thanks for sharing. This is a well consolidated way to configure modules.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.