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

添加二级菜单图标，实现相册分类，优化文章页面， #436

Closed
wants to merge 6 commits into from
Closed

添加二级菜单图标，实现相册分类，优化文章页面， #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0187cf4
Merge pull request #426 from EvanNotFound/dev
EvanNotFound Aug 31, 2024
e189999
Merge pull request #430 from EvanNotFound/dev
EvanNotFound Sep 4, 2024
7441249
优化相册和二级菜单图标
LRay-iu Sep 5, 2024
aa84902
检查masonry是否为标准格式
LRay-iu Sep 6, 2024
2402cb4
添加内联样式
LRay-iu Sep 7, 2024
45353aa
Update masonry.ejs
LRay-iu Sep 7, 2024
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
28 changes: 18 additions & 10 deletions layout/_partials/navbar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,14 @@
<% 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 submenu-padding">
<i class="<%= link.submenus[submenu].icon %> flex-shrink-0 submenu-icon"></i>
<span class="submenu-text">
<%= __(submenu.toLowerCase()).toUpperCase() %>
</span>
</a>
</li>
</li>
<% } %>
</ul>
<% } %>
Expand Down Expand Up @@ -125,11 +128,17 @@
<% 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>
<% } %>
<div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl drawer-item-margin">
<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 icon-flex">
<i class="<%= linkData.submenus[submenu].icon %> text-xl"></i>
</div>
<div class="text-container text-flex">
<%= __(submenu.toLowerCase()).toUpperCase() %>
</div>
</a>
</div>
<% } %>
</div>
<% } %>
</li>
Expand Down Expand Up @@ -159,4 +168,3 @@
<div class="window-mask"></div>

</header>

12 changes: 7 additions & 5 deletions layout/_widgets/masonry.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<%
// 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
if (!site.data.masonry || typeof site.data.masonry !== 'object' || typeof page.masonry !== 'string') {
throw new Error('Invalid masonry data structure or page masonry key');
}
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>
Expand All @@ -24,4 +27,3 @@ const images = theme.masonry;
</div>
<% }); %>
</div>

25 changes: 25 additions & 0 deletions source/css/layout/_partials/navbar.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,20 @@ $logo-image-box-width = 34px
max-height 0px
overflow hidden
transition-t('all', '0', '0.2', 'linear')
// 为 a 元素添加 padding
.submenu-padding
padding 3px 5px
.submenu-icon
flex-basis 10%
text-align center
// 设置图标的 flex-basis 和居中对齐
.submenu-icon
flex-basis 10%
text-align center
// 设置文本的 flex-basis 和左侧内边距
.submenu-text
flex-basis 90%
padding-left 5px

li a
white-space nowrap
Expand Down Expand Up @@ -277,6 +291,17 @@ $logo-image-box-width = 34px

.navbar-drawer-show &
transform translateX(0)
// 为 drawer-navbar-item 添加外边距
.drawer-item-margin
margin 7.2px 0
// 设置 icon-container 的 flex 和 max-width
.icon-flex
flex 2
max-width 15%
// 设置 text-container 的 flex 和 max-width
.text-flex
flex 8
max-width 85%

.window-mask
position absolute
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
205 changes: 205 additions & 0 deletions 自己的一些改造.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
# 有关redefine，自己的一些改造



## 如何拥有多个相册

替换`masonry.ejs`

```ejs
<%
// Load the appropriate album based on the page's front-matter
const images = site.data.masonry[page.masonry] || [];
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');
}
%>

<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
<!-- 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 submenu-padding">
<i class="<%= link.submenus[submenu].icon %> flex-shrink-0 submenu-icon"></i>
<span class="submenu-text">
<%= __(submenu.toLowerCase()).toUpperCase() %>
</span>
</a>
</li>
<% } %>
</ul>
<% } %>

<!-- Mobile sheet -->
<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 drawer-item-margin">
<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 icon-flex">
<i class="<%= linkData.submenus[submenu].icon %> text-xl"></i>
</div>
<div class="text-container text-flex">
<%= __(submenu.toLowerCase()).toUpperCase() %>
</div>
</a>
</div>
<% } %>
</div>
```

添加内联样式`navbar.styl`

```styl
// 为 a 元素添加 padding
.submenu-padding
padding 3px 5px

// 设置图标的 flex-basis 和居中对齐
.submenu-icon
flex-basis 10%
text-align center

// 设置文本的 flex-basis 和左侧内边距
.submenu-text
flex-basis 90%
padding-left 5px

// 为 drawer-navbar-item 添加外边距
.drawer-item-margin
margin 7.2px 0

// 设置 icon-container 的 flex 和 max-width
.icon-flex
flex 2
max-width 15%

// 设置 text-container 的 flex 和 max-width
.text-flex
flex 8
max-width 85%
```

可能有点长。。。，我懒得切片了

修改`_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
)
```

Loading