Skip to content

Commit

Permalink
Merge pull request #50 from devlive-community/dev-archive
Browse files Browse the repository at this point in the history 
Dev archive
  • Loading branch information
@qianmoQ
qianmoQ authored Feb 11, 2025
2 parents 5f94f46 + 2c282ff commit e7395c8
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 66 deletions.
7 changes: 3 additions & 4 deletions templates/components/list-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,10 @@ module.exports = function template(item) {
}
else {
// 处理普通列表项
// 使用Grid布局来确保内容正确对齐
listItemContent = `
<li class="mb-2 grid grid-cols-[1em_1fr] gap-2 text-gray-700 leading-relaxed hover:text-gray-900">
<span class="text-gray-600 text-xl select-none">•</span>
<span>${item.text}</span>
<li class="mb-2 flex gap-2 text-gray-700 leading-relaxed hover:text-gray-900">
<span class="text-gray-600 text-xl select-none w-4">•</span>
<span class="flex-1 w-[calc(100%-1rem)]">${item.text}</span>
</li>`;
}

Expand Down
33 changes: 20 additions & 13 deletions templates/includes/header.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
<%
function isPathInNavItem(currentPath, navItem) {
if (navItem.href && currentPath.startsWith(navItem.href)) {
// 如果该项是选中状态，返回true
if (navItem.href === currentPath) {
return true;
}
if (!navItem.items) {
return false;
// 检查当前项是否包含在路径中（处理父级菜单）
if (navItem.items && navItem.items.length > 0) {
// 检查所有子项
return navItem.items.some(subItem => {
// 直接匹配
if (subItem.href === currentPath) {
return true;
}
// 递归检查子项的子项
if (subItem.items) {
return isPathInNavItem(currentPath, subItem);
}
return false;
});
}
return navItem.items.some(item => {
if (item.href) {
return currentPath.startsWith(item.href);
}
if (item.items) {
return isPathInNavItem(currentPath, item);
}
return false;
});
return false;
}
// 检查是否启用深色模式
Expand All @@ -31,7 +38,7 @@ const darkClasses = (classes) => darkModeEnabled ? classes : '';
<div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
<div class="flex items-center h-16">
<!-- 左侧Logo和导航 -->
<div class="flex items-center flex-1">
<div class="flex items-center flex-1 min-w-0">
<!-- Logo和标题 -->
<%- include('./header-logo', { darkClasses }) %>
Expand Down
32 changes: 20 additions & 12 deletions templates/includes/sidebar.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,15 @@ sidebar = siteData.nav.find(item => {
});
%>

<% function isActive(href) { return href === pageData.noLocalePath } %>
<% function isActive(item) {
// 检查当前项是否匹配
const isSelfActive = item.href === pageData.noLocalePath;
// 检查子项是否有匹配
const hasActiveChild = item.items && item.items.some(child => isPathInItem(child, pageData.noLocalePath));
return isSelfActive || hasActiveChild;
} %>

<% function renderNavItems(items, level = 0) { %>
<ul class="<%= level === 0 ? 'space-y-1.5' : 'mt-1 mb-2 ml-2 sm:ml-3 md:ml-4 pl-2 sm:pl-3 md:pl-4 border-l border-gray-200 dark:border-gray-700 space-y-1.5' %>">
Expand All @@ -43,22 +51,22 @@ sidebar = siteData.nav.find(item => {
class="group block">
<% } %>
<div class="relative flex items-center px-2 sm:px-3 md:px-4 py-1.5 sm:py-2
<%= isActive(item.href)
? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
: 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
%>
<%= isActive(item)
? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
: 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
%>
rounded-md transition-all duration-200 ease-in-out">
<% if (locals.siteData?.feature?.lucide?.enable && item.icon) { %>
<span class="inline-flex mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 transition-colors duration-200">
<!-- 骨架屏 -->
<div class="w-3 h-3 sm:w-4 sm:h-4 animate-pulse bg-gray-200 dark:bg-gray-700 rounded"></div>
<!-- 图标 -->
<!-- 图标 -->
<i data-lucide="<%= item.icon %>"
style="display: none;"
class="w-3 h-3 sm:w-4 sm:h-4
<%= isActive(item.href)
<%= isActive(item)
? 'text-blue-600 dark:text-blue-400'
: 'group-hover:text-gray-900 dark:group-hover:text-gray-200'
%>">
Expand All @@ -74,7 +82,7 @@ sidebar = siteData.nav.find(item => {
<% if (item.items && item.items.length > 0) { %>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2 text-gray-400 transform transition-transform duration-200 ease-in-out
<%= isActive(item.href) || item.items.some(child => isPathInItem(child, pageData.noLocalePath))
<%= isActive(item)
? 'rotate-90 text-blue-600 dark:text-blue-400'
: 'group-hover:text-gray-600 dark:group-hover:text-gray-300' %>"
viewBox="0 0 20 20"
Expand All @@ -88,10 +96,10 @@ sidebar = siteData.nav.find(item => {
<% if (item.items && item.items.length > 0) { %>
</button>
<div class="overflow-hidden transition-all duration-200 ease-in-out
<%= isActive(item.href) || item.items.some(child => isPathInItem(child, pageData.noLocalePath))
? 'h-auto opacity-100'
: 'max-h-0 opacity-0' %>">
<%- renderNavItems(item.items, level + 1) %>
<%= isActive(item)
? 'h-auto opacity-100'
: 'max-h-0 opacity-0' %>">
<%- renderNavItems(item.items, level + 1) %>
</div>
<% } else { %>
</a>
Expand Down
78 changes: 41 additions & 37 deletions templates/includes/toc.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
<!-- 桌面端目录 -->
<div class="hidden lg:block flex-none w-64 pl-8 mr-8">
<div class="hidden lg:block flex-none md:w-56 lg:w-64 pl-8 mr-8">
<div class="sticky" style="top: calc(var(--header-height) + 1rem)">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">目录</div>
<nav class="overflow-y-auto pr-4 -mr-4 space-y-1 pageforge-scrollbar"
style="max-height: calc(100vh - var(--header-height) - 8rem);"
id="table-of-contents">
<% function renderTocItem(items) { %>
<% items?.forEach(item => { %>
<div class="pl-<%= (item.level - 1) * 4 %>">
<a href="#<%= item.slug %>"
class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link"
data-slug="<%= item.slug %>">
<%- item.text %>
</a>
</div>
<% if (item.children && item.children.length > 0) { %>
<% renderTocItem(item.children) %>
<% } %>
<% }) %>
<% } %>
<% renderTocItem(pageData.toc) %>
</nav>
<div class="overflow-y-auto overflow-x-auto pr-4 pageforge-scrollbar"
style="max-height: calc(100vh - var(--header-height) - 8rem);">
<nav class="space-y-1 inline-block min-w-full"
id="table-of-contents">
<% function renderTocItem(items) { %>
<% items?.forEach(item => { %>
<div class="pl-<%= (item.level - 1) * 4 %> inline-block min-w-full">
<a href="#<%= item.slug %>"
class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link whitespace-nowrap"
data-slug="<%= item.slug %>">
<%- item.text %>
</a>
</div>
<% if (item.children && item.children.length > 0) { %>
<% renderTocItem(item.children) %>
<% } %>
<% }) %>
<% } %>
<% renderTocItem(pageData.toc) %>
</nav>
</div>
</div>
</div>
Expand All @@ -47,24 +49,26 @@
</svg>
</button>
</div>
<nav class="overflow-y-auto space-y-1"
<div class="overflow-y-auto overflow-x-auto"
style="max-height: calc(60vh - var(--header-height));">
<% function renderTocItemMobile(items) { %>
<% items?.forEach(item => { %>
<div class="pl-<%= (item.level - 1) * 4 %>">
<a href="#<%= item.slug %>"
class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link"
data-slug="<%= item.slug %>">
<%- item.text %>
</a>
</div>
<% if (item.children && item.children.length > 0) { %>
<% renderTocItemMobile(item.children) %>
<% } %>
<% }) %>
<% } %>
<% renderTocItemMobile(locals.pageData.toc) %>
</nav>
<nav class="space-y-1 inline-block min-w-full">
<% function renderTocItemMobile(items) { %>
<% items?.forEach(item => { %>
<div class="pl-<%= (item.level - 1) * 4 %> inline-block min-w-full">
<a href="#<%= item.slug %>"
class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link whitespace-nowrap"
data-slug="<%= item.slug %>">
<%- item.text %>
</a>
</div>
<% if (item.children && item.children.length > 0) { %>
<% renderTocItemMobile(item.children) %>
<% } %>
<% }) %>
<% } %>
<% renderTocItemMobile(locals.pageData.toc) %>
</nav>
</div>
</div>
<!-- 控制脚本 -->
Expand Down

0 comments on commit e7395c8

Please sign in to comment.