feat: add background animation and footer stats

cmgzn · Oct 17, 2024 · 3c51ce9 · 3c51ce9
1 parent 0325a92
commit 3c51ce9
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 0 deletions.
diff --git a/_config.yml b/_config.yml
@@ -197,6 +197,8 @@ defaults:
       layout: page
       permalink: /:title/
 
+backgroud_animation: true
+
 sass:
   style: compressed
 

diff --git a/_includes/animated-background.html b/_includes/animated-background.html
@@ -0,0 +1,52 @@
+<div id="animation">
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+    <div class="animation-circle"></div>
+  </div>
diff --git a/_includes/footer-busuanzi.html b/_includes/footer-busuanzi.html
@@ -0,0 +1,4 @@
+<!-- 不蒜子站点统计，放在页脚处 (footer.html 中插入) -->
+<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+<i class="fa fa-user" aria-hidden="true"></i> <span id="busuanzi_value_site_uv"></span> |
+<i class="fa fa-eye" aria-hidden="true"></i> <span id="busuanzi_value_site_pv"></span>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,54 @@
+<!-- The Footer -->
+
+<footer
+  aria-label="Site Info"
+  class="
+    d-flex flex-column justify-content-center text-muted
+    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
+  "
+>
+  <p>
+    {{- '©' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
+
+    {% if site.social.links %}
+      <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+    {% else %}
+      <em class="fst-normal">{{ site.social.name }}</em>.
+    {% endif %}
+
+    {% if site.data.locales[include.lang].copyright.brief %}
+      <span
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="{{ site.data.locales[include.lang].copyright.verbose }}"
+      >
+        {{- site.data.locales[include.lang].copyright.brief -}}
+      </span>
+    {% endif %}
+  </p>
+
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
+
+    {%- capture _theme -%}
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        href="https://github.com/cotes2020/jekyll-theme-chirpy"
+        target="_blank"
+        rel="noopener"
+      >Chirpy</a>
+    {%- endcapture -%}
+
+    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+  </p>
+
+  <!-- 站点统计 -->
+  <p> 
+    {% include footer-busuanzi.html %}
+  </p>
+</footer>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,6 +12,10 @@
   {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
 {% endif %}
 
+{% if site.backgroud_animation %}
+  {% include animated-background.html %}
+{% endif %}
+
 <!-- `site.alt_lang` can specify a language different from the UI -->
 <html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}

diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
@@ -0,0 +1,88 @@
+---
+---
+
+@import 'main
+{%- if jekyll.environment == 'production' -%}
+  .bundle
+{%- endif -%}
+';
+
+/* append your custom style below */
+
+/* 生成动画 */
+@keyframes infirot {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.icon-loading1 {
+  display: inline-block;
+  animation: infirot 1s linear infinite;
+  -webkit-animation: infirot 1s linear infinite;
+}
+
+@function random_range($min, $max) {
+  $rand: random();
+  $random_range: $min + floor($rand * (($max - $min) + 1));
+  @return $random_range;
+}
+
+#animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+
+  @keyframes animate {
+    0% {
+      transform: translateY(0) rotate(0deg);
+      opacity: 1;
+      border-radius: 0;
+    }
+    100% {
+      transform: translateY(-1200px) rotate(720deg);
+      opacity: 0;
+      border-radius: 50%;
+    }
+  }
+
+  @media all and (min-width: 1200px) {
+    .animation-circle {
+      position: absolute;
+      left: var(--circle-left);
+      bottom: -300px;
+      display: block;
+      background: var(--circle-background);
+      width: var(--circle-side-length);
+      height: var(--circle-side-length);
+      animation: animate 25s linear infinite;
+      animation-duration: var(--circle-time);
+      animation-delay: var(--circle-delay);
+      pointer-events: none;
+
+      @for $i from 0 through 50 {
+        &:nth-child(#{$i}) {
+          --circle-left: #{random_range(0%, 100%)};
+          --circle-background: rgba(#{random_range(0, 255)}, #{random_range(0, 255)}, #{random_range(0, 255)}, 0.06); // 最后一个数为透明度
+          --circle-side-length: #{random_range(20px, 200px)};
+          --circle-time: #{random_range(10s, 45s)};
+          --circle-delay: #{random_range(0s, 25s)};
+        }
+      }
+    }
+  }
+
+  @media all and (max-width: 1199px) {
+    .animation-circle {
+      display: none;
+    }
+  }
+}