[SOLVED] Custom CSS for each page

support
1

Hello guys,

is there a way to include different css files for each page?
For example :

Page 1
---
title: "Tabs with Dropdown Menu"
date: 2018-04-21T16:27:32+02:00
draft: true
customCss: ["css/page1.css"]
--- 

Page 2
---
title: "Vertical Tabs"
date: 2018-04-21T16:27:32+02:00
draft: true
customCss: ["css/page2.css"]
---

Thank You

2 
customcss: "/css/page2.css"

In template:

<link rel="stylesheet" href="{{ .Params.customcss }}" />
3 Likes
3

THANK YOU SO MUCH !!

Now i understand so much more about how things work in hugo, this helped a lot

4

In case you want to handle the case when “customcss” is not defined, you may want to use the with function like so:

{{ with .Params.customcss }}<link rel="stylesheet" href="{{ . }}" />{{ end }}

This way you won’t end up with an empty link to a stylesheet if you ever need to have a page without a custom css :slight_smile:

3 Likes