# Best practices for shortcode files

**URL:** <https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422>\
**Category:** support\
**Created:** [January 5, 2021, 10:30am UTC](https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422 "2021-01-05T10:30:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![logoff](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/logoff/32/13160_2.png) [@logoff](https://discourse.gohugo.io/u/logoff)\
**Post date:** [January 5, 2021, 10:30am UTC](https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422/1 "2021-01-05T10:30:09Z")

</div>

Hello!

I’m building a shortcode. So far so good, even with my poor HTML/CSS knowledge.

In my case, I’m creating a shortcode to create a format for some specific content. I have HTML code and CSS styles. I would like to know the best practices in order to place files in correct places. I’m aware of [this question](https://discourse.gohugo.io/t/best-practice-css-js-code-in-shortcode/7497), but I would like to get more information, if possible.

HTML code is clear for me: I put it in `layouts/shortcodes/my-shortcode.html`.

But what about:

1. **Specific fonts**. I want to give stylized fonts with new ones like:

```auto
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css">

```

1. CSS files. Similar to 1, I want to obtained stylized layouts using my shortcode. Where should I put my CSS styles? Previous answer points to be self-contained, which makes sense. Any other ideas like files in the same folder?

2. What about **any static content** like images? This one is not clear to me. The same folder?

Thank you!

---

<div class="post-metadata">

**Author:** ![fekete-robert](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fekete-robert/32/13363_2.png) [@fekete-robert](https://discourse.gohugo.io/u/fekete-robert)\
**Post date:** [January 5, 2021, 11:17am UTC](https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422/2 "2021-01-05T11:17:28Z")

</div>

I don’t know if it’s a best practice or not, but I found this additional theme approach interesting: [https://github.com/martignoni/hugo-notice](https://github.com/martignoni/hugo-notice)

---

<div class="post-metadata">

**Author:** ![Heracles](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/heracles/32/19379_2.png) [@Heracles](https://discourse.gohugo.io/u/Heracles)\
**Post date:** [January 5, 2021, 11:30am UTC](https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422/3 "2021-01-05T11:30:07Z")

</div>

Are you planning to share this shortcode with other people / sites or is it unique to your site? Consider if specific fonts are important to your shortcode’s functionality. If they are not, just include the fonts in your custom theme. Static files should be located within `static`, either in the root folder or `themes/...theme-name.../static/` as noted here: [https://gohugo.io/content-management/static-files/](https://gohugo.io/content-management/static-files/)

A shortcode alone is contained within itself. If you need to include assets, partials etc you need to structure it like a [Theme Component](https://gohugo.io/hugo-modules/theme-components/), just like the example of _hugo-notice_ above.

The author of _hugo-notice_ decided to use inline SVG images and inline CSS, which has several shortcomings, but makes it easy to drop in without manual modification of other partials. Loading specific fonts however, has to be done by either manual modification of the header, or load them with JavaScript.

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [January 5, 2021, 12:42pm UTC](https://discourse.gohugo.io/t/best-practices-for-shortcode-files/30422/4 "2021-01-05T12:42:29Z")

</div>

I would add some form of scratch variable that is set to true the first time a short code is used. Then add in the output of the shortcode the loading of JS or CSS inline, if your scratch variable is not set, like this:

```auto
const script = document.createElement('script')
script.src = '/my/script/file.js'
document.head.append(script)

```

CSS should be able to be added likewise, with `link` instead of `script` and a `rel`-attribute. I would expect some “flash of content” before the additional scripts/styles are loaded, because they are only loaded after the page loaded fully. Also, if you use external libraries like jQuery you need to have an eye on the order that things are loaded and check if they are available at that point. `defer` and `async` are your friends.

In the long term, if you for instance use some form of hook system, you could check for the existence/use of a shortcode in a page via .HasShortcode:

> **[Create Your Own Shortcodes](https://gohugo.io/templates/shortcode-templates/#checking-for-existence)**
>
> You can extend Hugo's built-in shortcodes by creating your own using the same templating syntax as that for single and list pages.

I never tested that though… might play around with it some time.