242 lines
7.7 KiB
PHP
242 lines
7.7 KiB
PHP
<?php
|
||
/**
|
||
* The template for displaying single posts
|
||
*
|
||
* Features:
|
||
* – Full-width hero featured image with title overlay
|
||
* – Reading progress bar (filled by reading-progress.ts)
|
||
* – Auto-generated TOC (filled by toc.ts)
|
||
* – Author bio card
|
||
* – Related posts (same category)
|
||
* – Social share buttons (no third-party SDK)
|
||
* – Breadcrumb, prev/next navigation, comments
|
||
*
|
||
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
|
||
*
|
||
* @package CyyWordpress
|
||
*/
|
||
|
||
get_header();
|
||
?>
|
||
|
||
<!-- Reading progress bar -->
|
||
<div id="reading-progress" class="reading-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="<?php esc_attr_e( '阅读进度', 'cyywordpress' ); ?>">
|
||
<div class="reading-progress__bar"></div>
|
||
</div>
|
||
|
||
<div id="primary" class="content-area">
|
||
<main id="main" class="site-main" role="main">
|
||
|
||
<nav class="breadcrumb" aria-label="<?php esc_attr_e( '面包屑导航', 'cyywordpress' ); ?>">
|
||
<ul>
|
||
<li>
|
||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||
<span class="icon is-small"><i class="fa-solid fa-house" aria-hidden="true"></i></span>
|
||
<span><?php esc_html_e( '首页', 'cyywordpress' ); ?></span>
|
||
</a>
|
||
</li>
|
||
<li class="is-active">
|
||
<a href="#" aria-current="page">
|
||
<span class="icon is-small"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
|
||
<span><?php esc_html_e( '文章', 'cyywordpress' ); ?></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<?php
|
||
while ( have_posts() ) :
|
||
the_post();
|
||
?>
|
||
|
||
<?php if ( has_post_thumbnail() ) : ?>
|
||
<div class="single-hero">
|
||
<?php
|
||
the_post_thumbnail(
|
||
'full',
|
||
array(
|
||
'class' => 'single-hero__image',
|
||
'loading' => 'eager',
|
||
'decoding'=> 'async',
|
||
'alt' => the_title_attribute( array( 'echo' => false ) ),
|
||
)
|
||
);
|
||
?>
|
||
<div class="single-hero__overlay">
|
||
<?php the_title( '<h1 class="single-hero__title">', '</h1>' ); ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="columns single-layout">
|
||
<!-- TOC sidebar (populated by toc.ts) -->
|
||
<aside class="column is-3-desktop is-hidden-touch single-toc" aria-label="<?php esc_attr_e( '目录', 'cyywordpress' ); ?>">
|
||
<div id="toc" class="toc card">
|
||
<div class="card-header">
|
||
<p class="card-header-title">
|
||
<i class="fa-solid fa-list" aria-hidden="true"></i>
|
||
<?php esc_html_e( '目录', 'cyywordpress' ); ?>
|
||
</p>
|
||
</div>
|
||
<div class="card-content" id="toc-list"></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main article column -->
|
||
<div class="column is-9-desktop single-article">
|
||
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
|
||
|
||
<!-- Social share -->
|
||
<div class="social-share">
|
||
<span class="social-share__label"><?php esc_html_e( '分享：', 'cyywordpress' ); ?></span>
|
||
<a
|
||
class="social-share__btn social-share__btn--weibo"
|
||
href="<?php echo esc_url( 'https://service.weibo.com/share/share.php?url=' . rawurlencode( get_permalink() ) . '&title=' . rawurlencode( get_the_title() ) ); ?>"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="<?php esc_attr_e( '分享到微博', 'cyywordpress' ); ?>"
|
||
>
|
||
<i class="fa-brands fa-weibo" aria-hidden="true"></i>
|
||
</a>
|
||
<a
|
||
class="social-share__btn social-share__btn--twitter"
|
||
href="<?php echo esc_url( 'https://twitter.com/intent/tweet?url=' . rawurlencode( get_permalink() ) . '&text=' . rawurlencode( get_the_title() ) ); ?>"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="<?php esc_attr_e( '分享到 Twitter', 'cyywordpress' ); ?>"
|
||
>
|
||
<i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
|
||
</a>
|
||
<button
|
||
class="social-share__btn social-share__btn--copy"
|
||
data-url="<?php echo esc_attr( get_permalink() ); ?>"
|
||
aria-label="<?php esc_attr_e( '复制链接', 'cyywordpress' ); ?>"
|
||
>
|
||
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Post navigation -->
|
||
<?php
|
||
the_post_navigation(
|
||
array(
|
||
'prev_text' => '<span class="nav-subtitle"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i> ' . esc_html__( '上一篇', 'cyywordpress' ) . '</span><span class="nav-title">%title</span>',
|
||
'next_text' => '<span class="nav-subtitle">' . esc_html__( '下一篇', 'cyywordpress' ) . ' <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span><span class="nav-title">%title</span>',
|
||
)
|
||
);
|
||
?>
|
||
|
||
<!-- Author bio -->
|
||
<?php
|
||
$author_id = (int) get_the_author_meta( 'ID' );
|
||
$author_bio = get_the_author_meta( 'description' );
|
||
if ( $author_bio ) :
|
||
?>
|
||
<div class="author-bio card">
|
||
<div class="card-content">
|
||
<div class="media">
|
||
<div class="media-left">
|
||
<?php
|
||
echo get_avatar(
|
||
$author_id,
|
||
80,
|
||
'',
|
||
get_the_author(),
|
||
array(
|
||
'class' => 'author-bio__avatar',
|
||
'loading' => 'lazy',
|
||
)
|
||
);
|
||
?>
|
||
</div>
|
||
<div class="media-content">
|
||
<a class="author-bio__name title is-5" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>">
|
||
<?php echo esc_html( get_the_author() ); ?>
|
||
</a>
|
||
<p class="author-bio__description"><?php echo esc_html( $author_bio ); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- .author-bio -->
|
||
<?php endif; ?>
|
||
|
||
<!-- Related posts (same first category) -->
|
||
<?php
|
||
$cats = get_the_category();
|
||
if ( $cats ) :
|
||
$related = get_posts(
|
||
array(
|
||
'category__in' => array( $cats[0]->term_id ),
|
||
'post__not_in' => array( get_the_ID() ),
|
||
'posts_per_page' => 3,
|
||
'orderby' => 'rand',
|
||
)
|
||
);
|
||
|
||
if ( $related ) :
|
||
?>
|
||
<div class="related-posts">
|
||
<h3 class="related-posts__title title is-5">
|
||
<?php esc_html_e( '相关文章', 'cyywordpress' ); ?>
|
||
</h3>
|
||
<div class="columns is-multiline">
|
||
<?php
|
||
foreach ( $related as $related_post ) :
|
||
setup_postdata( $related_post );
|
||
?>
|
||
<div class="column is-4">
|
||
<div class="card related-post-card">
|
||
<?php if ( has_post_thumbnail( $related_post ) ) : ?>
|
||
<div class="card-image">
|
||
<figure class="image is-16by9">
|
||
<?php
|
||
echo get_the_post_thumbnail(
|
||
$related_post,
|
||
'card-thumbnail-sm',
|
||
array(
|
||
'loading' => 'lazy',
|
||
'decoding' => 'async',
|
||
'class' => 'related-post-card__image',
|
||
'alt' => esc_attr( get_the_title( $related_post ) ),
|
||
)
|
||
);
|
||
?>
|
||
</figure>
|
||
</div>
|
||
<?php endif; ?>
|
||
<div class="card-content">
|
||
<a class="related-post-card__title" href="<?php echo esc_url( get_permalink( $related_post ) ); ?>">
|
||
<?php echo esc_html( get_the_title( $related_post ) ); ?>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php
|
||
endforeach;
|
||
wp_reset_postdata();
|
||
?>
|
||
</div><!-- .columns -->
|
||
</div><!-- .related-posts -->
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<!-- Comments -->
|
||
<?php
|
||
if ( comments_open() || get_comments_number() ) :
|
||
comments_template();
|
||
endif;
|
||
?>
|
||
|
||
</div><!-- .single-article -->
|
||
</div><!-- .columns.single-layout -->
|
||
|
||
<?php endwhile; ?>
|
||
|
||
</main><!-- #main -->
|
||
</div><!-- #primary -->
|
||
|
||
<?php
|
||
get_sidebar();
|
||
get_footer();
|
||
|