hexo-theme-lnote 1.2.3

package/source/js/color-schema.js

@@ -0,0 +1,279 @@
+/* global LNote */
+
+/**
+ * Modified from https://blog.skk.moe/post/hello-darkmode-my-old-friend/
+ */
+(function(window, document) {
+  var rootElement = document.documentElement;
+  var colorSchemaStorageKey = 'Lnote_Color_Scheme';
+  var colorSchemaMediaQueryKey = '--color-mode';
+  var userColorSchemaAttributeName = 'data-bs-theme';
+  var defaultColorSchemaAttributeName = 'data-default-color-scheme';
+  var colorToggleButtonSelector = '#color-toggle-btn';
+  var colorToggleIconSelector = '#color-toggle-icon';
+
+  function setLS(k, v) {
+    try {
+      localStorage.setItem(k, v);
+    } catch (e) {}
+  }
+
+  function removeLS(k) {
+    try {
+      localStorage.removeItem(k);
+    } catch (e) {}
+  }
+
+  function getLS(k) {
+    try {
+      return localStorage.getItem(k);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function getSchemaFromHTML() {
+    var res = rootElement.getAttribute(defaultColorSchemaAttributeName);
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function getSchemaFromCSSMediaQuery() {
+    var res = getComputedStyle(rootElement).getPropertyValue(
+      colorSchemaMediaQueryKey
+    );
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function resetSchemaAttributeAndLS() {
+    rootElement.setAttribute(userColorSchemaAttributeName, getDefaultColorSchema());
+    removeLS(colorSchemaStorageKey);
+  }
+
+  var validColorSchemaKeys = {
+    dark : true,
+    light: true
+  };
+
+  function getDefaultColorSchema() {
+    // 取默认字段的值
+    var schema = getSchemaFromHTML();
+    // 如果明确指定了 schema 则返回
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 默认优先按 prefers-color-scheme
+    schema = getSchemaFromCSSMediaQuery();
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 否则按本地时间是否大于 18 点或凌晨 0 ~ 6 点
+    var hours = new Date().getHours();
+    if (hours >= 18 || (hours >= 0 && hours <= 6)) {
+      return 'dark';
+    }
+    return 'light';
+  }
+
+  function applyCustomColorSchemaSettings(schema) {
+    // 接受从「开关」处传来的模式，或者从 localStorage 读取，否则按默认设置值
+    var current = schema || getLS(colorSchemaStorageKey) || getDefaultColorSchema();
+
+    if (current === getDefaultColorSchema()) {
+      // 当用户切换的显示模式和默认模式相同时，则恢复为自动模式
+      resetSchemaAttributeAndLS();
+    } else if (validColorSchemaKeys[current]) {
+      rootElement.setAttribute(
+        userColorSchemaAttributeName,
+        current
+      );
+    } else {
+      // 特殊情况重置
+      resetSchemaAttributeAndLS();
+      return;
+    }
+
+    // 根据当前模式设置图标
+    setButtonIcon(current);
+
+    // 设置代码高亮
+    setHighlightCSS(current);
+
+    // 设置其他应用
+    setApplications(current);
+  }
+
+  var invertColorSchemaObj = {
+    dark : 'light',
+    light: 'dark'
+  };
+
+  function getIconClass(scheme) {
+    return 'icon-' + scheme;
+  }
+
+  function toggleCustomColorSchema() {
+    var currentSetting = getLS(colorSchemaStorageKey);
+
+    if (validColorSchemaKeys[currentSetting]) {
+      // 从 localStorage 中读取模式，并取相反的模式
+      currentSetting = invertColorSchemaObj[currentSetting];
+    } else if (currentSetting === null) {
+      // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error
+      // 先按照按钮的状态进行切换
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        currentSetting = iconElement.getAttribute('data');
+      }
+      if (!iconElement || !validColorSchemaKeys[currentSetting]) {
+        // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error，则读取默认值并切换到相反的模式
+        currentSetting = invertColorSchemaObj[getSchemaFromCSSMediaQuery()];
+      }
+    } else {
+      return;
+    }
+    // 将相反的模式写入 localStorage
+    setLS(colorSchemaStorageKey, currentSetting);
+
+    return currentSetting;
+  }
+
+  function setButtonIcon(schema) {
+    if (validColorSchemaKeys[schema]) {
+      // 切换图标
+      var icon = getIconClass('dark');
+      if (schema) {
+        icon = getIconClass(schema);
+      }
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        iconElement.setAttribute(
+          'class',
+          'iconfont ' + icon
+        );
+        iconElement.setAttribute(
+          'data',
+          invertColorSchemaObj[schema]
+        );
+      } else {
+        // 如果图标不存在则说明图标还没加载出来，等到页面全部加载再尝试切换
+        LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
+          var iconElement = document.querySelector(colorToggleIconSelector);
+          if (iconElement) {
+            iconElement.setAttribute(
+              'class',
+              'iconfont ' + icon
+            );
+            iconElement.setAttribute(
+              'data',
+              invertColorSchemaObj[schema]
+            );
+          }
+        });
+      }
+      if (document.documentElement.getAttribute('data-bs-theme')) {
+        var color = getComputedStyle(document.documentElement).getPropertyValue('--navbar-bg-color').trim()
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
+      }
+    }
+  }
+
+  function setHighlightCSS(schema) {
+    // 启用对应的代码高亮的样式
+    var lightCss = document.getElementById('highlight-css');
+    var darkCss = document.getElementById('highlight-css-dark');
+    if (schema === 'dark') {
+      if (darkCss) {
+        darkCss.removeAttribute('disabled');
+      }
+      if (lightCss) {
+        lightCss.setAttribute('disabled', '');
+      }
+    } else {
+      if (lightCss) {
+        lightCss.removeAttribute('disabled');
+      }
+      if (darkCss) {
+        darkCss.setAttribute('disabled', '');
+      }
+    }
+
+    setTimeout(function() {
+      // 设置代码块组件样式
+      document.querySelectorAll('.markdown-body pre').forEach((pre) => {
+        var cls = LNote.utils.getBackgroundLightness(pre) >= 0 ? 'code-widget-light' : 'code-widget-dark';
+        var widget = pre.querySelector('.code-widget-light, .code-widget-dark');
+        if (widget) {
+          widget.classList.remove('code-widget-light', 'code-widget-dark');
+          widget.classList.add(cls);
+        }
+      });
+    }, 200);
+  }
+
+  function setApplications(schema) {
+    // 设置 remark42 评论主题
+    if (window.REMARK42) {
+      window.REMARK42.changeTheme(schema);
+    }
+
+    // 设置 cusdis 评论主题
+    if (window.CUSDIS) {
+      window.CUSDIS.setTheme(schema);
+    }
+
+    // 设置 utterances 评论主题
+    var utterances = document.querySelector('.utterances-frame');
+    if (utterances) {
+      var utterancesTheme = schema === 'dark' ? window.UtterancesThemeDark : window.UtterancesThemeLight;
+      const message = {
+        type : 'set-theme',
+        theme: utterancesTheme
+      };
+      utterances.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+
+    // 设置 giscus 评论主题
+    var giscus = document.querySelector('iframe.giscus-frame');
+    if (giscus) {
+      var giscusTheme = schema === 'dark' ? window.GiscusThemeDark : window.GiscusThemeLight;
+      const message = {
+        setConfig: {
+          theme: giscusTheme,
+        }
+      };
+      giscus.contentWindow.postMessage({ 'giscus': message }, 'https://giscus.app');
+    }
+  }
+
+  // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
+  applyCustomColorSchemaSettings();
+
+  LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
+    applyCustomColorSchemaSettings();
+    var button = document.querySelector(colorToggleButtonSelector);
+    if (button) {
+      // 当用户点击切换按钮时，获得新的显示模式、写入 localStorage、并在页面上生效
+      button.addEventListener('click', function() {
+        applyCustomColorSchemaSettings(toggleCustomColorSchema());
+      });
+      var icon = document.querySelector(colorToggleIconSelector);
+      if (icon) {
+        // 光标悬停在按钮上时，切换图标
+        button.addEventListener('mouseenter', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(invertColorSchemaObj[current]), getIconClass(current));
+        });
+        button.addEventListener('mouseleave', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(current), getIconClass(invertColorSchemaObj[current]));
+        });
+      }
+    }
+  });
+})(window, document);

package/source/js/events.js

@@ -0,0 +1,72 @@
+LNote.events = {
+    registerNavbarEvent() {
+        const $navbar = document.getElementById('navbar')
+        if (!$navbar) {
+            return
+        }
+
+        function $navUd() {
+            const top = window.scrollY || document.documentElement.scrollTop
+            if (top > 0) {
+                $navbar.classList.remove('navbar-dark')
+                if (top > 50) {
+                    $navbar.classList.add('top-nav-collapse')
+                } else {
+                    $navbar.classList.remove('top-nav-collapse')
+                }
+            } else {
+                $navbar.classList.add('navbar-dark')
+            }
+        }
+        $navUd()
+        LNote.utils.listenScroll($navUd)
+
+        document
+            .getElementById('navbar-toggler-btn')
+            .addEventListener('click', (e) => {
+                document
+                    .querySelector('.animated-icon')
+                    .classList.toggle('open')
+                $navbar.classList.toggle('navbar-col-show')
+            })
+    },
+
+    /* registerImageLoadedEvent: function () {
+        if (!('NProgress' in window)) {
+            return
+        }
+
+        var bg = document.getElementById('banner')
+        if (bg) {
+            var src = bg.style.backgroundImage
+            var url = src.match(/\((.*?)\)/)[1].replace(/(['"])/g, '')
+            var img = new Image()
+            img.onload = function () {
+                window.NProgress && window.NProgress.inc(0.2)
+            }
+            img.src = url
+            if (img.complete) {
+                img.onload()
+            }
+        }
+
+        var notLazyImages = jQuery('main img:not([lazyload])')
+        var total = notLazyImages.length
+        for (const img of notLazyImages) {
+            const old = img.onload
+            img.onload = function () {
+                old && old()
+                window.NProgress && window.NProgress.inc(0.5 / total)
+                img.onload = null
+            }
+            if (img.complete) {
+                img.onload()
+            }
+        }
+    }, */
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    LNote.events.registerNavbarEvent()
+    // LNote.events.registerImageLoadedEvent()
+})

package/source/js/img-lazyload.js

@@ -0,0 +1,10 @@
+/* global LNote, CONFIG */
+
+(function(window, document) {
+  for (const each of document.querySelectorAll('img[lazyload]')) {
+    LNote.utils.waitElementVisible(each, function() {
+      each.removeAttribute('srcset');
+      each.removeAttribute('lazyload');
+    }, 2);
+  }
+})(window, document);

package/source/js/local-search.js

@@ -0,0 +1,70 @@
+;(() => {
+    const $modal = document.getElementById('modalSearch')
+    const $input = document.getElementById('modalSearchInput')
+    const $result = document.getElementById('modalSearchResult')
+    let inputThol
+
+    let dataSource
+    function fetchData() {
+        if (dataSource != null) {
+            return
+        }
+        $result.innerHTML =
+            '<div class="m-auto text-center"><div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
+        fetch(LNote.root + 'content.json')
+            .then((rep) => rep.json())
+            .then((res) => (dataSource = res))
+            .finally(() => ($result.innerHTML = ''))
+    }
+
+    $modal.addEventListener('show.bs.modal', () => {
+        fetchData()
+        $input.focus()
+    })
+
+    $modal.addEventListener('hidden.bs.modal', () => {
+        console.log('hide')
+    })
+
+    $input.addEventListener('input', (e) => {
+        if (dataSource == null) {
+            return
+        }
+        clearTimeout(inputThol)
+        inputThol = setTimeout(() => {
+            const kw = e.target.value.trim()
+            if (kw === '') {
+              return
+            }
+            const matchedList = dataSource.filter((item) => {
+                return item.excerpt.includes(kw) || item.title.includes(kw)
+            })
+            if (matchedList.length > 0) {
+                e.target.classList.remove('invalid')
+                e.target.classList.add('valid')
+                const { root } = LNote
+                $result.innerHTML = matchedList
+                    .map((item) => {
+                        let { excerpt, title } = item
+                        if (excerpt.includes(kw)) {
+                            excerpt = excerpt.replace(
+                                kw,
+                                `<span class="text-success-emphasis">${kw}</span>`
+                            )
+                        } else if (title.includes(kw)) {
+                            title = title.replace(
+                                kw,
+                                `<span class="text-success-emphasis">${kw}</span>`
+                            )
+                        }
+
+                        return `<div><a href="${root}${item.path}" class="fs-5 link-warning">${title}</a><p>${excerpt}</p></div>`
+                    })
+                    .join('')
+            } else {
+                e.target.classList.remove('valid')
+                e.target.classList.add('invalid')
+            }
+        }, 500)
+    })
+})()

package/source/js/post/copying-code.js

@@ -0,0 +1,34 @@
+;(() => {
+    if (!'ClipboardJS' in window) {
+        return
+    }
+
+    function genSVG(id) {
+        return `<svg width="1em" height="1em"><use xlink:href="#${id}"/></svg>`
+    }
+
+    const codes = document.querySelectorAll('.markdown-body .highlight')
+    codes.forEach((item) => {
+        const btn = document.createElement('button')
+        btn.type = 'button'
+        btn.classList.add('btn-clipboard')
+        btn.title = 'Copy to clipboard'
+        btn.innerHTML = genSVG('clipboard')
+        item.insertAdjacentElement('afterbegin', btn)
+    })
+
+    const clipboard = new ClipboardJS('.btn-clipboard', {
+        target: function (trigger) {
+            return trigger.parentNode.getElementsByTagName('code')[0]
+        },
+    })
+    clipboard.on('success', function (e) {
+        e.clearSelection()
+        e.trigger.innerHTML = genSVG('check')
+        e.trigger.title = 'Copied!'
+        setTimeout(function () {
+            e.trigger.innerHTML = genSVG('clipboard')
+            e.trigger.title = 'Copy to clipboard'
+        }, 2000)
+    })
+})()

package/source/js/post/enable.js

@@ -0,0 +1,8 @@
+;(() => {
+    const popoverTriggerList = document.querySelectorAll(
+        '[data-bs-toggle="popover"]'
+    )
+    const popoverList = [...popoverTriggerList].map(
+        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
+    )
+})()

package/source/js/post/img-swipe-bf.js

@@ -0,0 +1,47 @@
+;(() => {
+    const imgs = document.querySelectorAll('.markdown-body img')
+    const promiseds = Array.prototype.map.call(imgs, (item) => {
+        return new Promise((resolve, reject) => {
+            const src = item.getAttribute('src')
+            const __img = new Image()
+            __img.onload = function () {
+                const a = document.createElement('a')
+                a.href = src
+                a.target = '_blank'
+                a.setAttribute('data-pswp-src', src)
+                a.setAttribute('data-pswp-width', __img.width)
+                a.setAttribute('data-pswp-height', __img.height)
+                const parentNode = item.parentNode
+                parentNode.removeChild(item)
+                a.appendChild(item)
+                parentNode.appendChild(a)
+                resolve()
+            }
+            __img.onerror = function () {
+                reject()
+            }
+            __img.src = src
+        })
+    })
+
+    Promise.allSettled(promiseds).then(() => {
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: '#board',
+            children: 'a[data-pswp-src]',
+            pswpModule: () => PhotoSwipe,
+            wheelToZoom: true,
+        })
+        lightbox.init()
+        /* lightbox.on('initialLayout', () => {
+            $('.pswp').on('contextmenu.fb', function (e) {
+                if (e.button == 2) {
+                    e.preventDefault()
+                }
+                return true
+            })
+        }) */
+        /* lightbox.on('destroy', () => {
+      console.log('destroy');
+    }); */
+    })
+})()

package/source/js/post/img-swipe.js

@@ -0,0 +1,35 @@
+import PhotoSwipeLightbox from 'https://lib.baomitu.com/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
+
+const imgs = document.querySelectorAll('.markdown-body img')
+const promiseds = Array.prototype.map.call(imgs, (item) => {
+    return new Promise((resolve, reject) => {
+        const src = item.getAttribute('src')
+        const __img = new Image()
+        __img.onload = function () {
+            const a = document.createElement('a')
+            a.href = src
+            a.target = '_blank'
+            a.setAttribute('data-pswp-src', src)
+            a.setAttribute('data-pswp-width', __img.width)
+            a.setAttribute('data-pswp-height', __img.height)
+            const parentNode = item.parentNode
+            parentNode.removeChild(item)
+            a.appendChild(item)
+            parentNode.appendChild(a)
+            resolve()
+        }
+        __img.onerror = function () {
+            reject()
+        }
+        __img.src = src
+    })
+})
+Promise.allSettled(promiseds).then(() => {
+    const lightbox = new PhotoSwipeLightbox({
+        gallery: '#board',
+        children: 'a[data-pswp-src]',
+        pswpModule: () => import('//lib.baomitu.com/photoswipe/5.4.2/photoswipe.esm.min.js'),
+        wheelToZoom: true,
+    })
+    lightbox.init()
+})

package/source/js/post/mermaiding.js

@@ -0,0 +1,13 @@
+;(() => {
+    if (!'mermaid' in window) {
+        return
+    }
+    let theme = document.documentElement.getAttribute('data-bs-theme')
+    if (theme !== 'dark') {
+        theme = 'forest'
+    }
+    mermaid.initialize({
+        theme,
+    })
+    mermaid.init()
+})()

package/source/js/post/play-imgs.js

@@ -0,0 +1,59 @@
+(() => {
+    jQuery('.markdown-body :not(a) > img, .markdown-body > img').each(function() {
+        var $image = jQuery(this);
+        var imageUrl = $image.attr('data-src') || $image.attr('src');
+        var $imageWrap = $image.wrap(`
+          <a class="fancybox fancybox.image" href="${imageUrl}"
+            itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`
+        ).parent('a');
+        if ($imageWrap.length !== 0) {
+          if ($image.is('.group-image-container img')) {
+            $imageWrap.attr('data-fancybox', 'group').attr('rel', 'group');
+          } else {
+            $imageWrap.attr('data-fancybox', 'default').attr('rel', 'default');
+          }
+  
+          var imageTitle = $image.attr('title') || $image.attr('alt');
+          if (imageTitle) {
+            $imageWrap.attr('title', imageTitle).attr('data-caption', imageTitle);
+          }
+        }
+      });
+  
+      jQuery.fancybox.defaults.hash = false;
+      jQuery('.fancybox').fancybox({
+        protect: true,
+        loop: false,
+        arrows: true,
+        infobar: false,
+        toolbar: true,
+        buttons : [
+            // 'slideShow',
+            // 'fullScreen',
+            // 'thumbs',
+            // 'share',
+            //'download',
+            // 'zoom',
+            'close'
+        ],
+        dblclickContent: 'zoom',
+        btnTpl: {
+          arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
+                        '<svg width="18" height="18">' +
+                          '<use xlink:href="#chevron-left"></use>' +
+                        '</svg>' +
+                      '</button>',
+          arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
+                          '<svg width="18" height="18">' +
+                            '<use xlink:href="#chevron-right"></use>' +
+                          '</svg>' +
+                        '</button>'
+        },
+        mobile: {
+          // protect: false,
+          clickSlide: 'close',
+          dblclickContent: 'zoom',
+          dblclickSlide: 'zoom'
+        }
+      });
+})()

package/source/js/post/toc.js

@@ -0,0 +1,24 @@
+(() => {
+    if (!window.tocbot) {
+        return
+    }
+
+    window.tocbot.init({
+        tocSelector: '#toc-body',
+        contentSelector: '.markdown-body',
+        linkClass: 'tocbot-link',
+        activeLinkClass: 'tocbot-active-link',
+        listClass: 'tocbot-list',
+        isCollapsedClass: 'tocbot-is-collapsed',
+        collapsibleClass: 'tocbot-is-collapsible',
+        scrollSmooth: true,
+        includeTitleTags: true,
+        // headingsOffset: -boardTop,
+        headingSelector: 'h1,h2,h3,h4',
+        placement: 'right',
+        collapseDepth: 0
+    })
+
+    const toc = document.getElementById('toc')
+    toc.style.visibility = 'visible'
+})()

package/source/js/post/view-imgs.js

@@ -0,0 +1,27 @@
+;(() => {
+    if (!'Viewer' in window) {
+        return
+    }
+    new Viewer(document.getElementById('board'), {
+        backdrop: true,
+        button: true,
+        focus: true,
+        fullscreen: true,
+        loading: true,
+        loop: true,
+        keyboard: true,
+        moveable: true,
+        navbar: false,
+        rotatable: true,
+        scalable: true,
+        slideOnTouch: true,
+        title: true,
+        toggleOnDblclick: true,
+        toolbar: true,
+        tooltip: true,
+        transition: true,
+        zoomable: true,
+        zoomOnTouch: true,
+        zoomOnWheel: true
+    })
+})()