diff --git a/config.toml b/config.toml index f2c9094..17b867e 100644 --- a/config.toml +++ b/config.toml @@ -176,6 +176,12 @@ default_theme = "light" # All other skins have optimal contrast. skin = "" +# List additional stylesheets to load site-wide. +# These stylesheets should be located in your site's `static` directory. +# Example: stylesheets = ["extra1.css", "path/extra2.css"] +# You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format. +stylesheets = [] + # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript). copy_button = true diff --git a/templates/partials/header.html b/templates/partials/header.html index 50b78e8..1d7c6fe 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -28,13 +28,29 @@ {% endif %} - + {# Define array of CSS files to load. main.css is always loaded. #} + {%- set stylesheets = [ "main.css" ] -%} + + {# Load extra CSS files from config.toml #} + {%- if config.extra.stylesheets -%} + {%- set stylesheets = stylesheets | concat(with=config.extra.stylesheets) -%} + {%- endif -%} + + {# Load extra CSS files from page metadata #} + {%- if page.extra.stylesheets -%} + {%- set stylesheets = stylesheets | concat(with=page.extra.stylesheets) -%} + {%- endif -%} {# Load extra CSS for custom skin #} {%- if config.extra.skin and config.extra.skin != "teal" -%} - + {%- set stylesheets = stylesheets | concat(with='skins/' ~ config.extra.skin ~ '.css') -%} {%- endif -%} + {# Load all stylesheets #} + {%- for stylesheet in stylesheets %} + + {%- endfor %} + {%- if page.description %} diff --git a/theme.toml b/theme.toml index 87a3ff7..09e4bdb 100644 --- a/theme.toml +++ b/theme.toml @@ -61,6 +61,12 @@ default_theme = "light" # All other skins have optimal contrast. skin = "" +# List additional stylesheets to load site-wide. +# These stylesheets should be located in your site's `static` directory. +# Example: stylesheets = ["extra1.css", "path/extra2.css"] +# You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format. +stylesheets = [] + # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript). copy_button = true