Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

优化相册和二级菜单图标 #21 #434

Closed
wants to merge 1 commit into from
Closed

优化相册和二级菜单图标 #21 #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions layout/_partials/navbar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<% } %>
Expand Down Expand Up @@ -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>
<% } %>

Comment on lines +131 to +142
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mobile Submenu Styling and Structure

The changes in lines 131-142 introduce a similar flexbox layout for the mobile version of the submenu items. This consistency between desktop and mobile views is crucial for a unified user experience. The use of flex and max-width properties ensures that the icons and text are aligned and spaced appropriately, even on smaller screens.

The class names and inline styles used here are consistent with the desktop version, which is good for maintainability. However, the inline styling could be moved to a CSS class to reduce redundancy and enhance the ease of future modifications.

Consider extracting the inline styles into a CSS class to maintain cleaner HTML and easier style management across the template.

</div>
<% } %>
</li>
Expand Down Expand Up @@ -159,4 +169,3 @@
<div class="window-mask"></div>

</header>

8 changes: 4 additions & 4 deletions layout/_widgets/masonry.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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] || [];
Comment on lines +2 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dynamic Image Loading: Review and Suggestions

The change to dynamically load images based on the page's front matter is a significant improvement for flexibility. However, consider adding error handling and data validation to ensure that page.masonry is a valid key and that site.data.masonry is properly structured to avoid runtime errors.

+ if (!site.data.masonry || typeof site.data.masonry !== 'object') {
+   throw new Error('Invalid masonry data structure');
+ }
+ if (typeof page.masonry !== 'string') {
+   throw new Error('Page masonry key must be a string');
+ }

Committable suggestion was skipped due to low confidence.

%>

<h1 class="page-title-header"><%= page.title %></h1>

<div class="loading-placeholder">
<div class="flex-grid generic-card">
<div class="card loading"></div>
Expand Down
1 change: 1 addition & 0 deletions source/css/layout/home-content.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
308 changes: 308 additions & 0 deletions 自己的一些改造.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

```
Comment on lines +57 to +63
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Directory Structure for Masonry Layout

The directory structure for the masonry layout is clearly outlined. However, the use of hard tabs in this section violates Markdownlint rule MD010. Consider replacing hard tabs with spaces for consistency and to adhere to Markdown best practices.

Replace hard tabs with spaces to adhere to Markdownlint recommendations:

-	|-- 相册1
-	|   `-- index.md
-	`-- 相册2
-    	`-- index.md
+    |-- 相册1
+    |   `-- index.md
+    `-- 相册2
+        `-- index.md
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
masonry
|-- 相册1
| `-- index.md
`-- 相册2
`-- index.md
```
masonry
|-- 相册1
| `-- index.md
`-- 相册2
`-- index.md
```
Tools
Markdownlint

58-58: Column: 1
Hard tabs

(MD010, no-hard-tabs)

59-59: Column: 1
Hard tabs

(MD010, no-hard-tabs)

60-60: Column: 1
Hard tabs

(MD010, no-hard-tabs)

61-61: Column: 5
Hard tabs

(MD010, no-hard-tabs)


`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
```
Comment on lines +78 to +89
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navbar Configuration in YAML

The configuration for the navbar in _config.redefine.yml is well-documented and structured. The use of icons and paths for navigation items enhances user experience. However, the use of hard tabs here also violates Markdownlint rule MD010. Consider replacing hard tabs with spaces.

Replace hard tabs with spaces to adhere to Markdownlint recommendations:

-  //省略。。。。。。。。。
-  # Navbar links
-  links:
-    归档:
-      path: /archives
-      icon: fa-regular fa-archive # can be empty
-    相册: #取名随意
-      icon: fa-solid fa-image #图标
-      path: /masonry/相册1
+  //省略。。。。。。。。。
+  # Navbar links
+  links:
+    归档:
+      path: /archives
+      icon: fa-regular fa-archive # can be empty
+    相册: #取名随意
+      icon: fa-solid fa-image #图标
+      path: /masonry/相册1

Committable suggestion was skipped due to low confidence.


## 如何在下拉菜单中添加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
```
Comment on lines +276 to +289
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Navbar Links Configuration

The additional configuration for navbar links in _config.redefine.yml is well-structured. The inclusion of submenus enhances navigation. As with previous YAML configurations, replace hard tabs with spaces to comply with Markdownlint.

Replace hard tabs with spaces to adhere to Markdownlint recommendations:

-	//省略。。。。。。。。。
-  	# Navbar links
-    关于:
-      icon: fa-solid fa-user
-      submenus:
-        自述: 
-          url: /about
-          icon: fa-solid fa-pen-nib
-        友链: 
-          url: /links/
-          icon: fa-solid fa-user-group
+  //省略。。。。。。。。。
+  # Navbar links
+  关于:
+    icon: fa-solid fa-user
+    submenus:
+      自述: 
+        url: /about
+        icon: fa-solid fa-pen-nib
+      友链: 
+        url: /links/
+        icon: fa-solid fa-user-group
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
```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
```
```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
```
Tools
Markdownlint

278-278: Column: 1
Hard tabs

(MD010, no-hard-tabs)

279-279: Column: 3
Hard tabs

(MD010, no-hard-tabs)


## 一点点视觉优化

在`\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
)
```