alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

✨feat(config): add dynamic stylesheet loading (#118)

Browse Source
This commit is contained in:
Óscar 2023-08-26 15:07:21 +02:00 committed by GitHub
parent 1c3db86b75
commit fac730efad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config.toml
View File

@ -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

20
templates/partials/header.html
View File

@ -28,13 +28,29 @@
<link rel="stylesheet" href={{ get_url(path="inter_subset_es.css" ) }}>
{% endif %}
<link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css", cachebust=true ) }} />
{# 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" -%}
<link rel="stylesheet" href="{{ get_url(path='skins/' ~ config.extra.skin ~ '.css', cachebust=true) | safe }}" />
{%- set stylesheets = stylesheets | concat(with='skins/' ~ config.extra.skin ~ '.css') -%}
{%- endif -%}
{# Load all stylesheets #}
{%- for stylesheet in stylesheets %}
<link rel="stylesheet" href="{{ get_url(path=stylesheet, cachebust=true) | safe }}" />
{%- endfor %}
<meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}">
{%- if page.description %}

6
theme.toml
View File

@ -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