diff options
| -rw-r--r-- | _config.yml | 15 | ||||
| -rw-r--r-- | layout/_partial/header.ejs | 35 | ||||
| -rw-r--r-- | layout/_partial/scripts.ejs | 6 | ||||
| -rw-r--r-- | source/js/script.js | 11 | ||||
| -rw-r--r-- | source/js/script.min.js | 2 | ||||
| -rw-r--r-- | source/js/script.ts | 13 |
6 files changed, 60 insertions, 22 deletions
diff --git a/_config.yml b/_config.yml index 244a5e2..3d16dc3 100644 --- a/_config.yml +++ b/_config.yml @@ -1,4 +1,7 @@ -logo: false +logo: + enable: false + lightmode: null + darkmode: null favicon: false timeformat: "MMM, D YYYY" podcast: true @@ -9,12 +12,12 @@ highlight: lightmode: 'atom-one-light' darkmode: 'atom-one-dark' navbar: - - ['mailto:[email protected]', 'fa fa-paper-plane'] - - ['https://github.com/guiqiqi/chromate', 'fa fa-github'] - - ['/feed.rss', 'fa fa-rss'] + - ['mailto:[email protected]', 'fa fa-paper-plane', ''] + - ['https://github.com/guiqiqi/chromate', 'fa fa-github', ''] + - ['/feed.rss', 'fa fa-rss', ''] menubar: - - ['/about/', '关于'] - - ['/archives/', '归档'] + - ['/about/', 'About'] + - ['/archives/', 'Archives'] rss: enable: true path: '/feed.rss' 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> <% } %> diff --git a/source/js/script.js b/source/js/script.js index ae91858..8a3daa5 100644 --- a/source/js/script.js +++ b/source/js/script.js @@ -31,6 +31,17 @@ window.addEventListener("load", function () { }); }; darklistener.add(colorman); + // Add logo color selector + var logoman = function (mode) { + var logo = document.getElementById("logo"); + var darksrc = logo === null || logo === void 0 ? void 0 : logo.getAttribute("data-src-darkmode"); + var lightsrc = logo === null || logo === void 0 ? void 0 : logo.getAttribute("data-src-lightmode"); + if (!logo || !darksrc || !lightsrc) + return; + var src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc; + logo.setAttribute("src", src); + }; + darklistener.add(logoman); }); /* Darkmode listener */ var SystemDarkmodePrefrence; diff --git a/source/js/script.min.js b/source/js/script.min.js index 078e42b..487569f 100644 --- a/source/js/script.min.js +++ b/source/js/script.min.js @@ -1 +1 @@ -"use strict"; window.addEventListener("load", function () { var a = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); if (a.length > 0) { a.forEach(function (c) { c.addEventListener("click", function () { var e = c.getAttribute("data-target"); c.classList.toggle("is-active"); if (!e) { return } var d = document.getElementById(e); d === null || d === void 0 ? void 0 : d.classList.toggle("is-active") }, false) }) } var b = function (e) { var d = ".auto-dark"; var c = Array.prototype.slice.call(document.querySelectorAll(d), 0); c.forEach(function (f) { if (e === SystemDarkmodePrefrence.dark) { f === null || f === void 0 ? void 0 : f.classList.add("is-dark"); f === null || f === void 0 ? void 0 : f.classList.remove("is-light") } else { f === null || f === void 0 ? void 0 : f.classList.add("is-light"); f === null || f === void 0 ? void 0 : f.classList.remove("is-dark") } }) }; darklistener.add(b) }); var SystemDarkmodePrefrence; (function (a) { a[a["dark"] = 0] = "dark"; a[a["light"] = 1] = "light" })(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {})); var DarkmodeListener = (function () { function a() { var b = window.matchMedia("(prefers-color-scheme: dark)").matches; this._mode = b ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; this._handlers = []; this._listen() } a.prototype._listen = function () { var d = this; var b = window.matchMedia("(prefers-color-scheme: dark)"); var c = function (e) { var f = e.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; d._handlers.forEach(function (g) { g(f) }); d._mode = f }; b.addEventListener("change", c) }; a.prototype.add = function (b) { b(this._mode); this._handlers.push(b) }; a.prototype.mode = function () { return this._mode }; return a }()); var darklistener = new DarkmodeListener();
\ No newline at end of file +"use strict"; window.addEventListener("load", function () { var a = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); if (a.length > 0) { a.forEach(function (d) { d.addEventListener("click", function () { var f = d.getAttribute("data-target"); d.classList.toggle("is-active"); if (!f) { return } var e = document.getElementById(f); e === null || e === void 0 ? void 0 : e.classList.toggle("is-active") }, false) }) } var c = function (f) { var e = ".auto-dark"; var d = Array.prototype.slice.call(document.querySelectorAll(e), 0); d.forEach(function (g) { if (f === SystemDarkmodePrefrence.dark) { g === null || g === void 0 ? void 0 : g.classList.add("is-dark"); g === null || g === void 0 ? void 0 : g.classList.remove("is-light") } else { g === null || g === void 0 ? void 0 : g.classList.add("is-light"); g === null || g === void 0 ? void 0 : g.classList.remove("is-dark") } }) }; darklistener.add(c); var b = function (h) { var e = document.getElementById("logo"); var g = e === null || e === void 0 ? void 0 : e.getAttribute("data-src-darkmode"); var d = e === null || e === void 0 ? void 0 : e.getAttribute("data-src-lightmode"); if (!e || !g || !d) { return } var f = (h === SystemDarkmodePrefrence.dark) ? g : d; e.setAttribute("src", f) }; darklistener.add(b) }); var SystemDarkmodePrefrence; (function (a) { a[a["dark"] = 0] = "dark"; a[a["light"] = 1] = "light" })(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {})); var DarkmodeListener = (function () { function a() { var b = window.matchMedia("(prefers-color-scheme: dark)").matches; this._mode = b ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; this._handlers = []; this._listen() } a.prototype._listen = function () { var d = this; var b = window.matchMedia("(prefers-color-scheme: dark)"); var c = function (e) { var f = e.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; d._handlers.forEach(function (g) { g(f) }); d._mode = f }; b.addEventListener("change", c) }; a.prototype.add = function (b) { b(this._mode); this._handlers.push(b) }; a.prototype.mode = function () { return this._mode }; return a }()); var darklistener = new DarkmodeListener();
\ No newline at end of file diff --git a/source/js/script.ts b/source/js/script.ts index e6a2155..912c1d9 100644 --- a/source/js/script.ts +++ b/source/js/script.ts @@ -32,6 +32,19 @@ window.addEventListener("load", () => { }) } darklistener.add(colorman); + + // Add logo color selector + const logoman = (mode: SystemDarkmodePrefrence) => { + const logo = document.getElementById("logo"); + const darksrc = logo?.getAttribute("data-src-darkmode"); + const lightsrc = logo?.getAttribute("data-src-lightmode"); + if (!logo || !darksrc || !lightsrc) + return; + let src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc; + logo.setAttribute("src", src); + } + darklistener.add(logoman); + }); /* Darkmode listener */ |