diff options
| author | Doge <[email protected]> | 2021-05-11 23:16:57 +0800 |
|---|---|---|
| committer | Doge <[email protected]> | 2021-05-11 23:16:57 +0800 |
| commit | 0b49431daaf26a02b45ac694a95fbbdfae8141fb (patch) | |
| tree | b60bfff6214313b65b5c364199f57f6ee1eb8ca3 /layout | |
| parent | a52af01f4d90176df0dccf3190a99aef11db33b3 (diff) | |
| download | chromate-0b49431daaf26a02b45ac694a95fbbdfae8141fb.tar.gz chromate-0b49431daaf26a02b45ac694a95fbbdfae8141fb.tar.bz2 chromate-0b49431daaf26a02b45ac694a95fbbdfae8141fb.zip | |
Add support for logo with dark mode and icon descriptions
Diffstat (limited to 'layout')
| -rw-r--r-- | layout/_partial/header.ejs | 35 | ||||
| -rw-r--r-- | layout/_partial/scripts.ejs | 6 |
2 files changed, 26 insertions, 15 deletions
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index 8ad3684..46c5fc5 100644 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -3,8 +3,8 @@ <header class="navbar" aria-label="main navigation"> <div class="container"> <div class="navbar-brand header-title"> - <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>"> - <%= config.title %> + <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>"> + <%= config.title %> </a> <a role="button" class="navbar-burger" data-target="header-menu" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> @@ -28,33 +28,40 @@ <div class="hero-body"> <div class="container has-text-centered"> <p class="title"> - <% if (theme.logo) { %> - <span class="header-logo" style="background-image: url('<%= theme.logo %>');"> - </span> - <% } else { %> - <span class="header-title is-size-2 is-family-monospace is-uppercase"> + <span class="is-size-2 is-family-monospace is-uppercase"> + <% if (theme.logo.enable) { %> + <img id="logo" data-src-lightmode="<%= theme.logo.lightmode %>" + data-src-darkmode="<%= theme.logo.darkmode %>" style="max-width: 200px;" /> + <% } else { %> <%= config.title %> - </span> - <% } %> + <% } %> + </span> </p> <p class="subtitle is-size-6"> <%- config.description %> - <ul class="header-navbar"> + <div> <% for (let index in theme.navbar) { %> <% const mapping = theme.navbar[index]; const link = mapping[0]; const favicon = mapping[1]; + const description = mapping[2]; let outter = link.startsWith("https://") ? true : false; %> <% if (outter) { %> - <a class="icon" href="<%= link %>" target="_blank" rel="noopener noreferrer"> + <a href="<%= link %>" target="_blank" rel="noopener noreferrer"> <% } else { %> - <a class="icon" href="<%= link %>"> + <a href="<%= link %>"> <% } %> - <i class="<%= favicon %>"></i></a> + <span class="icon-text"> + <span class="icon"> + <i class="<%= favicon %>"></i> + </span> + <span><%= description %></span> + </span> + </a> <% } %> - </ul> + </div> </p> </div> </div> diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 63975f4..da0a8a1 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -1,13 +1,17 @@ <!-- Lazyload support --> <%- js('js/script.min.js') %> <% if (theme.lazyload) { %> - <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.min.js"></script> + <script async defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.min.js"></script> <script> window.lazyLoadOptions = { elements_selector: ".lazy", threshold: 0, effect: "fadeIn" }; + window.addEventListener("LazyLoad::Initialized", + function (event) { + window.lazyLoader = event.detail.instance; + }, false); </script> <% } %> |