From d4483f204e0a13a814660f7f8d256d8c715de4b7 Mon Sep 17 00:00:00 2001 From: Yaosanqi137 Date: Thu, 12 Feb 2026 23:33:46 +0800 Subject: [PATCH] =?UTF-8?q?=E7=88=B1=E7=89=B9=E4=BB=8B=E7=BB=8D=E9=A1=B5?= =?UTF-8?q?=E5=88=9D=E7=A8=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/intro.css | 377 ++++++++++++++++++++++++++++++++++++++ assets/js/intro-scroll.js | 31 ++++ functions.php | 80 ++++++++ page-about.php | 177 ++++++++++++++++++ 4 files changed, 665 insertions(+) create mode 100644 assets/css/intro.css create mode 100644 assets/js/intro-scroll.js create mode 100644 page-about.php diff --git a/assets/css/intro.css b/assets/css/intro.css new file mode 100644 index 0000000..906a70b --- /dev/null +++ b/assets/css/intro.css @@ -0,0 +1,377 @@ +/* ========================================= + Introduction Page (About) + ========================================= */ + +.intro-page { + position: relative; + overflow: hidden; + background-color: var(--bg-body); + --intro-glow-primary: rgba(9, 105, 218, 0.14); + --intro-glow-accent: rgba(142, 136, 199, 0.14); +} + +[data-theme="dark"] .intro-page { + --intro-glow-primary: rgba(88, 166, 255, 0.22); + --intro-glow-accent: rgba(142, 136, 199, 0.2); +} + +.intro-page::before { + content: ""; + position: absolute; + inset: 0; + background-image: + radial-gradient(circle at 18% 8%, var(--intro-glow-primary), transparent 45%), + radial-gradient(circle at 85% 0%, var(--intro-glow-accent), transparent 40%), + linear-gradient(var(--border-muted) 1px, transparent 1px), + linear-gradient(90deg, var(--border-muted) 1px, transparent 1px); + background-size: auto, auto, 64px 64px, 64px 64px; + background-position: center top; + opacity: 0.7; + pointer-events: none; +} + +.intro-about .site-header { + background-color: rgba(14, 22, 36, 0.78); + border-bottom-color: rgba(255, 255, 255, 0.06); +} + +html:not([data-theme="dark"]) .intro-about .site-header { + background-color: rgba(246, 249, 252, 0.9); + border-bottom-color: rgba(36, 41, 47, 0.08); +} + +.intro-page > * { + position: relative; + z-index: 1; +} + +.intro-step { + padding: 120px 0; + scroll-margin-top: 110px; +} + +.intro-hero { + padding-top: 140px; + padding-bottom: 120px; +} + +.intro-hero-grid, +.intro-grid, +.intro-join-grid { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + gap: 64px; + align-items: center; +} + +.intro-grid.reverse .intro-media, +.intro-grid.reverse .intro-join-media { + order: -1; +} + +.intro-copy { + display: flex; + flex-direction: column; + gap: 16px; +} + +.intro-hero .intro-copy { + gap: 14px; +} + +.intro-title { + font-size: clamp(2.6rem, 4vw, 4rem); + font-weight: 800; + letter-spacing: -0.02em; + line-height: 1.15; + margin-bottom: 0; + background: linear-gradient(120deg, var(--text-primary), var(--color-primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.intro-heading { + font-size: clamp(2rem, 3vw, 2.8rem); + font-weight: 700; + letter-spacing: -0.01em; + margin-bottom: 0.5rem; +} + +.intro-lead { + font-size: 1.2rem; + color: var(--text-secondary); +} + +.intro-sub, +.intro-text { + color: var(--text-secondary); + font-size: 1.05rem; +} + +.intro-cta-group { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 4px; +} + +.intro-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 20px; + border-radius: var(--radius-sm); + border: 1px solid var(--color-primary); + font-weight: 600; + font-size: 1rem; + color: var(--text-primary); + background-color: transparent; + transition: all var(--duration-fast); +} + +.intro-btn--primary { + background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light)); + color: #fff; + border-color: transparent; + box-shadow: var(--shadow-sm); +} + +.intro-btn--primary:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +.intro-btn--ghost:hover { + color: var(--color-primary); + border-color: var(--color-primary); +} + +.intro-stats { + display: flex; + flex-wrap: wrap; + gap: 24px; + margin-top: 8px; +} + +.intro-stat { + display: flex; + flex-direction: column; + gap: 4px; + padding: 12px 16px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-default); + background-color: var(--bg-card); + min-width: 120px; +} + +.stat-number { + font-size: 1.4rem; + font-weight: 700; + color: var(--text-primary); +} + +.stat-label { + font-size: 0.9rem; + color: var(--text-secondary); +} + +.intro-media, +.intro-hero-media, +.intro-join-media { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} + +.intro-hero-media { + align-items: stretch; +} + +.media-card { + min-height: 200px; + border-radius: var(--radius-md); + border: 1px dashed var(--border-default); + background-color: var(--bg-card); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-family: var(--font-mono); + font-size: 0.9rem; + color: var(--text-secondary); + padding: 16px; +} + +.media-card--tall { + grid-row: span 2; + min-height: 420px; +} + +.media-card--wide { + grid-column: span 2; + min-height: 240px; +} + +.intro-points { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 12px; +} + +.intro-points li, +.intro-list li { + position: relative; + padding-left: 18px; + color: var(--text-secondary); +} + +.intro-points li::before, +.intro-list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: var(--color-primary); +} + +.intro-org-grid, +.intro-feature-grid, +.intro-adv-grid { + display: grid; + gap: 16px; + margin-top: 16px; +} + +.intro-org-grid, +.intro-feature-grid { + grid-template-columns: repeat(3, 1fr); +} + +.intro-adv-grid { + grid-template-columns: repeat(2, 1fr); +} + +.intro-card { + border-radius: var(--radius-md); + border: 1px solid var(--border-default); + background-color: var(--bg-card); + padding: 20px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.intro-card h3 { + font-size: 1.1rem; + font-weight: 600; +} + +.intro-card p { + color: var(--text-secondary); + font-size: 0.95rem; +} + +.intro-list { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 4px; +} + +.intro-join { + padding-bottom: 140px; +} + +.intro-join-grid { + align-items: start; +} + +.intro-join-content { + display: flex; + flex-direction: column; + gap: 16px; +} + +.intro-join-media { + grid-template-columns: repeat(3, 1fr); +} + +/* Animations */ +.intro-animate { + transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out); + transition-delay: var(--delay, 0s); +} + +body.has-intro-animations .intro-animate { + opacity: 0; + transform: translateY(30px); +} + +body.has-intro-animations .intro-step.is-active .intro-animate { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .intro-animate { + transition: none !important; + opacity: 1 !important; + transform: none !important; + } +} + +/* Responsive */ +@media (max-width: 1100px) { + .intro-hero-grid, + .intro-grid, + .intro-join-grid { + grid-template-columns: 1fr; + } + + .intro-grid.reverse .intro-media, + .intro-grid.reverse .intro-join-media { + order: 0; + } + + .intro-org-grid, + .intro-feature-grid { + grid-template-columns: repeat(2, 1fr); + } + + .intro-adv-grid { + grid-template-columns: 1fr; + } + + .intro-join-media { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .intro-step { + padding: 80px 0; + } + + .intro-hero { + padding-top: 110px; + } + + .intro-title { + font-size: 2.2rem; + } + + .intro-cta-group { + flex-direction: column; + align-items: flex-start; + } + + .intro-org-grid, + .intro-feature-grid, + .intro-join-media { + grid-template-columns: 1fr; + } +} diff --git a/assets/js/intro-scroll.js b/assets/js/intro-scroll.js new file mode 100644 index 0000000..1f1fb8a --- /dev/null +++ b/assets/js/intro-scroll.js @@ -0,0 +1,31 @@ +(() => { + const steps = document.querySelectorAll('.intro-step'); + if (!steps.length) return; + + const markActive = () => { + const vh = window.innerHeight; + steps.forEach((step) => { + const rect = step.getBoundingClientRect(); + const isActive = rect.top < vh * 0.8 && rect.bottom > vh * 0.2; + step.classList.toggle('is-active', isActive); + }); + }; + + markActive(); + document.body.classList.add('has-intro-animations'); + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + entry.target.classList.toggle('is-active', entry.isIntersecting); + }); + }, + { + threshold: 0.35, + rootMargin: '0px 0px -15% 0px', + } + ); + + steps.forEach((step) => observer.observe(step)); + window.addEventListener('resize', markActive); +})(); diff --git a/functions.php b/functions.php index 40548b5..cc3b91c 100644 --- a/functions.php +++ b/functions.php @@ -33,6 +33,19 @@ function itstudio_enqueue_scripts() { wp_enqueue_style('itstudio-front-page', get_template_directory_uri() . '/assets/css/front-page.css', array('itstudio-style'), '2.1.2'); } + // 仅在工作室介绍页加载（包含 /about fallback） + $is_about_fallback = false; + if (is_404()) { + global $wp; + $request = isset($wp->request) ? trim($wp->request, '/') : ''; + $is_about_fallback = ($request === 'about'); + } + + if (is_page('about') || is_page_template('page-about.php') || $is_about_fallback) { + wp_enqueue_style('itstudio-intro', get_template_directory_uri() . '/assets/css/intro.css', array('itstudio-content'), '2.1.2'); + wp_enqueue_script('itstudio-intro-scroll', get_template_directory_uri() . '/assets/js/intro-scroll.js', array(), '1.0.0', true); + } + // Scripts wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.0', true); wp_enqueue_script('itstudio-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true); @@ -67,6 +80,22 @@ function itstudio_register_sidebars() { } add_action('widgets_init', 'itstudio_register_sidebars'); +function itstudio_intro_body_class($classes) { + $is_about = is_page('about') || is_page_template('page-about.php'); + if (!$is_about && is_404()) { + global $wp; + $request = isset($wp->request) ? trim($wp->request, '/') : ''; + $is_about = ($request === 'about'); + } + + if ($is_about) { + $classes[] = 'intro-about'; + } + + return $classes; +} +add_filter('body_class', 'itstudio_intro_body_class'); + function itstudio_custom_post_types() { register_post_type('announcement', array( 'labels' => array( @@ -82,6 +111,57 @@ function itstudio_custom_post_types() { } add_action('init', 'itstudio_custom_post_types'); +// Fallback: render /about even if the page isn't created in WP admin. +function itstudio_about_fallback() { + if (!is_404()) { + return; + } + + global $wp; + $request = isset($wp->request) ? trim($wp->request, '/') : ''; + if ($request !== 'about') { + return; + } + + $template = locate_template('page-about.php'); + if ($template) { + global $wp_query; + if ($wp_query) { + $wp_query->is_404 = false; + $wp_query->is_page = true; + $wp_query->is_singular = true; + $virtual_post = new WP_Post((object) array( + 'ID' => 0, + 'post_type' => 'page', + 'post_parent' => 0, + 'post_title' => __('工作室介绍', 'itstudio'), + 'post_status' => 'publish', + 'post_name' => 'about', + 'post_content' => '', + )); + $wp_query->post = $virtual_post; + $wp_query->posts = array($virtual_post); + $wp_query->queried_object = $virtual_post; + $wp_query->queried_object_id = 0; + $wp_query->post_count = 1; + $wp_query->found_posts = 1; + $wp_query->max_num_pages = 1; + global $post; + $post = $virtual_post; + setup_postdata($post); + } + add_filter('document_title_parts', function ($parts) { + $parts['title'] = __('工作室介绍', 'itstudio'); + return $parts; + }); + status_header(200); + nocache_headers(); + include $template; + exit; + } +} +add_action('template_redirect', 'itstudio_about_fallback'); + /** * GitHub 风格评论 */ diff --git a/page-about.php b/page-about.php new file mode 100644 index 0000000..465e4b6 --- /dev/null +++ b/page-about.php @@ -0,0 +1,177 @@ + + +
+
+
+
+

+

+

+
+ + +
+
+
+ 2002 + +
+
+ 6 + +
+
+ 20+ + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+

+

+
    +
    • +
    • +
    • +
+
+
+
+
+
+
+
+
+ +
+
+
+

+

+
+
+

+

+
+
+

+

+
+
+

+

+
+
+

+

+
+
+

+

+
+
+

+

+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

+

+
+
+

+

+
+
+

+

+
+
+

+

+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

+

+
+
+

+
    +
    • +
    • +
    • +
    • +
+
+
+

+
    +
    • +
    • +
    • +
    • +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

+

+ +
+
+
+
+
+
+
+
+
+ +