From 73761afa200eddf7587b1dbde92163e25a6ccccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= Date: Fri, 5 Jul 2024 14:36:42 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.php | 16 + archive.php | 8 + archives.php | 76 ++ footer.php | 17 + functions.php | 114 +++ head.php | 51 + header.php | 93 ++ index.php | 18 + js/main.js | 23 + links.php | 45 + page.php | 95 ++ post.php | 121 +++ postlist.php | 126 +++ sidebar.php | 70 ++ style.css | 2682 +++++++++++++++++++++++++++++++++++++++++++++++++ toc.php | 63 ++ 16 files changed, 3618 insertions(+) create mode 100644 404.php create mode 100644 archive.php create mode 100644 archives.php create mode 100644 footer.php create mode 100644 functions.php create mode 100644 head.php create mode 100644 header.php create mode 100644 index.php create mode 100644 js/main.js create mode 100644 links.php create mode 100644 page.php create mode 100644 post.php create mode 100644 postlist.php create mode 100644 sidebar.php create mode 100644 style.css create mode 100644 toc.php diff --git a/404.php b/404.php new file mode 100644 index 0000000..2b09ba8 --- /dev/null +++ b/404.php @@ -0,0 +1,16 @@ + +need('head.php'); ?> + +need('header.php'); ?> +
+
+ +
+ + + +
+
+ + +need('footer.php'); ?> diff --git a/archive.php b/archive.php new file mode 100644 index 0000000..8c22829 --- /dev/null +++ b/archive.php @@ -0,0 +1,8 @@ + +need('head.php'); ?> + +need('header.php'); ?> + +need('postlist.php'); ?> + +need('footer.php'); ?> diff --git a/archives.php b/archives.php new file mode 100644 index 0000000..a7bba3b --- /dev/null +++ b/archives.php @@ -0,0 +1,76 @@ + +need('head.php'); ?> + +need('header.php'); ?> +
+
+

Categories

+
+
+ widget('Widget_Metas_Category_List')->to($categories); ?> +next()): ?> + mid; + // 获取主题URL + $imgUrl = $this->options->imgurl; + // 为每个分类生成图片地址 + $categoryImage = $imgUrl . '/' . $categoryId . '.jpg'; + ?> + + + +
+
+
+ publishedPostsNum)->to($archives); + $year = 0; + $output = ' '; // Start archives container + while ($archives->next()) { + $year_tmp = date('Y', $archives->created); + if ($year != $year_tmp) { + if ($year > 0) { + $output .= ''; // 结束上一个年份的月份列表和包裹的div + } + $year = $year_tmp; + $output .= '
+

' . $year . '

'; // 开始新的年份div + } + // 输出文章项 + $output .= '
'; + $output .= ' + '; + $output .= '
'; + } + $output .= ' '; // End archives container + echo $output; + ?> +
+ +need('footer.php'); ?> \ No newline at end of file diff --git a/footer.php b/footer.php new file mode 100644 index 0000000..1c05bf1 --- /dev/null +++ b/footer.php @@ -0,0 +1,17 @@ + +
+
+ © + 2020 - 2024 · options->title(); ?> +
+
+ Powered by Typecho
+ Theme Stack designed by Jimmy +
+ options->tongji() ?> +
+
+ + + + diff --git a/functions.php b/functions.php new file mode 100644 index 0000000..17fb837 --- /dev/null +++ b/functions.php @@ -0,0 +1,114 @@ +addInput($logoUrl); + $icoUrl = new Typecho_Widget_Helper_Form_Element_Text('icoUrl', NULL, NULL, _t('站点 Favicon 地址')); + $form->addInput($icoUrl); + $archiveurl = new Typecho_Widget_Helper_Form_Element_Text('archiveurl', NULL, NULL, _t('归档页面地址'), _t('归档页面地址')); + $form->addInput($archiveurl); + $linksurl = new Typecho_Widget_Helper_Form_Element_Text('linksurl', NULL, NULL, _t('链接页面地址'), _t('链接页面地址')); + $form->addInput($linksurl); + $abouturl = new Typecho_Widget_Helper_Form_Element_Text('abouturl', NULL, NULL, _t('关于页面地址'), _t('关于页面地址')); + $form->addInput($abouturl); + $addmenu = new Typecho_Widget_Helper_Form_Element_Textarea('addmenu', NULL, NULL, _t('自定义菜单'), _t('具体查看使用文档')); + $form->addInput($addmenu); + $showgd = new Typecho_Widget_Helper_Form_Element_Radio('showgd', + array('0'=> _t('否'), '1'=> _t('是')), + '0', _t('是否在侧边栏显示按日期归档'), _t('选择“是”将展示。')); + $form->addInput($showgd); + $instagramurl = new Typecho_Widget_Helper_Form_Element_Text('instagramurl', NULL, NULL, _t('Instagram'), _t('会在个人信息显示')); + $form->addInput($instagramurl); + $telegramurl = new Typecho_Widget_Helper_Form_Element_Text('telegramurl', NULL, NULL, _t('电报'), _t('会在个人信息显示')); + $form->addInput($telegramurl); + $githuburl = new Typecho_Widget_Helper_Form_Element_Text('githuburl', NULL, NULL, _t('github'), _t('会在个人信息显示')); + $form->addInput($githuburl); + $twitterurl = new Typecho_Widget_Helper_Form_Element_Text('twitterurl', NULL, NULL, _t('twitter'), _t('会在个人信息显示')); + $form->addInput($twitterurl); + $mastodonurl = new Typecho_Widget_Helper_Form_Element_Text('mastodonurl', NULL, NULL, _t('mastodon'), _t('会在个人信息显示')); + $form->addInput($mastodonurl); + $sitemapurl = new Typecho_Widget_Helper_Form_Element_Text('sitemapurl', NULL, NULL, _t('sitemap'), _t('会在页脚显示')); + $form->addInput($sitemapurl); + $cnavatar = new Typecho_Widget_Helper_Form_Element_Text('cnavatar', NULL, 'https://cravatar.cn/avatar/', _t('Gravatar镜像'), _t('默认https://cravatar.cn/avatar/,建议保持默认')); + $form->addInput($cnavatar); + $imgurl = new Typecho_Widget_Helper_Form_Element_Text('imgurl', NULL, NULL, _t('分类图片目录'), _t('在目录下放入对应分类mid的jpg图片')); + $form->addInput($imgurl); + $twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('使用第三方评论'), _t('不填写则不显示')); + $form->addInput($twikoo); + $addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('Header代码'), _t('在head中插入代码,支持HTML')); + $form->addInput($addhead); + $tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('Footer代码'), _t('在footer中插入代码支持HTML')); + $form->addInput($tongji); +} +// 获取Typecho的选项 +$options = Typecho_Widget::widget('Widget_Options'); +// 检查cnavatar是否已设置，如果未设置或为空，则使用默认的Gravatar前缀 +$gravatarPrefix = empty($options->cnavatar) ? 'https://cravatar.cn/avatar/' : $options->cnavatar; +// 定义全局常量__TYPECHO_GRAVATAR_PREFIX__，用于存储Gravatar前缀 +define('__TYPECHO_GRAVATAR_PREFIX__', $gravatarPrefix); +//获取头图 +function img_postthumb($cid) { + $db = Typecho_Db::get(); + $rs = $db->fetchRow($db->select('table.contents.text') + ->from('table.contents') + ->where('table.contents.cid=?', $cid) + ->order('table.contents.cid', Typecho_Db::SORT_ASC) + ->limit(1)); + // 检查是否获取到结果 + if (!$rs) { + return ""; + } + preg_match_all("/https?:\/\/[^\s]*.(png|jpeg|jpg|gif|bmp|webp)/", $rs['text'], $thumbUrl); //通过正则式获取图片地址 + // 检查是否匹配到图片URL + if (count($thumbUrl[0]) > 0) { + return $thumbUrl[0][0]; // 返回第一张图片的URL + } else { + return ""; // 没有匹配到图片URL，返回空字符串 + } +} +//文章目录功能-给文章内标题加上id +function addHeaderLinks($text) +{ + return preg_replace_callback('/(.*?)<\/h\1>/', function ($matches) { + $level = $matches[1]; + $title = $matches[2]; + $id = htmlspecialchars(strip_tags($title), ENT_QUOTES, 'UTF-8'); + return sprintf('%s', $level, $id, $id, $title, $title, $level); + }, $text); +} +//文章最后修改时间 +function get_last_modified_time($postId) { + // 获取数据库对象 + $db = Typecho_Db::get(); + $prefix = $db->getPrefix(); + + // 查询文章的最后修改时间 + $query = $db->select('modified') + ->from($prefix . 'contents') + ->where('cid = ?', $postId) + ->limit(1); + + // 执行查询 + $row = $db->fetchRow($query); + + // 检查是否有结果 + if ($row) { + // 返回格式化后的时间 + return date('Y-m-d H:i:s', $row['modified']); + } else { + // 如果没有结果，返回空字符串 + return ''; + } +} +//阅读时间 +function getReadingTime($text, $wordsPerMinute = 500) { + // 移除HTML标签 + $text = strip_tags($text); + // 移除多余的空格 + $text = trim($text); + // 计算字数 + $wordCount = mb_strlen($text, 'UTF-8'); + // 计算阅读时间 + $readingTime = ceil($wordCount / $wordsPerMinute); + return $readingTime; +} diff --git a/head.php b/head.php new file mode 100644 index 0000000..15fd594 --- /dev/null +++ b/head.php @@ -0,0 +1,51 @@ + + + + + + + + +<?php $this->archiveTitle([ + 'category' => _t('分类 %s 下的文章'), + 'search' => _t('包含关键字 %s 的文章'), + 'tag' => _t('标签 %s 下的文章'), + 'author' => _t('%s 发布的文章') + ], '', ' - '); ?><?php $this->options->title(); ?> + + + + + + + + + + + +options->addhead() ?> +header("generator=&template="); ?> + + + \ No newline at end of file diff --git a/header.php b/header.php new file mode 100644 index 0000000..a07ac07 --- /dev/null +++ b/header.php @@ -0,0 +1,93 @@ + +
+ diff --git a/index.php b/index.php new file mode 100644 index 0000000..562756c --- /dev/null +++ b/index.php @@ -0,0 +1,18 @@ + +need('head.php'); ?> + +need('header.php'); ?> +need('sidebar.php'); ?> +need('postlist.php'); ?> + +need('footer.php'); ?> \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ee7852f --- /dev/null +++ b/js/main.js @@ -0,0 +1,23 @@ +(() => { + var g = class e { galleryUID; items = []; constructor(t, r = 1) { if (window.PhotoSwipe == null || window.PhotoSwipeUI_Default == null) { console.error("PhotoSwipe lib not loaded."); return } this.galleryUID = r, e.createGallery(t), this.loadItems(t), this.bindClick() } loadItems(t) { this.items = []; let r = t.querySelectorAll("figure.gallery-image"); for (let i of r) { let n = i.querySelector("figcaption"), o = i.querySelector("img"), s = { w: parseInt(o.getAttribute("width")), h: parseInt(o.getAttribute("height")), src: o.src, msrc: o.getAttribute("data-thumb") || o.src, el: i }; n && (s.title = n.innerHTML), this.items.push(s) } } static createGallery(t) { let r = t.querySelectorAll("img.gallery-image"); for (let o of Array.from(r)) { let s = o.closest("p"); if (!s || !t.contains(s) || (s.textContent.trim() == "" && s.classList.add("no-text"), !s.classList.contains("no-text"))) continue; let d = o.parentElement.tagName == "A", m = o, a = document.createElement("figure"); if (a.style.setProperty("flex-grow", o.getAttribute("data-flex-grow") || "1"), a.style.setProperty("flex-basis", o.getAttribute("data-flex-basis") || "0"), d && (m = o.parentElement), m.parentElement.insertBefore(a, m), a.appendChild(m), o.hasAttribute("alt")) { let l = document.createElement("figcaption"); l.innerText = o.getAttribute("alt"), a.appendChild(l) } if (!d) { a.className = "gallery-image"; let l = document.createElement("a"); l.href = o.src, l.setAttribute("target", "_blank"), o.parentNode.insertBefore(l, o), l.appendChild(o) } } let i = t.querySelectorAll("figure.gallery-image"), n = []; for (let o of i) n.length ? o.previousElementSibling === n[n.length - 1] ? n.push(o) : n.length && (e.wrap(n), n = [o]) : n = [o]; n.length > 0 && e.wrap(n) } static wrap(t) { let r = document.createElement("div"); r.className = "gallery"; let i = t[0].parentNode, n = t[0]; i.insertBefore(r, n); for (let o of t) r.appendChild(o) } open(t) { let r = document.querySelector(".pswp"); new window.PhotoSwipe(r, window.PhotoSwipeUI_Default, this.items, { index: t, galleryUID: this.galleryUID, getThumbBoundsFn: n => { let o = this.items[n].el.getElementsByTagName("img")[0], s = window.pageYOffset || document.documentElement.scrollTop, c = o.getBoundingClientRect(); return { x: c.left, y: c.top + s, w: c.width } } }).init() } bindClick() { for (let [t, r] of this.items.entries()) r.el.querySelector("a").addEventListener("click", n => { n.preventDefault(), this.open(t) }) } }, b = g; var u = {}; if (localStorage.hasOwnProperty("StackColorsCache")) try { u = JSON.parse(localStorage.getItem("StackColorsCache")) } catch { u = {} } async function S(e, t, r) { if (!e) return await Vibrant.from(r).getPalette(); if (!u.hasOwnProperty(e) || u[e].hash !== t) { let i = await Vibrant.from(r).getPalette(); u[e] = { hash: t, Vibrant: { hex: i.Vibrant.hex, rgb: i.Vibrant.rgb, bodyTextColor: i.Vibrant.bodyTextColor }, DarkMuted: { hex: i.DarkMuted.hex, rgb: i.DarkMuted.rgb, bodyTextColor: i.DarkMuted.bodyTextColor } }, localStorage.setItem("StackColorsCache", JSON.stringify(u)) } return u[e] } var D = (e, t = 500) => { e.classList.add("transiting"), e.style.transitionProperty = "height, margin, padding", e.style.transitionDuration = t + "ms", e.style.height = e.offsetHeight + "px", e.offsetHeight, e.style.overflow = "hidden", e.style.height = "0", e.style.paddingTop = "0", e.style.paddingBottom = "0", e.style.marginTop = "0", e.style.marginBottom = "0", window.setTimeout(() => { e.classList.remove("show"), e.style.removeProperty("height"), e.style.removeProperty("padding-top"), e.style.removeProperty("padding-bottom"), e.style.removeProperty("margin-top"), e.style.removeProperty("margin-bottom"), e.style.removeProperty("overflow"), e.style.removeProperty("transition-duration"), e.style.removeProperty("transition-property"), e.classList.remove("transiting") }, t) }, q = (e, t = 500) => { e.classList.add("transiting"), e.style.removeProperty("display"), e.classList.add("show"); let r = e.offsetHeight; e.style.overflow = "hidden", e.style.height = "0", e.style.paddingTop = "0", e.style.paddingBottom = "0", e.style.marginTop = "0", e.style.marginBottom = "0", e.offsetHeight, e.style.transitionProperty = "height, margin, padding", e.style.transitionDuration = t + "ms", e.style.height = r + "px", e.style.removeProperty("padding-top"), e.style.removeProperty("padding-bottom"), e.style.removeProperty("margin-top"), e.style.removeProperty("margin-bottom"), window.setTimeout(() => { e.style.removeProperty("height"), e.style.removeProperty("overflow"), e.style.removeProperty("transition-duration"), e.style.removeProperty("transition-property"), e.classList.remove("transiting") }, t) }, B = (e, t = 500) => window.getComputedStyle(e).display === "none" ? q(e, t) : D(e, t); function v() { let e = document.getElementById("toggle-menu"); e && e.addEventListener("click", () => { document.getElementById("main-menu").classList.contains("transiting") || (document.body.classList.toggle("show-menu"), B(document.getElementById("main-menu"), 300), e.classList.toggle("is-active")) }) } function N(e, t, r) { var i = document.createElement(e); for (let n in t) if (n && t.hasOwnProperty(n)) { let o = t[n]; n == "dangerouslySetInnerHTML" ? i.innerHTML = o.__html : o === !0 ? i.setAttribute(n, n) : o !== !1 && o != null && i.setAttribute(n, o.toString()) } for (let n = 2; n < arguments.length; n++) { let o = arguments[n]; o && i.appendChild(o.nodeType == null ? document.createTextNode(o.toString()) : o) } return i } var w = N; var y = class { localStorageKey = "StackColorScheme"; currentScheme; systemPreferScheme; constructor(t) { this.bindMatchMedia(), this.currentScheme = this.getSavedScheme(), this.dispatchEvent(document.documentElement.dataset.scheme), t && this.bindClick(t), document.body.style.transition == "" && document.body.style.setProperty("transition", "background-color .3s ease") } saveScheme() { localStorage.setItem(this.localStorageKey, this.currentScheme) } bindClick(t) { t.addEventListener("click", r => { this.isDark() ? this.currentScheme = "light" : this.currentScheme = "dark", this.setBodyClass(), this.currentScheme == this.systemPreferScheme && (this.currentScheme = "auto"), this.saveScheme() }) } isDark() { return this.currentScheme == "dark" || this.currentScheme == "auto" && this.systemPreferScheme == "dark" } dispatchEvent(t) { let r = new CustomEvent("onColorSchemeChange", { detail: t }); window.dispatchEvent(r) } setBodyClass() { this.isDark() ? document.documentElement.dataset.scheme = "dark" : document.documentElement.dataset.scheme = "light", this.dispatchEvent(document.documentElement.dataset.scheme) } getSavedScheme() { let t = localStorage.getItem(this.localStorageKey); return t == "light" || t == "dark" || t == "auto" ? t : "auto" } bindMatchMedia() { window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", t => { t.matches ? this.systemPreferScheme = "dark" : this.systemPreferScheme = "light", this.setBodyClass() }) } }, E = y; function p(e) { let t; return () => { t && window.cancelAnimationFrame(t), t = window.requestAnimationFrame(() => e()) } } var O = ".article-content h1[id], .article-content h2[id], .article-content h3[id], .article-content h4[id], .article-content h5[id], .article-content h6[id]", T = "#TableOfContents", L = "#TableOfContents li", k = "active-class"; function V(e, t) { let r = e.querySelector("a").offsetHeight, i = e.offsetTop - t.offsetHeight / 2 + r / 2 - t.offsetTop; i < 0 && (i = 0), t.scrollTo({ top: i, behavior: "smooth" }) } function U(e) { let t = {}; return e.forEach(r => { let n = r.querySelector("a").getAttribute("href"); n.startsWith("#") && (t[n.slice(1)] = r) }), t } function C(e) { let t = []; return e.forEach(r => { t.push({ id: r.id, offset: r.offsetTop }) }), t.sort((r, i) => r.offset - i.offset), t } function M() { let e = document.querySelectorAll(O); if (!e) { console.warn("No header matched query", e); return } let t = document.querySelector(T); if (!t) { console.warn("No toc matched query", T); return } let r = document.querySelectorAll(L); if (!r) { console.warn("No navigation matched query", L); return } let i = C(e), n = !1; t.addEventListener("mouseenter", p(() => n = !0)), t.addEventListener("mouseleave", p(() => n = !1)); let o, s = U(r); function c() { let m = document.documentElement.scrollTop || document.body.scrollTop, a; i.forEach(f => { m >= f.offset - 20 && (a = document.getElementById(f.id)) }); let l; a && (l = s[a.id]), a && !l ? console.debug("No link found for section", a) : l !== o && (o && o.classList.remove(k), l && (l.classList.add(k), n || V(l, t)), o = l) } window.addEventListener("scroll", p(c)); function d() { i = C(e), c() } window.addEventListener("resize", p(d)) } var $ = "a[href]"; function P() { document.querySelectorAll($).forEach(e => { e.getAttribute("href").startsWith("#") && e.addEventListener("click", r => { r.preventDefault(); let i = decodeURI(e.getAttribute("href").substring(1)), n = document.getElementById(i), o = n.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top; window.history.pushState({}, "", e.getAttribute("href")), scrollTo({ top: o, behavior: "smooth" }) }) }) } var x = { + init: () => { + v(); let e = document.querySelector(".article-content"); e && (new b(e), P(), M()); let t = document.querySelector(".article-list--tile"); t && new IntersectionObserver(async (s, c) => { + s.forEach(d => { + if (!d.isIntersecting) return; c.unobserve(d.target), d.target.querySelectorAll("article.has-image").forEach(async a => { + let l = a.querySelector("img"), f = l.src, H = l.getAttribute("data-key"), I = l.getAttribute("data-hash"), A = a.querySelector(".article-details"), h = await S(H, I, f); A.style.background = ` + linear-gradient(0deg, + rgba(${h.DarkMuted.rgb[0]}, ${h.DarkMuted.rgb[1]}, ${h.DarkMuted.rgb[2]}, 0.5) 0%, + rgba(${h.Vibrant.rgb[0]}, ${h.Vibrant.rgb[1]}, ${h.Vibrant.rgb[2]}, 0.75) 100%)` + }) + }) + }).observe(t); let r = document.querySelectorAll(".article-content div.highlight"), i = "Copy", n = "Copied!"; r.forEach(o => { let s = document.createElement("button"); s.innerHTML = i, s.classList.add("copyCodeButton"), o.appendChild(s); let c = o.querySelector("code[data-lang]"); c && s.addEventListener("click", () => { navigator.clipboard.writeText(c.textContent).then(() => { s.textContent = n, setTimeout(() => { s.textContent = i }, 1e3) }).catch(d => { alert(d), console.log("Something went wrong", d) }) }) }), new E(document.getElementById("dark-mode-toggle")) + } + }; window.addEventListener("load", () => { setTimeout(function () { x.init() }, 0) }); window.Stack = x; window.createElement = w; +})(); +/*! +* Hugo Theme Stack +* +* @author: Jimmy Cai +* @website: https://jimmycai.com +* @link: https://github.com/CaiJimmy/hugo-theme-stack +*/ \ No newline at end of file diff --git a/links.php b/links.php new file mode 100644 index 0000000..cb6a233 --- /dev/null +++ b/links.php @@ -0,0 +1,45 @@ + +need('head.php'); ?> + +need('header.php'); ?> +
+
+
+
+
+

+title() ?> +

+

+content(); ?> +

+
+
+
+
+
+ + +
+

{name}

+
+{title} +
+
+
+ +
+ + +'); + ?> + +
+need('footer.php'); ?> \ No newline at end of file diff --git a/page.php b/page.php new file mode 100644 index 0000000..06ef767 --- /dev/null +++ b/page.php @@ -0,0 +1,95 @@ + +need('head.php'); ?> + +need('header.php'); ?> +
+
+
+ cid); $cover = $this->fields->cover; $imageToDisplay = !empty($cover) ? $cover : $firstImage; if($imageToDisplay): ?> +
+ + <?php $this->title() ?> + +
+ + + +
+
+ categories as $category): ?> + + +
+
+

+ title() ?> +

+

+ +

+
+
+
+ + + + + + + + + + +
+
+ + + + + + +
+
+
+
+
+ content; echo addHeaderLinks($content); ?> +
+
+ +
+ + + + + + CC BY-NC-SA 4.0 Deed | 署名-非商业性使用-相同方式共享 +
+
+ + + + + + + cid; + +// 获取最后更新时间 +$lastModifiedTime = get_last_modified_time($postId); + +// 显示最后更新时间 +if ($lastModifiedTime) { + echo ' 最后更新时间：' . htmlspecialchars($lastModifiedTime) . ' '; +} +?> + +
+
+
+ + +need('footer.php'); ?> diff --git a/post.php b/post.php new file mode 100644 index 0000000..87260ea --- /dev/null +++ b/post.php @@ -0,0 +1,121 @@ + +need('head.php'); ?> + +need('header.php'); ?> + is('post')) { + $content = $this->content; + echo generate_toc($content); + } + ?> +
+
+
+ cid); $cover = $this->fields->cover; $imageToDisplay = !empty($cover) ? $cover : $firstImage; if($imageToDisplay): ?> +
+ + <?php $this->title() ?> + +
+ + +
+
+ categories as $category): ?> + + +
+
+

+ title() ?> +

+

+ +

+
+
+
+ + + + + + + + + + +
+
+ + + + + + +
+
+
+
+
+ content; echo addHeaderLinks($content); ?> +
+
+
+ tags(' ', true, 'none'); ?> +
+
+ + + + + + CC BY-NC-SA 4.0 Deed | 署名-非商业性使用-相同方式共享 +
+
+ + + + + + + cid; + +// 获取最后更新时间 +$lastModifiedTime = get_last_modified_time($postId); + +// 显示最后更新时间 +if ($lastModifiedTime) { + echo ' 最后更新时间：' . htmlspecialchars($lastModifiedTime) . ' '; +} +?> + +
+
+
+ + +
+options->twikoo() ?> +
+need('footer.php'); ?> \ No newline at end of file diff --git a/postlist.php b/postlist.php new file mode 100644 index 0000000..8dab44d --- /dev/null +++ b/postlist.php @@ -0,0 +1,126 @@ + + +
+
+ next()): ?> + cid); $cover = $this->fields->cover; $imageToDisplay = !empty($cover) ? $cover : $firstImage; if($imageToDisplay): ?> +
+
+
+ + <?php $this->title() ?> + +
+
+
+ categories as $category): ?> + + +
+
+

+ sticky();$this->title() ?> +

+

+ fields->summary){ + echo $this->fields->summary; + } else { + $this->excerpt(200); + }?> +

+
+
+
+ + + + + + + + + + +
+
+ + + + + + +
+
+
+
+
+ + +
+
+
+
+ categories as $category): ?> + + +
+
+

+ sticky();$this->title() ?> +

+

+ fields->summary){ + echo $this->fields->summary; + } else { + $this->excerpt(200); + }?> +

+
+
+
+ + + + + + + + + + +
+
+ + + + + + +
+
+
+
+
+ + +pagenav( + '', '', 1,'...', + array( + 'wrapTag' => 'nav',// 整个分页导航的外围HTML标签 + 'wrapClass' => 'pagination',// 整个分页导航的CSS类 + 'itemTag' => '',// 每个分页项的HTML标签 + 'textTag' => 'span class="page-link dots"',// 文本（页码）的HTML标签 + 'itemClass' => 'page-link', // 所有分页项的CSS类 + 'currentClass' => 'page-link current',// 当前页码的CSS类 + 'prevClass' => 'hidden',//“前一页”按钮的CSS类 + 'nextClass' => 'hidden' // “后一页”按钮的CSS类 + ) + ); + ?> \ No newline at end of file diff --git a/sidebar.php b/sidebar.php new file mode 100644 index 0000000..c631056 --- /dev/null +++ b/sidebar.php @@ -0,0 +1,70 @@ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e643333 --- /dev/null +++ b/style.css @@ -0,0 +1,2682 @@ +/*!* Hugo Theme Stack +* +* @author: Jimmy Cai +* @website: https://jimmycai.com +* @link: https://github.com/CaiJimmy/hugo-theme-stack*/ +:root { + --main-top-padding: 35px; + --body-background: #f5f5fa; + --accent-color: #34495e; + --accent-color-darker: #2c3e50; + --accent-color-text: #fff; + --body-text-color: #707070; + --tag-border-radius: 4px; + --section-separation: 40px; + --scrollbar-thumb: hsl(0, 0%, 85%); + --scrollbar-track: var(--body-background) +} + +@media(min-width:1280px) { + :root { + --main-top-padding: 50px + } +} + +:root[data-scheme=dark] { + --body-background: #303030; + --accent-color: #ecf0f1; + --accent-color-darker: #bdc3c7; + --accent-color-text: #000; + --body-text-color: rgba(255, 255, 255, 0.7); + --scrollbar-thumb: hsl(0, 0%, 40%); + --scrollbar-track: var(--body-background) +} + +:root { + --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue"; + --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei"; + --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif; + --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace +} + +:root { + --card-background: #fff; + --card-background-selected: #eaeaea; + --card-text-color-main: #000; + --card-text-color-secondary: #747474; + --card-text-color-tertiary: #767676; + --card-separator-color: rgba(218, 218, 218, 0.5); + --card-border-radius: 10px; + --card-padding: 20px; + --small-card-padding: 25px 20px +} + +@media(min-width:768px) { + :root { + --card-padding: 25px + } +} + +@media(min-width:1280px) { + :root { + --card-padding: 30px + } +} + +@media(min-width:768px) { + :root { + --small-card-padding: 25px + } +} + +:root[data-scheme=dark] { + --card-background: #424242; + --card-background-selected: rgba(255, 255, 255, 0.16); + --card-text-color-main: rgba(255, 255, 255, 0.9); + --card-text-color-secondary: rgba(255, 255, 255, 0.7); + --card-text-color-tertiary: rgba(255, 255, 255, 0.5); + --card-separator-color: rgba(255, 255, 255, 0.12) +} + +:root { + --article-font-family: var(--base-font-family); + --article-font-size: 1.6rem; + --article-line-height: 1.85 +} + +@media(min-width:768px) { + :root { + --article-font-size: 1.7rem + } +} + +:root { + --blockquote-border-size: 4px; + --blockquote-background-color: rgb(248 248 248); + --heading-border-size: 4px; + --link-background-color: 189, 195, 199; + --link-background-opacity: 0.5; + --link-background-opacity-hover: 0.7; + --pre-background-color: #272822; + --pre-text-color: #f8f8f2; + --code-background-color: rgba(0, 0, 0, 0.12); + --code-text-color: #808080; + --table-border-color: #dadada; + --tr-even-background-color: #efefee; + --kbd-border-color: #dadada +} + +:root[data-scheme=dark] { + --code-background-color: #272822; + --code-text-color: rgba(255, 255, 255, 0.9); + --table-border-color: #717171; + --tr-even-background-color: #545454; + --blockquote-background-color: rgb(75 75 75) +} + +:root { + --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), + 0px 0px 1px rgba(0, 0, 0, 0.04) +} + +[data-scheme=light] { + --pre-text-color: #272822; + --pre-background-color: #fafafa +} + +[data-scheme=light] .chroma { + color: #272822; + background-color: #fafafa +} + +[data-scheme=light] .chroma .err { + color: #960050 +} + +[data-scheme=light] .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0 +} + +[data-scheme=light] .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: 100%; + display: block +} + +[data-scheme=light] .chroma .lntable>tbody { + display: block; + width: 100% +} + +[data-scheme=light] .chroma .lntable>tbody>tr { + display: flex; + width: 100% +} + +[data-scheme=light] .chroma .lntable>tbody>tr>td:last-child { + overflow-x: auto +} + +[data-scheme=light] .chroma .hl { + display: block; + width: 100%; + background-color: #ffc +} + +[data-scheme=light] .chroma .lnt { + margin-right: .4em; + padding: 0 .4em; + color: #7f7f7f; + display: block +} + +[data-scheme=light] .chroma .ln { + margin-right: .4em; + padding: 0 .4em; + color: #7f7f7f +} + +[data-scheme=light] .chroma .k { + color: #00a8c8 +} + +[data-scheme=light] .chroma .kc { + color: #00a8c8 +} + +[data-scheme=light] .chroma .kd { + color: #00a8c8 +} + +[data-scheme=light] .chroma .kn { + color: #f92672 +} + +[data-scheme=light] .chroma .kp { + color: #00a8c8 +} + +[data-scheme=light] .chroma .kr { + color: #00a8c8 +} + +[data-scheme=light] .chroma .kt { + color: #00a8c8 +} + +[data-scheme=light] .chroma .n { + color: #111 +} + +[data-scheme=light] .chroma .na { + color: #75af00 +} + +[data-scheme=light] .chroma .nb { + color: #111 +} + +[data-scheme=light] .chroma .bp { + color: #111 +} + +[data-scheme=light] .chroma .nc { + color: #75af00 +} + +[data-scheme=light] .chroma .no { + color: #00a8c8 +} + +[data-scheme=light] .chroma .nd { + color: #75af00 +} + +[data-scheme=light] .chroma .ni { + color: #111 +} + +[data-scheme=light] .chroma .ne { + color: #75af00 +} + +[data-scheme=light] .chroma .nf { + color: #75af00 +} + +[data-scheme=light] .chroma .fm { + color: #111 +} + +[data-scheme=light] .chroma .nl { + color: #111 +} + +[data-scheme=light] .chroma .nn { + color: #111 +} + +[data-scheme=light] .chroma .nx { + color: #75af00 +} + +[data-scheme=light] .chroma .py { + color: #111 +} + +[data-scheme=light] .chroma .nt { + color: #f92672 +} + +[data-scheme=light] .chroma .nv { + color: #111 +} + +[data-scheme=light] .chroma .vc { + color: #111 +} + +[data-scheme=light] .chroma .vg { + color: #111 +} + +[data-scheme=light] .chroma .vi { + color: #111 +} + +[data-scheme=light] .chroma .vm { + color: #111 +} + +[data-scheme=light] .chroma .l { + color: #ae81ff +} + +[data-scheme=light] .chroma .ld { + color: #d88200 +} + +[data-scheme=light] .chroma .s { + color: #d88200 +} + +[data-scheme=light] .chroma .sa { + color: #d88200 +} + +[data-scheme=light] .chroma .sb { + color: #d88200 +} + +[data-scheme=light] .chroma .sc { + color: #d88200 +} + +[data-scheme=light] .chroma .dl { + color: #d88200 +} + +[data-scheme=light] .chroma .sd { + color: #d88200 +} + +[data-scheme=light] .chroma .s2 { + color: #d88200 +} + +[data-scheme=light] .chroma .se { + color: #ae81ff +} + +[data-scheme=light] .chroma .sh { + color: #d88200 +} + +[data-scheme=light] .chroma .si { + color: #d88200 +} + +[data-scheme=light] .chroma .sx { + color: #d88200 +} + +[data-scheme=light] .chroma .sr { + color: #d88200 +} + +[data-scheme=light] .chroma .s1 { + color: #d88200 +} + +[data-scheme=light] .chroma .ss { + color: #d88200 +} + +[data-scheme=light] .chroma .m { + color: #ae81ff +} + +[data-scheme=light] .chroma .mb { + color: #ae81ff +} + +[data-scheme=light] .chroma .mf { + color: #ae81ff +} + +[data-scheme=light] .chroma .mh { + color: #ae81ff +} + +[data-scheme=light] .chroma .mi { + color: #ae81ff +} + +[data-scheme=light] .chroma .il { + color: #ae81ff +} + +[data-scheme=light] .chroma .mo { + color: #ae81ff +} + +[data-scheme=light] .chroma .o { + color: #f92672 +} + +[data-scheme=light] .chroma .ow { + color: #f92672 +} + +[data-scheme=light] .chroma .p { + color: #111 +} + +[data-scheme=light] .chroma .c { + color: #75715e +} + +[data-scheme=light] .chroma .ch { + color: #75715e +} + +[data-scheme=light] .chroma .cm { + color: #75715e +} + +[data-scheme=light] .chroma .c1 { + color: #75715e +} + +[data-scheme=light] .chroma .cs { + color: #75715e +} + +[data-scheme=light] .chroma .cp { + color: #75715e +} + +[data-scheme=light] .chroma .cpf { + color: #75715e +} + +[data-scheme=light] .chroma .gd { + color: #f92672 +} + +[data-scheme=light] .chroma .ge { + font-style: italic +} + +[data-scheme=light] .chroma .gi { + color: #75af00 +} + +[data-scheme=light] .chroma .gs { + font-weight: 700 +} + +[data-scheme=light] .chroma .gu { + color: #75715e +} + +[data-scheme=dark] { + --pre-text-color: #f8f8f2; + --pre-background-color: #272822 +} + +[data-scheme=dark] .chroma { + color: #f8f8f2; + background-color: #272822 +} + +[data-scheme=dark] .chroma .err { + color: #bb0064 +} + +[data-scheme=dark] .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0 +} + +[data-scheme=dark] .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: 100%; + display: block +} + +[data-scheme=dark] .chroma .lntable>tbody { + display: block; + width: 100% +} + +[data-scheme=dark] .chroma .lntable>tbody>tr { + display: flex; + width: 100% +} + +[data-scheme=dark] .chroma .lntable>tbody>tr>td:last-child { + overflow-x: auto +} + +[data-scheme=dark] .chroma .hl { + display: block; + width: 100%; + background-color: #ffc +} + +[data-scheme=dark] .chroma .lnt { + margin-right: .4em; + padding: 0 .4em; + color: #7f7f7f; + display: block +} + +[data-scheme=dark] .chroma .ln { + margin-right: .4em; + padding: 0 .4em; + color: #7f7f7f +} + +[data-scheme=dark] .chroma .k { + color: #66d9ef +} + +[data-scheme=dark] .chroma .kc { + color: #66d9ef +} + +[data-scheme=dark] .chroma .kd { + color: #66d9ef +} + +[data-scheme=dark] .chroma .kn { + color: #f92672 +} + +[data-scheme=dark] .chroma .kp { + color: #66d9ef +} + +[data-scheme=dark] .chroma .kr { + color: #66d9ef +} + +[data-scheme=dark] .chroma .kt { + color: #66d9ef +} + +[data-scheme=dark] .chroma .n { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .na { + color: #a6e22e +} + +[data-scheme=dark] .chroma .nb { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .bp { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .nc { + color: #a6e22e +} + +[data-scheme=dark] .chroma .no { + color: #66d9ef +} + +[data-scheme=dark] .chroma .nd { + color: #a6e22e +} + +[data-scheme=dark] .chroma .ni { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .ne { + color: #a6e22e +} + +[data-scheme=dark] .chroma .nf { + color: #a6e22e +} + +[data-scheme=dark] .chroma .fm { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .nl { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .nn { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .nx { + color: #a6e22e +} + +[data-scheme=dark] .chroma .py { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .nt { + color: #f92672 +} + +[data-scheme=dark] .chroma .nv { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .vc { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .vg { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .vi { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .vm { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .l { + color: #ae81ff +} + +[data-scheme=dark] .chroma .ld { + color: #e6db74 +} + +[data-scheme=dark] .chroma .s { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sa { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sb { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sc { + color: #e6db74 +} + +[data-scheme=dark] .chroma .dl { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sd { + color: #e6db74 +} + +[data-scheme=dark] .chroma .s2 { + color: #e6db74 +} + +[data-scheme=dark] .chroma .se { + color: #ae81ff +} + +[data-scheme=dark] .chroma .sh { + color: #e6db74 +} + +[data-scheme=dark] .chroma .si { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sx { + color: #e6db74 +} + +[data-scheme=dark] .chroma .sr { + color: #e6db74 +} + +[data-scheme=dark] .chroma .s1 { + color: #e6db74 +} + +[data-scheme=dark] .chroma .ss { + color: #e6db74 +} + +[data-scheme=dark] .chroma .m { + color: #ae81ff +} + +[data-scheme=dark] .chroma .mb { + color: #ae81ff +} + +[data-scheme=dark] .chroma .mf { + color: #ae81ff +} + +[data-scheme=dark] .chroma .mh { + color: #ae81ff +} + +[data-scheme=dark] .chroma .mi { + color: #ae81ff +} + +[data-scheme=dark] .chroma .il { + color: #ae81ff +} + +[data-scheme=dark] .chroma .mo { + color: #ae81ff +} + +[data-scheme=dark] .chroma .o { + color: #f92672 +} + +[data-scheme=dark] .chroma .ow { + color: #f92672 +} + +[data-scheme=dark] .chroma .p { + color: #f8f8f2 +} + +[data-scheme=dark] .chroma .c { + color: #75715e +} + +[data-scheme=dark] .chroma .ch { + color: #75715e +} + +[data-scheme=dark] .chroma .cm { + color: #75715e +} + +[data-scheme=dark] .chroma .c1 { + color: #75715e +} + +[data-scheme=dark] .chroma .cs { + color: #75715e +} + +[data-scheme=dark] .chroma .cp { + color: #75715e +} + +[data-scheme=dark] .chroma .cpf { + color: #75715e +} + +[data-scheme=dark] .chroma .gd { + color: #f92672 +} + +[data-scheme=dark] .chroma .ge { + font-style: italic +} + +[data-scheme=dark] .chroma .gi { + color: #a6e22e +} + +[data-scheme=dark] .chroma .gs { + font-weight: 700 +} + +[data-scheme=dark] .chroma .gu { + color: #75715e +} + +:root { + --menu-icon-separation: 40px; + --container-padding: 15px; + --widget-separation: var(--section-separation) +} + +.container { + margin-left: auto; + margin-right: auto +} + +.container .left-sidebar { + order: -3; + max-width: var(--left-sidebar-max-width) +} + +.container .right-sidebar { + order: -1; + max-width: var(--right-sidebar-max-width) +} + +@media(min-width:1024px) { + .container .right-sidebar { + display: flex + } +} + +@media(min-width:768px) { + .container.extended { + max-width: 1024px; + --left-sidebar-max-width: 25%; + --right-sidebar-max-width: 30% + } +} + +@media(min-width:1024px) { + .container.extended { + max-width: 1280px; + --left-sidebar-max-width: 20%; + --right-sidebar-max-width: 30% + } +} + +@media(min-width:1280px) { + .container.extended { + max-width: 1536px; + --left-sidebar-max-width: 15%; + --right-sidebar-max-width: 25% + } +} + +@media(min-width:768px) { + .container.compact { + --left-sidebar-max-width: 25%; + max-width: 768px + } +} + +@media(min-width:1024px) { + .container.compact { + max-width: 1024px; + --left-sidebar-max-width: 20% + } +} + +@media(min-width:1280px) { + .container.compact { + max-width: 1280px + } +} + +.flex { + display: flex; + flex-direction: row +} + +.flex.column { + flex-direction: column +} + +.flex.on-phone--column { + flex-direction: column +} + +@media(min-width:768px) { + .flex.on-phone--column { + flex-direction: unset + } +} + +.flex .full-width { + width: 100% +} + +main.main { + order: -2; + min-width: 0; + max-width: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + gap: var(--section-separation) +} + +@media(min-width:768px) { + main.main { + padding-top: var(--main-top-padding) + } +} + +.main-container { + min-height: 100vh; + align-items: flex-start; + padding: 0 15px; + gap: var(--section-separation); + padding-top: var(--main-top-padding) +} + +@media(min-width:768px) { + .main-container { + padding: 0 20px + } +} + +/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100% +} + +body { + margin: 0 +} + +main { + display: block +} + +h1 { + font-size: 2em; + margin: .67em 0 +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible +} + +pre { + font-family: monospace, monospace; + font-size: 1em +} + +a { + background-color: transparent +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted +} + +b, +strong { + font-weight: bolder +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em +} + +small { + font-size: 80% +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +img { + border-style: none +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0 +} + +button, +input { + overflow: visible +} + +button, +select { + text-transform: none +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button +} + +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0 +} + +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText +} + +fieldset { + padding: .35em .75em .625em +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal +} + +progress { + vertical-align: baseline +} + +textarea { + overflow: auto +} + +[type=checkbox], +[type=radio] { + box-sizing: border-box; + padding: 0 +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +details { + display: block +} + +summary { + display: list-item +} + +template { + display: none +} + +[hidden] { + display: none +} + +/*!* Hamburgers + * @description Tasty CSS-animated hamburgers + * @author Jonathan Suh @jonsuh + * @site https://jonsuh.com/hamburgers + * @link https://github.com/jonsuh/hamburgers*/ +.hamburger { + padding-top: 10px; + display: inline-block; + cursor: pointer; + transition-property: opacity, filter; + transition-duration: .15s; + transition-timing-function: linear; + font: inherit; + color: inherit; + text-transform: none; + background-color: transparent; + border: 0; + margin: 0; + overflow: visible +} + +.hamburger:hover { + opacity: .7 +} + +.hamburger.is-active:hover { + opacity: .7 +} + +.hamburger.is-active .hamburger-inner, +.hamburger.is-active .hamburger-inner::before, +.hamburger.is-active .hamburger-inner::after { + background-color: #000 +} + +.hamburger-box { + width: 30px; + height: 24px; + display: inline-block; + position: relative +} + +.hamburger-inner { + display: block; + top: 50%; + margin-top: -2px +} + +.hamburger-inner, +.hamburger-inner::before, +.hamburger-inner::after { + width: 30px; + height: 2px; + background-color: var(--card-text-color-main); + border-radius: 4px; + position: absolute; + transition-property: transform; + transition-duration: .15s; + transition-timing-function: ease +} + +.hamburger-inner::before, +.hamburger-inner::after { + content: ""; + display: block +} + +.hamburger-inner::before { + top: -10px +} + +.hamburger-inner::after { + bottom: -10px +} + +.hamburger--spin .hamburger-inner { + transition-duration: .22s; + transition-timing-function: cubic-bezier(.55, .055, .675, .19) +} + +.hamburger--spin .hamburger-inner::before { + transition: top .1s .25s ease-in, opacity .1s ease-in +} + +.hamburger--spin .hamburger-inner::after { + transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19) +} + +.hamburger--spin.is-active .hamburger-inner { + transform: rotate(225deg); + transition-delay: .12s; + transition-timing-function: cubic-bezier(.215, .61, .355, 1) +} + +.hamburger--spin.is-active .hamburger-inner::before { + top: 0; + opacity: 0; + transition: top .1s ease-out, opacity .1s .12s ease-out +} + +.hamburger--spin.is-active .hamburger-inner::after { + bottom: 0; + transform: rotate(-90deg); + transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1) +} + +#toggle-menu { + background: 0 0; + border: none; + position: absolute; + right: 0; + top: 0; + z-index: 2; + cursor: pointer; + outline: none +} + +[dir=rtl] #toggle-menu { + left: 0; + right: auto +} + +@media(min-width:768px) { + #toggle-menu { + display: none + } +} + +#toggle-menu.is-active .hamburger-inner, +#toggle-menu.is-active .hamburger-inner::before, +#toggle-menu.is-active .hamburger-inner::after { + background-color: var(--accent-color) +} + +#main-menu { + list-style: none; + overflow-y: auto; + flex-grow: 1; + font-size: 1.4rem; + background-color: var(--card-background); + box-shadow: var(--shadow-l1); + display: none; + margin: 0 calc(var(--container-padding) * -1); + padding: 30px +} + +@media(min-width:1280px) { + #main-menu { + padding: 15px 0 + } +} + +#main-menu, +#main-menu .menu-bottom-section ol { + flex-direction: column; + gap: 30px +} + +@media(min-width:1280px) { + + #main-menu, + #main-menu .menu-bottom-section ol { + gap: 25px + } +} + +#main-menu.show { + display: flex +} + +@media(min-width:768px) { + #main-menu { + align-items: flex-end; + display: flex; + background-color: transparent; + padding: 0; + box-shadow: none; + margin: 0 + } +} + +#main-menu li { + position: relative; + vertical-align: middle; + padding: 0 +} + +@media(min-width:768px) { + #main-menu li { + width: 100% + } +} + +#main-menu li svg { + stroke: currentColor; + stroke-width: 1.33; + width: 20px; + height: 20px +} + +#main-menu li a { + height: 100%; + display: inline-flex; + align-items: center; + color: var(--body-text-color); + gap: var(--menu-icon-separation) +} + +#main-menu li span { + flex: 1 +} + +#main-menu li.current a { + color: var(--accent-color); + font-weight: 700 +} + +#main-menu li.menu-bottom-section { + margin-top: auto +} + +#main-menu li.menu-bottom-section ol { + display: flex; + padding-left: 0 +} + +.menu-social { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: row; + gap: 10px +} + +.menu-social svg { + width: 24px; + height: 24px; + stroke: var(--body-text-color); + stroke-width: 1.33 +} + +.article-list { + display: flex; + flex-direction: column; + gap: var(--section-separation) +} + +.article-list article { + display: flex; + flex-direction: column; + background-color: var(--card-background); + box-shadow: var(--shadow-l1); + border-radius: var(--card-border-radius); + overflow: hidden; + transition: box-shadow .3s ease +} + +.article-list article:hover { + box-shadow: var(--shadow-l2) +} + +.article-list article .article-image img { + width: 100%; + height: 150px; + object-fit: cover +} + +@media(min-width:768px) { + .article-list article .article-image img { + height: 200px + } +} + +@media(min-width:1280px) { + .article-list article .article-image img { + height: 250px + } +} + +.article-list article:nth-child(5n+1) .article-category a { + background: #8ea885; + color: #fff +} + +.article-list article:nth-child(5n+2) .article-category a { + background: #df7988; + color: #fff +} + +.article-list article:nth-child(5n+3) .article-category a { + background: #0177b8; + color: #fff +} + +.article-list article:nth-child(5n+4) .article-category a { + background: #ffb900; + color: #fff +} + +.article-list article:nth-child(5n+5) .article-category a { + background: #6b69d6; + color: #fff +} + +.article-details { + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--card-padding); + gap: 15px +} + +.article-title { + font-family: var(--article-font-family); + font-weight: 600; + margin: 0; + color: var(--card-text-color-main); + font-size: 2.2rem +} + +@media(min-width:1280px) { + .article-title { + font-size: 2.4rem + } +} + +.article-title a { + color: var(--card-text-color-main) +} + +.article-title a:hover { + color: var(--card-text-color-main) +} + +.article-subtitle { + font-weight: 400; + color: var(--card-text-color-secondary); + line-height: 1.5; + margin: 0; + font-size: 1.75rem +} + +@media(min-width:1280px) { + .article-subtitle { + font-size: 2rem + } +} + +.article-title-wrapper { + display: flex; + flex-direction: column; + gap: 8px +} + +.article-time, +.article-translations { + display: flex; + color: var(--card-text-color-tertiary); + gap: 15px +} + +.article-time svg, +.article-translations svg { + vertical-align: middle; + width: 20px; + height: 20px; + stroke-width: 1.33; + flex-shrink: 0 +} + +.article-time time, +.article-time a, +.article-translations time, +.article-translations a { + font-size: 1.4rem; + color: var(--card-text-color-tertiary) +} + +.article-time>div, +.article-translations>div { + display: inline-flex; + align-items: center; + gap: 15px +} + +.article-time { + flex-wrap: wrap +} + +.article-translations>div { + flex-wrap: wrap +} + +.article-category, +.article-tags { + display: flex; + gap: 10px +} + +.article-category a, +.article-tags a { + color: var(--accent-color-text); + background-color: var(--accent-color); + padding: 8px 16px; + border-radius: var(--tag-border-radius); + display: inline-block; + font-size: 1.4rem; + transition: background-color .5s ease +} + +.article-category a:hover, +.article-tags a:hover { + color: var(--accent-color-text); + background-color: var(--accent-color-darker) +} + +.article-list--compact { + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + background-color: var(--card-background); + --image-size: 50px +} + +@media(min-width:768px) { + .article-list--compact { + --image-size: 60px + } +} + +.article-list--compact article>a { + display: flex; + align-items: center; + padding: var(--small-card-padding); + gap: 15px +} + +.article-list--compact article:not(:last-of-type) { + border-bottom: 1.5px solid var(--card-separator-color) +} + +.article-list--compact article .article-details { + flex-grow: 1; + padding: 0; + min-height: var(--image-size); + gap: 10px +} + +.article-list--compact article .article-title { + margin: 0; + font-size: 1.6rem +} + +@media(min-width:768px) { + .article-list--compact article .article-title { + font-size: 1.8rem + } +} + +.article-list--compact article .article-image img { + width: var(--image-size); + height: var(--image-size); + object-fit: cover +} + +.article-list--compact article .article-time { + font-size: 1.4rem +} + +.article-list--compact article .article-preview { + font-size: 1.4rem; + color: var(--card-text-color-tertiary); + margin-top: 10px; + line-height: 1.5 +} + +.article-list--tile article { + border-radius: var(--card-border-radius); + overflow: hidden; + position: relative; + height: 350px; + width: 250px; + box-shadow: var(--shadow-l1); + transition: box-shadow .3s ease; + background-color: var(--card-background) +} + +.article-list--tile article:hover { + box-shadow: var(--shadow-l2) +} + +.article-list--tile article.has-image .article-details { + background-color: rgba(0, 0, 0, .25) +} + +.article-list--tile article.has-image .article-title { + color: #fff +} + +.article-list--tile article .article-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.article-list--tile article .article-image img { + width: 100%; + height: 100%; + object-fit: cover +} + +.article-list--tile article .article-details { + border-radius: var(--card-border-radius); + position: relative; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + z-index: 2; + padding: 15px +} + +@media(min-width:640px) { + .article-list--tile article .article-details { + padding: 20px + } +} + +.article-list--tile article .article-title { + font-size: 2rem; + font-weight: 500; + color: var(--card-text-color-main) +} + +@media(min-width:640px) { + .article-list--tile article .article-title { + font-size: 2.2rem + } +} + +.widget { + display: flex; + flex-direction: column +} + +.widget .widget-icon svg { + width: 32px; + height: 32px; + stroke-width: 1.6; + color: var(--body-text-color) +} + +.tagCloud .tagCloud-tags { + display: flex; + flex-wrap: wrap; + gap: 10px +} + +.tagCloud .tagCloud-tags a { + background: var(--card-background); + box-shadow: var(--shadow-l1); + border-radius: var(--tag-border-radius); + padding: 8px 20px; + color: var(--card-text-color-main); + font-size: 1.4rem; + transition: box-shadow .3s ease +} + +.tagCloud .tagCloud-tags a:hover { + box-shadow: var(--shadow-l2) +} + +.widget.archives .widget-archive--list { + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + background-color: var(--card-background) +} + +.widget.archives .archives-year:not(:last-of-type) { + border-bottom: 1.5px solid var(--card-separator-color) +} + +.widget.archives .archives-year a { + font-size: 1.4rem; + padding: 18px 25px; + display: flex +} + +.widget.archives .archives-year a span.year { + flex: 1; + color: var(--card-text-color-main); + font-weight: 700 +} + +.widget.archives .archives-year a span.count { + color: var(--card-text-color-tertiary) +} + +footer.site-footer { + padding: 20px 0 var(--section-separation); + font-size: 1.4rem; + line-height: 1.75 +} + +footer.site-footer:before { + content: ""; + display: block; + height: 3px; + width: 50px; + background: var(--body-text-color); + margin-bottom: 20px +} + +footer.site-footer .copyright { + color: var(--accent-color); + font-weight: 700; + margin-bottom: 5px +} + +footer.site-footer .powerby { + color: var(--body-text-color); + font-weight: 400; + font-size: 1.2rem +} + +footer.site-footer .powerby a { + color: var(--body-text-color) +} + +.pagination { + display: flex; + background-color: var(--card-background); + box-shadow: var(--shadow-l1); + border-radius: var(--card-border-radius); + overflow: hidden; + flex-wrap: wrap +} + +.pagination .page-link { + padding: 16px 32px; + display: inline-flex; + color: var(--card-text-color-secondary) +} + +.pagination .page-link.current { + font-weight: 700; + background-color: var(--card-background-selected); + color: var(--card-text-color-main) +} + +.hidden { + display: none !important; +} + + +section nav a { + padding: 16px 32px; + display: inline-flex; + color: var(--card-text-color-secondary) +} + +@media(min-width:768px) { + .sidebar.sticky { + position: sticky + } +} + +.left-sidebar { + display: flex; + flex-direction: column; + flex-shrink: 0; + align-self: stretch; + gap: var(--sidebar-element-separation); + max-width: none; + width: 100%; + position: relative; + --sidebar-avatar-size: 100px; + --sidebar-element-separation: 20px; + --emoji-size: 40px; + --emoji-font-size: 20px +} + +@media(min-width:768px) { + .left-sidebar { + width: auto; + padding-top: var(--main-top-padding); + padding-bottom: var(--main-top-padding); + max-height: 100vh + } +} + +@media(min-width:1536px) { + .left-sidebar { + --sidebar-avatar-size: 120px; + --sidebar-element-separation: 25px; + --emoji-size: 40px + } +} + +.left-sidebar.sticky { + top: 0 +} + +.left-sidebar.compact { + --sidebar-avatar-size: 80px; + --emoji-size: 30px; + --emoji-font-size: 15px +} + +@media(min-width:1024px) { + .left-sidebar.compact header { + flex-direction: row + } +} + +.left-sidebar.compact header .site-meta { + gap: 5px +} + +.left-sidebar.compact header .site-name { + font-size: 1.4rem +} + +@media(min-width:1536px) { + .left-sidebar.compact header .site-name { + font-size: 1.75rem + } +} + +.left-sidebar.compact header .site-description { + font-size: 1.4rem +} + +.right-sidebar { + width: 100%; + display: none; + flex-direction: column; + gap: var(--widget-separation) +} + +.right-sidebar.sticky { + top: 0 +} + +@media(min-width:1024px) { + .right-sidebar { + padding-top: var(--main-top-padding); + padding-bottom: var(--main-top-padding) + } +} + +.sidebar header { + z-index: 1; + transition: box-shadow .5s ease; + display: flex; + flex-direction: column; + gap: var(--sidebar-element-separation) +} + +@media(min-width:768px) { + .sidebar header { + padding: 0 + } +} + +.sidebar header .site-avatar { + position: relative; + margin: 0; + width: var(--sidebar-avatar-size); + height: var(--sidebar-avatar-size); + flex-shrink: 0 +} + +.sidebar header .site-avatar .site-logo { + width: 100%; + height: 100%; + border-radius: 100%; + box-shadow: var(--shadow-l1) +} + +.sidebar header .site-avatar .emoji { + position: absolute; + width: var(--emoji-size); + height: var(--emoji-size); + line-height: var(--emoji-size); + border-radius: 100%; + bottom: 0; + right: 0; + text-align: center; + font-size: var(--emoji-font-size); + background-color: var(--card-background); + box-shadow: var(--shadow-l2) +} + +.sidebar header .site-meta { + display: flex; + flex-direction: column; + gap: 10px; + justify-content: center +} + +.sidebar header .site-name { + color: var(--accent-color); + margin: 0; + font-size: 1.6rem +} + +@media(min-width:1536px) { + .sidebar header .site-name { + font-size: 1.8rem + } +} + +.sidebar header .site-description { + color: var(--body-text-color); + font-weight: 400; + margin: 0; + font-size: 1.4rem +} + +@media(min-width:1536px) { + .sidebar header .site-description { + font-size: 1.6rem + } +} + +[data-scheme=dark] #dark-mode-toggle { + color: var(--accent-color); + font-weight: 700 +} + +[data-scheme=dark] #dark-mode-toggle .icon-tabler-toggle-left { + display: none +} + +[data-scheme=dark] #dark-mode-toggle .icon-tabler-toggle-right { + display: unset +} + +#dark-mode-toggle { + margin-top: auto; + color: var(--body-text-color); + display: flex; + align-items: center; + cursor: pointer; + gap: var(--menu-icon-separation) +} + +#dark-mode-toggle .icon-tabler-toggle-right { + display: none +} + +#i18n-switch { + color: var(--body-text-color); + display: inline-flex; + align-content: center; + gap: var(--menu-icon-separation) +} + +#i18n-switch select { + border: 0; + background-color: transparent; + color: var(--body-text-color) +} + +#i18n-switch select option { + color: var(--card-text-color-main); + background-color: var(--card-background) +} + +html { + font-size: 62.5%; + overflow-y: scroll +} + +* { + box-sizing: border-box +} + +body { + background: var(--body-background); + margin: 0; + font-family: var(--base-font-family); + font-size: 1.6rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +* { + scrollbar-width: auto; + scrollbar-color: var(--scrollbar-thumb)transparent +} + +::-webkit-scrollbar { + height: auto +} + +::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb) +} + +::-webkit-scrollbar-track { + background-color: transparent +} + +.article-page.hide-sidebar-sm .left-sidebar { + display: none +} + +@media(min-width:768px) { + .article-page.hide-sidebar-sm .left-sidebar { + display: inherit + } +} + +.article-page .main-article { + background: var(--card-background); + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + overflow: hidden +} + +.article-page .main-article .article-header .article-image img { + height: auto; + width: 100%; + max-height: 50vh; + object-fit: cover +} + +.article-page .main-article .article-header .article-details { + padding: var(--card-padding); + padding-bottom: 0 +} + +.article-page .main-article .article-content { + margin: var(--card-padding)0; + color: var(--card-text-color-main) +} + +.article-page .main-article .article-content .footnotes { + font-family: var(--base-font-family) +} + +.article-page .main-article .article-content img { + max-width: 100%; + height: auto +} + +.article-page .main-article .article-footer { + margin: var(--card-padding); + margin-top: 0 +} + +.article-page .main-article .article-footer section:not(:first-child) { + margin-top: var(--card-padding) +} + +.article-page .main-article .article-footer section { + color: var(--card-text-color-tertiary); + text-transform: uppercase; + display: flex; + align-items: center; + font-size: 1.4rem; + gap: 15px +} + +.article-page .main-article .article-footer section svg { + width: 20px; + height: 20px; + stroke-width: 1.33 +} + +.article-page .main-article .article-footer .article-tags { + flex-wrap: wrap; + text-transform: unset +} + +.article-page .main-article .article-footer .article-copyright a, +.article-page .main-article .article-footer .article-lastmod a { + color: var(--body-text-color) +} + +.article-page .main-article .article-footer .article-copyright a.link, +.article-page .main-article .article-footer .article-lastmod a.link { + box-shadow: unset +} + +.widget--toc { + background-color: var(--card-background); + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + display: flex; + flex-direction: column; + color: var(--card-text-color-main); + overflow: hidden +} + +.widget--toc ::-webkit-scrollbar-thumb { + background-color: var(--card-separator-color) +} + +.widget--toc #TableOfContents { + overflow-x: auto; + max-height: 75vh +} + +.widget--toc #TableOfContents ol, +.widget--toc #TableOfContents ul { + margin: 0; + padding: 0 +} + +.widget--toc #TableOfContents ol { + list-style-type: none; + counter-reset: item +} + +.widget--toc #TableOfContents ol li a:first-of-type::before { + counter-increment: item; + content: counters(item, ".")". "; + font-weight: 700; + margin-right: 5px +} + +.widget--toc #TableOfContents>ul { + padding: 0 1em +} + +.widget--toc #TableOfContents li { + margin: 15px 0 15px 20px; + padding: 5px +} + +.widget--toc #TableOfContents li>ol, +.widget--toc #TableOfContents li>ul { + margin-top: 10px; + padding-left: 10px; + margin-bottom: -5px +} + +.widget--toc #TableOfContents li>ol>li:last-child, +.widget--toc #TableOfContents li>ul>li:last-child { + margin-bottom: 0 +} + +.widget--toc #TableOfContents li.active-class>a { + border-left: var(--heading-border-size)solid var(--accent-color); + font-weight: 700 +} + +.widget--toc #TableOfContents ul li.active-class>a { + display: block +} + +.widget--toc #TableOfContents>ul>li.active-class>a { + margin-left: calc(-25px - 1em); + padding-left: calc(25px + 1em - var(--heading-border-size)) +} + +.widget--toc #TableOfContents>ol>li.active-class>a { + margin-left: calc(-9px - 1em); + padding-left: calc(9px + 1em - var(--heading-border-size)); + display: block +} + +.widget--toc #TableOfContents>ul>li>ul>li.active-class>a { + margin-left: calc(-60px - 1em); + padding-left: calc(60px + 1em - var(--heading-border-size)) +} + +.widget--toc #TableOfContents>ol>li>ol>li.active-class>a { + margin-left: calc(-44px - 1em); + padding-left: calc(44px + 1em - var(--heading-border-size)); + display: block +} + +.widget--toc #TableOfContents>ul>li>ul>li>ul>li.active-class>a { + margin-left: calc(-95px - 1em); + padding-left: calc(95px + 1em - var(--heading-border-size)) +} + +.widget--toc #TableOfContents>ol>li>ol>li>ol>li.active-class>a { + margin-left: calc(-79px - 1em); + padding-left: calc(79px + 1em - var(--heading-border-size)); + display: block +} + +.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li.active-class>a { + margin-left: calc(-130px - 1em); + padding-left: calc(130px + 1em - var(--heading-border-size)) +} + +.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li.active-class>a { + margin-left: calc(-114px - 1em); + padding-left: calc(114px + 1em - var(--heading-border-size)); + display: block +} + +.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li>ul>li.active-class>a { + margin-left: calc(-165px - 1em); + padding-left: calc(165px + 1em - var(--heading-border-size)) +} + +.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li>ol>li.active-class>a { + margin-left: calc(-149px - 1em); + padding-left: calc(149px + 1em - var(--heading-border-size)); + display: block +} + +.related-content { + overflow-x: auto; + padding-bottom: 15px +} + +.related-content>.flex { + float: left +} + +.related-content article { + margin-right: 15px; + flex-shrink: 0; + overflow: hidden; + width: 250px; + height: 150px +} + +.related-content article .article-title { + font-size: 1.8rem; + margin: 0 +} + +.related-content article.has-image .article-details { + padding: 20px; + background: linear-gradient(0deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .75) 100%) +} + +.article-content { + font-family: var(--article-font-family); + font-size: var(--article-font-size); + padding: 0 var(--card-padding); + line-height: var(--article-line-height) +} + +.article-content>p { + margin: 1.5em 0 +} + +.article-content h1, +.article-content h2, +.article-content h3, +.article-content h4, +.article-content h5, +.article-content h6 { + margin-inline-start: calc((var(--card-padding)) * -1); + padding-inline-start: calc(var(--card-padding) - var(--heading-border-size)); + border-inline-start: var(--heading-border-size)solid var(--accent-color); + position: relative +} + +.article-content h1 a.header-anchor, +.article-content h2 a.header-anchor, +.article-content h3 a.header-anchor, +.article-content h4 a.header-anchor, +.article-content h5 a.header-anchor, +.article-content h6 a.header-anchor { + transition: opacity .3s ease; + opacity: 0; + position: absolute; + left: 0; + width: var(--card-padding); + text-align: center; + color: var(--accent-color) +} + +.article-content h1 a.header-anchor:before, +.article-content h2 a.header-anchor:before, +.article-content h3 a.header-anchor:before, +.article-content h4 a.header-anchor:before, +.article-content h5 a.header-anchor:before, +.article-content h6 a.header-anchor:before { + content: "#" +} + +.article-content h1:hover a.header-anchor, +.article-content h1:focus a.header-anchor, +.article-content h2:hover a.header-anchor, +.article-content h2:focus a.header-anchor, +.article-content h3:hover a.header-anchor, +.article-content h3:focus a.header-anchor, +.article-content h4:hover a.header-anchor, +.article-content h4:focus a.header-anchor, +.article-content h5:hover a.header-anchor, +.article-content h5:focus a.header-anchor, +.article-content h6:hover a.header-anchor, +.article-content h6:focus a.header-anchor { + opacity: 1 +} + +.article-content figure { + text-align: center +} + +.article-content figure figcaption { + font-size: 1.4rem; + color: var(--card-text-color-secondary) +} + +.article-content blockquote { + position: relative; + margin: 1.5em 0; + border-inline-start: var(--blockquote-border-size)solid var(--card-separator-color); + padding: 15px calc(var(--card-padding) - var(--blockquote-border-size)); + background-color: var(--blockquote-background-color) +} + +.article-content blockquote .cite { + display: block; + text-align: right; + font-size: .75em +} + +.article-content blockquote .cite a { + text-decoration: underline +} + +.article-content hr { + width: 100px; + margin: 40px auto; + background: var(--card-text-color-tertiary); + height: 2px; + border: 0; + opacity: .55 +} + +.article-content code { + color: var(--code-text-color); + background-color: var(--code-background-color); + padding: 2px 4px; + border-radius: var(--tag-border-radius); + font-family: var(--code-font-family) +} + +.article-content a, +.article-content code { + word-break: break-word +} + +.article-content .gallery { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + margin: 1.5em 0; + gap: 10px +} + +.article-content .gallery figure { + margin: 0 +} + +.article-content pre { + overflow-x: auto; + display: block; + background-color: var(--pre-background-color); + color: var(--pre-text-color); + font-family: var(--code-font-family); + line-height: 1.428571429; + word-break: break-all; + padding: var(--card-padding) +} + +[dir=rtl] .article-content pre { + direction: ltr +} + +.article-content pre code { + color: unset; + border: none; + background: 0 0; + padding: 0 +} + +.article-content .highlight { + background-color: var(--pre-background-color); + padding: var(--card-padding); + position: relative +} + +.article-content .highlight:hover .copyCodeButton { + opacity: 1 +} + +[dir=rtl] .article-content .highlight { + direction: ltr +} + +.article-content .highlight pre { + margin: initial; + padding: 0; + margin: 0; + width: auto +} + +.article-content .copyCodeButton { + position: absolute; + top: calc(var(--card-padding)); + right: calc(var(--card-padding)); + background: var(--card-background); + border: none; + box-shadow: var(--shadow-l2); + border-radius: var(--tag-border-radius); + padding: 8px 16px; + color: var(--card-text-color-main); + cursor: pointer; + font-size: 14px; + opacity: 0; + transition: opacity .3s ease +} + +.article-content .table-wrapper { + padding: 0 var(--card-padding); + overflow-x: auto; + display: block +} + +.article-content table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 1.5em; + font-size: .96em +} + +.article-content th, +.article-content td { + text-align: left; + padding: 4px 8px 4px 10px; + border: 1px solid var(--table-border-color) +} + +.article-content td { + vertical-align: top +} + +.article-content tr:nth-child(even) { + background-color: var(--tr-even-background-color) +} + +.article-content .twitter-tweet { + color: var(--card-text-color-main) +} + +.article-content .video-wrapper { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + overflow: hidden +} + +.article-content .video-wrapper>iframe, +.article-content .video-wrapper>video { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border: 0 +} + +.article-content .gitlab-embed-snippets { + margin: 0 !important +} + +.article-content .gitlab-embed-snippets .file-holder.snippet-file-content { + margin-block-end: 0 !important; + margin-block-start: 0 !important; + margin-left: calc((var(--card-padding)) * -1) !important; + margin-right: calc((var(--card-padding)) * -1) !important; + padding: 0 var(--card-padding) !important +} + +.article-content blockquote, +.article-content figure, +.article-content .highlight, +.article-content pre, +.article-content .gallery, +.article-content .video-wrapper, +.article-content .table-wrapper, +.article-content .s_video_simple { + margin-left: calc((var(--card-padding)) * -1); + margin-right: calc((var(--card-padding)) * -1); + width: calc(100% + var(--card-padding) * 2) +} + +.article-content .katex-display>.katex { + overflow-x: auto; + overflow-y: hidden +} + +.article-content kbd { + border: 1px solid var(--kbd-border-color); + font-weight: 700; + font-size: .9em; + line-height: 1; + padding: 2px 4px; + border-radius: 4px; + display: inline-block +} + +.section-card { + border-radius: var(--card-border-radius); + background-color: var(--card-background); + padding: var(--small-card-padding); + box-shadow: var(--shadow-l1); + display: flex; + align-items: center; + gap: 20px; + --separation: 15px +} + +.section-card .section-term { + font-size: 2.2rem; + margin: 0; + color: var(--card-text-color-main) +} + +.section-card .section-description { + font-weight: 400; + color: var(--card-text-color-secondary); + font-size: 1.6rem; + margin: 0 +} + +.section-card .section-details { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 8px +} + +.section-card .section-image img { + width: 60px; + height: 60px +} + +.section-card .section-count { + color: var(--card-text-color-tertiary); + font-size: 1.4rem; + margin: 0; + font-weight: 700; + text-transform: uppercase +} + +.subsection-list { + overflow-x: auto +} + +.subsection-list .article-list--tile { + display: flex; + padding-bottom: 15px +} + +.subsection-list .article-list--tile article { + width: 250px; + height: 150px; + margin-right: 20px; + flex-shrink: 0 +} + +.subsection-list .article-list--tile article .article-title { + margin: 0; + font-size: 1.8rem +} + +.subsection-list .article-list--tile article .article-details { + padding: 20px +} + +.not-found-card { + background-color: var(--card-background); + box-shadow: var(--shadow-l1); + border-radius: var(--card-border-radius); + padding: var(--card-padding) +} + +.search-form { + position: relative; + --button-size: 80px +} + +.search-form.widget { + --button-size: 60px +} + +.search-form.widget label { + font-size: 1.3rem; + top: 10px +} + +.search-form.widget input { + font-size: 1.5rem; + padding: 30px 20px 15px +} + +.search-form p { + position: relative; + margin: 0 +} + +.search-form label { + position: absolute; + top: 15px; + inset-inline-start: 20px; + font-size: 1.4rem; + color: var(--card-text-color-tertiary) +} + +.search-form input { + padding: 40px 20px 20px; + border-radius: var(--card-border-radius); + background-color: var(--card-background); + box-shadow: var(--shadow-l1); + color: var(--card-text-color-main); + width: 100%; + border: 0; + -webkit-appearance: none; + transition: box-shadow .3s ease; + font-size: 1.8rem +} + +.search-form input:focus { + outline: 0; + box-shadow: var(--shadow-l2) +} + +.search-form button { + position: absolute; + inset-inline-end: 0; + top: 0; + height: 100%; + width: var(--button-size); + cursor: pointer; + background-color: transparent; + border: 0; + padding: 0 10px +} + +.search-form button:focus { + outline: 0 +} + +.search-form button:focus svg { + stroke-width: 2; + color: var(--accent-color) +} + +.search-form button svg { + color: var(--card-text-color-secondary); + stroke-width: 1.33; + transition: all .3s ease; + width: 20px; + height: 20px +} + +a { + text-decoration: none; + color: var(--accent-color) +} + +a:hover { + color: var(--accent-color-darker) +} + +a.link { + box-shadow: 0 -2px rgba(var(--link-background-color), var(--link-background-opacity))inset; + transition: all .3s ease +} + +a.link:hover { + box-shadow: 0 calc(-1rem * var(--article-line-height))rgba(var(--link-background-color), var(--link-background-opacity-hover))inset +} + +.section-title { + text-transform: uppercase; + margin-top: 0; + margin-bottom: 10px; + display: block; + font-size: 1.6rem; + font-weight: 700; + color: var(--body-text-color) +} + +.section-title a { + color: var(--body-text-color) +} \ No newline at end of file diff --git a/toc.php b/toc.php new file mode 100644 index 0000000..9f975a6 --- /dev/null +++ b/toc.php @@ -0,0 +1,63 @@ + +
+
+ + + + + + + +
+

文章目录

+
+ +
+
+ '; + + // 如果没有 TOC 内容，则返回空字符串 + return $has_toc ? $toc : ''; +} +?> \ No newline at end of file