# Theme composition pattern with Hugo?

**URL:** <https://discourse.gohugo.io/t/theme-composition-pattern-with-hugo/12718>\
**Category:** Uncategorized\
**Created:** [July 4, 2018, 12:33am UTC](https://discourse.gohugo.io/t/theme-composition-pattern-with-hugo/12718 "2018-07-04T00:33:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ppannuto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ppannuto/32/6283_2.png) [@ppannuto](https://discourse.gohugo.io/u/ppannuto)\
**Post date:** [July 4, 2018, 12:33am UTC](https://discourse.gohugo.io/t/theme-composition-pattern-with-hugo/12718/1 "2018-07-04T00:33:51Z")

</div>

I think this question is related to [How to include the "next" partial in the search path?](https://discourse.gohugo.io/t/how-to-include-the-next-partial-in-the-search-path/12680). That solved the case extending exactly one theme once, but how do I layer themes?

Specifically, what I’m trying to do is a setup of:

[site specific] --\> [optional theme variant] --\> [base theme]

In this case both the specific site, the variant, and the base theme all need to include things in the `<script>` tag in the footer. The base theme provides an empty `partials/foot-extra` to allow extension, but this only allows _either_ the variant or the specific site to overwrite the foot-extra. I could solve this by having the optional middle layer overwrite `partials/foot-extra` and have that include a `partials/foot-extra2` which the base site can overwrite, but then if I later remove the middle layer, nothing will include `foot-extra2`, and the site will break.

What is the design pattern in Hugo for _optional_ middle layers?

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [July 4, 2018, 1:31am UTC](https://discourse.gohugo.io/t/theme-composition-pattern-with-hugo/12718/2 "2018-07-04T01:31:16Z")

</div>

> [@ppannuto](#):
>
> The base theme provides an empty `partials/foot-extra` to allow extension, but this only allows _either_ the variant or the specific site to overwrite the foot-extra.

Isn’t it simple? If you want the “variant” version to be used, delete/rename that partial in your “specific site”.

If you want the “specific site” version, that’s what it will happen by default if the partial is named same as that in the “base”.

---

<div class="post-metadata">

**Author:** ![ppannuto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ppannuto/32/6283_2.png) [@ppannuto](https://discourse.gohugo.io/u/ppannuto)\
**Post date:** [July 4, 2018, 11:38pm UTC](https://discourse.gohugo.io/t/theme-composition-pattern-with-hugo/12718/3 "2018-07-04T23:38:14Z")

</div>

Not quite, I want _both_ to be used. The goal would be to have a partial (or whatever) for `foot-extra` that are the set of things that need to be added to the footer. The specific site adds some things as well as the optional theme.

If the specific site wants to use the optional middle layer, then it sets `theme = "optional"` in `config.toml`. If the optional middle layer is not in use, then it sets `theme = "base"`.

The critical property here is that the _only_ change for the specific site is the `theme` key. Remembering to change all of the intermediate partials in the specific feels like a recipe to forget to rename a few and miss them.