chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: 修改社交链接样式布局

Browse Source
This commit is contained in:
rbetree
2025-12-22 22:28:28 +08:00
parent e2fae7f362
commit 03b743e337
4 changed files with 121 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
assets/style.css
View File

@@ -107,6 +107,19 @@ html.preload * {
transition: none !important;
}
/* 可访问性：视觉隐藏但保留屏幕阅读器可读 */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
@@ -292,10 +305,11 @@ body.loaded .layout {
transform: translateZ(0);
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto 1fr auto auto;
grid-template-areas:
"header"
"content"
"social"
"footer";
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color) transparent;
@@ -330,12 +344,14 @@ body.loaded .layout {
gap: 2px;
}
/* 减小折叠状态下的版权区域高度 */
.sidebar.collapsed .copyright {
padding: 0.4rem;
/* 折叠状态下隐藏底部版权区域（不占位） */
.sidebar.collapsed .sidebar-footer {
padding: 0;
height: 0;
min-height: 0;
border-top: none;
margin: 0;
overflow: hidden;
border: none;
}
.sidebar.collapsed .sidebar-content::-webkit-scrollbar {
@@ -601,10 +617,10 @@ body.loaded .layout {
text-align: center;
}
/* 折叠状态下的版权区域 */
.sidebar.collapsed .copyright {
opacity: 0;
visibility: hidden; /* 确保完全隐藏 */
/* 折叠状态下：底部区域不可见且不可交互 */
.sidebar.collapsed .sidebar-footer {
visibility: hidden;
pointer-events: none;
}
/* 主内容区域 - 修复滚动条问题 */
@@ -1747,14 +1763,26 @@ body .content.expanded {
width: var(--sidebar-width);
}
.sidebar.collapsed .logo h1,
.sidebar.collapsed .nav-item .nav-text,
.sidebar.collapsed .nav-item .external-icon,
.sidebar.collapsed .copyright {
opacity: 1;
transform: none;
width: auto;
}
.sidebar.collapsed .logo h1,
.sidebar.collapsed .nav-item .nav-text,
.sidebar.collapsed .nav-item .external-icon {
opacity: 1;
transform: none;
width: auto;
}
.sidebar.collapsed .sidebar-footer {
height: auto;
padding: 1rem 1.2rem;
visibility: visible;
pointer-events: auto;
border-top: 1px solid var(--border-color);
}
.sidebar.collapsed .sidebar-social {
padding: 0.2rem 1.2rem 0.8rem;
flex-direction: row;
}
.sidebar.collapsed .nav-item {
padding: 0.6rem 0.8rem;
@@ -2144,8 +2172,48 @@ body .content.expanded {
transition: gap 0.3s ease;
}
/* 侧边栏底部区域 - 版权信息 */
.sidebar .copyright {
/* 侧边栏底部：社交图标（位于 sidebar-footer 上方） */
.sidebar-social {
grid-area: social;
padding: 0.2rem 1.2rem 0.8rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.9rem;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--radius-full);
color: var(--nav-item-color);
text-decoration: none;
transition: color var(--transition-fast), transform var(--transition-fast);
}
.social-icon:hover {
color: var(--accent-color);
transform: translateY(-1px);
}
.social-icon:active {
transform: translateY(0);
}
.social-icon:focus-visible {
outline: 2px solid rgba(74, 158, 255, 0.35);
outline-offset: 2px;
}
.social-icon i {
width: auto;
font-size: 1.2rem;
}
/* 侧边栏底部：版权信息 */
.sidebar-footer {
grid-area: footer;
padding: 1rem 1.2rem;
text-align: center;
@@ -2153,10 +2221,20 @@ body .content.expanded {
font-size: 0.85rem;
border-top: 1px solid var(--border-color);
background-color: var(--sidebar-bg); /* 使用变量 */
margin-top: 0;
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.sidebar-footer .copyright {
margin: 0;
}
.sidebar.collapsed .sidebar-social {
padding: 0.2rem 0.5rem 0.8rem;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.copyright a {
color: var(--accent-color);
text-decoration: none;

11
src/generator.js
View File

@@ -657,13 +657,10 @@ function generateSocialLinks(social) {
// 回退到原始生成方法
return social.map(link => `
<a href="${escapeHtml(link.url)}" class="nav-item" target="_blank">
<div class="icon-container">
<i class="${escapeHtml(link.icon || 'fas fa-link')}"></i>
</div>
<span class="nav-text">${escapeHtml(link.name || '社交链接')}</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>`).join('\n');
<a href="${escapeHtml(link.url)}" class="social-icon" target="_blank" rel="noopener" title="${escapeHtml(link.name || '社交链接')}" aria-label="${escapeHtml(link.name || '社交链接')}" data-type="social-link" data-name="${escapeHtml(link.name || '社交链接')}" data-url="${escapeHtml(link.url)}" data-icon="${escapeHtml(link.icon || 'fas fa-link')}">
<i class="${escapeHtml(link.icon || 'fas fa-link')}" aria-hidden="true"></i>
<span class="nav-text visually-hidden" data-editable="social-link-name">${escapeHtml(link.name || '社交链接')}</span>
</a>`).join('\n');
}
// 生成页面内容（包括首页和其他页面）

11
templates/components/social-links.hbs
View File

@@ -1,13 +1,8 @@
{{#if this}}
<div data-container="social-links">
{{#each this}}
<a href="{{url}}" class="nav-item" target="_blank" rel="noopener" data-type="social-link" data-name="{{name}}" data-url="{{url}}" data-icon="{{icon}}">
<div class="icon-container">
<i class="{{icon}}"></i>
</div>
<span class="nav-text" data-editable="social-link-name">{{name}}</span>
<i class="fas fa-external-link-alt external-icon"></i>
<a href="{{url}}" class="social-icon" target="_blank" rel="noopener" title="{{name}}" aria-label="{{name}}" data-type="social-link" data-name="{{name}}" data-url="{{url}}" data-icon="{{icon}}">
<i class="{{icon}}" aria-hidden="true"></i>
<span class="nav-text visually-hidden" data-editable="social-link-name">{{name}}</span>
</a>
{{/each}}
</div>
{{/if}}

31
templates/layouts/default.hbs
View File

@@ -80,24 +80,23 @@
{{{navigation}}}
{{/if}}
</div>
<div class="nav-section">
<div class="section-title">
<i class="fas fa-link"></i>
</div>
{{#if social}}
{{> social-links social}}
{{else}}
{{{socialLinks}}}
{{/if}}
</div>
</div>
<div class="copyright">
<p>© {{currentYear}} <a href="https://github.com/rbetree/menav" target="_blank" rel="noopener">MeNav</a></p>
<p>by <a href="https://github.com/rbetree" target="_blank" rel="noopener">rbetree</a></p>
</div>
</nav>
<div class="sidebar-social" data-container="social-links">
{{#if social}}
{{> social-links social}}
{{else}}
{{{socialLinks}}}
{{/if}}
</div>
<div class="sidebar-footer">
<div class="copyright">
<p>© {{currentYear}} <a href="https://github.com/rbetree/menav" target="_blank" rel="noopener">MeNav</a></p>
<p>by <a href="https://github.com/rbetree" target="_blank" rel="noopener">rbetree</a></p>
</div>
</div>
</nav>
<!-- 右侧内容区 -->
<main class="content">