liaoxin/kjweiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: HTML 重构两行 flex 布局 — 标题+日期同行居中，作者+评论同行居中

Browse Source
This commit is contained in:
了心
2026-05-17 11:18:39 +08:00
parent 52f3a71800
commit c6ba626aac
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
page-articles.php
+10 -8
View File
@@ -30,14 +30,16 @@ $total_pages = ceil($total / $per_page);
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="article-item__main"> <div class="article-item__main">
<span class="article-title"><?php the_title(); ?></span> <div class="article-item__title-row">
<span class="article-item__author"><?php echo get_avatar(get_the_author_meta('ID'), 14, '', '', array('class' => 'article-avatar')); ?> <?php the_author_meta('display_name'); ?></span> <span class="article-title"><?php the_title(); ?></span>
</div> <span class="article-item__date"><?php echo get_the_date('Y-m-d'); ?></span>
<div class="article-item__meta"> </div>
<span class="article-item__date"><?php echo get_the_date('Y-m-d'); ?></span> <div class="article-item__sub-row">
<div class="article-item__stats"> <span class="article-item__author"><?php echo get_avatar(get_the_author_meta('ID'), 14, '', '', array('class' => 'article-avatar')); ?> <?php the_author_meta('display_name'); ?></span>
<span class="article-item__comments">💬 <?php echo (int) get_comments_number(); ?></span> <div class="article-item__stats">
<span class="article-item__views">👁 <?php echo (int) kjweji_get_views(); ?></span> <span class="article-item__comments">💬 <?php echo (int) get_comments_number(); ?></span>
<span class="article-item__views">👁 <?php echo (int) kjweji_get_views(); ?></span>
</div>
</div> </div>
</div> </div>
</a> </a>
style.css
+7 -7
View File
@@ -1,6 +1,6 @@
/* /*
Theme Name: 空笺未寄 Theme Name: 空笺未寄
Version: 0.15.5 Version: 0.16.0
Requires at least: 6.0 Requires at least: 6.0
Requires PHP: 7.4 Requires PHP: 7.4
License: MIT License: MIT
@@ -270,7 +270,12 @@ body.home .site,
body .site { width: 100% !important; } body .site { width: 100% !important; }
.platform { width: 100% !important; max-width: 960px !important; } .platform { width: 100% !important; max-width: 960px !important; }
.article-item { display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--border-light); cursor:pointer; transition:all 0.25s; text-decoration:none; color:inherit; } .article-item { display:flex; align-items:center; padding:18px 0; border-bottom:1px solid var(--border-light); cursor:pointer; transition:all 0.25s; text-decoration:none; color:inherit; }
.article-item__main { flex:1; min-width:0; }
.article-item__title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.article-item__sub-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; }
.article-item__stats { display:flex; gap:10px; align-items:center; }
.article-item__stats span { display:inline-flex; align-items:center; line-height:1; }
.article-item:hover { padding-left:12px; border-bottom-color:var(--cinnabar-light); } .article-item:hover { padding-left:12px; border-bottom-color:var(--cinnabar-light); }
.article-item__main { flex:1; min-width:0; } .article-item__main { flex:1; min-width:0; }
.article-title { font-size:16px; letter-spacing:0.05em; display:block; } .article-title { font-size:16px; letter-spacing:0.05em; display:block; }
@@ -279,7 +284,6 @@ body .site { width: 100% !important; }
.article-item__meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:12px; color:var(--ink-lighter); white-space:nowrap; margin-left:24px; } .article-item__meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:12px; color:var(--ink-lighter); white-space:nowrap; margin-left:24px; }
.article-item__stats { display:flex; gap:10px; align-items:center; } .article-item__stats { display:flex; gap:10px; align-items:center; }
.article-item__stats span { display:inline-flex; align-items:center; line-height:1; } .article-item__stats span { display:inline-flex; align-items:center; line-height:1; }
.article-item__date { font-size:12px; color:var(--ink-lighter); }
.article-item__views { font-size:11px; color:var(--ink-lighter); } .article-item__views { font-size:11px; color:var(--ink-lighter); }
@@ -317,10 +321,6 @@ echo "done"
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.article-item {
display: flex;
align-items: center;
}
.avatar, .pinned-avatar, .card-avatar, .tucao-avatar, .article-avatar, .avatar-sm { .avatar, .pinned-avatar, .card-avatar, .tucao-avatar, .article-avatar, .avatar-sm {
object-fit: cover !important; object-fit: cover !important;