添加赞助商

docs/sponsor/index.md

@@ -0,0 +1,15 @@
+---
+hide:
+  - navigation
+  - toc
+  - feedback
+  - footer
+---
+
+# 成为赞助商
+
+<button class="md-button md-button--primary" style="padding: 6px 20px 0 20px" title="https://afdian.com/a/SuperManito" onclick="window.open('https://afdian.com/a/SuperManito')">
+    ![](/assets/images/sponsor/ifdian.png){ width="120" }
+</button>
+
+> 点击按钮前往查看爱发电主页上的说明并与作者取得联系

docs/stylesheets/extra.css

@@ -1,53 +1,115 @@
 :root {
-    --md-text-font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --md-code-font: "SF Mono";
+    --md-text-font: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Segoe UI', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --md-code-font: 'SF Mono';
     --md-primary-fg-color--light: hsl(0, 0%, 100%, 0.33);
     --md-default-bg-color--light: #ffffff;
-    --md-default-bg-color--dark: hsla(var(--md-hue),15%,14%,1);
+    --md-default-bg-color--dark: hsla(var(--md-hue), 15%, 14%, 1);
 }
+
 .md-header {
     background-color: hsla(240, 9%, 75%, 0.33);
     backdrop-filter: blur(8px);
 }
+
 [data-md-color-scheme='slate'] .md-header {
-    background-color: hsla(240, 4%,11%, 0.33);
+    background-color: hsla(240, 4%, 11%, 0.33);
 }
+
 .md-tabs {
     background-color: hsla(240, 9%, 75%, 0.33);
 }
+
 [data-md-color-scheme='slate'] .md-tabs {
-    background-color: hsla(240, 4%,11%, 0.33);
+    background-color: hsla(240, 4%, 11%, 0.33);
 }
+
 @font-face {
-    font-family: "SF Mono";
+    font-family: 'SF Mono';
     src: url('./fonts/SF-Mono-Regular.otf');
 }
+
 @keyframes heart {
+
     0%,
     40%,
     80%,
     100% {
         transform: scale(1);
     }
+
     20%,
     60% {
         transform: scale(1.15);
     }
 }
+
 .heart {
     animation: heart 1000ms infinite;
 }
+
 .md-tabs__link {
-    font-size: .8rem !important;
+    font-size: 0.8rem !important;
     font-weight: 600 !important;
 }
+
 .md-typeset {
     font-size: 16px;
 }
-.md-typeset .emojione, .md-typeset .gemoji, .md-typeset .twemoji {
+
+.md-typeset .emojione,
+.md-typeset .gemoji,
+.md-typeset .twemoji {
     height: 100%;
     vertical-align: -0.2em !important;
 }
+
 .md-typeset .middle {
     vertical-align: -0.35em !important;
 }
+
+.md-nav__sponsor-bottom {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--md-default-fg-color--lightest);
+}
+
+.md-nav__sponsor-bottom .sponsor-label {
+    font-size: 0.8rem;
+    text-align: center;
+    margin-bottom: 0.2rem;
+    color: var(--md-default-fg-color);
+}
+
+.md-nav__sponsor-bottom .sponsor-wrapper {
+    width: 100%;
+    padding: 0.5rem 0;
+}
+
+.md-nav__sponsor-bottom .sponsor-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+    border-radius: 5px;
+    transition: background-color 0.2s;
+    height: 80px;
+    max-height: 80px;
+}
+
+.md-nav__sponsor-bottom .sponsor-item:hover {
+    background-color: var(--md-code-bg-color);
+}
+
+.md-nav__sponsor-bottom .sponsor-item img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+}
+
+@media screen and (max-width: 768px) {
+    .md-nav__sponsor-bottom {
+        display: none;
+    }
+}

docs/theme/partials/toc.html

@@ -0,0 +1,28 @@
+<nav class="md-nav md-nav--secondary" aria-label="{{ title }}">
+  {% set toc = page.toc %} {% set first = toc | first %} {% if first and first.level == 1 %} {% set toc = first.children %} {% endif %} {% if toc %}
+  <label class="md-nav__title" for="__toc">
+    <span class="md-nav__icon md-icon"></span>
+    {{ title }}
+  </label>
+  <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+    {% for toc_item in toc %} {% include "partials/toc-item.html" %} {% endfor %}
+  </ul>
+
+  <div class="md-nav__sponsor-bottom">
+    <div class="sponsor-label">
+      <strong>赞助商</strong>
+    </div>
+    <div class="sponsor-wrapper">
+      <a href="https://arcadia.cool" target="_blank" class="sponsor-item">
+        <img id="sponsor-img" src="/assets/images/sponsor/arcadia-light.png#only-light" alt="Arcadia 一站式代码运维平台" style="width: 80%" />
+        <img id="sponsor-img" src="/assets/images/sponsor/arcadia-dark.png#only-dark" alt="Arcadia 一站式代码运维平台" style="width: 80%" />
+      </a>
+      <a href="/sponsor/" target="_blank" class="sponsor-item">
+        <span class="sponsor-item" style="font-size: 0.8rem">
+          <strong>成为赞助商</strong>
+        </span>
+      </a>
+    </div>
+  </div>
+  {% endif %}
+</nav>