1360 lines
163 KiB
HTML
1360 lines
163 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。"><meta name="author" content="biss"><meta name="keywords" content="建站手札, 网站"><link rel="canonical" href="https://blog.biss.click/posts/c6143ad3/"><link rel="alternate" type="application/rss+xml" title="Bi's Blog RSS" href="https://blog.biss.click/rss.xml"><meta property="og:site_name" content="Bi's Blog"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="og:title" content="自定义页脚（新） | Bi's Blog"><meta property="og:description" content="您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。"><meta property="og:url" content="https://blog.biss.click/posts/c6143ad3/"><meta property="og:image" content="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp"><meta property="og:image:alt" content="自定义页脚（新）"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="自定义页脚（新） | Bi's Blog"><meta name="twitter:description" content="您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。"><meta name="twitter:image" content="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp"><meta property="article:published_time" content="2025-08-14T17:05:27.000Z"><meta property="article:modified_time" content="2025-08-14T17:05:27.000Z"><meta property="article:author" content="biss"><meta property="article:tag" content="建站手札"><meta property="article:tag" content="网站"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"自定义页脚（新）","description":"您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`\u003chead>`部分添加`\u003cstyle>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`\u003cbody>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。","image":["https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp"],"datePublished":"2025-08-14T17:05:27.000Z","dateModified":"2025-08-14T17:05:27.000Z","wordCount":255,"inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.biss.click/posts/c6143ad3/"},"author":{"@type":"Person","name":"biss","url":"https://github.com/bishshi"},"publisher":{"@type":"Person","name":"biss","image":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"keywords":"建站手札, 网站","articleSection":"建站手札","isPartOf":{"@type":"CreativeWorkSeries","name":"webcustom"}}</script><link rel="icon" href="/images/Bi.ico"><link rel="manifest" href="/manifest.webmanifest"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><meta name="theme-color" content="#f7f5ef" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#0b1014" media="(prefers-color-scheme: dark)"><script defer src="https://umami.biss.click/script.js" data-website-id="3d97b310-b241-4fc6-bc9c-68e317fc7d42"></script><script>window.SITE_CONFIG = {"site":{"url":"https://blog.biss.click","name":"Bi's Blog","description":"Personal blog by biss.","language":"zh-CN","domain":"blog.biss.click","slogan":"好奇心转化为代码的空间。","startTime":"2025-01-01T00:00:00+08:00","copyrightStartYear":2025,"license":"内容采用 CC BY-NC-SA 4.0 协议"},"author":{"name":"biss","email":"bishsh2006@gmail.com","github":"https://github.com/bishshi","avatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"comments":{"envId":"https://comment.biss.click","region":"","script":"https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"},"analytics":{"umami":{"script":"https://umami.biss.click/script.js","websiteId":"3d97b310-b241-4fc6-bc9c-68e317fc7d42","statsEndpoint":"https://blogumami.biss.click"}},"talks":{"apiUrl":"https://mm.biss.click/api/echo/page","pageSize":30,"homeLimit":6,"cacheKey":"talksCache","cacheTimeKey":"talksCacheTime","cacheDurationMs":1800000,"fallbackAvatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"search":{"apiKey":"2uxQzk7eD2GBCljdSmIiuU3ause7UK9n","server":{"host":"typesense.biss.click","port":"443","protocol":"https"},"indexName":"blogs","searchParams":{"query_by":"title,content","highlight_full_fields":"title,content","per_page":8,"num_typos":1,"typo_tokens_threshold":1,"prefix":true},"ui":{"maxRetries":10,"retryDelay":100,"animationDuration":300,"maxInitRetries":30,"placeholder":"输入关键词寻找故事..."}},"externalLinks":{"waitSeconds":10,"whitelist":["blog.biss.click","biss.click","github.com","localhost","127.0.0.1"]}};</script><script>
|
||
(() => {
|
||
const storageKey = 'site-theme';
|
||
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
||
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
|
||
const getSavedTheme = () => {
|
||
try {
|
||
const theme = localStorage.getItem(storageKey);
|
||
return theme === 'dark' || theme === 'light' ? theme : null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
document.documentElement.dataset.theme = getSavedTheme() || getSystemTheme();
|
||
})();
|
||
</script><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><title>自定义页脚（新） | Bi's Blog</title><link rel="stylesheet" href="/_astro/BaseLayout.DvPRLM9I.css"></head> <body> <header class="site-header"> <nav class="nav"> <a class="brand" href="/" aria-label="Bi's Blog 首页"><span>biss</span><i>.log</i></a> <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle> <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i> <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i> </button> <div class="nav-drawer-backdrop" data-nav-backdrop></div> <div class="nav-menu" data-nav-menu> <div class="nav-links nav-center"> <a href="/archives/"><i class="fa-solid fa-box-archive nav-icon" aria-hidden="true"></i><span>归档</span></a><a href="/categories/"><i class="fa-solid fa-folder-open nav-icon" aria-hidden="true"></i><span>分类</span></a><a href="/tags/"><i class="fa-solid fa-tags nav-icon" aria-hidden="true"></i><span>标签</span></a><a href="/shuoshuo/"><i class="fa-regular fa-comments nav-icon" aria-hidden="true"></i><span>说说</span></a><a href="/about/"><i class="fa-solid fa-heart nav-icon" aria-hidden="true"></i><span>关于</span></a><a href="/link/"><i class="fa-solid fa-link nav-icon" aria-hidden="true"></i><span>友链</span></a> </div> <div class="nav-links nav-actions"> <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章"> <i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i> <span>随机文章</span> </button> <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索"> <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i> <span>搜索</span> </button> <button class="nav-console" type="button" aria-label="打开中控台" title="中控台" data-console-open> <i class="fa-solid fa-gauge-high nav-icon" aria-hidden="true"></i> <span>中控台</span> </button> <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle> <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i> </button> </div> </div> </nav> </header> <div class="control-console" data-console-modal aria-hidden="true"> <div class="control-console-backdrop" data-console-close></div> <section class="control-console-panel" role="dialog" aria-modal="true" aria-labelledby="control-console-title" tabindex="-1"> <header class="control-console-head"> <div> <p>CONTROL CENTER</p> <h2 id="control-console-title">中控台</h2> </div> <button class="control-console-close" type="button" aria-label="关闭中控台" title="关闭" data-console-close> <i class="fa-solid fa-xmark" aria-hidden="true"></i> </button> </header> <div class="control-console-grid"> <a class="control-site-card" href="https://biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-house-chimney" aria-hidden="true"></i> <span> <strong>主站入口</strong> <em>个人主页与常用入口集合</em> </span> <small>biss.click</small> </a><a class="control-site-card" href="https://mm.biss.click" target="_blank" rel="noreferrer"> <i class="fa-regular fa-comments" aria-hidden="true"></i> <span> <strong>说说动态</strong> <em>短句、碎片记录和近况更新</em> </span> <small>mm.biss.click</small> </a><a class="control-site-card" href="https://comment.biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-message" aria-hidden="true"></i> <span> <strong>评论系统</strong> <em>Twikoo 评论服务与访客互动</em> </span> <small>comment.biss.click</small> </a><a class="control-site-card" href="https://umami.biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-chart-line" aria-hidden="true"></i> <span> <strong>站点统计</strong> <em>Umami 访问统计与站点数据</em> </span> <small>umami.biss.click</small> </a> </div> <div class="control-console-info" aria-label="站点信息"> <section> <span>当前站点</span> <strong>blog.biss.click</strong> </section> <section> <span>站点作者</span> <strong>biss</strong> </section> <section> <span>运行起点</span> <strong>2025-01-01</strong> </section> </div> </section> </div> <main> <div class="reading-progress" aria-hidden="true"><span data-reading-progress></span></div> <aside class="reading-resume" data-reading-resume hidden aria-live="polite"> <div class="reading-resume-icon" aria-hidden="true"><i class="fa-solid fa-book-open"></i></div> <div> <strong>继续上次阅读？</strong> <p>你上次读到了 <span data-reading-resume-percent>--</span>。</p> </div> <div class="reading-resume-actions"> <button type="button" data-reading-continue>继续阅读</button> <button type="button" data-reading-restart>从头开始</button> </div> </aside> <section class="post-layout"> <article class="article post-article"> <header class="article-header article-header-cover"> <img class="article-header-cover-img" src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp" alt="" loading="eager" decoding="async"> <div class="article-header-content"> <div class="article-date-line"> <time datetime="2025-08-14T17:05:27.000Z">发布于 2025/08/15</time> </div> <h1>自定义页脚（新）</h1> <div class="article-hero-meta" aria-label="文章信息"> <span>发布于 2025/08/15</span> <a href="/categories/site-notes/">建站手札</a> <span>总字数：255</span> <span>阅读时长：1 分钟</span> </div> </div> </header> <section class="article-summary-card" aria-label="文章导读"> <div class="article-summary-header"> <span class="article-summary-brand"> <span class="article-summary-icon" aria-hidden="true">↳</span>
|
||
文章导读
|
||
</span> <span class="article-summary-model">摘要由 Qwen 生成</span> </div> <p class="article-summary-content"> <span class="article-summary-text">您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。</span> </p> </section> <section class="post-series" aria-labelledby="post-series-title"> <header class="post-series-head"> <div> <span>ARTICLE SERIES</span> <h2 id="post-series-title">博客定制手记</h2> </div> <strong>第 9 / 14 篇</strong> </header> <ol class="post-series-list"> <li> <a href="/posts/ad244066/"> <span>01</span> <strong>配置说说页面</strong> </a> </li><li> <a href="/posts/da17d00/"> <span>02</span> <strong>在侧边栏中添加欢迎信息</strong> </a> </li><li> <a href="/posts/8bdb35fb/"> <span>03</span> <strong>自定义右键菜单</strong> </a> </li><li> <a href="/posts/a6ab0925/"> <span>04</span> <strong>利用插件自定义页脚菜单</strong> </a> </li><li> <a href="/posts/41b9aff7/"> <span>05</span> <strong>博客添加AI总结</strong> </a> </li><li> <a href="/posts/b5866b9e/"> <span>06</span> <strong>利用 SiteMap 随机访问站内页面</strong> </a> </li><li> <a href="/posts/3e61a389/"> <span>07</span> <strong>自定义导航栏</strong> </a> </li><li> <a href="/posts/33249733/"> <span>08</span> <strong>自定义分类条</strong> </a> </li><li class="is-current"> <a href="/posts/c6143ad3/" aria-current="page"> <span>09</span> <strong>自定义页脚（新）</strong> </a> </li><li> <a href="/posts/ce1ec3fe/"> <span>10</span> <strong>使用GitHub推送Hexo到服务器</strong> </a> </li><li> <a href="/posts/5ed2f1e6/"> <span>11</span> <strong>在侧边栏添加日历和倒计时</strong> </a> </li><li> <a href="/posts/b5601a7e/"> <span>12</span> <strong>自定义字体</strong> </a> </li><li> <a href="/posts/f287c563/"> <span>13</span> <strong>添加typesense搜索</strong> </a> </li><li> <a href="/posts/7e921903/"> <span>14</span> <strong>添加网站左上角菜单</strong> </a> </li> </ol> <nav class="post-series-nav" aria-label="系列文章导航"> <a href="/posts/33249733/" rel="prev"><span>上一篇</span><strong>自定义分类条</strong></a> <a href="/posts/ce1ec3fe/" rel="next"><span>下一篇</span><strong>使用GitHub推送Hexo到服务器</strong></a> </nav> </section> <aside class="butterfly-note butterfly-note--warning article-outdated-note" aria-label="文章时效性提示" data-freshness-at="2025-08-14T17:05:27.000Z" data-has-new-version="false" hidden> <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> <div class="butterfly-note__content"> <p>
|
||
注意：本文最后维护于 2025/08/15，距今已超过一年，部分内容可能已经过时，请结合最新资料判断。
|
||
</p> </div> </aside> <div class="prose" data-toc="[{"depth":1,"text":"添加CSS","id":"添加css"},{"depth":1,"text":"注入","id":"注入"},{"depth":1,"text":"参考","id":"参考"}]"> <div class="butterfly-note butterfly-note--warning butterfly-note--simple"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><div class="butterfly-note__content"><p>注意：本文为早期 Hexo / Butterfly 魔改记录，本站现已迁移到 Astro，相关代码、路径或插件可能已经失效，仅作历史参考。</p></div></div>
|
||
<h1 id="添加css">添加CSS</h1>
|
||
<div class="butterfly-note butterfly-note--warning butterfly-note--simple"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><div class="butterfly-note__content"><p>修改有风险，注意备份</p></div></div>
|
||
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="css"><code><span class="line"><span style="color:#6A737D">/*https://codepen.io/poojanahelia/pen/Exabvdy*/</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">#footer</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">rgba</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">); </span><span style="color:#6A737D">/* 修改透明色 */</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">#footer</span><span style="color:#B392F0"> .footer-other</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.footer-copyright</span><span style="color:#E1E4E8">{</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-logo</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">white</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-wave-svg</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">50</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> transform</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">scale</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">-1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">-1</span><span style="color:#E1E4E8">) </span><span style="color:#79B8FF">translateY</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">-10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">); </span><span style="color:#6A737D">/*;*/</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-wave-path</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> fill</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#177ecd</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-content</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1230</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">40</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 450</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-content-column</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> box-sizing</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">border-box</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> float</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">left</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">15</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">15</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-content-column</span><span style="color:#85E89D"> ul</span><span style="color:#85E89D"> li</span><span style="color:#85E89D"> a</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-decoration</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-logo-link</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">inline-block</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-menu</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">15</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-menu-name</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-size</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">15</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-weight</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> letter-spacing</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">.1</span><span style="color:#F97583">em</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> line-height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">18</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-transform</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">uppercase</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-menu-list</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> list-style</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-menu-list</span><span style="color:#85E89D"> li</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">5</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-description</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">20</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-button:hover</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#00bef0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.button:last-of-type</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-button</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#03708c</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> border-radius</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">21</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">inline-block</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-size</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">11</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-weight</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> letter-spacing</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">.1</span><span style="color:#F97583">em</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> line-height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">18</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">12</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 30</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#79B8FF"> 10</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 10</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-decoration</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-transform</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">uppercase</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> transition</span><span style="color:#E1E4E8">: background-color </span><span style="color:#79B8FF">.2</span><span style="color:#F97583">s</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> cursor</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">pointer</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">17</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-title</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-size</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">14</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-weight</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> letter-spacing</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">.1</span><span style="color:#F97583">em</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> line-height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">18</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-transform</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">uppercase</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-link-wrapper</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-decoration</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-call-to-action-link-wrapper</span><span style="color:#85E89D"> a</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-decoration</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-links</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">-1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">54</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">absolute</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">236</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-amoeba-svg</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">54</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">block</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">absolute</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">236</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-amoeba-path</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> fill</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#03708c</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-link.email</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">41</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">5</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">14</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">41</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-link</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">block</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">absolute</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.hidden-link-text</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">absolute</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> clip</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">rect</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">);</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> clip</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">rect</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">);</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> -webkit-clip-path</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">inset</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 0</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 99.9</span><span style="color:#F97583">%</span><span style="color:#79B8FF"> 99.9</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">);</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> clip-path</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">inset</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 0</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 99.9</span><span style="color:#F97583">%</span><span style="color:#79B8FF"> 99.9</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">);</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> overflow</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">hidden</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> border</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">50</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-icon-svg</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">block</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-icon-path</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> fill</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fffff2</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> transition</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">fill</span><span style="color:#79B8FF"> .2</span><span style="color:#F97583">s</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-link.follow</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">42</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">124</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">13</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">42</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-link.rss</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">43</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">178</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">43</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-social-link.github</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">62</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">54</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">-4</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">62</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-copyright</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#03708c</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 30</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-align</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">center</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-copyright-wrapper</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1200</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-copyright-text</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-size</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">13</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> font-weight</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> line-height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">18</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-bottom</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-top</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-copyright-link</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#fff</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> text-decoration</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-content-div</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#177ecd</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0">.my-footer-svg-div</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-height</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6A737D">/* Media Query For different screens */</span></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">320</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">and</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">479</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-content</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1230</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">40</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 649</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6A737D"> /* 不展示logo */</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-logo</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">480</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">and</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">599</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* smartphones, Android phones, landscape iPhone */</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-content</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1230</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">40</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 738</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-logo</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">177</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">/* Qlogo 稍微偏移一点 */</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">170</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">600</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">and</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">800</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-content</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1230</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">40</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 758</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">801</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* tablet, landscape iPad, lo-res laptops ands desktops */</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1025</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* big landscape tablets, laptops, and desktops */</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1281</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* hi-res laptops and desktops */</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">760</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-content</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> margin-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">auto</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1230</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">10</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 15</span><span style="color:#F97583">px</span><span style="color:#79B8FF"> 237</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> position</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">relative</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-content-column</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /*五列的话 19.99 %*/</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">24.99</span><span style="color:#F97583">%</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">568</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583">@media</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">min-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">600</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">and</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">max-width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">760</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">) {</span></span>
|
||
<span class="line"><span style="color:#6A737D"> /* 在这里编写适用于小屏幕的样式 */</span></span>
|
||
<span class="line"><span style="color:#B392F0"> .my-footer-logo</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-left</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">212</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">/* Qlogo 稍微偏移一点 */</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> padding-right</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">204</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"><span style="color:#6A737D">/* 页脚波浪的颜色 */</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">[</span><span style="color:#B392F0">data-theme</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">'dark'</span><span style="color:#E1E4E8">] </span><span style="color:#B392F0">.my-footer-wave-path</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> fill</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#0f3858</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">[</span><span style="color:#B392F0">data-theme</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">'dark'</span><span style="color:#E1E4E8">] </span><span style="color:#B392F0">.my-footer-content-div</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#0f3858</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6A737D">/* 页脚海底的颜色 */</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">[</span><span style="color:#B392F0">data-theme</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">'dark'</span><span style="color:#E1E4E8">] </span><span style="color:#B392F0">.my-footer-copyright</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> background-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#2b3f49</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">[</span><span style="color:#B392F0">data-theme</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">'dark'</span><span style="color:#E1E4E8">] </span><span style="color:#B392F0">.my-footer-social-amoeba-path</span><span style="color:#E1E4E8"> {</span></span>
|
||
<span class="line"><span style="color:#79B8FF"> fill</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#2b3f49</span><span style="color:#E1E4E8">;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
||
<span class="line"></span></code></pre>
|
||
<h1 id="注入">注入</h1>
|
||
<p>打开主题配置文件 _config.butterfly.yml，写入以下内容（以目前我的页脚为例，具体内容请自行修改）：</p>
|
||
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#E1E4E8"># Footer Settings</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"># --------------------------------------</span></span>
|
||
<span class="line"><span style="color:#E1E4E8">footer:</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> custom_text: |</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-svg-div"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-wave-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 1200 100"</span><span style="color:#B392F0"> preserveAspectRatio</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"none"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-wave-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M851.8,100c125,0,288.3-45,348.2-64V0H0v44c3.7-1,7.3-1.9,11-2.9C80.7,22,151.7,10.8,223.5,6.3C276.7,2.9,330,4,383,9.8 c52.2,5.7,103.3,16.2,153.4,32.8C623.9,71.3,726.8,100,851.8,100z"</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">path</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content-div"</span><span style="color:#E1E4E8"> ></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content-column"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-logo"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-logo-link"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"#"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hidden-link-text"</span><span style="color:#E1E4E8">>LOGO</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/qlogo_white_no_words.png"</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"height:40%; width:40%"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-name"</span><span style="color:#E1E4E8">>开始</</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">ul</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-get-started"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-list"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/pages/about.html"</span><span style="color:#E1E4E8">>关于本站</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content-column"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-name"</span><span style="color:#E1E4E8">>快速链接</</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">ul</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-company"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-list"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://hexo.io/zh-cn/"</span><span style="color:#E1E4E8">>Hexo</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8">⨯</span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8"><</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://github.com/jerryc127/hexo-theme-butterfly"</span><span style="color:#E1E4E8">>Butterfly</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-taxonomy menu-item-object-category"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/archives/"</span><span style="color:#E1E4E8">>时间轴</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8"><</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/DO_NOT_render/cosmoscope/cosmoscope_trim.html"</span><span style="color:#E1E4E8">>关系图</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8"><</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/pages/categories/"</span><span style="color:#E1E4E8">>分类</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/p/91b7dad/"</span><span style="color:#E1E4E8">>同款页脚</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://www.foreverblog.cn/"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"noopener external nofollow noreferrer"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#E1E4E8"> > <</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"img-foreverblog"</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/forever_logo_en_default_white.png"</span><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">""</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"width:auto;height:21px;margin-top:6px"</span><span style="color:#E1E4E8">> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content-column"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-name"</span><span style="color:#E1E4E8">>法律声明</</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">ul</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-legal"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-list"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/pages/privacy.html"</span><span style="color:#E1E4E8">>隐私政策</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-call-to-action"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-call-to-action-title"</span><span style="color:#E1E4E8">>联系本站</</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">ul</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-legal"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-list"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/DO_NOT_render/wechatOA/index.html"</span><span style="color:#E1E4E8">>微信公众号</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-call-to-action-link"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"mailto:uuanqin@uuanqin.top"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_self"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> uuan<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>qi</span><span style="color:#6A737D"><!-- >@ --></span><span style="color:#E1E4E8">n@<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>uu</span><span style="color:#6A737D"><!-- >@. --></span><span style="color:#E1E4E8">an<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>qin.top</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-content-column"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">ul</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-get-started"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-menu-list"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://notbyai.fyi/"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"external nofollow noopener noreferrer"</span><span style="color:#E1E4E8">><</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"img-not-ai"</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/Written-By-Human-Not-By-AI-Badge-white.svg"</span><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Written by Human, Not by AI"</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/pages/cc.html"</span><span style="color:#E1E4E8"> ><</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/by-nc-sa.svg"</span><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"署名-非商业性使用-相同方式共享 4.0 国际"</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"menu-item menu-item-type-post_type menu-item-object-product"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> ©2022-2025 By wuanqin</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-links"</span><span style="color:#E1E4E8">> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-amoeba-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 236 54"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-amoeba-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M223.06,43.32c-.77-7.2,1.87-28.47-20-32.53C187.78,8,180.41,18,178.32,20.7s-5.63,10.1-4.07,16.7-.13,15.23-4.06,15.91-8.75-2.9-6.89-7S167.41,36,167.15,33a18.93,18.93,0,0,0-2.64-8.53c-3.44-5.5-8-11.19-19.12-11.19a21.64,21.64,0,0,0-18.31,9.18c-2.08,2.7-5.66,9.6-4.07,16.69s.64,14.32-6.11,13.9S108.35,46.5,112,36.54s-1.89-21.24-4-23.94S96.34,0,85.23,0,57.46,8.84,56.49,24.56s6.92,20.79,7,24.59c.07,2.75-6.43,4.16-12.92,2.38s-4-10.75-3.46-12.38c1.85-6.6-2-14-4.08-16.69a21.62,21.62,0,0,0-18.3-9.18C13.62,13.28,9.06,19,5.62,24.47A18.81,18.81,0,0,0,3,33a21.85,21.85,0,0,0,1.58,9.08,16.58,16.58,0,0,1,1.06,5A6.75,6.75,0,0,1,0,54H236C235.47,54,223.83,50.52,223.06,43.32Z"</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">path</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-link github"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://github.com/uuanqin"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"external nofollow noopener noreferrer"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hidden-link-text"</span><span style="color:#E1E4E8">>Github</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 32 32"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z "</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">path</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-link email"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"mailto:uuanqin@uuanqin.top"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"external nofollow noopener noreferrer"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hidden-link-text"</span><span style="color:#E1E4E8">>Email</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 512 512"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#6A737D"> <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"</span><span style="color:#E1E4E8">/></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-link follow"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://app.follow.is/share/users/uuanqin"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"external nofollow noopener noreferrer"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hidden-link-text"</span><span style="color:#E1E4E8">>Follow</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 448 512"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#6A737D"> <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"</span><span style="color:#E1E4E8">/></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-link rss"</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/atom.xml"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"external nofollow noopener noreferrer"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hidden-link-text"</span><span style="color:#E1E4E8">>RSS</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-svg"</span><span style="color:#B392F0"> xmlns</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.w3.org/2000/svg"</span><span style="color:#B392F0"> viewBox</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0 0 448 512"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#6A737D"> <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">path</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-social-icon-path"</span><span style="color:#B392F0"> d</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"</span><span style="color:#E1E4E8">/></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-copyright"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-copyright-wrapper"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"my-footer-copyright-text"</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://beian.miit.gov.cn/"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"noopener external nofollow noreferrer"</span><span style="color:#E1E4E8">><</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"icp-icon"</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/icp.ico"</span><span style="color:#E1E4E8">><</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>津ICP备2022002156号-1</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#79B8FF"> &nbsp;</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">&nbsp;</span><span style="color:#E1E4E8"><</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011202000621"</span><span style="color:#B392F0"> rel</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"noopener external nofollow noreferrer"</span><span style="color:#E1E4E8">><</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"icp-icon"</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/image/footer/beian_logo.png"</span><span style="color:#E1E4E8">><</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>津公网安备 12011202000621号</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#79B8FF"> &nbsp;</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">&nbsp;&nbsp;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>违法与不良信息举报邮箱</span><span style="color:#79B8FF">&nbsp;</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> j<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span><span style="color:#6A737D"><!-- >@ --></span><span style="color:#E1E4E8">b@<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>uu</span><span style="color:#6A737D"><!-- >@. --></span><span style="color:#E1E4E8">an<</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"display:none"</span><span style="color:#E1E4E8">>@</</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">>q.in</span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>
|
||
<h1 id="参考">参考</h1>
|
||
<a class="hexo-link-card" href="https://blog.uuanqin.top/p/91b7dad/" target="_blank" rel="external nofollow noopener noreferrer">
|
||
<span class="hexo-link-card__icon" aria-hidden="true">W</span>
|
||
<span class="hexo-link-card__body">
|
||
<strong>Wuanqin的博客</strong>
|
||
<span>Wuanqin · blog.uuanqin.top</span>
|
||
</span>
|
||
</a> </div> <section class="post-copyright-card" aria-label="文章版权信息"> <div class="post-copyright-mark" aria-hidden="true"> <span>CC</span> </div> <div class="post-copyright-main"> <h2>自定义页脚（新）</h2> <a class="post-copyright-link" href="/posts/c6143ad3/">/posts/c6143ad3/</a> <dl class="post-copyright-meta"> <div> <dt>作者</dt> <dd>biss</dd> </div> <div> <dt>发布于</dt> <dd><time datetime="2025-08-14T17:05:27.000Z">2025/08/15</time></dd> </div> <div> <dt>许可协议</dt> <dd><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noreferrer">CC BY-NC-SA 4.0</a></dd> </div> </dl> </div> <div class="post-copyright-footer"> <div class="post-copyright-tags" aria-label="文章标签"> <a href="/tags/%E7%BD%91%E7%AB%99/">网站</a> </div> <div class="post-copyright-actions" aria-label="文章操作"> <button class="post-copyright-action is-primary post-share-button" type="button" data-share-title="自定义页脚（新）" data-share-url="https://blog.biss.click/posts/c6143ad3/" title="分享文章"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"></path> <path d="M12 16V4"></path> <path d="m7 9 5-5 5 5"></path> </svg> <span>分享</span> </button> <a class="post-copyright-action" href="/rss.xml" title="订阅 RSS"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M5 5a14 14 0 0 1 14 14"></path> <path d="M5 11a8 8 0 0 1 8 8"></path> <path d="M6 18h.01"></path> </svg> <span>订阅</span> </a> <a class="post-copyright-action" href="/about/" title="打赏作者"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M7 8h10"></path> <path d="M8 8V5h8v3"></path> <path d="M6 8h12l-1.5 11h-9L6 8Z"></path> <path d="M10 12h4"></path> </svg> <span>打赏</span> </a> <a class="post-copyright-icon" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fblog.biss.click%2Fposts%2Fc6143ad3%2F&text=%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E8%84%9A%EF%BC%88%E6%96%B0%EF%BC%89" target="_blank" rel="noreferrer" title="分享到 X"> <span aria-hidden="true">x</span> </a> <a class="post-copyright-icon" href="https://service.weibo.com/share/share.php?url=https%3A%2F%2Fblog.biss.click%2Fposts%2Fc6143ad3%2F&title=%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E8%84%9A%EF%BC%88%E6%96%B0%EF%BC%89" target="_blank" rel="noreferrer" title="分享到微博"> <span aria-hidden="true">微</span> </a> </div> </div> </section> <script>
|
||
(() => {
|
||
document.querySelectorAll('.post-share-button').forEach((button) => {
|
||
button.addEventListener('click', async () => {
|
||
const title = button.dataset.shareTitle || document.title;
|
||
const url = button.dataset.shareUrl || window.location.href;
|
||
const label = button.querySelector('span');
|
||
const originalText = label?.textContent || '分享';
|
||
|
||
try {
|
||
if (navigator.share) {
|
||
await navigator.share({ title, url });
|
||
return;
|
||
}
|
||
|
||
await navigator.clipboard.writeText(url);
|
||
if (label) label.textContent = '已复制';
|
||
} catch {
|
||
if (label) label.textContent = '复制失败';
|
||
} finally {
|
||
window.setTimeout(() => {
|
||
if (label) label.textContent = originalText;
|
||
}, 1800);
|
||
}
|
||
});
|
||
});
|
||
})();
|
||
</script> <section id="post-comment" class="twikoo-comments" aria-label="Comments" data-env-id="https://comment.biss.click" data-region data-path="/posts/c6143ad3/" data-script="https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"> <div class="twikoo-comments-head"> <span class="twikoo-comments-icon" aria-hidden="true"> <svg viewBox="0 0 24 24"> <path d="M21 12a8 8 0 0 1-8 8H7l-4 3v-5a8 8 0 1 1 18-6Z"></path> </svg> </span> <div> <h2>Comments</h2> <p>自定义页脚（新）</p> </div> </div> <div id="twikoo-wrap" class="twikoo-wrap"></div> </section> <script>
|
||
(() => {
|
||
const root = document.getElementById('post-comment');
|
||
const wrap = document.getElementById('twikoo-wrap');
|
||
if (!root || !wrap || root.dataset.twikooLoaded === 'true') return;
|
||
|
||
const envId = root.dataset.envId;
|
||
const path = root.dataset.path || window.location.pathname;
|
||
const region = root.dataset.region || undefined;
|
||
if (!envId) return;
|
||
|
||
root.dataset.twikooLoaded = 'true';
|
||
|
||
const initTwikoo = () => {
|
||
if (!window.twikoo || typeof window.twikoo.init !== 'function') return;
|
||
|
||
window.twikoo.init({
|
||
el: wrap,
|
||
envId,
|
||
region,
|
||
path,
|
||
});
|
||
};
|
||
|
||
if (window.twikoo) {
|
||
initTwikoo();
|
||
return;
|
||
}
|
||
|
||
const script = document.createElement('script');
|
||
script.src = root.dataset.script;
|
||
script.defer = true;
|
||
script.onload = initTwikoo;
|
||
script.onerror = () => {
|
||
root.dataset.twikooLoaded = 'false';
|
||
};
|
||
document.head.appendChild(script);
|
||
})();
|
||
</script> </article> <aside class="article-sidebar" aria-label="文章侧边栏"> <section class="sidebar-card article-author-card"> <img class="profile-avatar" src="https://free.picui.cn/free/2025/08/10/689845496a283.png" alt="biss" loading="lazy"> <div class="profile-name">biss</div> <div class="article-author-meta"> <span>2025/08/15</span> <a href="/categories/site-notes/">建站手札</a> </div> </section> <section class="sidebar-card article-tags-card"> <h2> <span aria-hidden="true">#</span>
|
||
文章标签
|
||
<em>1</em> </h2> <div class="article-tag-list" aria-label="文章标签"> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </section> <div class="article-sticky-sidebar"> <section class="sidebar-card toc-card"> <h2> <span aria-hidden="true">☰</span>
|
||
文章目录
|
||
<em>3</em> </h2> <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree> <div class="toc-group is-open" data-toc-group data-heading-id="添加css"> <a class="toc-link toc-link-main" href="#添加css" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>添加CSS</span> </a> </div><div class="toc-group" data-toc-group data-heading-id="注入"> <a class="toc-link toc-link-main" href="#注入" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>注入</span> </a> </div><div class="toc-group" data-toc-group data-heading-id="参考"> <a class="toc-link toc-link-main" href="#参考" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>参考</span> </a> </div> </nav> </section> <section class="sidebar-card same-category-card"> <h2> <span aria-hidden="true">▣</span>
|
||
同类文章
|
||
<em>8</em> </h2> <div class="same-category-list"> <a href="/posts/8f3b9d21/"> <strong>网站迁移日志</strong> <time datetime="2026-06-19T16:45:00.000Z">2026/06/20</time> </a><a href="/posts/4c91a8f2/"> <strong>用 Umami 分享链接给网站信息卡提供统计数据</strong> <time datetime="2026-06-19T08:58:00.000Z">2026/06/19</time> </a><a href="/posts/7e921903/"> <strong>添加网站左上角菜单</strong> <time datetime="2026-02-10T07:11:14.000Z">2026/02/10</time> </a><a href="/posts/f287c563/"> <strong>添加typesense搜索</strong> <time datetime="2026-02-05T13:14:16.000Z">2026/02/05</time> </a><a href="/posts/b5601a7e/"> <strong>自定义字体</strong> <time datetime="2026-01-16T07:47:15.000Z">2026/01/16</time> </a><a href="/posts/5ed2f1e6/"> <strong>在侧边栏添加日历和倒计时</strong> <time datetime="2026-01-16T07:47:07.000Z">2026/01/16</time> </a><a href="/posts/3a26a97a/"> <strong>为博客添加CMS系统</strong> <time datetime="2025-08-25T22:03:00.000Z">2025/08/26</time> </a><a href="/posts/ce1ec3fe/"> <strong>使用GitHub推送Hexo到服务器</strong> <time datetime="2025-08-18T17:10:18.000Z">2025/08/19</time> </a> </div> </section> <section class="sidebar-card site-info-card" data-site-info-card data-stats-endpoint="https://blogumami.biss.click"> <h2><i class="fa-solid fa-chart-line" aria-hidden="true"></i> 网站信息</h2> <dl class="site-info-list"> <div> <dt>文章数目</dt> <dd>44</dd> </div><div> <dt>本站总字数</dt> <dd>36,128</dd> </div><div> <dt>本站访客数</dt> <dd data-stat-key="visitors">--</dd> </div><div> <dt>本站访问量</dt> <dd data-stat-key="pageviews">--</dd> </div><div> <dt>最后更新时间</dt> <dd>2026/06/20</dd> </div> </dl> </section> <script>
|
||
(() => {
|
||
const cacheDuration = 10 * 60 * 1000;
|
||
const formatter = new Intl.NumberFormat('en-US');
|
||
const cards = [...document.querySelectorAll('[data-site-info-card]')];
|
||
const endpoint = cards.find((card) => card.dataset.statsEndpoint)?.dataset.statsEndpoint;
|
||
|
||
if (!endpoint) return;
|
||
|
||
const cacheKey = `site-info-stats:${endpoint}`;
|
||
|
||
const updateCards = (stats) => {
|
||
const visitors = Number(stats?.visitors);
|
||
const pageviews = Number(stats?.pageviews);
|
||
|
||
cards.forEach((card) => {
|
||
const visitorsEl = card.querySelector('[data-stat-key="visitors"]');
|
||
const pageviewsEl = card.querySelector('[data-stat-key="pageviews"]');
|
||
if (visitorsEl && Number.isFinite(visitors)) visitorsEl.textContent = formatter.format(visitors);
|
||
if (pageviewsEl && Number.isFinite(pageviews)) pageviewsEl.textContent = formatter.format(pageviews);
|
||
});
|
||
};
|
||
|
||
try {
|
||
const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
|
||
if (cached?.time && Date.now() - cached.time < cacheDuration) {
|
||
updateCards(cached.data);
|
||
return;
|
||
}
|
||
} catch {
|
||
localStorage.removeItem(cacheKey);
|
||
}
|
||
|
||
fetch(endpoint, { headers: { Accept: 'application/json' } })
|
||
.then((response) => {
|
||
if (!response.ok) throw new Error(`Stats request failed: ${response.status}`);
|
||
return response.json();
|
||
})
|
||
.then((data) => {
|
||
localStorage.setItem(cacheKey, JSON.stringify({ time: Date.now(), data }));
|
||
updateCards(data);
|
||
})
|
||
.catch(() => {
|
||
});
|
||
})();
|
||
</script> </div> </aside> </section> </main> <footer class="site-footer" aria-label="站点页脚"> <div class="footer-inner"> <section class="footer-top" aria-label="站点信息"> <a class="footer-brand" href="/" aria-label="Bi's Blog 首页"> <img src="/images/Bi.ico" alt="" loading="lazy"> <span>Bi's Blog</span> </a> <p class="footer-slogan">好奇心转化为代码的空间。</p> </section> <section class="footer-contact" aria-label="联系方式"> <p>联系方式</p> <div class="footer-socials"> <a href="mailto:bishsh2006@gmail.com" aria-label="发送邮件" title="发送邮件"> <i class="fa-solid fa-envelope" aria-hidden="true"></i> </a><a href="/rss.xml" aria-label="订阅 RSS" title="订阅 RSS"> <i class="fa-solid fa-rss" aria-hidden="true"></i> </a><a href="https://github.com/bishshi" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub"> <i class="fa-brands fa-github" aria-hidden="true"></i> </a> </div> <nav class="footer-contact-links" aria-label="页脚链接"> <a href="/archives/">发展历程</a> <span aria-hidden="true">|</span><a href="/privacy/">隐私政策</a> </nav> </section> <section class="footer-bottom" aria-label="版权信息"> <div> <p>© 2025 - 2026 Bi's Blog</p> <p>blog.biss.click | 内容采用 CC BY-NC-SA 4.0 协议</p> </div> <div class="footer-meta"> <p>本站已运行：<span id="site-runtime">计算中...</span></p> <p> <a href="https://fastly.com/" target="_blank" rel="noreferrer">Fastly</a> <span aria-hidden="true">|</span><a href="https://astro.build/" target="_blank" rel="noreferrer">ASTRO</a> </p> </div> </section> </div> </footer> <aside class="hitokoto-card is-collapsed" aria-label="一言" data-hitokoto-card data-astro-cid-4cgfuthx> <div class="hitokoto-card__head" data-astro-cid-4cgfuthx> <button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="false" title="一言" data-hitokoto-toggle data-astro-cid-4cgfuthx> <i class="fa-solid fa-quote-left" aria-hidden="true" data-astro-cid-4cgfuthx></i> <span data-astro-cid-4cgfuthx>一言</span> </button> <div class="hitokoto-card__actions" data-astro-cid-4cgfuthx> <button class="hitokoto-card__refresh" type="button" aria-label="换一句" title="换一句" data-hitokoto-refresh data-astro-cid-4cgfuthx> <i class="fa-solid fa-rotate" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> <button class="hitokoto-card__collapse" type="button" aria-label="收起一言" title="收起" data-hitokoto-collapse data-astro-cid-4cgfuthx> <i class="fa-solid fa-chevron-down" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> </div> </div> <a class="hitokoto-card__text" href="https://hitokoto.cn/" target="_blank" rel="noreferrer" data-hitokoto-text data-astro-cid-4cgfuthx>
|
||
获取中...
|
||
</a> <p class="hitokoto-card__from" data-hitokoto-from data-astro-cid-4cgfuthx>来自 Hitokoto</p> </aside> <script type="module">(()=>{const o=document.querySelector("[data-hitokoto-card]"),c=o?.querySelector("[data-hitokoto-toggle]"),s=o?.querySelector("[data-hitokoto-text]"),l=o?.querySelector("[data-hitokoto-from]"),g=o?.querySelector("[data-hitokoto-refresh]"),k=o?.querySelector("[data-hitokoto-collapse]");if(!(o instanceof HTMLElement)||!(c instanceof HTMLButtonElement)||!(s instanceof HTMLAnchorElement)||!(l instanceof HTMLElement))return;const y="https://yiyan.biss.click/api?encode=json",u="hitokoto-card-cache",d="hitokoto-card-expanded",x=360*60*1e3,f={sentence:"生活明朗，万物可爱。",source:"本地缓存",url:"https://hitokoto.cn/"},S=["/","/index.html"].includes(window.location.pathname),w=window.matchMedia("(max-width: 720px)");function E(){try{const t=localStorage.getItem(d);if(t==="true")return!0;if(t==="false")return!1}catch{}return null}function L(t){try{localStorage.setItem(d,String(t))}catch{}}function r(t,{persist:e=!1}={}){o.classList.toggle("is-collapsed",!t),c.setAttribute("aria-expanded",String(t)),c.setAttribute("aria-label",t?"收起一言":"展开一言"),e&&L(t)}function h(){try{const t=localStorage.getItem(u);if(!t)return null;const e=JSON.parse(t);return!e||typeof e.expiresAt!="number"||e.expiresAt<=Date.now()?null:e.data}catch{return null}}function H(t){try{localStorage.setItem(u,JSON.stringify({data:t,expiresAt:Date.now()+x}))}catch{}}function i(t){s.textContent=t.sentence,s.href=t.url||"https://hitokoto.cn/",l.textContent=t.source?`出自 ${t.source}`:"来自 Hitokoto"}async function p({force:t=!1}={}){if(!t){const e=h();if(e){i(e);return}}o.classList.add("is-loading"),s.textContent="获取中...";try{const e=await fetch(y);if(!e.ok)throw new Error(`Hitokoto request failed: ${e.status}`);const n=await e.json(),a=n.hitokoto||n.content||n.sentence||n.text,q=typeof a=="string"&&a.trim()?a.trim():f.sentence,A=typeof n.from=="string"&&n.from.trim()?n.from.trim():"Hitokoto",M=n.uuid?`https://hitokoto.cn/?uuid=${encodeURIComponent(n.uuid)}`:"https://hitokoto.cn/",m={sentence:q,source:A,url:M};H(m),i(m)}catch(e){console.error(e),i(h()||f)}finally{o.classList.remove("is-loading")}}const b=E();r(b??(S&&!w.matches)),c.addEventListener("click",()=>{r(o.classList.contains("is-collapsed"),{persist:!0})}),g?.addEventListener("click",t=>{t.stopPropagation(),r(!0,{persist:!0}),p({force:!0})}),k?.addEventListener("click",t=>{t.stopPropagation(),r(!1,{persist:!0})}),o.addEventListener("click",t=>{o.classList.contains("is-collapsed")&&(t.target instanceof Element&&t.target.closest("a, button")||r(!0,{persist:!0}))}),p()})();</script> <div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true"> <div class="context-menu-nav" aria-label="页面导航"> <button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页"> <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> </button> <button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页"> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i> </button> <button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面"> <i class="fa-solid fa-rotate-right" aria-hidden="true"></i> </button> <a href="/" aria-label="返回首页" title="返回首页"> <i class="fa-solid fa-house" aria-hidden="true"></i> </a> </div> <div class="context-menu-group" data-selection-group hidden> <button type="button" data-context-action="copy-selection" data-selection-item> <i class="fa-regular fa-copy" aria-hidden="true"></i> <span>复制选中文字</span> </button> <button type="button" data-context-action="search-selection" data-selection-item> <i class="fa-brands fa-microsoft" aria-hidden="true"></i> <span>用 Bing 搜索</span> </button> <button type="button" data-context-action="quote-selection" data-selection-item data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>引用到评论区</span> </button> </div> <div class="context-menu-group" data-image-group hidden> <button type="button" data-context-action="copy-image"> <i class="fa-regular fa-image" aria-hidden="true"></i> <span>复制图片</span> </button> <button type="button" data-context-action="open-image"> <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i> <span>新页面打开图片</span> </button> <button type="button" data-context-action="copy-image-url"> <i class="fa-solid fa-link" aria-hidden="true"></i> <span>复制图片地址</span> </button> </div> <div class="context-menu-group"> <a href="/archives/"> <i class="fa-solid fa-box-archive" aria-hidden="true"></i> <span>时间线</span> </a> <a href="/categories/"> <i class="fa-solid fa-folder" aria-hidden="true"></i> <span>分类</span> </a> <a href="/tags/"> <i class="fa-solid fa-hashtag" aria-hidden="true"></i> <span>标签</span> </a> <button type="button" data-context-action="random-post"> <i class="fa-solid fa-shuffle" aria-hidden="true"></i> <span>随机文章</span> </button> <button type="button" data-context-action="comments" data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>跳转评论区</span> </button> <button type="button" data-context-action="print"> <i class="fa-solid fa-print" aria-hidden="true"></i> <span>打印页面</span> </button> <a href="/cc/"> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span>网站版权</span> </a> </div> </div> <div class="context-menu-native-hint" data-context-native-hint role="note" aria-label="Ctrl 右键提示"> <kbd>Ctrl</kbd> + 右键：浏览器原生菜单
|
||
</div> <script>
|
||
(() => {
|
||
const menu = document.querySelector('[data-context-menu]');
|
||
if (!menu) return;
|
||
|
||
const nativeHint = document.querySelector('[data-context-native-hint]');
|
||
const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
|
||
const selectionGroup = menu.querySelector('[data-selection-group]');
|
||
const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
|
||
const imageGroup = menu.querySelector('[data-image-group]');
|
||
const focusableSelector = 'a[href], button:not([disabled])';
|
||
let lastSelectionText = '';
|
||
let lastImage = null;
|
||
let nativeHintTimer = 0;
|
||
|
||
const isNativeContextTarget = (target) =>
|
||
target instanceof Element &&
|
||
Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
|
||
|
||
const getCommentsTarget = () =>
|
||
document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
|
||
|
||
const getSelectionText = () => String(window.getSelection?.() || '').trim();
|
||
|
||
const getImageTarget = (target) => {
|
||
if (!(target instanceof Element)) return null;
|
||
const image = target.closest('img');
|
||
return image instanceof HTMLImageElement ? image : null;
|
||
};
|
||
|
||
const getImageUrl = () => {
|
||
if (!lastImage) return '';
|
||
return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
|
||
};
|
||
|
||
const copyText = async (text) => {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(text);
|
||
return;
|
||
}
|
||
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.setAttribute('readonly', '');
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.inset = '0 auto auto -9999px';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
textarea.remove();
|
||
};
|
||
|
||
const setMenuState = () => {
|
||
const hasSelection = lastSelectionText.length > 0;
|
||
const hasComments = Boolean(getCommentsTarget());
|
||
const hasImage = Boolean(getImageUrl());
|
||
|
||
selectionItems.forEach((item) => {
|
||
item.hidden = !hasSelection;
|
||
});
|
||
if (selectionGroup) selectionGroup.hidden = !hasSelection;
|
||
|
||
commentsItems.forEach((item) => {
|
||
item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
|
||
});
|
||
|
||
if (imageGroup) imageGroup.hidden = !hasImage;
|
||
};
|
||
|
||
const closeMenu = () => {
|
||
menu.classList.remove('is-open');
|
||
menu.setAttribute('aria-hidden', 'true');
|
||
};
|
||
|
||
const openMenu = (x, y) => {
|
||
setMenuState();
|
||
menu.classList.add('is-open');
|
||
menu.setAttribute('aria-hidden', 'false');
|
||
|
||
const rect = menu.getBoundingClientRect();
|
||
const gap = 10;
|
||
const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
|
||
const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
|
||
|
||
menu.style.left = `${left}px`;
|
||
menu.style.top = `${top}px`;
|
||
};
|
||
|
||
const showNativeHint = () => {
|
||
if (!nativeHint) return;
|
||
window.clearTimeout(nativeHintTimer);
|
||
nativeHint.classList.add('is-visible');
|
||
nativeHintTimer = window.setTimeout(() => {
|
||
nativeHint.classList.remove('is-visible');
|
||
}, 2600);
|
||
};
|
||
|
||
const jumpToComments = () => {
|
||
const target = getCommentsTarget();
|
||
target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
};
|
||
|
||
const quoteToComments = () => {
|
||
jumpToComments();
|
||
window.setTimeout(() => {
|
||
const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
|
||
if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
|
||
|
||
const quote = lastSelectionText
|
||
.split(/\r?\n/)
|
||
.map((line) => `> ${line}`)
|
||
.join('\n');
|
||
const current = textarea.value.trim();
|
||
textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
|
||
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
||
textarea.focus();
|
||
}, 500);
|
||
};
|
||
|
||
const searchSelection = () => {
|
||
if (!lastSelectionText) return;
|
||
const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
|
||
window.open(url, '_blank', 'noopener,noreferrer');
|
||
};
|
||
|
||
const copyImage = async () => {
|
||
const imageUrl = getImageUrl();
|
||
if (!imageUrl) return;
|
||
|
||
try {
|
||
if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
|
||
throw new Error('Image clipboard is not available.');
|
||
}
|
||
|
||
const response = await fetch(imageUrl, { mode: 'cors' });
|
||
const blob = await response.blob();
|
||
await navigator.clipboard.write([
|
||
new ClipboardItem({ [blob.type || 'image/png']: blob }),
|
||
]);
|
||
} catch {
|
||
await copyText(new URL(imageUrl, window.location.href).toString());
|
||
}
|
||
};
|
||
|
||
const openImage = () => {
|
||
const imageUrl = getImageUrl();
|
||
if (!imageUrl) return;
|
||
window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
|
||
};
|
||
|
||
document.addEventListener('contextmenu', (event) => {
|
||
if (event.ctrlKey) {
|
||
closeMenu();
|
||
nativeHint?.classList.remove('is-visible');
|
||
return;
|
||
}
|
||
|
||
if (isNativeContextTarget(event.target)) return;
|
||
|
||
lastSelectionText = getSelectionText();
|
||
lastImage = getImageTarget(event.target);
|
||
event.preventDefault();
|
||
openMenu(event.clientX, event.clientY);
|
||
showNativeHint();
|
||
});
|
||
|
||
document.addEventListener('click', (event) => {
|
||
const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
|
||
if (!actionTarget || !menu.contains(actionTarget)) {
|
||
closeMenu();
|
||
return;
|
||
}
|
||
|
||
const action = actionTarget.dataset.contextAction;
|
||
closeMenu();
|
||
|
||
if (action === 'back') history.back();
|
||
if (action === 'forward') history.forward();
|
||
if (action === 'reload') location.reload();
|
||
if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
|
||
if (action === 'search-selection') searchSelection();
|
||
if (action === 'quote-selection') quoteToComments();
|
||
if (action === 'copy-image') copyImage();
|
||
if (action === 'open-image') openImage();
|
||
if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
|
||
if (action === 'random-post' && typeof window.randomPost === 'function') window.randomPost(actionTarget);
|
||
if (action === 'comments') jumpToComments();
|
||
if (action === 'print') window.print();
|
||
});
|
||
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape') closeMenu();
|
||
if (event.key === 'Tab' && menu.classList.contains('is-open')) {
|
||
const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
|
||
if (items.length === 0) return;
|
||
const first = items[0];
|
||
const last = items[items.length - 1];
|
||
|
||
if (event.shiftKey && document.activeElement === first) {
|
||
event.preventDefault();
|
||
last.focus();
|
||
} else if (!event.shiftKey && document.activeElement === last) {
|
||
event.preventDefault();
|
||
first.focus();
|
||
}
|
||
}
|
||
});
|
||
|
||
window.addEventListener('scroll', closeMenu, { passive: true });
|
||
window.addEventListener('resize', closeMenu);
|
||
})();
|
||
</script> <aside class="pwa-toast" data-pwa-toast hidden role="status" aria-live="polite"> <div class="pwa-toast-icon" aria-hidden="true"><i class="fa-solid fa-download"></i></div> <div class="pwa-toast-copy"> <strong data-pwa-title>PWA 提示</strong> <p data-pwa-message></p> </div> <div class="pwa-toast-actions"> <button class="pwa-toast-primary" type="button" data-pwa-primary>确定</button> <button class="pwa-toast-close" type="button" data-pwa-close aria-label="关闭提示">稍后</button> </div> </aside> <script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script> <script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script> <script src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script src="/js/random.js"></script> <script src="/js/search/typesense-search.js"></script> <script src="/js/external-links.js"></script> <script src="/js/pwa.js"></script> <script>
|
||
(() => {
|
||
const nav = document.querySelector('.nav');
|
||
const toggle = document.querySelector('[data-nav-toggle]');
|
||
const menu = document.querySelector('[data-nav-menu]');
|
||
const backdrop = document.querySelector('[data-nav-backdrop]');
|
||
if (!nav || !toggle || !menu) return;
|
||
|
||
function setMenu(open) {
|
||
nav.classList.toggle('is-open', open);
|
||
toggle.setAttribute('aria-expanded', String(open));
|
||
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
|
||
menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720));
|
||
document.body.classList.toggle('has-nav-drawer', open);
|
||
}
|
||
|
||
toggle.addEventListener('click', () => {
|
||
setMenu(!nav.classList.contains('is-open'));
|
||
});
|
||
|
||
backdrop?.addEventListener('click', () => setMenu(false));
|
||
|
||
menu.addEventListener('click', (event) => {
|
||
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
|
||
});
|
||
|
||
document.addEventListener('click', (event) => {
|
||
if (!nav.classList.contains('is-open')) return;
|
||
if (event.target instanceof Node && nav.contains(event.target)) return;
|
||
setMenu(false);
|
||
});
|
||
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false);
|
||
});
|
||
|
||
window.addEventListener('resize', () => {
|
||
if (window.innerWidth > 720) setMenu(false);
|
||
else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open')));
|
||
});
|
||
|
||
menu.setAttribute('aria-hidden', String(window.innerWidth <= 720));
|
||
})();
|
||
|
||
(() => {
|
||
const modal = document.querySelector('[data-console-modal]');
|
||
const panel = modal?.querySelector('.control-console-panel');
|
||
const openButtons = document.querySelectorAll('[data-console-open]');
|
||
const closeButtons = modal?.querySelectorAll('[data-console-close]') || [];
|
||
if (!modal || !panel || openButtons.length === 0) return;
|
||
|
||
function setConsole(open) {
|
||
modal.classList.toggle('is-open', open);
|
||
modal.setAttribute('aria-hidden', String(!open));
|
||
document.body.classList.toggle('has-control-console', open);
|
||
if (open) panel.focus();
|
||
}
|
||
|
||
openButtons.forEach((button) => {
|
||
button.addEventListener('click', () => setConsole(true));
|
||
});
|
||
|
||
closeButtons.forEach((button) => {
|
||
button.addEventListener('click', () => setConsole(false));
|
||
});
|
||
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape' && modal.classList.contains('is-open')) setConsole(false);
|
||
});
|
||
})();
|
||
|
||
(() => {
|
||
const storageKey = 'site-theme';
|
||
const root = document.documentElement;
|
||
const button = document.querySelector('[data-theme-toggle]');
|
||
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
||
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
|
||
const getSavedTheme = () => {
|
||
try {
|
||
const theme = localStorage.getItem(storageKey);
|
||
return theme === 'dark' || theme === 'light' ? theme : null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
const setSavedTheme = (theme) => {
|
||
try {
|
||
if (theme === getSystemTheme()) localStorage.removeItem(storageKey);
|
||
else localStorage.setItem(storageKey, theme);
|
||
} catch {
|
||
// localStorage can be unavailable in strict privacy modes.
|
||
}
|
||
};
|
||
const getTheme = () => getSavedTheme() || getSystemTheme();
|
||
|
||
function applyTheme(theme) {
|
||
root.dataset.theme = theme;
|
||
root.dataset.themeMode = getSavedTheme() ? 'manual' : 'auto';
|
||
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
|
||
button?.setAttribute(
|
||
'title',
|
||
getSavedTheme()
|
||
? (theme === 'dark' ? '切换到日间模式' : '切换到夜间模式')
|
||
: `跟随系统：${theme === 'dark' ? '夜间' : '日间'}模式`
|
||
);
|
||
}
|
||
|
||
applyTheme(getTheme());
|
||
|
||
button?.addEventListener('click', () => {
|
||
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
|
||
setSavedTheme(nextTheme);
|
||
applyTheme(nextTheme);
|
||
});
|
||
|
||
const handleSystemThemeChange = () => {
|
||
if (!getSavedTheme()) applyTheme(getSystemTheme());
|
||
};
|
||
|
||
if (typeof media.addEventListener === 'function') {
|
||
media.addEventListener('change', handleSystemThemeChange);
|
||
} else if (typeof media.addListener === 'function') {
|
||
media.addListener(handleSystemThemeChange);
|
||
}
|
||
})();
|
||
|
||
(() => {
|
||
const runtime = document.getElementById('site-runtime');
|
||
if (!runtime) return;
|
||
|
||
const start = new Date(window.SITE_CONFIG.site.startTime).getTime();
|
||
const pad = (value) => String(value).padStart(2, '0');
|
||
|
||
function updateRuntime() {
|
||
const diff = Math.max(0, Date.now() - start);
|
||
const days = Math.floor(diff / 86400000);
|
||
const hours = Math.floor((diff / 3600000) % 24);
|
||
const minutes = Math.floor((diff / 60000) % 60);
|
||
const seconds = Math.floor((diff / 1000) % 60);
|
||
runtime.textContent = `${days} 天 ${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
|
||
}
|
||
|
||
updateRuntime();
|
||
window.setInterval(updateRuntime, 1000);
|
||
})();
|
||
</script> </body> </html> <script>(function(){const postSlug = "c6143ad3";
|
||
|
||
(() => {
|
||
const article = document.querySelector('.post-article');
|
||
const progressBar = document.querySelector('[data-reading-progress]');
|
||
const resume = document.querySelector('[data-reading-resume]');
|
||
const resumePercent = document.querySelector('[data-reading-resume-percent]');
|
||
const continueButton = document.querySelector('[data-reading-continue]');
|
||
const restartButton = document.querySelector('[data-reading-restart]');
|
||
if (!article || !progressBar || !resume) return;
|
||
|
||
const storageKey = `reading-progress:${postSlug}`;
|
||
let saved = null;
|
||
let canPersist = true;
|
||
let frame = 0;
|
||
|
||
try {
|
||
saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
|
||
} catch {
|
||
saved = null;
|
||
}
|
||
|
||
const articleMetrics = () => {
|
||
const top = article.getBoundingClientRect().top + window.scrollY;
|
||
const distance = Math.max(1, article.offsetHeight - window.innerHeight);
|
||
return { top, distance };
|
||
};
|
||
|
||
const getProgress = () => {
|
||
const { top, distance } = articleMetrics();
|
||
return Math.min(1, Math.max(0, (window.scrollY - top) / distance));
|
||
};
|
||
|
||
const persist = (progress) => {
|
||
if (!canPersist) return;
|
||
try {
|
||
if (progress >= 0.97) localStorage.removeItem(storageKey);
|
||
else if (progress >= 0.02) localStorage.setItem(storageKey, JSON.stringify({ progress, savedAt: Date.now() }));
|
||
} catch {
|
||
// Storage can be unavailable in strict privacy modes.
|
||
}
|
||
};
|
||
|
||
const update = () => {
|
||
frame = 0;
|
||
const progress = getProgress();
|
||
progressBar.style.transform = `scaleX(${progress})`;
|
||
persist(progress);
|
||
};
|
||
|
||
const requestUpdate = () => {
|
||
if (!frame) frame = window.requestAnimationFrame(update);
|
||
};
|
||
|
||
const closeResume = () => {
|
||
resume.hidden = true;
|
||
canPersist = true;
|
||
};
|
||
|
||
const savedIsFresh = saved && Date.now() - Number(saved.savedAt) < 90 * 86400000;
|
||
const savedProgress = Number(saved?.progress);
|
||
if (savedIsFresh && savedProgress >= 0.05 && savedProgress < 0.97) {
|
||
canPersist = false;
|
||
if (resumePercent) resumePercent.textContent = `${Math.round(savedProgress * 100)}%`;
|
||
window.setTimeout(() => { resume.hidden = false; }, 350);
|
||
}
|
||
|
||
continueButton?.addEventListener('click', () => {
|
||
closeResume();
|
||
const { top, distance } = articleMetrics();
|
||
window.scrollTo({ top: top + distance * savedProgress, behavior: 'smooth' });
|
||
});
|
||
|
||
restartButton?.addEventListener('click', () => {
|
||
try { localStorage.removeItem(storageKey); } catch {}
|
||
closeResume();
|
||
window.scrollTo({ top: Math.max(0, articleMetrics().top - 90), behavior: 'smooth' });
|
||
});
|
||
|
||
update();
|
||
window.addEventListener('scroll', requestUpdate, { passive: true });
|
||
window.addEventListener('resize', requestUpdate);
|
||
window.addEventListener('pagehide', () => persist(getProgress()));
|
||
})();
|
||
})();</script> <script>
|
||
(() => {
|
||
document.querySelectorAll('.article-outdated-note[data-freshness-at]').forEach((note) => {
|
||
const freshnessAt = new Date(note.dataset.freshnessAt || '');
|
||
const hasNewVersion = note.dataset.hasNewVersion === 'true';
|
||
if (Number.isNaN(freshnessAt.valueOf())) return;
|
||
|
||
const threshold = new Date();
|
||
threshold.setFullYear(threshold.getFullYear() - 1);
|
||
note.hidden = !hasNewVersion && freshnessAt >= threshold;
|
||
});
|
||
})();
|
||
</script> <script>
|
||
(() => {
|
||
const prose = document.querySelector('.prose[data-toc]');
|
||
if (!prose) return;
|
||
|
||
let toc = [];
|
||
try {
|
||
toc = JSON.parse(prose.dataset.toc || '[]');
|
||
} catch {
|
||
toc = [];
|
||
}
|
||
|
||
prose.querySelectorAll('h1, h2, h3').forEach((heading, index) => {
|
||
const item = toc[index];
|
||
if (item?.id && !heading.id) heading.id = item.id;
|
||
});
|
||
|
||
const tocTree = document.querySelector('[data-toc-tree]');
|
||
if (tocTree && toc.length > 0) {
|
||
const links = [...tocTree.querySelectorAll('[data-toc-link]')];
|
||
const groups = [...tocTree.querySelectorAll('[data-toc-group]')];
|
||
const headings = toc
|
||
.map((item) => document.getElementById(item.id))
|
||
.filter(Boolean);
|
||
|
||
const setActiveToc = (id) => {
|
||
links.forEach((link) => {
|
||
const isActive = link.getAttribute('href') === `#${id}`;
|
||
link.classList.toggle('is-active', isActive);
|
||
if (isActive) link.setAttribute('aria-current', 'location');
|
||
else link.removeAttribute('aria-current');
|
||
});
|
||
|
||
const activeLink = tocTree.querySelector(`[data-toc-link][href="#${CSS.escape(id)}"]`);
|
||
const activeGroup = activeLink?.closest('[data-toc-group]');
|
||
groups.forEach((group) => group.classList.toggle('is-open', group === activeGroup));
|
||
};
|
||
|
||
const updateToc = () => {
|
||
const anchorOffset = 132;
|
||
let activeId = headings[0]?.id;
|
||
|
||
headings.forEach((heading) => {
|
||
if (heading.getBoundingClientRect().top <= anchorOffset) activeId = heading.id;
|
||
});
|
||
|
||
if (activeId) setActiveToc(activeId);
|
||
};
|
||
|
||
tocTree.addEventListener('click', (event) => {
|
||
const link = event.target.closest?.('[data-toc-link]');
|
||
if (!link) return;
|
||
|
||
const group = link.closest('[data-toc-group]');
|
||
groups.forEach((item) => item.classList.toggle('is-open', item === group));
|
||
});
|
||
|
||
updateToc();
|
||
window.addEventListener('scroll', updateToc, { passive: true });
|
||
window.addEventListener('resize', updateToc);
|
||
}
|
||
|
||
})();
|
||
</script> <script>
|
||
(() => {
|
||
const prose = document.querySelector('.post-article .prose');
|
||
if (!prose) return;
|
||
|
||
const collapsedLineCount = 8;
|
||
const copyLabels = {
|
||
idle: '复制',
|
||
done: '已复制',
|
||
error: '复制失败',
|
||
};
|
||
|
||
const languageNames = {
|
||
bash: 'Bash',
|
||
c: 'C',
|
||
cpp: 'C++',
|
||
cs: 'C#',
|
||
css: 'CSS',
|
||
html: 'HTML',
|
||
js: 'JavaScript',
|
||
json: 'JSON',
|
||
jsx: 'JSX',
|
||
md: 'Markdown',
|
||
powershell: 'PowerShell',
|
||
py: 'Python',
|
||
shell: 'Shell',
|
||
sh: 'Shell',
|
||
ts: 'TypeScript',
|
||
tsx: 'TSX',
|
||
txt: 'Text',
|
||
yaml: 'YAML',
|
||
yml: 'YAML',
|
||
};
|
||
|
||
function getCodeLanguage(pre, code) {
|
||
const rawLanguage =
|
||
pre.dataset.language ||
|
||
code.dataset.language ||
|
||
[...pre.classList, ...code.classList]
|
||
.find((className) => className.startsWith('language-'))
|
||
?.replace(/^language-/, '') ||
|
||
'';
|
||
|
||
const normalized = rawLanguage.trim().toLowerCase();
|
||
return languageNames[normalized] || normalized.toUpperCase() || 'Code';
|
||
}
|
||
|
||
function getCodeText(code, lines) {
|
||
if (lines.length > 0) return lines.map((line) => line.textContent || '').join('\n');
|
||
return code.textContent || '';
|
||
}
|
||
|
||
prose.querySelectorAll('img').forEach((image) => {
|
||
if (image.closest('a, .article-header-cover')) return;
|
||
|
||
const src = image.currentSrc || image.getAttribute('src');
|
||
if (!src) return;
|
||
|
||
const link = document.createElement('a');
|
||
link.className = 'fancybox';
|
||
link.href = src;
|
||
link.dataset.fancybox = 'article-gallery';
|
||
link.dataset.caption = image.getAttribute('alt') || '';
|
||
image.parentNode?.insertBefore(link, image);
|
||
link.appendChild(image);
|
||
});
|
||
|
||
prose.querySelectorAll('table').forEach((table) => {
|
||
if (table.closest('.table-scroll')) return;
|
||
|
||
const wrapper = document.createElement('div');
|
||
wrapper.className = 'table-scroll';
|
||
table.parentNode?.insertBefore(wrapper, table);
|
||
wrapper.appendChild(table);
|
||
});
|
||
|
||
prose.querySelectorAll('.butterfly-hide-inline').forEach((item) => {
|
||
const button = item.querySelector('.butterfly-hide-toggle');
|
||
if (!button) return;
|
||
|
||
button.addEventListener('click', () => {
|
||
item.classList.toggle('is-open');
|
||
});
|
||
});
|
||
|
||
if (window.Fancybox) {
|
||
window.Fancybox.bind('[data-fancybox="article-gallery"]', {
|
||
compact: false,
|
||
dragToClose: true,
|
||
Images: {
|
||
zoom: true,
|
||
},
|
||
});
|
||
}
|
||
|
||
async function copyText(text) {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(text);
|
||
return;
|
||
}
|
||
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.setAttribute('readonly', '');
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.top = '-9999px';
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
textarea.remove();
|
||
}
|
||
|
||
prose.querySelectorAll('pre').forEach((pre) => {
|
||
if (pre.closest('.code-block')) return;
|
||
|
||
const code = pre.querySelector('code');
|
||
if (!code) return;
|
||
|
||
const wrapper = document.createElement('div');
|
||
wrapper.className = 'code-block';
|
||
pre.parentNode?.insertBefore(wrapper, pre);
|
||
wrapper.appendChild(pre);
|
||
|
||
const header = document.createElement('div');
|
||
header.className = 'code-block-header';
|
||
|
||
const language = document.createElement('span');
|
||
language.className = 'code-block-language';
|
||
language.textContent = getCodeLanguage(pre, code);
|
||
|
||
const toolbar = document.createElement('div');
|
||
toolbar.className = 'code-block-toolbar';
|
||
|
||
const copyButton = document.createElement('button');
|
||
copyButton.className = 'code-block-copy';
|
||
copyButton.type = 'button';
|
||
copyButton.textContent = copyLabels.idle;
|
||
copyButton.setAttribute('aria-label', '复制代码');
|
||
|
||
const toggleButton = document.createElement('button');
|
||
toggleButton.className = 'code-block-toggle';
|
||
toggleButton.type = 'button';
|
||
toggleButton.textContent = '展开';
|
||
toggleButton.setAttribute('aria-expanded', 'false');
|
||
|
||
const expandCue = document.createElement('button');
|
||
expandCue.className = 'code-block-expand-cue';
|
||
expandCue.type = 'button';
|
||
expandCue.setAttribute('aria-label', 'Expand code block');
|
||
expandCue.setAttribute('aria-expanded', 'false');
|
||
expandCue.innerHTML = '<span aria-hidden="true"></span>';
|
||
|
||
toolbar.append(copyButton, toggleButton);
|
||
header.append(language, toolbar);
|
||
wrapper.appendChild(header);
|
||
wrapper.appendChild(expandCue);
|
||
|
||
const codeLines = [...code.querySelectorAll(':scope > .line')];
|
||
if (codeLines.length > 0) {
|
||
wrapper.classList.add('has-line-numbers');
|
||
wrapper.style.setProperty('--line-number-width', `${String(codeLines.length).length + 1}ch`);
|
||
codeLines.forEach((line, index) => {
|
||
line.dataset.line = String(index + 1);
|
||
});
|
||
}
|
||
|
||
const lineCount = codeLines.length || (code.textContent || '').split(/\r?\n/).length;
|
||
if (lineCount > collapsedLineCount) wrapper.classList.add('is-collapsible');
|
||
|
||
copyButton.addEventListener('click', async () => {
|
||
try {
|
||
await copyText(getCodeText(code, codeLines));
|
||
copyButton.textContent = copyLabels.done;
|
||
window.setTimeout(() => {
|
||
copyButton.textContent = copyLabels.idle;
|
||
}, 1400);
|
||
} catch {
|
||
copyButton.textContent = copyLabels.error;
|
||
window.setTimeout(() => {
|
||
copyButton.textContent = copyLabels.idle;
|
||
}, 1600);
|
||
}
|
||
});
|
||
|
||
function toggleExpanded() {
|
||
const isExpanded = wrapper.classList.toggle('is-expanded');
|
||
toggleButton.textContent = isExpanded ? '收起' : '展开';
|
||
toggleButton.setAttribute('aria-expanded', String(isExpanded));
|
||
expandCue.setAttribute('aria-expanded', String(isExpanded));
|
||
}
|
||
|
||
toggleButton.addEventListener('click', toggleExpanded);
|
||
expandCue.addEventListener('click', toggleExpanded);
|
||
});
|
||
})();
|
||
</script> |