From 7441249e5e5c20f3f087e68cf139b5622af588fc Mon Sep 17 00:00:00 2001
From: LRay-iu <1159074129@qq.com>
Date: Thu, 5 Sep 2024 22:06:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=B8=E5=86=8C=E5=92=8C?=
 =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/_partials/navbar.ejs                   |  23 +-
 layout/_widgets/masonry.ejs                   |   8 +-
 source/css/layout/home-content.styl           |   1 +
 ...00\344\272\233\346\224\271\351\200\240.md" | 308 ++++++++++++++++++
 4 files changed, 329 insertions(+), 11 deletions(-)
 create mode 100644 "\350\207\252\345\267\261\347\232\204\344\270\200\344\272\233\346\224\271\351\200\240.md"

diff --git a/layout/_partials/navbar.ejs b/layout/_partials/navbar.ejs
index d612844e..3b6742db 100755
--- a/layout/_partials/navbar.ejs
+++ b/layout/_partials/navbar.ejs
@@ -46,9 +46,12 @@
                                 <% if (hasSubmenus) { %>
                                     <ul class="sub-menu">
                                         <% for (var submenu in link.submenus) { %>
-                                            <li>
-                                                <a href="<%- url_for(link.submenus[submenu]) %>">
-                                                    <%= __(submenu.toLowerCase()).toUpperCase() %>
+                                            <li class="flex items-center">
+                                                <a href="<%- url_for(link.submenus[submenu].url) %>" class="flex items-center w-full" style="padding: 3px 5px;">
+                                                    <i class="<%= link.submenus[submenu].icon %> flex-shrink-0" style="flex-basis: 10%; text-align: center;"></i>
+                                                    <span style="flex-basis: 90%; padding-left: 5px;">
+                                                        <%= __(submenu.toLowerCase()).toUpperCase() %>
+                                                    </span>
                                                 </a>
                                             </li>
                                         <% } %>
@@ -125,11 +128,18 @@
                         <% if (hasSubmenus) { %>
                             <div class="flex-col items-start px-2 py-2 hidden" data-target="submenu-<%= i %>">
                                 <% for (var submenu in linkData.submenus) { %>
-                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl">
-                                        <a class=" text-third-text-color text-xl"
-                                           href="<%- url_for(linkData.submenus[submenu]) %>"><%= __(submenu.toLowerCase()).toUpperCase() %></a>
+                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl" style="margin: 7.2px 0;">
+                                        <a class="text-third-text-color text-xl flex items-center w-full" href="<%- url_for(linkData.submenus[submenu].url) %>">
+                                            <div class="icon-container flex justify-center items-center" style="flex: 2; max-width: 15%;">
+                                                <i class="<%= linkData.submenus[submenu].icon %> text-xl"></i>
+                                            </div>
+                                            <div class="text-container" style="flex: 8; max-width: 85%;">
+                                                <%= __(submenu.toLowerCase()).toUpperCase() %>
+                                            </div>
+                                        </a>
                                     </div>
                                 <% } %>
+                                
                             </div>
                         <% } %>
                     </li>
@@ -159,4 +169,3 @@
     <div class="window-mask"></div>
 
 </header>
-
diff --git a/layout/_widgets/masonry.ejs b/layout/_widgets/masonry.ejs
index 9c24be83..937d5218 100644
--- a/layout/_widgets/masonry.ejs
+++ b/layout/_widgets/masonry.ejs
@@ -1,10 +1,10 @@
-<%
-// Define an array of images to display in the masonry layout
-const images = theme.masonry;
+<% 
+// Load the appropriate album based on the page's front-matter
+const images = site.data.masonry[page.masonry] || [];
 %>
 
 <h1 class="page-title-header"><%= page.title %></h1>
-  
+
 <div class="loading-placeholder">
     <div class="flex-grid generic-card">
         <div class="card loading"></div>
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index d0d0e3e7..233eee81 100755
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -34,6 +34,7 @@
     word-break normal
 
   .home-article-list
+    margin 0 ($spacing-unit * 0.5) 0 0
     .home-article-item
       position relative
       redefine-container(
diff --git "a/\350\207\252\345\267\261\347\232\204\344\270\200\344\272\233\346\224\271\351\200\240.md" "b/\350\207\252\345\267\261\347\232\204\344\270\200\344\272\233\346\224\271\351\200\240.md"
new file mode 100644
index 00000000..f169e591
--- /dev/null
+++ "b/\350\207\252\345\267\261\347\232\204\344\270\200\344\272\233\346\224\271\351\200\240.md"
@@ -0,0 +1,308 @@
+# 有关redefine，自己的一些改造
+
+
+
+## 如何拥有多个相册
+
+替换`masonry.ejs`
+
+```ejs
+<% 
+// Load the appropriate album based on the page's front-matter
+const images = site.data.masonry[page.masonry] || [];
+%>
+
+<h1 class="page-title-header"><%= page.title %></h1>
+
+<div class="loading-placeholder">
+    <div class="flex-grid generic-card">
+        <div class="card loading"></div>
+        <div class="card loading"></div>
+        <div class="card loading"></div>
+    </div>
+</div>
+
+<div id="masonry-container">
+    <% images.forEach(function(image) { %>
+      <div class="masonry-item">
+        <div class="image-container">
+            <img src="<%- image.image %>" alt="<%- image.title %>">
+            <div class="image-title"><%- image.title %></div>
+            <div class="image-description"><%- image.description %></div>
+        </div>
+      </div>
+    <% }); %>
+</div>
+
+```
+
+修改_data中的`masonry.yml`格式
+
+```yml
+# @format
+相册1:
+- image: "URL"
+  # title: 
+  # description: 
+
+相册2:
+  - image: "URL"
+  # title: 
+  # description: 
+```
+
+同时`masonry`文件夹下
+
+```txt
+masonry
+	|-- 相册1
+	|   `-- index.md
+	`-- 相册2
+    	`-- index.md
+
+```
+
+`index.md`中添加标识
+
+```mark
+---
+title: 相册1
+type: masonry
+masonry: 相册1
+date: 2024-09-01 00:00:00
+---
+```
+
+`_config.redefine.yml`中引用
+
+```yml
+navbar:
+  //省略。。。。。。。。。
+  # Navbar links
+  links:
+    归档:
+      path: /archives
+      icon: fa-regular fa-archive # can be empty
+    相册: #取名随意
+      icon: fa-solid fa-image #图标
+      path: /masonry/相册1
+```
+
+## 如何在下拉菜单中添加icon
+
+在`layout\_partials\navbar.ejs`中
+
+替换内容为
+
+```ejs
+<header class="navbar-container px-6 md:px-12">
+
+    <div class="navbar-content <%- (theme.home_banner.enable === true && is_home() && !page.prev) ? 'has-home-banner' : '' %>">
+        <div class="left">
+            <% if (theme.defaults.hasOwnProperty('logo') && theme.defaults.logo) { %>
+                <a class="logo-image" href="<%= config.root %>">
+                    <%- image_tag(theme.defaults.logo) %>
+                </a>
+            <% } %>
+            <a class="logo-title" href="<%= config.root %>">
+                <%- is_home() ? '<h1>' : '' %>
+                <%= theme.info.title || config.title || 'Redefine Theme' %>
+                <%- is_home() ? '</h1>' : '' %>
+            </a>
+        </div>
+
+        <div class="right">
+            <!-- PC -->
+            <div class="desktop">
+                <ul class="navbar-list">
+                    <% for (let i in theme.navbar.links) { %>
+                        <% if (theme.navbar.links[i].path === 'none') {
+                        } else { %>
+                            <%
+                                let link = theme.navbar.links[i];
+                                let hasSubmenus = link.submenus;
+                                let isActive = isInHomePaging(page.path, link.path) || is_current(link.path);
+                                let linkHref = hasSubmenus ? '#' : url_for(link.path);
+                                let onClickAction = hasSubmenus ? 'onClick="return false;"' : '';
+                                let iconClass = link.icon ? `<i class="${link.icon} fa-fw"></i>` : '';
+                                let linkText = __(i.toLowerCase()).toUpperCase();
+                                let dropdownIcon = hasSubmenus ? '<i class="fa-solid fa-chevron-down fa-fw"></i>' : '';
+                            %>
+
+                            <li class="navbar-item">
+                                <!-- Menu -->
+                                <a class="<%= hasSubmenus ? 'has-dropdown' : (isActive ? 'active' : '') %>"
+                                   href="<%= linkHref %>"
+                                        <%= onClickAction %>>
+                                    <%- iconClass %>
+                                    <%= linkText %>
+                                    <%- dropdownIcon %>
+                                </a>
+
+                                <!-- Submenu -->
+                                <% if (hasSubmenus) { %>
+                                    <ul class="sub-menu">
+                                        <% for (var submenu in link.submenus) { %>
+                                            <li class="flex items-center">
+                                                <a href="<%- url_for(link.submenus[submenu].url) %>" class="flex items-center w-full" style="padding: 3px 5px;">
+                                                    <i class="<%= link.submenus[submenu].icon %> flex-shrink-0" style="flex-basis: 10%; text-align: center;"></i>
+                                                    <span style="flex-basis: 90%; padding-left: 5px;">
+                                                        <%= __(submenu.toLowerCase()).toUpperCase() %>
+                                                    </span>
+                                                </a>
+                                            </li>
+                                        <% } %>
+                                    </ul>
+                                <% } %>
+                            </li>
+                    <% } } %>
+                    <% if (theme.navbar.search.enable === true) { %>
+                        <li class="navbar-item search search-popup-trigger">
+                            <i class="fa-solid fa-magnifying-glass"></i>
+                        </li>
+                    <% } %>
+                </ul>
+            </div>
+            <!-- Mobile -->
+            <div class="mobile">
+                <% if (theme.navbar.search.enable === true) { %>
+                    <div class="icon-item search search-popup-trigger"><i class="fa-solid fa-magnifying-glass"></i>
+                    </div>
+                <% } %>
+                <div class="icon-item navbar-bar">
+                    <div class="navbar-bar-middle"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mobile sheet -->
+    <div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
+        <ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
+            <% for (let i in theme.navbar.links) { %>
+                <% if (theme.navbar.links[i].path !== 'none') { %>
+                    <%
+                        // Function to check if link is active
+                        function isActiveLink(pagePath, linkPath) {
+                            return isInHomePaging(pagePath, linkPath) || is_current(linkPath);
+                        }
+
+                        // Variables for cleaner code
+                        let linkData = theme.navbar.links[i];
+                        let hasSubmenus = linkData.submenus;
+                        let isActive = isActiveLink(page.path, linkData.path);
+                        let iconClass = linkData.icon;
+                        let linkText = __(i.toLowerCase()).toUpperCase();
+                        let linkPath = hasSubmenus ? '#' : url_for(linkData.path);
+                        let drawerNavbarItemClass = hasSubmenus ? 'drawer-navbar-item-sub' : 'drawer-navbar-item';
+                    %>
+
+                    <li class="<%= drawerNavbarItemClass %> text-base my-1.5 flex flex-col w-full">
+                        <% if (hasSubmenus) {%>
+                        <div class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary cursor-pointer text-2xl font-semibold group border-b border-border-color hover:border-primary w-full <%= isActive ? 'active' : '' %>"
+                             navbar-data-toggle="submenu-<%= i %>"
+                        >
+                            <span>
+                                <%= linkText %>
+                            </span>
+                            <% if (iconClass) { %>
+                                <i class="fa-solid fa-chevron-right fa-sm fa-fw transition-all"></i>
+                            <% } %>
+                        </div>
+                        <% } else { %>
+                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full <%= isActive ? 'active' : '' %>"
+                           href="<%= linkPath %>"
+                        >
+                            <span>
+                                <%= linkText %>
+                            </span>
+                            <% if (iconClass) { %>
+                                <i class="<%= iconClass %> fa-sm fa-fw"></i>
+                            <% } %>
+                        </a>
+                        <% } %>
+
+                        <% if (hasSubmenus) { %>
+                            <div class="flex-col items-start px-2 py-2 hidden" data-target="submenu-<%= i %>">
+                                <% for (var submenu in linkData.submenus) { %>
+                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl" style="margin: 7.2px 0;">
+                                        <a class="text-third-text-color text-xl flex items-center w-full" href="<%- url_for(linkData.submenus[submenu].url) %>">
+                                            <div class="icon-container flex justify-center items-center" style="flex: 2; max-width: 15%;">
+                                                <i class="<%= linkData.submenus[submenu].icon %> text-xl"></i>
+                                            </div>
+                                            <div class="text-container" style="flex: 8; max-width: 85%;">
+                                                <%= __(submenu.toLowerCase()).toUpperCase() %>
+                                            </div>
+                                        </a>
+                                    </div>
+                                <% } %>
+                                
+                            </div>
+                        <% } %>
+                    </li>
+            <% } } %>
+
+            <%# Add sidebar links %>
+            <% if (theme.home.sidebar.links !== null && theme.home.sidebar.show_on_mobile !== false) {%>
+                <% for (let i in theme.home.sidebar.links) { %>
+                    <% if (theme.navbar.links && theme.navbar.links.hasOwnProperty(i)) {
+                        continue;
+                    } %>
+                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
+                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active"
+                           href="<%= url_for(theme.home.sidebar.links[i].path) %>"
+                        >
+                            <span><%= __(i) %></span>
+                            <i class="<%= theme.home.sidebar.links[i].icon %> fa-sm fa-fw"></i>
+                        </a>
+                    </li>
+                <% } %>
+            <% } %>
+        </ul>
+
+        <%- partial("sidebar-components/statistics") %>
+    </div>
+
+    <div class="window-mask"></div>
+
+</header>
+
+```
+
+可能有点长。。。，我懒得切片了
+
+修改`_config.redefine.yml`中添加链接的格式
+
+```yml
+navbar:
+	//省略。。。。。。。。。
+  	# Navbar links
+    关于:
+      icon: fa-solid fa-user
+      submenus:
+        自述: 
+          url: /about
+          icon: fa-solid fa-pen-nib
+        友链: 
+          url: /links/
+          icon: fa-solid fa-user-group
+```
+
+## 一点点视觉优化
+
+在`\source\css\layout\home-content.styl`中，35行左右
+
+```styl
+  .home-article-list
+    margin 0 ($spacing-unit * 0.5) 0 0 //添加这行
+    .home-article-item
+      position relative
+      redefine-container(
+        true,
+        1.015,
+        1.015,
+        0px,
+        38px
+      )
+```
+