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

feat: 页面模板差异化改进 + 配置优化 + 兼容清理 (#29)

Browse Source 
- 首页判定：navigation 第一项
- 模板：page/projects/articles/bookmarks/search-results
- bookmarks：update: YYYY-MM-DD | from: git|mtime
- articles：RSS 聚合只读条目 + 分类聚合 + 影子写回结构
- projects：repo 卡片 + 可选热力图 + 自动抓取元信息
- 工作流：构建前 sync + schedule 定时刷新
- 移除兼容：config.yml/config.yaml、navigation.yml、home 特例
- 迁移说明：config/update-instructions.md
This commit is contained in:
rbetree
2025-12-28 00:22:54 +08:00
committed by GitHub
parent 1475a8a0d3
commit 387cd2492e
35 changed files with 2927 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
assets/style.css
View File

@@ -19,6 +19,7 @@
--scrollbar-hover-color: rgba(255, 255, 255, 0.25);
--accent-color: #7694B9;
--accent-hover: #6684A9;
--accent-rgb: 118, 148, 185;
--nav-item-color: #a1a2a5;
--success-color: #4caf50;
--error-color: #f44336;
@@ -38,6 +39,9 @@
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* 页面内容最大宽度（用于各页边界一致性） */
--page-max-width: 1300px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
@@ -76,6 +80,7 @@ body.light-theme {
--scrollbar-hover-color: rgba(0, 0, 0, 0.2);
--accent-color: #7694B9;
--accent-hover: #6684A9;
--accent-rgb: 118, 148, 185;
--nav-item-color: #666666;
--success-color: #4caf50;
--error-color: #f44336;
@@ -921,15 +926,38 @@ body .content.expanded {
display: flex;
}
/* 页面模板容器（friends/articles/projects 等）：
* .page 是 flex 且 align-items:center，如果子元素未显式设置宽度，会触发 shrink-to-fit，
* 导致分类/网格布局变窄（只剩单列）。 */
.page-template {
width: 100%;
max-width: var(--page-max-width);
margin: 0 auto;
}
/* 欢迎区域 */
.welcome-section {
width: 100%;
max-width: 1300px;
max-width: var(--page-max-width);
margin: 0 auto 2.2rem auto;
padding: 0 6rem 0 2rem;
padding: 0 var(--spacing-lg);
text-align: left;
position: relative;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.welcome-section-main {
flex: 1;
min-width: 220px;
}
.welcome-section-side {
flex: 0 0 auto;
}
.welcome-section h2 {
@@ -978,6 +1006,26 @@ body .content.expanded {
transition: color 0.3s ease;
}
/* bookmarks：标题后追加“更新时间”小字（灰色、只读展示） */
.welcome-title-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.welcome-title-row h2 {
margin: 0;
}
.page-updated-inline {
color: var(--text-muted);
font-size: 0.9rem;
opacity: 0.85;
white-space: nowrap;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 2px rgba(118, 148, 185, 0.2))
@@ -994,9 +1042,9 @@ body .content.expanded {
background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
margin: 0 var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
width: calc(100% - 3rem);
max-width: 1300px;
margin: 0 auto var(--spacing-lg) auto;
width: 100%;
max-width: var(--page-max-width);
position: relative;
z-index: 1;
opacity: 1;
@@ -1390,6 +1438,130 @@ body .content.expanded {
width: 100%;
}
/* projects：GitHub 热力图（标题区右侧，可选） */
.page-template-projects .heatmap-container {
flex-shrink: 0;
opacity: 0.85;
transition: opacity 0.3s ease;
}
.page-template-projects .heatmap-container:hover {
opacity: 1;
}
.page-template-projects .heatmap-img {
display: block;
max-width: 100%;
height: auto;
}
.page-template-projects .sites-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
/* projects：代码仓库风卡片 */
.site-card.site-card-repo {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 1.1rem 1.1rem 1rem;
gap: 0;
}
.site-card.site-card-repo:hover {
transform: translateY(-4px);
}
.site-card.site-card-repo .repo-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 12px;
min-width: 0;
}
.site-card.site-card-repo .repo-icon {
font-size: 1.15rem;
color: var(--nav-item-color);
opacity: 0.85;
transition: color 0.3s ease, opacity 0.3s ease;
flex: 0 0 auto;
}
.site-card.site-card-repo:hover .repo-icon {
color: var(--accent-color);
opacity: 1;
}
.site-card.site-card-repo .repo-title {
font-size: 1.05rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-card.site-card-repo .repo-desc {
font-size: 0.9rem;
color: var(--nav-item-color);
opacity: 0.85;
line-height: 1.5;
flex-grow: 1;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.site-card.site-card-repo .repo-stats {
display: flex;
align-items: center;
gap: 16px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.8rem;
color: var(--nav-item-color);
opacity: 0.85;
}
.site-card.site-card-repo .stat-item {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.site-card.site-card-repo .lang-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
@media (max-width: 600px) {
.welcome-section-with-side {
align-items: flex-start;
}
.welcome-section-with-side .welcome-section-side {
width: 100%;
}
.page-template-projects .heatmap-container {
width: 100%;
overflow: hidden;
}
.page-template-projects .heatmap-img {
/* 移动端优先保证“缩小后完整显示” */
width: 100%;
max-width: 100%;
}
}
/* 网站卡片样式 */
.site-card {
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
@@ -1413,6 +1585,107 @@ body .content.expanded {
overflow: hidden;
}
/* 网站卡片变体：projects 大卡片 */
.site-card.site-card-large {
padding: 1.1rem 1.2rem;
gap: 0.9rem;
}
.site-card.site-card-large .site-card-icon {
width: 3.1rem;
height: 3.1rem;
}
.site-card.site-card-large h3 {
font-size: 1.05rem;
font-weight: 600;
}
.site-card.site-card-large p {
font-size: 0.88rem;
}
/* Phase 2：articles 页面隐藏“扩展写回结构”，避免与文章条目渲染混淆 */
.menav-extension-shadow {
display: none;
}
/* articles：文章元信息（日期 + 来源） */
.site-card[data-type="article"] .site-card-meta {
margin: 0 0 8px 0;
font-size: 0.75rem;
color: var(--nav-item-color);
opacity: 0.9;
display: flex;
align-items: center;
gap: 0.4rem;
}
.site-card[data-type="article"] .site-card-meta-sep {
opacity: 0.8;
}
/* articles：文章卡片布局（首行：图标+标题；下方：时间/来源 + 简介 全宽对齐） */
.site-card[data-type="article"] {
display: block;
padding: 1rem 1.1rem;
}
.site-card[data-type="article"] .article-card-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.site-card[data-type="article"] .article-card-title {
min-width: 0;
}
.site-card[data-type="article"] .article-card-body {
margin-top: 0.55rem;
}
.site-card[data-type="article"] h3 {
margin: 0;
}
.site-card[data-type="article"] p {
margin: 0;
}
/* articles：桌面端网格固定 4 列（避免 auto-fill 在大屏上过多列导致阅读密度过高） */
.page-template-articles .sites-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.page-template-articles .sites-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
.page-template-articles .sites-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
/* articles：标题/描述允许两行显示（更适合多列宽卡片，也适用于搜索结果页） */
.site-card[data-type="article"] h3 {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.site-card[data-type="article"] p {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.site-card:hover {
transform: translateY(-3px);
background: var(--site-card-hover-bg);
@@ -1778,16 +2051,13 @@ body .content.expanded {
/* 响应式设计 */
@media (max-width: 1200px) {
.welcome-section {
padding: 0 4rem 0 1.5rem;
padding: 0 var(--spacing-lg);
margin-bottom: 2rem;
}
.category {
max-width: 1100px;
margin-bottom: 2.5rem;
margin-left: 1.5rem; /* 增加左边距 */
margin-right: 1.5rem; /* 增加右边距 */
width: calc(100% - 3rem); /* 适应新的左右边距 */
margin: 0 auto 2.5rem auto;
}
}
@@ -1933,15 +2203,15 @@ body .content.expanded {
/* 分类样式优化 */
.category {
margin: 0 var(--spacing-xs) var(--spacing-lg) var(--spacing-xs);
margin: 0 auto var(--spacing-lg) auto;
padding: var(--spacing-md);
width: calc(100% - var(--spacing-sm));
width: 100%;
}
.sites-grid {
gap: var(--spacing-sm);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sites-grid {
gap: var(--spacing-sm);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-card {
flex-direction: column;
@@ -2029,9 +2299,9 @@ body .content.expanded {
}
.category {
margin: 0 0.1rem 1.3rem 0.1rem;
margin: 0 auto 1.3rem auto;
padding: 0.95rem;
width: calc(100% - 0.2rem);
width: 100%;
}
.search-container {
@@ -2044,10 +2314,10 @@ body .content.expanded {
padding-right: 0.1rem;
}
.sites-grid {
gap: 0.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sites-grid {
gap: 0.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-card {
padding: 0.75rem 0.5rem;
@@ -2184,9 +2454,9 @@ body .content.expanded {
/* 搜索结果区域 */
.search-section {
width: calc(100% - 2rem);
max-width: 1100px;
margin: 0 1rem 2.5rem 1rem;
width: 100%;
max-width: var(--page-max-width);
margin: 0 auto 2.5rem auto;
position: relative;
z-index: 1;
transform: none !important;
@@ -2195,12 +2465,32 @@ body .content.expanded {
/* 确保搜索结果中的网格有正确的间距 */
.search-section .sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
margin-top: 1rem;
}
/* 搜索结果页：按来源页面复用对应网格规则（方案 2：复用原卡片 DOM） */
#search-results [data-section="projects"] .sites-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
#search-results [data-section="articles"] .sites-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
#search-results [data-section="articles"] .sites-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
#search-results [data-section="articles"] .sites-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
}
/* 确保搜索结果中的卡片样式一致 */
.search-section .site-card {
max-width: 100%;