From 12673fb819f3329f638d489d73a704e1673e39bc Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 15 Jul 2026 00:30:26 +0800 Subject: [PATCH] feat(frontend): adopt zibll site-layout-1/2/3 float dual-column system Wire settings-driven sidebar visibility and body site-layout classes, replace content-layout CSS grid with Zibll float geometry, move sidebar DOM to content-wrap sibling across single/archive/page/home, and add post meta show_layout overrides. --- .../src/schema/sections/global/layout.js | 2 +- assets/css/frontend/homepage-fixed/base-1.css | 10 +- assets/css/frontend/layout.css | 124 +++++++++--- assets/css/frontend/sidebar.css | 5 +- assets/css/frontend/single-post/shell.css | 96 +-------- inc/classes/class-aksrt-post-meta-box.php | 26 +++ .../trait-aksrt-scripts-part-2.php | 7 + .../class-aksrt-settings-theme-search.php | 2 +- inc/helpers/aksrt-archive.php | 24 +-- inc/helpers/aksrt-homepage.php | 7 +- inc/helpers/aksrt-single.php | 12 +- inc/helpers/aksrt-template-tags.php | 185 +++++++++++++++++- page.php | 8 +- sidebar.php | 12 +- single.php | 2 +- 15 files changed, 354 insertions(+), 168 deletions(-) diff --git a/assets/admin/src/schema/sections/global/layout.js b/assets/admin/src/schema/sections/global/layout.js index 2fab1a1c..c7f06d2b 100644 --- a/assets/admin/src/schema/sections/global/layout.js +++ b/assets/admin/src/schema/sections/global/layout.js @@ -14,7 +14,7 @@ export const layoutSchema = { container_max_width: 1200, sidebar_enabled: true, sidebar_position: 'right', - sidebar_width: 300, + sidebar_width: 311, sidebar_home_enabled: true, sidebar_category_enabled: true, sidebar_tag_enabled: true, diff --git a/assets/css/frontend/homepage-fixed/base-1.css b/assets/css/frontend/homepage-fixed/base-1.css index 2ddf9d37..81a6014b 100644 --- a/assets/css/frontend/homepage-fixed/base-1.css +++ b/assets/css/frontend/homepage-fixed/base-1.css @@ -112,14 +112,10 @@ } } +/* Dual-column geometry is owned by body.site-layout-* float rules in layout.css. */ .aksrt-homepage__content-layout { - gap: 20px; -} - -@media (min-width: 992px) { - .aksrt-homepage__content-layout { - grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px); - } + display: block; + gap: 0; } @media (max-width: 1200px) { diff --git a/assets/css/frontend/layout.css b/assets/css/frontend/layout.css index 5fe4a7a1..fb94e5b7 100644 --- a/assets/css/frontend/layout.css +++ b/assets/css/frontend/layout.css @@ -109,62 +109,122 @@ font-weight: 600; } -.content-layout { - display: grid; - grid-template-columns: 1fr; - gap: 20px; - align-items: start; +/* ============================================================ + * Site shell — Zibll site-layout-1/2/3 float dual-column + * body.site-layout-1 = no sidebar + * body.site-layout-2 = sidebar right + * body.site-layout-3 = sidebar left + * ============================================================ */ + +main.container, +main.content-shell, +.site-main.container { + position: relative; } -@media (min-width: 992px) { - .content-layout { - grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px); - gap: 20px; - } +main.container::after, +main.content-shell::after, +.site-main.container::after { + content: ""; + display: table; + clear: both; +} + +.content-wrap { + float: left; + width: 100%; + min-width: 0; +} + +.content-layout { + display: block; + width: 100%; + min-width: 0; + margin-right: 0; + margin-left: 0; } .content-layout__primary { min-width: 0; + max-width: 100%; } -.content-layout__aside { +.content-layout__aside, +.sidebar { min-width: 0; } +/* No sidebar */ +body.site-layout-1 .sidebar { + display: none; +} + +body.site-layout-1 .content-layout, +body.site-layout-1 .content-layout--no-sidebar { + margin-left: 0; + margin-right: 0; +} + +/* Compat: templates may still stamp content-layout--no-sidebar */ +.content-layout--no-sidebar { + margin-left: 0 !important; + margin-right: 0 !important; +} + +/* Sidebar RIGHT (layout 2) — Zibll default */ +body.site-layout-2 .content-layout { + margin-right: calc(var(--sidebar-width, 311px) + 15px); + margin-left: 0; +} + +body.site-layout-2 .sidebar { + float: left; + width: var(--sidebar-width, 311px); + margin-left: calc(0px - var(--sidebar-width, 311px)); + position: relative; +} + +/* Sidebar LEFT (layout 3) */ +body.site-layout-3 .content-layout { + margin-left: calc(var(--sidebar-width, 311px) + 15px); + margin-right: unset; +} + +body.site-layout-3 .sidebar { + float: left; + width: var(--sidebar-width, 311px); + margin-left: -100%; + position: relative; +} + +/* Sticky widgets inside sidebar */ @media (min-width: 992px) { + body.site-layout-2 .sidebar .posts-nav-box, + body.site-layout-3 .sidebar .posts-nav-box, + .sidebar .content-layout__aside, .content-layout__aside { position: sticky; top: calc(var(--nav-height, 60px) + 16px); - align-self: start; } - /* WordPress Admin Bar 已全局禁用,无需偏移规则 */ -} - -@media (min-width: 992px) { + .has-static-nav .sidebar .posts-nav-box, .has-static-nav .content-layout__aside { top: 16px; } } -.content-layout--no-sidebar { - grid-template-columns: 1fr; -} - -.content-layout--no-sidebar .content-layout__primary { - width: 100%; - max-width: var(--content-no-sidebar-max, 1080px); - margin: 0 auto; -} - -/* 三栏布局变体:侧边栏在左侧 */ -@media (min-width: 992px) { - .content-layout--sidebar-left { - grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr); +/* Mobile collapse (Zibll max-width: 991px) */ +@media (max-width: 991.98px) { + body.site-layout-2 .content-layout, + body.site-layout-3 .content-layout { + margin-left: auto; + margin-right: auto; } - .content-layout--sidebar-left .content-layout__aside { - order: -1; + body.site-layout-2 .sidebar, + body.site-layout-3 .sidebar, + .sidebar { + display: none; } } diff --git a/assets/css/frontend/sidebar.css b/assets/css/frontend/sidebar.css index 6383e5a0..0fa51c46 100644 --- a/assets/css/frontend/sidebar.css +++ b/assets/css/frontend/sidebar.css @@ -1,7 +1,8 @@ /* ========== 侧边栏 — 对齐 zibll sidebar ========== */ +/* Width/float geometry is owned by body.site-layout-* in layout.css. + * Keep only non-layout chrome here. */ .sidebar { - width: var(--sidebar-width, 311px); - flex-shrink: 0; + box-sizing: border-box; } .sidebar-inner { diff --git a/assets/css/frontend/single-post/shell.css b/assets/css/frontend/single-post/shell.css index 7d0cd62f..359b6e04 100644 --- a/assets/css/frontend/single-post/shell.css +++ b/assets/css/frontend/single-post/shell.css @@ -1,44 +1,11 @@ -/* Single page shell — dual column + fixed-nav safe top spacing */ - -/* - * Global layout.css turns .content-layout into a 2-col grid that expects - * .content-layout__primary + .content-layout__aside children. - * Single posts put breadcrumb / article / author / related / comments as - * direct children of .content-layout, and render .sidebar as a sibling of - * .content-wrap under main.container. Force a page-owned layout here. - */ -body.single main.container { - position: relative; - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 20px; - align-items: start; - box-sizing: border-box; - width: 100%; -} - -/* Extra breathing room under fixed header (body.nav-fixed already reserves - * --nav-height; this keeps breadcrumb from sitting flush under the bar). */ -body.single.nav-fixed main.container { - padding-top: 12px; -} - -body.single main.container > .content-wrap { - float: none; - width: auto; - min-width: 0; - max-width: 100%; - grid-column: 1; - grid-row: 1; -} +/* Single page shell — relies on body.site-layout-1/2/3 float dual-column + * defined in layout.css (Zibll 1:1). Page-owned overrides stay minimal. */ +/* Single article stack lives inside .content-layout as direct children; + * do not re-enable the legacy primary/aside grid here. */ body.single main.container .content-layout { display: block; - grid-template-columns: none; - gap: 0; - width: 100%; min-width: 0; - margin-right: 0 !important; /* kill residual float-layout reservation */ } body.single main.container .content-layout > * { @@ -46,7 +13,7 @@ body.single main.container .content-layout > * { max-width: 100%; } -/* Breadcrumb must stay in the content flow and under the fixed header. */ +/* Breadcrumb sits under fixed header (body.nav-fixed already pads top). */ body.single main.container .content-layout > .breadcrumb, body.single main.container .content-layout > ul.breadcrumb, body.single main.container .content-layout > .breadcrumb-nav, @@ -58,58 +25,13 @@ body.single main.container .content-layout > .breadcrumbs-wrap { padding-top: 2px; } -/* Sidebar is a direct child of main.container (not inside .content-layout). */ -body.single main.container > .sidebar { - float: none; - position: relative; - width: 100%; - min-width: 0; - max-width: 100%; - margin-left: 0; - grid-column: 1; -} - -/* Desktop: content | sidebar in one row (no negative-margin float hack). */ -@media (min-width: 992px) { - body.single main.container:not(.container--no-sidebar) { - grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 300px); - column-gap: 20px; - } - - body.single main.container:not(.container--no-sidebar) > .content-wrap { - grid-column: 1; - grid-row: 1; - } - - body.single main.container:not(.container--no-sidebar) > .sidebar { - grid-column: 2; - grid-row: 1; - width: 100%; - margin-left: 0; - align-self: start; - } -} - -@media (max-width: 991.98px) { - body.single main.container > .sidebar { - display: none; - } -} - -/* Sidebar widgets spacing */ -body.single .sidebar .zib-widget, -body.single .sidebar .widget { - margin-bottom: 15px; -} - +/* Sticky TOC widget in sidebar */ body.single .sidebar .posts-nav-box.toc-widget { position: sticky; top: calc(var(--nav-height, 60px) + 16px); } -/* Override generic sidebar.css absolute widths (280/311) so the grid cell owns sizing */ -@media (min-width: 992px) { - body.single main.container > .sidebar { - width: 100%; - } +body.single .sidebar .zib-widget, +body.single .sidebar .widget { + margin-bottom: 15px; } diff --git a/inc/classes/class-aksrt-post-meta-box.php b/inc/classes/class-aksrt-post-meta-box.php index 6ab28132..71346002 100644 --- a/inc/classes/class-aksrt-post-meta-box.php +++ b/inc/classes/class-aksrt-post-meta-box.php @@ -176,6 +176,21 @@ class AKSRT_Post_Meta_Box { +

+ ID, '_aksrt_show_layout', true); + if (!in_array($show_layout, ['no_sidebar', 'sidebar_left', 'sidebar_right'], true)) { + $show_layout = ''; + } + ?> + +

+