Javascript per page

Using Themes
1

Greetings,

Is there a way to add Javascript and css files to the header on a per page bases? I am using the Academic Theme which has a provision for adding custom JavaScript and CSS site wide, but I would like to only load the javascript and css on a per page bases. Academic documentation: https://sourcethemes.com/academic/docs/customization/#add-scripts-js

2

Yes. However you designate a page, load a conditional that checks for that condition and load what you need. One suggestion is front matter.

Doing so requires understanding which template you are overriding to add your conditional, and producing the conditional statement to check. Please refer to many docs. :slight_smile:

3

My solution, in an environment where I am the only one editing, was to create a frontmatter param with the <script> tags I need.

---
date: 2019-03-07T21:39:59+01:00
description: ""
draft: false
resources: 
- src: images/eQdX_nIQ.jpg
  name: "header"
slug:
subtitle: '#TwitterchatPT #9'
tags: 
 - 
categories: 
  - 
title: "title goes here"
scripts:
  - '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> '
---

and then, in baseof.html:

		{{- with .Params.scripts -}}
			{{- range . -}}
				{{- . | safeHTML -}}
			{{- end -}}
		{{- end -}}