extra config option to allow users to select their own style
This commit is contained in:
Robert Clarke
parent
e5b09a5d60
commit
bb48d3da34
10 changed files with 153 additions and 61 deletions
|
|
@ -149,12 +149,19 @@ In extra, setting `zulma_theme` to a valid value will change the current colour
|
|||
- pulse
|
||||
- simplex
|
||||
|
||||
Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
|
||||
All valid themes can also be found under the `extras.zulma_themes` variable in the `config.toml`. Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
zulma_theme = "darkly"
|
||||
```
|
||||
|
||||
Additionally, in extra, you can also set the `zulma_allow_theme_selection` boolean. Setting this to true will allow a menu in the footer to allow users to select their own theme. This requires javascript to be enabled to function; if the page detects javascript is disabled on the clients machine, it will hide itself.
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
zulma_allow_theme_selection = true
|
||||
```
|
||||
|
||||
## Original
|
||||
This template is based on the [blog template](https://dansup.github.io/bulma-templates/templates/blog.html) over at [Free Bulma Templates](https://dansup.github.io/bulma-templates/). The code behind from adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template.
|
||||
11
config.toml
11
config.toml
|
|
@ -2,4 +2,13 @@
|
|||
base_url = "https://example.com"
|
||||
|
||||
# Whether to automatically compile all Sass files in the sass directory
|
||||
compile_sass = true
|
||||
compile_sass = true
|
||||
|
||||
build_search_index = true
|
||||
|
||||
[extra]
|
||||
zulma_title = "Blog"
|
||||
zulma_brand = { image = "$BASE_URL/images/bulma.png", text = "Home" }
|
||||
zulma_theme = "darkly"
|
||||
zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex"]
|
||||
zulma_allow_theme_selection = true
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
+++
|
||||
paginate_by = 5
|
||||
+++
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
+++
|
||||
title = "What is Gutenberg"
|
||||
date = 2017-09-20
|
||||
|
||||
[taxonomies]
|
||||
categories = ["Hello world"]
|
||||
tags = ["rust", "ssg"]
|
||||
+++
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
+++
|
||||
title = "A first theme for Gutenberg"
|
||||
date = 2017-09-29
|
||||
|
||||
[taxonomies]
|
||||
categories = ["Hello world"]
|
||||
tags = ["rust", "ssg", "other"]
|
||||
+++
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@ html,
|
|||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
//background: #F0F2F4;
|
||||
}
|
||||
|
||||
.navbar.is-white {
|
||||
//background: #F0F2F4;
|
||||
}
|
||||
|
||||
.navbar-brand .brand-text {
|
||||
|
|
@ -26,17 +21,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.author-image {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: -30px;
|
||||
//border: 3px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.media-center {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -74,10 +58,7 @@ body {
|
|||
.article-footer {
|
||||
font-style: italic;
|
||||
padding: 1.5rem;
|
||||
|
||||
.columns {
|
||||
width: 100%;
|
||||
}
|
||||
width:100%;
|
||||
|
||||
.button,
|
||||
.tag {
|
||||
|
|
@ -128,4 +109,9 @@ body {
|
|||
|
||||
input#search::placeholder{
|
||||
color: $grey-darker;
|
||||
}
|
||||
|
||||
.footer{
|
||||
margin-top: 4rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
42
static/js/switchcss.js
Normal file
42
static/js/switchcss.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
const THEME_KEY = "ZULMA_THEME";
|
||||
|
||||
function changeTheme(themeName) {
|
||||
let alternates = [];
|
||||
|
||||
document.querySelectorAll('link.stylesheet').forEach(element => {
|
||||
if (element.id === themeName) {
|
||||
element.media = '';
|
||||
}
|
||||
else {
|
||||
alternates.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
alternates.forEach(element => {
|
||||
element.media = 'none';
|
||||
});
|
||||
|
||||
saveTheme(themeName);
|
||||
}
|
||||
|
||||
function saveTheme(themeName) {
|
||||
localStorage.setItem(THEME_KEY, themeName);
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
let theme = localStorage.getItem(THEME_KEY);
|
||||
if (theme) {
|
||||
changeTheme(theme);
|
||||
document.querySelectorAll('#theme-select>option').forEach(element => {
|
||||
if (element.value === theme) {
|
||||
element.selected = 'selected';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.getElementById('theme-select').onchange = function () {
|
||||
changeTheme(this.value);
|
||||
}
|
||||
});
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
|
||||
|
|
@ -15,28 +16,27 @@
|
|||
{% block title %}{{ config.title }}{% endblock title %}
|
||||
</title>
|
||||
|
||||
{% if config.extra.zulma_theme %}
|
||||
<link rel="preload" as="style" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link rel="preload" as="style" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% for theme in config.extra.zulma_themes %}
|
||||
<link rel="preload" as="style" href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% endfor %}
|
||||
|
||||
{% block css %}
|
||||
{{ index_macros::css() }}
|
||||
{% endblock css %}
|
||||
|
||||
{% if config.generate_rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
|
||||
{% endif %}
|
||||
|
||||
{% block css %}
|
||||
{% if config.extra.zulma_theme %}
|
||||
<link rel="stylesheet" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% endblock css %}
|
||||
|
||||
{% block js %}
|
||||
{% if config.build_search_index %}
|
||||
<script defer type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
|
||||
<script defer type="text/javascript" src="{{ get_url(path="search_index.en.js") }}"></script>
|
||||
{% endif }
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
<script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock js %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% endblock extra_head %}
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
}
|
||||
</style>
|
||||
</noscript>
|
||||
{% endblock head %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -84,6 +85,8 @@
|
|||
</main>
|
||||
{% endblock content %}
|
||||
|
||||
{{ index_macros::footer() }}
|
||||
|
||||
<script type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
|
||||
|
||||
{% if config.build_search_index %}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if config.build_search_index %}
|
||||
<div class="navbar-item search-container js-only">
|
||||
<input class="input is-primary" id="search" type="search" placeholder="Search">
|
||||
|
|
@ -91,4 +92,57 @@
|
|||
</nav>
|
||||
</header>
|
||||
{% endif %}
|
||||
{% endmacro navbar %}
|
||||
{% endmacro navbar %}
|
||||
|
||||
{% macro footer() %}
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
<footer class="footer js-only">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<div class="is-pulled-right">
|
||||
Theme:
|
||||
<select id="theme-select">
|
||||
{% for theme in config.extra.zulma_themes %}
|
||||
{% if config.extra.zulma_theme %}
|
||||
{% set default_theme = config.extra.zulma_theme %}
|
||||
{% else %}
|
||||
{% set default_theme = "default" %}
|
||||
{% endif %}
|
||||
{% if default_theme == theme %}
|
||||
<option selected="selected" value="{{ theme }}">{{ theme }}</option>
|
||||
{% else %}
|
||||
<option value="{{ theme }}">{{ theme }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% endif %}
|
||||
{% endmacro footer %}
|
||||
|
||||
{% macro css() %}
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
{% for theme in config.extra.zulma_themes %}
|
||||
{% if config.extra.zulma_theme %}
|
||||
{% set default_theme = config.extra.zulma_theme %}
|
||||
{% else %}
|
||||
{% set default_theme = "default" %}
|
||||
{% endif %}
|
||||
{% if default_theme == theme %}
|
||||
<link id="{{theme}}" class="stylesheet" rel="stylesheet"
|
||||
href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link id="{{theme}}" class="stylesheet" media="none" rel="stylesheet"
|
||||
href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% elif config.extra.zulma_theme %}
|
||||
<link rel="stylesheet" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% endmacro css %}
|
||||
|
|
@ -46,19 +46,21 @@
|
|||
{% endmacro page_in_list %}
|
||||
|
||||
{% macro post_footer(page) %}
|
||||
<footer class="card-footer article-footer">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<p>
|
||||
Published
|
||||
{{self::post_footer_date(page=page)}}
|
||||
{{self::post_footer_authors(page=page)}}
|
||||
{{self::post_footer_categories(page=page)}}
|
||||
{{self::post_footer_tags(page=page)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a class="button is-pulled-right is-info" href="/">Back Home</a>
|
||||
<footer class="card-footer">
|
||||
<div class="article-footer">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<p>
|
||||
Published
|
||||
{{self::post_footer_date(page=page)}}
|
||||
{{self::post_footer_authors(page=page)}}
|
||||
{{self::post_footer_categories(page=page)}}
|
||||
{{self::post_footer_tags(page=page)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a class="button is-pulled-right is-info" href="/">Back Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue