/* Theme Name: OneByte 一字节 Theme URI: https://www.wangzhijie.com/ Author: OneByte Author URI: https://www.wangzhijie.com/ Description: 为「一字节.OneByte」重做的阅读型博客主题。后台可切换博客流 / CMS 门户式首页，CMS 模式下文章页另启用分类层级面包屑、带图相关卡片与两个内链推荐位；主导航支持二级下拉与三级侧拉，文章页含阅读进度、自动目录、代码块复制、表格横向滚动与暗色模式。内置 SEO：canonical、description、Open Graph、Twitter Card、JSON-LD 结构化数据、面包屑、站点地图与文章级 SEO 设置，兼容 Yoast / Rank Math 自动让位；附件页默认 301 回所属文章，避免图片空壳页被收录。无外部依赖。 Version: 1.5.1 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: onebyte Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode */ /* ============ 变量与主题色 ============ */ :root{ --bg:#faf9f7; --surface:#ffffff; --ink:#20242b; --ink-soft:#4b5563; --muted:#8a9099; --line:#e9e6e1; --line-strong:#dcd8d1; --accent:#e0483f; --accent-ink:#b8332c; --accent-soft:#fff1ef; --code-bg:#f5f5f3; --hover:#f4f2ee; --shadow:0 1px 2px rgba(32,36,43,.03),0 8px 24px rgba(32,36,43,.05); --shadow-hover:0 2px 6px rgba(32,36,43,.06),0 16px 36px rgba(32,36,43,.09); --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; --wrap:1200px; --read:740px; --radius:12px; } html[data-theme="dark"]{ --bg:#14161a; --surface:#1b1e24; --ink:#dfe3ea; --ink-soft:#aeb6c2; --muted:#7e8794; --line:#2b3038; --line-strong:#363d47; --accent:#ff6b60; --accent-ink:#ff8a80; --accent-soft:#2a1e1e; --code-bg:#22262e; --hover:#242932; --shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.24); --shadow-hover:0 2px 6px rgba(0,0,0,.3),0 16px 36px rgba(0,0,0,.36); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--accent-ink);text-decoration:none} img{max-width:100%;height:auto} button{font-family:inherit} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* 键盘可达的跳转链接：可访问性，也是搜索引擎理解主内容位置的信号 */ .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#fff; padding:10px 18px;border-radius:0 0 8px 0;font-size:14px;font-weight:600} .skip-link:focus{left:0;color:#fff} /* ============ 阅读进度 ============ */ .reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent); z-index:120;transition:width .08s linear;pointer-events:none} /* ============ 顶栏 ============ */ .site-header{position:sticky;top:0;z-index:60;background:var(--surface); border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(8px)} .header-inner{max-width:var(--wrap);margin:0 auto;height:64px;padding:0 24px; display:flex;align-items:center;gap:26px} .site-brand{display:flex;align-items:baseline;gap:9px;flex:none} .site-brand .mark{width:9px;height:9px;border-radius:3px;background:var(--accent); display:inline-block;transform:rotate(45deg)} .site-brand .name{font-size:19px;font-weight:750;letter-spacing:.4px;color:var(--ink)} .site-brand .sub{font-size:11px;color:var(--muted);letter-spacing:1.2px} .main-nav{margin-left:8px} .main-nav ul{list-style:none;margin:0;padding:0} .main-nav>ul{display:flex;align-items:center;gap:2px} .main-nav li{position:relative} .main-nav a{display:block;padding:8px 13px;border-radius:8px;font-size:14px; color:var(--ink-soft);white-space:nowrap} .main-nav a:hover,.main-nav a:focus-visible{background:var(--hover);color:var(--ink)} .main-nav .current-menu-item>a,.main-nav .current_page_item>a,.main-nav .current-menu-ancestor>a{ color:var(--accent-ink);font-weight:650;background:var(--accent-soft)} /* 有子菜单的项：链接与展开按钮同一行（wp_nav_menu / wp_page_menu 两种类名都兼容） */ .main-nav .menu-item-has-children,.main-nav .page_item_has_children{display:flex;align-items:center} .main-nav .menu-item-has-children>a,.main-nav .page_item_has_children>a{flex:1;min-width:0} .sub-toggle{flex:none;width:26px;height:26px;margin-left:-4px;padding:0;display:grid; place-items:center;border:0;border-radius:7px;background:transparent; color:var(--muted);cursor:pointer} .sub-toggle:hover,.sub-toggle:focus-visible{background:var(--hover);color:var(--accent-ink)} .sub-toggle::before{content:"";display:block;width:6px;height:6px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease} .main-nav li.is-open>.sub-toggle::before{transform:rotate(-135deg) translate(-1px,-1px)} /* 下拉：以「li 的直接子 ul」为准，同时兼容 wp_nav_menu(.sub-menu) 与页面回退(.children) */ .main-nav li>ul{display:none;position:absolute;top:100%;left:0;z-index:80; flex-direction:column;align-items:stretch;min-width:190px;max-width:260px; background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:6px;box-shadow:var(--shadow-hover)} .main-nav li>ul>li>ul{top:-6px;left:100%} /* 三级向右侧拉 */ /* 靠右的顶级项改为向左展开，避免下拉溢出视口 */ .main-nav>ul>li:nth-last-child(-n+2)>ul{left:auto;right:0} .main-nav>ul>li:nth-last-child(-n+2)>ul>li>ul{left:auto;right:100%} .main-nav li:hover>ul,.main-nav li:focus-within>ul, .main-nav li.is-open>ul{display:flex} .main-nav li>ul a{padding:7px 12px;font-size:13px;white-space:normal} .main-nav li>ul .sub-toggle{width:24px;height:24px} /* 桌面鼠标：箭头只作指示，展开由 hover / focus-within 负责，避免点击状态打架 */ @media(hover:hover) and (min-width:821px){ .main-nav .sub-toggle{pointer-events:none} } /* 触屏（含宽屏平板）：只认点击展开，避免 hover 粘滞导致「关不掉」 */ @media(hover:none){ .main-nav li:hover>ul,.main-nav li:focus-within>ul{display:none} .main-nav li.is-open>ul{display:flex} .main-nav .sub-toggle{pointer-events:auto} } .header-actions{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none} .icon-btn{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:9px; background:transparent;color:var(--ink-soft);cursor:pointer} .icon-btn:hover{background:var(--hover);color:var(--accent-ink)} .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} html[data-theme="dark"] .icon-sun{display:none} html:not([data-theme="dark"]) .icon-moon{display:none} .menu-toggle{display:none} .search-pop{display:none;max-width:var(--wrap);margin:0 auto;padding:0 24px 16px} .search-pop.is-open{display:block} .search-pop form{display:flex;gap:8px} .search-pop input[type=search]{flex:1;padding:10px 14px;border:1px solid var(--line-strong); border-radius:9px;background:var(--bg);color:var(--ink);font-size:14px;font-family:inherit} .search-pop button{padding:10px 18px;border:0;border-radius:9px;background:var(--accent); color:#fff;font-size:14px;cursor:pointer} /* ============ 首页博客流 ============ */ .layout{max-width:var(--wrap);margin:0 auto;padding:38px 24px 90px; display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start} .site-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:24px 28px;margin-bottom:24px;box-shadow:var(--shadow)} .site-intro h1{font-size:20px;margin:0 0 8px;letter-spacing:.2px} .site-intro p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.8} .archive-head{margin:0 0 24px;padding:20px 24px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius)} .archive-head h1{font-size:21px;margin:0} .archive-head p{margin:6px 0 0;color:var(--muted);font-size:13px} .post-list{display:flex;flex-direction:column;gap:16px} .post-card{display:flex;gap:20px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)} .post-card-body{flex:1;min-width:0;display:flex;flex-direction:column} .post-card-cat{align-self:flex-start;font-size:11px;font-weight:650;letter-spacing:.5px; color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:3px 9px} .post-card.sticky .post-card-cat::after{content:" · 置顶"} .post-card-title{font-size:19px;line-height:1.5;font-weight:700;margin:10px 0 8px;letter-spacing:.1px} .post-card-title a{color:var(--ink)} .post-card-title a:hover{color:var(--accent-ink)} .post-card-excerpt{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.75; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .post-card-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:14px; font-size:12px;color:var(--muted)} .post-card-meta .dot{color:var(--line-strong)} .post-card-thumb{flex:none;width:176px;height:112px;border-radius:9px;overflow:hidden;background:var(--code-bg)} .post-card-thumb img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .3s ease} .post-card:hover .post-card-thumb img{transform:scale(1.04)} .post-card-thumb .thumb-placeholder{width:100%;height:100%;display:grid;place-items:center; color:var(--muted);font-size:26px;font-weight:700;background:var(--accent-soft)} /* 分页：同时兼容 WP 的