Merge pull request #32 from markruan/dev-3.x

feat: add new feature

_config.yml

@@ -196,6 +196,18 @@ footer:
 cdn:
   enable: true
   
+# ---------------------------------------------------------------------------------------
+# Aplayer 播放器(仅限首页使用)
+# ---------------------------------------------------------------------------------------
+aplayer: 
+  enable: true
+
+# ---------------------------------------------------------------------------------------
+# particles 首页粒子动画背景
+# ---------------------------------------------------------------------------------------
+particles: 
+  enable: true
+
 
 # ---------------------------------------------------------------------------------------
 # Keep version (Please don't modify)

layout/_partial/aplayer/aplayer.ejs

@@ -0,0 +1,42 @@
+<link href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" rel="stylesheet">
+<div id="aplayer"></div>
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
+<script>
+	const ap = new APlayer({
+	    container: document.getElementById('aplayer'),
+	    fixed: true,
+	    audio: [{
+			        name: 'Crazy (Acoustic Version)',
+			        artist: 'David Benjamin / Lost Frequencies / Zonderling',
+			        url: 'https://music.163.com/song/media/outer/url?id=535048794.mp3',
+			     },
+			     {
+			        name: 'Valder Fields',
+			        artist: 'Tamas Wells',
+			        url: 'https://music.163.com/song/media/outer/url?id=2001320.mp3',
+			     }
+               ]
+	});
+
+</script>
+<style>
+.aplayer.aplayer-fixed .aplayer-body {
+    position: fixed;
+    bottom: 60px;
+    left: -66px;
+    right: 0;
+    margin: 0;
+    z-index: 99;
+    background: #fff;
+    padding-right: 18px;
+    transition: all .3s ease;
+    max-width: 400px;
+    z-index: 2200;
+}
+.aplayer.aplayer-fixed {
+  z-index: 1099;
+ }
+.aplayer.aplayer-fixed .aplayer-list {
+    display: none; 
+}
+</style>

layout/_partial/first-screen.ejs

@@ -1,3 +1,6 @@
+<% if (theme.particles.enable && is_home() && !page.prev) { %>
+    <%- partial('_partial/particles/particles.ejs') %>  
+<% } %>
 <div class="first-screen-container flex-center">
     <div class="content flex-center">
         <div class="description">

layout/_partial/particles/particles.ejs

@@ -0,0 +1,44 @@
+<script src="/js/particles.min.js"></script>
+<canvas class="background" style="width: 100%; " ></canvas>
+<script> 
+    window.onload = function() {
+        Particles.init({
+          selector: '.background',
+          color: '#75A5B7',
+          maxParticles: 100,
+          connectParticles: true,
+          responsive: [
+            {
+              breakpoint: 768,
+              options: {
+                maxParticles: 80
+              }
+            }, {
+              breakpoint: 375,
+              options: {
+                maxParticles: 50
+              }
+            }
+     ]
+  });
+};
+</script>
+<style>
+ .background{
+    background-color: #fffff;
+    width: 100%; 
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 0;
+ }
+ .first-screen-container{
+   z-index:1000;
+   height: 640px;
+ }
+ .right-bottom-side-tools {
+    
+    z-index: 1020;
+  }
+</style>

layout/_partial/side-tools-container.ejs

@@ -0,0 +1,35 @@
+<div class="side-tools-container">
+
+    <ul class="side-tools-list">
+        <li class="tools-item tool-font-adjust-plus flex-center">
+            <i class="fas fa-search-plus"></i>
+        </li>
+
+        <li class="tools-item tool-font-adjust-minus flex-center">
+            <i class="fas fa-search-minus"></i>
+        </li>
+
+        <li class="tools-item tool-expand-width flex-center">
+            <i class="fas fa-arrows-alt-h"></i>
+        </li>
+
+        <li class="tools-item tool-dark-light-toggle flex-center">
+            <i class="fas fa-moon"></i>
+        </li>
+
+        <li class="tools-item tool-scroll-to-top flex-center">
+            <i class="fas fa-arrow-up"></i>
+        </li>
+
+        <li class="tools-item tool-scroll-to-bottom flex-center">
+            <i class="fas fa-arrow-down"></i>
+        </li>
+    </ul>
+
+    <ul class="tools-ul-1">
+        <li class="tools-item tool-toggle-show flex-center">
+            <i class="fas fa-cog fa-spin"></i>
+        </li>
+
+    </ul>
+</div>

layout/page.ejs

@@ -1,14 +1,16 @@
+
+<header class="page-header">
+        <div class="header-progress"></div>
+        <% if (theme.style.first_screen.enable && is_home() && !page.prev) { %>
+            <%- partial('_partial/first-screen.ejs') %>
+            <% if (theme.aplayer.enable) { %>
+                <%- partial('_partial/aplayer/aplayer.ejs') %>
+            <% } %>
+        <% } %>
+</header>
 <div class="page-container">
 
-    <% if (theme.style.first_screen.enable && is_home() && !page.prev) { %>
+   <main class="page-main">
-        <%- partial('_partial/first-screen.ejs') %>
-    <% } %>
-
-    <header class="page-header">
-        <div class="header-progress"></div>
-    </header>
-
-    <main class="page-main">
         
         <div class="page-main-content">
 
@@ -60,17 +62,15 @@
     </div>
 
     <div class="right-bottom-side-tools">
-        <%- partial('_partial/side-tools') %>
+        <%- partial('_partial/side-tools-container') %>
     </div>
-
+  <!-- page aside -->
-    <!-- page aside -->
     <aside class="page-aside">
         <% if (is_post()) { %>
             <%- partial('_partial/toc') %>
         <% } %>
     </aside>
-
+  <!-- image viewer -->
-    <!-- image viewer -->
     <%- partial('_partial/image-viewer') %>
 
 </div>
@@ -79,3 +79,17 @@
 <% if (theme.local_search.enable) { %>
     <%- partial('_partial/local-search') %>
 <% } %>
+
+<style>
+  .header-progress {
+      visibility: hidden;
+      position: fixed;
+      width: 0;
+      height: 3px;
+      top: 0;
+      left: 0;
+      background: var(--primary-color);
+      transition: all 0.1s ease;
+      z-index: 1008;
+    }
+</style>