HUGO

Something like shortcodes in layouts?

I’m currently using tachyons (functional css library) for a project. With a library like tachyons, you basically write styles inline (this isn’t 100% accurate, but that’s generally how it works). You can imagine this may yield a lot of redundant styles. Thus, it’s highly encouraged that you build composable wrappers similar to React components.

How can I achieve this in Hugo? Specifically in a layout? I have taken a look at partials, but they don’t support wrapping. Blocks work, but it’s limited in terms of choosing multiple templates from anywhere, anyhow. It’s not that composable.

Thanks.

The “inline styles” you are referring are Tachyons class names, if I recall correctly.

e.g.: <div class="flex-l mt2 mw8 center">

The above example is from the single.html template of the Ananke Hugo theme by @budparr that utilizes the Tachyons framework.

You can view the theme repo to get an idea about using Tachyons in a Hugo project over here: https://github.com/budparr/gohugo-theme-ananke/

In Hugo like you said there are block templates, partials and if you need to call special classes on a per post basis there are also frontmatter parameters that you can call in a template if they exist.

Also take a look at Hugo Content Types https://gohugo.io/content-management/types/#assign-a-content-type
Type is an alias of Section and you may define different Layouts per Content Type.

With that said I am not a fan of the workflow you describe.

Unless you mean that you’re not a fan of functional css, this workflow is actually standard when working with tachyons.

A good example is sharing link styles. Instead of having to copy and paste the class names for multiple anchor tags, in React, we create a component that holds these styles and render out the text that we put in. I think you can already do this with partials, but they fall short when we try to pass in elements (if someone could verify this, it would be great) for container/wrapper styles.

I’ve considered content types as well, but it’s still fairly limited. Something like shortcodes for templates is what I’m looking for. Something composable and not limited to a page.

define and inline template definitions in partials can maybe help:

1 Like

@bryankang I’m not certain at what you’re looking for, but I’m a big fan of Tachyons. Here are a few things I do with them (which are not specific to Tachyons, but are beneficial to using them):


One: Assign sets of classes in a data file or config. Arguably, you could do this with a post-processing workflow, but I find this is simple and flexibile:

For example, in data/globals.yaml or in your config:

box_styles: "bg-white gray mb3 ph4 pv3"

and in a template, something like:
{{.Site.Data.globals.box_styles}}


Two: Assign class names through the dict function in a partial:

In a partial (I often create a folder in my partials called “components” and put stuff like this in it):

/component/component.html

<div class="{{with .classes}}{{.}}{{end}}">
	//stuff
</div>

In your template:

{{partial "components/component.html" (dict "classes" "bg-white gray mb3 ph4 pv3") }}


Of course, you can create simple variables with class names to reuse them, or whatever works best for you. Overall, the combination of Hugo and Tachyons makes for an extremely efficient workflow. Hope that helps!

4 Likes

@budparr Your first approach sounds incredibly awesome. It actually inspired me to think of another approach using @extend in sass. The only issue I see with these, or css in general, is that accidentally overriding a class name may yield unexpected results due to how cascading works in css. But that’s a different story altogether, although worth nothing.

I work with Tachyons as well and solved it this way:

In my config.yml I have under params: a section combos:

combos:
    message: bg-navy pa4 white tc lh-large
    codeblock: bg-maroon white-40 center br3
    code: bg-yellow ph1
    code_w_bg: bg-gray pa1
    article: bg-dark-blue w-50 center

I call these in the template, partial or shortcode with class="{{ .Site.Params.combos.code }}".

Works like a charm. Important to know: In the combos should be only the absolut general styles so that you can for example use class="{{ .Site.Params.combos.code }} mt0 pl2". That’s just more flexible.

You can name the parts in config.yml also like their HTML pendants (e. g. h1, h2, p etc.).

Have fun with Tachyons!